+
+
+
+
+
+
-
-
-
{{ keyFilterControl.value.key.key }}
-
{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) }}
-
-
+
+
+
+
+
+ filter.operation.and
+
+
+
+
{{ keyFilterControl.value.key.key }}
+
{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) }}
+
+
+
+
-
+
filter.no-key-filters
+
+
+
+
+
+
+
+
+ filter.preview
+
+
+
+
- filter.no-key-filters
-
-
-
-
-
+
+
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.scss b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.scss
index 3951b5d640..bc47f04915 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.scss
@@ -26,4 +26,17 @@
color: #666;
font-weight: 500;
}
+ .tb-filter-preview {
+ padding: 8px;
+ border: 1px groove rgba(0, 0, 0, .25);
+ border-radius: 4px;
+ }
+}
+
+:host ::ng-deep {
+ .tb-filter-preview {
+ .tb-filter-text {
+ max-height: 200px;
+ }
+ }
}
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts
index f78effb739..2779a35be9 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts
@@ -19,13 +19,18 @@ import {
AbstractControl,
ControlValueAccessor,
FormArray,
- FormBuilder,
+ FormBuilder, FormControl,
FormGroup,
NG_VALUE_ACCESSOR,
Validators
} from '@angular/forms';
import { Observable, Subscription } from 'rxjs';
-import { EntityKeyType, entityKeyTypeTranslationMap, KeyFilterInfo } from '@shared/models/query/query.models';
+import {
+ EntityKeyType,
+ entityKeyTypeTranslationMap,
+ KeyFilter,
+ KeyFilterInfo, keyFilterInfosToKeyFilters
+} from '@shared/models/query/query.models';
import { MatDialog } from '@angular/material/dialog';
import { deepClone } from '@core/utils';
import { KeyFilterDialogComponent, KeyFilterDialogData } from '@home/components/filter/key-filter-dialog.component';
@@ -48,12 +53,16 @@ export class KeyFilterListComponent implements ControlValueAccessor, OnInit {
@Input() displayUserParameters = true;
+ @Input() allowUserDynamicSource = true;
+
@Input() telemetryKeysOnly = false;
keyFilterListFormGroup: FormGroup;
entityKeyTypeTranslations = entityKeyTypeTranslationMap;
+ keyFiltersControl: FormControl;
+
private propagateChange = null;
private valueChangeSubscription: Subscription = null;
@@ -66,6 +75,7 @@ export class KeyFilterListComponent implements ControlValueAccessor, OnInit {
this.keyFilterListFormGroup = this.fb.group({});
this.keyFilterListFormGroup.addControl('keyFilters',
this.fb.array([]));
+ this.keyFiltersControl = this.fb.control(null);
}
keyFiltersFormArray(): FormArray {
@@ -83,8 +93,10 @@ export class KeyFilterListComponent implements ControlValueAccessor, OnInit {
this.disabled = isDisabled;
if (this.disabled) {
this.keyFilterListFormGroup.disable({emitEvent: false});
+ this.keyFiltersControl.disable({emitEvent: false});
} else {
this.keyFilterListFormGroup.enable({emitEvent: false});
+ this.keyFiltersControl.enable({emitEvent: false});
}
}
@@ -107,6 +119,8 @@ export class KeyFilterListComponent implements ControlValueAccessor, OnInit {
} else {
this.keyFilterListFormGroup.enable({emitEvent: false});
}
+ const keyFiltersArray = keyFilterInfosToKeyFilters(keyFilters);
+ this.keyFiltersControl.patchValue(keyFiltersArray, {emitEvent: false});
}
public removeKeyFilter(index: number) {
@@ -155,6 +169,7 @@ export class KeyFilterListComponent implements ControlValueAccessor, OnInit {
isAdd,
readonly: this.disabled,
displayUserParameters: this.displayUserParameters,
+ allowUserDynamicSource: this.allowUserDynamicSource,
telemetryKeysOnly: this.telemetryKeysOnly
}
}).afterClosed();
@@ -167,5 +182,7 @@ export class KeyFilterListComponent implements ControlValueAccessor, OnInit {
} else {
this.propagateChange(null);
}
+ const keyFiltersArray = keyFilterInfosToKeyFilters(keyFilters);
+ this.keyFiltersControl.patchValue(keyFiltersArray, {emitEvent: false});
}
}
diff --git a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
index 7a4a9c552b..71cbbd0335 100644
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
@@ -24,7 +24,8 @@
-
diff --git a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.ts b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.ts
index e9e4f89c3b..32d5779c63 100644
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.ts
@@ -40,6 +40,8 @@ export class NumericFilterPredicateComponent implements ControlValueAccessor, On
@Input() disabled: boolean;
+ @Input() allowUserDynamicSource = true;
+
@Input() valueType: EntityKeyValueType;
numericFilterPredicateFormGroup: FormGroup;
diff --git a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
index ef9f2c01e7..92d470c6b8 100644
--- a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
@@ -28,7 +28,8 @@