Merge pull request #14644 from vvlladd28/feature/filter-button/one-style

Standardize filter button labels, filter panel and entity naming

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html

@@ -65,7 +65,7 @@
                                    class="flex-1"
                                    showLabel
                                    required
-                                   label="{{ 'alarm-rule.target-entity-type' | translate }}"
+                                   label="{{ 'entity.entity-type' | translate }}"
                                    [filterAllowedEntityTypes]="false"
                                    [allowedEntityTypes]="alarmRuleEntityTypeList"
                                    formControlName="entityType">

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html

@@ -66,7 +66,7 @@
       </tb-entity-subtype-list>
     </div>
     <div class="tb-form-row column-xs">
-      <div class="fixed-title-width" translate>alarm-rule.target-entity-type</div>
+      <div class="fixed-title-width" translate>entity.entity-type</div>
       <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="entityType" placeholder="{{ 'alarm-rule.any-type' | translate }}">
           <mat-option>{{ 'alarm-rule.any-type' | translate }}</mat-option>
@@ -78,7 +78,7 @@
     </div>
     @if (alarmRuleFilterConfigForm.get('entityType').value) {
       <div class="tb-form-row column-xs">
-        <div class="fixed-title-width" translate>alarm-rule.target-entities</div>
+        <div class="fixed-title-width" translate>entity.entities</div>
         <tb-entity-list appearance="outline"
                         subscriptSizing="dynamic"
                         class="flex flex-1"

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.scss

@@ -37,7 +37,6 @@
 }
 
 ::ng-deep {
-
   .tb-alarm-filter-config-component {
     max-width: 100%;
     width: 600px;

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.ts

@@ -73,14 +73,6 @@ export class AlarmRuleFilterConfigComponent implements OnInit, ControlValueAcces
   @Input()
   buttonMode = true;
 
-  @coerceBoolean()
-  @Input()
-  userMode = false;
-
-  @coerceBoolean()
-  @Input()
-  propagatedFilter = true;
-
   @Input()
   initialAlarmRuleFilterConfig: AlarmRuleFilterConfig = {
     name: [],
@@ -124,7 +116,6 @@ export class AlarmRuleFilterConfigComponent implements OnInit, ControlValueAcces
   ngOnInit(): void {
     if (this.data) {
       this.panelMode = this.data.panelMode;
-      this.userMode = this.data.userMode;
       this.alarmRuleFilterConfig = this.data.alarmRuleFilterConfig;
       this.initialAlarmRuleFilterConfig = this.data.initialAlarmRuleFilterConfig;
       if (this.panelMode && !this.initialAlarmRuleFilterConfig) {
@@ -248,7 +239,7 @@ export class AlarmRuleFilterConfigComponent implements OnInit, ControlValueAcces
       if (!isArraysEqualIgnoreUndefined(filter1.entities, filter2.entities)) {
         return false;
       }
-      return filter1.entityType !== filter2.entityType;
+      return filter1.entityType === filter2.entityType;
     }
     return false;
   };
@@ -287,7 +278,7 @@ export class AlarmRuleFilterConfigComponent implements OnInit, ControlValueAcces
       if (!filterTextParts.length) {
         this.buttonDisplayValue = this.translate.instant('alarm-rule.alarm-rule-filter-title');
       } else {
-        this.buttonDisplayValue = this.translate.instant('alarm-rule.alarm-rule-filter-title') + `: ${filterTextParts.join(', ')}`;
+        this.buttonDisplayValue = this.translate.instant('alarm-rule.filter-title') + `: ${filterTextParts.join(', ')}`;
       }
     }
   }

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules-table-config.ts

@@ -140,16 +140,16 @@ export class AlarmRulesTableConfig extends EntityTableConfig<any> {
 
     this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
     this.columns.push(new DateEntityTableColumn<CalculatedFieldAlarmRule>('createdTime', 'common.created-time', this.datePipe, '150px'));
-    this.columns.push(new EntityTableColumn<CalculatedFieldAlarmRule>('name', 'alarm-rule.alarm-type', this.pageMode ? '30%' :'33%',
+    this.columns.push(new EntityTableColumn<CalculatedFieldAlarmRule>('name', 'alarm-rule.alarm-type', '33%',
       entity => this.utilsService.customTranslation(entity.name, entity.name)));
     if (this.pageMode) {
-      this.columns.push(new EntityTableColumn<CalculatedFieldAlarmRule>('entityType', 'alarm-rule.target-entity-type', '15%',
+      this.columns.push(new EntityTableColumn<CalculatedFieldAlarmRule>('entityType', 'entity.entity-type', '10%',
         entity => this.translate.instant(entityTypeTranslations.get(entity.entityId.entityType).type)));
-      this.columns.push(new EntityLinkTableColumn<CalculatedFieldAlarmRule>('entityName', 'alarm-rule.target-entity', '30%',
+      this.columns.push(new EntityLinkTableColumn<CalculatedFieldAlarmRule>('entityName', 'entity.entity', '33%',
         entity => this.utilsService.customTranslation(entity['entityName'], entity['entityName']),
         entity => getEntityDetailsPageURL(entity.entityId?.id, entity.entityId?.entityType as EntityType), false));
     }
-    this.columns.push(new EntityTableColumn<CalculatedFieldAlarmRule>('createRule', 'alarm-rule.severities', this.pageMode ? '15%' :'67%',
+    this.columns.push(new EntityTableColumn<CalculatedFieldAlarmRule>('createRule', 'alarm-rule.severities', this.pageMode ? '23%' : '67%',
       entity => Object.keys(entity.configuration.createRules).map((severity) => this.translate.instant(alarmSeverityTranslations.get(severity as AlarmSeverity))).join(', '),
       () => ({}), false));
     this.columns.push(new EntityTableColumn<CalculatedFieldAlarmRule>('clearRule', 'alarm-rule.cleared', '90px',

ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts

@@ -107,7 +107,7 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal
 
   alarmSeverityTranslationMap = alarmSeverityTranslations;
 
-  buttonDisplayValue = this.translate.instant('alarm.alarm-filter');
+  buttonDisplayValue = this.translate.instant('alarm.alarm-filter-title');
 
   alarmFilterConfigForm: UntypedFormGroup;
 

ui-ngx/src/app/modules/home/components/audit-log/audit-log-filter.component.html

@@ -24,14 +24,14 @@
   <mat-icon>filter_list</mat-icon>{{buttonDisplayValue}}
 </button>
 <ng-template #auditLogFilterPanel>
-  <form class="mat-content mat-padding flex flex-col" [formGroup]="auditLogFilterForm" (ngSubmit)="update()">
+  <form class="tb-audit-log-config-component mat-content mat-padding flex flex-col" [formGroup]="auditLogFilterForm" (ngSubmit)="update()">
-    <div class="tb-form-panel flex-1 no-padding no-border">
+    <div class="tb-form-panel no-padding no-border flex-1">
-      <div class="tb-form-row flex-1 space-between column-xs">
+      <div class="tb-form-row space-between column-xs flex-1">
         <div class="fixed-title-width" translate>audit-log.filter-types</div>
         <tb-string-items-list appearance="outline"
                               class="flex flex-1 gt-xs:w-64"
                               subscriptSizing="dynamic"
-                              [placeholder]="'audit-log.filter-type-add' | translate"
+                              placeholder="{{ !auditLogFilterForm.get('actionTypes').value?.length ? ('audit-log.any-type' | translate) : '' }}"
                               [predefinedValues]="predefinedTypeValues"
                               formControlName="actionTypes">
         </tb-string-items-list>

ui-ngx/src/app/modules/home/components/audit-log/audit-log-filter.component.scss

@@ -33,3 +33,12 @@
     }
   }
 }
+
+::ng-deep {
+  .tb-audit-log-config-component {
+    max-width: 100%;
+    width: 600px;
+    min-width: 100%;
+    flex: 1;
+  }
+}

ui-ngx/src/app/modules/home/components/audit-log/audit-log-filter.component.ts

@@ -16,16 +16,27 @@
 
 import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { ChangeDetectorRef, Component, DestroyRef, ElementRef, forwardRef, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  ElementRef,
+  forwardRef,
+  Input,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { isDefined, isDefinedAndNotNull } from '@app/core/utils';
 import { StringItemsOption } from '@app/shared/components/string-items-list.component';
 import {
   ActionType,
   actionTypeTranslations,
-  auditLogFilterEquals,
   AuditLogFilter,
+  auditLogFilterEquals,
   POSITION_MAP,
 } from '@app/shared/public-api';
 import { TranslateService } from '@ngx-translate/core';
@@ -56,9 +67,9 @@ export class AuditLogFilterComponent implements OnInit, ControlValueAccessor {
 
   actionTypeTranslations = actionTypeTranslations;
 
-  buttonDisplayValue = this.translate.instant('audit-log.filter');
+  buttonDisplayValue = this.translate.instant('audit-log.audit-log-filter-title');
 
-  auditLogFilterForm: UntypedFormGroup;
+  auditLogFilterForm: FormGroup;
 
   auditLogOverlayRef: OverlayRef;
 
@@ -68,7 +79,7 @@ export class AuditLogFilterComponent implements OnInit, ControlValueAccessor {
 
   private propagateChange = (_: any) => {};
 
-  constructor(private fb: UntypedFormBuilder,
+  constructor(private fb: FormBuilder,
               private translate: TranslateService,
               private overlay: Overlay,
               private nativeElement: ElementRef,
@@ -93,7 +104,7 @@ export class AuditLogFilterComponent implements OnInit, ControlValueAccessor {
     this.propagateChange = fn;
   }
 
-  registerOnTouched(fn: any): void {
+  registerOnTouched(_fn: any): void {
   }
 
   setDisabledState(isDisabled: boolean): void {

ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts

@@ -136,11 +136,13 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
     this.columns.push(new EntityTableColumn<CalculatedField>('name', 'common.name', this.pageMode ? '33%' : '60%',
       entity => this.utilsService.customTranslation(entity.name, entity.name)));
     if (this.pageMode) {
-      this.columns.push(new EntityLinkTableColumn<CalculatedFieldAlarmRule>('entityName', 'calculated-fields.target-entity', '33%',
+      this.columns.push(new EntityTableColumn<CalculatedFieldAlarmRule>('entityType', 'entity.entity-type', '10%',
+        entity => this.translate.instant(entityTypeTranslations.get(entity.entityId.entityType).type)));
+      this.columns.push(new EntityLinkTableColumn<CalculatedFieldAlarmRule>('entityName', 'entity.entity', '33%',
         entity => this.utilsService.customTranslation(entity['entityName'], entity['entityName']),
         entity => getEntityDetailsPageURL(entity.entityId?.id, entity.entityId?.entityType as EntityType), false));
     }
-    this.columns.push(new EntityTableColumn<CalculatedField>('type', 'common.type', this.pageMode ? '33%' : '40%', entity => this.translate.instant(CalculatedFieldTypeTranslations.get(entity.type).name), () => ({whiteSpace: 'nowrap' })));
+    this.columns.push(new EntityTableColumn<CalculatedField>('type', 'common.type', this.pageMode ? '23%' : '40%', entity => this.translate.instant(CalculatedFieldTypeTranslations.get(entity.type).name), () => ({whiteSpace: 'nowrap' })));
 
     this.cellActionDescriptors.push(
       {

ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html

@@ -62,7 +62,7 @@
                                    class="flex-1"
                                    showLabel
                                    required
-                                   label="{{ 'alarm-rule.target-entity-type' | translate }}"
+                                   label="{{ 'entity.entity-type' | translate }}"
                                    [filterAllowedEntityTypes]="false"
                                    [allowedEntityTypes]="calculatedFieldsEntityTypeList"
                                    formControlName="entityType">

ui-ngx/src/app/modules/home/components/calculated-fields/table-header/calculated-fields-filter-config.component.html

@@ -21,18 +21,18 @@
 <ng-template #componentMode>
   <ng-container *ngIf="buttonMode; else calculatedFieldsFilter">
     <button color="primary"
-            matTooltip="{{ 'calculated-fields.calculated-fields-filter' | translate }}"
+            matTooltip="{{buttonDisplayValue}}"
             matTooltipPosition="above"
             mat-stroked-button
             (click)="toggleCfFilterPanel($event)">
-      <mat-icon>filter_list</mat-icon>{{ 'calculated-fields.calculated-fields-filter' | translate }}
+      <mat-icon>filter_list</mat-icon>{{buttonDisplayValue}}
     </button>
   </ng-container>
 </ng-template>
 <ng-template #calculatedFieldsFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="calculatedFieldsFilter"></ng-container>
-    <div class="tb-panel-actions flex flex-row items-center justify-end">
+    <div class="tb-panel-actions flex flex-row items-center">
       <button type="button"
               mat-button
               color="primary"
@@ -68,7 +68,7 @@
       </tb-string-items-list>
     </div>
     <div class="tb-form-row column-xs">
-      <div class="fixed-title-width" translate>alarm-rule.target-entity-type</div>
+      <div class="fixed-title-width" translate>entity.entity-type</div>
       <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="entityType" placeholder="{{ 'alarm-rule.any-type' | translate }}">
           <mat-option>{{ 'alarm-rule.any-type' | translate }}</mat-option>
@@ -80,7 +80,7 @@
     </div>
     @if (cfFilterForm.get('entityType').value) {
       <div class="tb-form-row column-xs">
-        <div class="fixed-title-width" translate>alarm-rule.target-entities</div>
+        <div class="fixed-title-width" translate>entity.entities</div>
         <tb-entity-list appearance="outline"
                         subscriptSizing="dynamic"
                         class="flex flex-1"

ui-ngx/src/app/modules/home/components/calculated-fields/table-header/calculated-fields-filter-config.component.scss

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-@import '../scss/constants';
-
 :host {
   display: flex;
   max-width: 100%;
@@ -42,15 +40,5 @@
     width: 600px;
     min-width: 100%;
     flex: 1;
-
-    tb-entity-subtype-list {
-      flex: 1;
-      @media #{$mat-gt-xs} {
-        width: 180px;
-      }
-      .mdc-evolution-chip-set__chips {
-        width: 100%;
-      }
-    }
   }
 }

ui-ngx/src/app/modules/home/components/calculated-fields/table-header/calculated-fields-filter-config.component.ts

@@ -79,14 +79,6 @@ export class CalculatedFieldsFilterConfigComponent implements OnInit, ControlVal
   @Input()
   buttonMode = true;
 
-  @coerceBoolean()
-  @Input()
-  userMode = false;
-
-  @coerceBoolean()
-  @Input()
-  propagatedFilter = true;
-
   @Input()
   initialCfFilterConfig: CalculatedFieldsQuery = {
     types: [],
@@ -96,6 +88,8 @@ export class CalculatedFieldsFilterConfigComponent implements OnInit, ControlVal
 
   panelMode = false;
 
+  buttonDisplayValue = this.translate.instant('calculated-fields.calculated-field-filter-title');
+
   cfFilterForm: FormGroup;
 
   panelResult: CalculatedFieldsQuery = null;
@@ -130,7 +124,6 @@ export class CalculatedFieldsFilterConfigComponent implements OnInit, ControlVal
   ngOnInit(): void {
     if (this.data) {
       this.panelMode = this.data.panelMode;
-      this.userMode = this.data.userMode;
       this.cfFilterConfig = this.data.filterConfig;
       this.initialCfFilterConfig = this.data.initialFilterConfig;
       if (this.panelMode && !this.initialCfFilterConfig) {
@@ -177,6 +170,7 @@ export class CalculatedFieldsFilterConfigComponent implements OnInit, ControlVal
     if (!this.initialCfFilterConfig && cfFilterConfig) {
       this.initialCfFilterConfig = deepClone(cfFilterConfig);
     }
+    this.updateButtonDisplayValue();
     this.updateCfConfigForm(cfFilterConfig);
   }
 
@@ -253,7 +247,7 @@ export class CalculatedFieldsFilterConfigComponent implements OnInit, ControlVal
       if (!isArraysEqualIgnoreUndefined(filter1.entities, filter2.entities)) {
         return false;
       }
-      return filter1.entityType !== filter2.entityType;
+      return filter1.entityType === filter2.entityType;
     }
     return false;
   };
@@ -268,9 +262,27 @@ export class CalculatedFieldsFilterConfigComponent implements OnInit, ControlVal
 
   private cfConfigUpdated(formValue: any) {
     this.cfFilterConfig = this.cfFilterFromFormValue(formValue);
+    this.updateButtonDisplayValue();
     this.propagateChange(this.cfFilterConfig);
   }
 
+  private updateButtonDisplayValue() {
+    if (this.buttonMode) {
+      const filterTextParts: string[] = [];
+      if (this.cfFilterConfig?.types?.length) {
+        filterTextParts.push(this.cfFilterConfig.types.map((type) => this.translate.instant(CalculatedFieldTypeTranslations.get(type).name)).join(', '));
+      }
+      if (this.cfFilterConfig?.entityType) {
+        filterTextParts.push(this.translate.instant( entityTypeTranslations.get(this.cfFilterConfig.entityType).type));
+      }
+      if (!filterTextParts.length) {
+        this.buttonDisplayValue = this.translate.instant('calculated-fields.calculated-field-filter-title');
+      } else {
+        this.buttonDisplayValue = this.translate.instant('calculated-fields.filter-title') + `: ${filterTextParts.join(', ')}`;
+      }
+    }
+  }
+
   private cfFilterFromFormValue(formValue: any): CalculatedFieldsQuery {
     return {
       types: formValue?.types ?? [],

ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html

@@ -33,6 +33,13 @@
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
     <div class="tb-panel-actions flex flex-row items-center justify-end">
+      <button type="button"
+              mat-button
+              color="primary"
+              (click)="reset()">
+        {{ 'action.reset' | translate }}
+      </button>
+      <span class="flex-1"></span>
       <button type="button"
               mat-button
               (click)="cancel()">
@@ -48,28 +55,28 @@
   </form>
 </ng-template>
 <ng-template #deviceFilter>
-  <div class="flex flex-col gap-4" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
+  <div class="tb-device-filter-config-component tb-form-panel no-padding no-border" [formGroup]="deviceInfoFilterForm">
-    <tb-device-profile-autocomplete
+    <div class="tb-form-row column-xs">
-      subscriptSizing="dynamic"
+      <div class="fixed-title-width" translate>device-profile.device-profile</div>
-      formControlName="deviceProfileId"
+      <tb-device-profile-autocomplete
-      [displayAllOnEmpty]="true"
+          class="flex-1"
-      (deviceProfileChanged)="deviceProfileChanged($event)"
+          formControlName="deviceProfileId"
-      [editProfileEnabled]="false"
+          [inlineField]="true"
-      [addNewProfile]="false">
+          [displayAllOnEmpty]="true"
-    </tb-device-profile-autocomplete>
+          (deviceProfileChanged)="deviceProfileChanged($event)"
-    <mat-form-field>
+          [editProfileEnabled]="false"
-      <mat-label translate>device.device-state</mat-label>
+          [addNewProfile]="false">
-      <mat-select formControlName="active">
+      </tb-device-profile-autocomplete>
-        <mat-option value="">
+    </div>
-          {{ 'device.any' | translate }}
+    <div class="tb-form-row column-xs">
-        </mat-option>
+      <div class="fixed-title-width" translate>device.device-state</div>
-        <mat-option [value]="true">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          {{ 'device.active' | translate }}
+        <mat-select formControlName="active" placeholder="{{ 'device.any' | translate }}">
-        </mat-option>
+          <mat-option>{{ 'device.any' | translate }}</mat-option>
-        <mat-option [value]="false">
+          <mat-option [value]="true">{{ 'device.active' | translate }}</mat-option>
-          {{ 'device.inactive' | translate }}
+          <mat-option [value]="false">{{ 'device.inactive' | translate }}</mat-option>
-        </mat-option>
+        </mat-select>
-      </mat-select>
+      </mat-form-field>
-    </mat-form-field>
+    </div>
   </div>
 </ng-template>

ui-ngx/src/app/modules/home/components/device/device-info-filter.component.scss

@@ -33,3 +33,13 @@
     }
   }
 }
+
+
+::ng-deep {
+  .tb-device-filter-config-component {
+    max-width: 100%;
+    width: 500px;
+    min-width: 100%;
+    flex: 1;
+  }
+}

ui-ngx/src/app/modules/home/components/device/device-info-filter.component.ts

@@ -23,29 +23,30 @@ import {
   Inject,
   InjectionToken,
   Input,
-  OnDestroy,
   OnInit,
   Optional,
   TemplateRef,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { TranslateService } from '@ngx-translate/core';
 import { DeviceInfoFilter } from '@shared/models/device.models';
-import { isDefinedAndNotNull } from '@core/utils';
+import { deepClone, isDefinedAndNotNull, isEmpty, isUndefinedOrNull } from '@core/utils';
 import { EntityInfoData } from '@shared/models/entity.models';
 import { DeviceProfileService } from '@core/http/device-profile.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, Subscription } from 'rxjs';
 
 export const DEVICE_FILTER_CONFIG_DATA = new InjectionToken<any>('DeviceFilterConfigData');
 
 export interface DeviceFilterConfigData {
   panelMode: boolean;
   deviceInfoFilter: DeviceInfoFilter;
+  initialFilterConfig?: DeviceInfoFilter;
 }
 
 // @dynamic
@@ -61,7 +62,7 @@ export interface DeviceFilterConfigData {
     }
   ]
 })
-export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValueAccessor {
+export class DeviceInfoFilterComponent implements OnInit, ControlValueAccessor {
 
   @ViewChild('deviceFilterPanel')
   deviceFilterPanel: TemplateRef<any>;
@@ -72,19 +73,25 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
   @Input()
   buttonMode = true;
 
+  @Input()
+  initialDeviceFilterConfig: DeviceInfoFilter = {
+    deviceProfileId: null,
+    active: null
+  };
+
   panelMode = false;
 
-  buttonDisplayValue = this.translate.instant('device.device-filter');
+  buttonDisplayValue = this.translate.instant('device.device-filter-title');
 
-  deviceInfoFilterForm: UntypedFormGroup;
+  deviceInfoFilterForm: FormGroup;
 
   deviceFilterOverlayRef: OverlayRef;
 
   panelResult: DeviceInfoFilter = null;
 
   private deviceProfileInfo: EntityInfoData;
-
   private deviceInfoFilter: DeviceInfoFilter;
+  private resizeWindows: Subscription;
 
   private propagateChange = (_: any) => {};
 
@@ -92,7 +99,7 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
               private data: DeviceFilterConfigData | undefined,
               @Optional()
               private overlayRef: OverlayRef,
-              private fb: UntypedFormBuilder,
+              private fb: FormBuilder,
               private translate: TranslateService,
               private overlay: Overlay,
               private nativeElement: ElementRef,
@@ -106,6 +113,10 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
     if (this.data) {
       this.panelMode = this.data.panelMode;
       this.deviceInfoFilter = this.data.deviceInfoFilter;
+      this.initialDeviceFilterConfig = this.data.initialFilterConfig;
+      if (this.panelMode && !this.initialDeviceFilterConfig) {
+        this.initialDeviceFilterConfig = deepClone(this.deviceInfoFilter);
+      }
     }
     this.deviceInfoFilterForm = this.fb.group({
       deviceProfileId: [null, []],
@@ -115,7 +126,6 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
       takeUntilDestroyed(this.destroyRef)
     ).subscribe(
       () => {
-        this.updateValidators();
         if (!this.buttonMode) {
           this.deviceFilterUpdated(this.deviceInfoFilterForm.value);
         }
@@ -126,14 +136,11 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
     }
   }
 
-  ngOnDestroy(): void {
-  }
-
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }
 
-  registerOnTouched(fn: any): void {
+  registerOnTouched(_fn: any): void {
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -142,19 +149,18 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
       this.deviceInfoFilterForm.disable({emitEvent: false});
     } else {
       this.deviceInfoFilterForm.enable({emitEvent: false});
-      this.updateValidators();
     }
   }
 
   writeValue(deviceInfoFilter?: DeviceInfoFilter): void {
     this.deviceInfoFilter = deviceInfoFilter;
+    if (!this.initialDeviceFilterConfig && deviceInfoFilter) {
+      this.initialDeviceFilterConfig = deepClone(deviceInfoFilter);
+    }
     this.updateButtonDisplayValue();
     this.updateDeviceInfoFilterForm(deviceInfoFilter);
   }
 
-  private updateValidators() {
-  }
-
   toggleDeviceFilterPanel($event: Event) {
     if ($event) {
       $event.stopPropagation();
@@ -183,6 +189,9 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
     });
     this.deviceFilterOverlayRef.attach(new TemplatePortal(this.deviceFilterPanel,
       this.viewContainerRef));
+    this.resizeWindows = fromEvent(window, 'resize').subscribe(() => {
+      this.deviceFilterOverlayRef.updatePosition();
+    });
   }
 
   cancel() {
@@ -190,40 +199,62 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
     if (this.overlayRef) {
       this.overlayRef.dispose();
     } else {
+      this.resizeWindows.unsubscribe();
       this.deviceFilterOverlayRef.dispose();
     }
   }
 
   update() {
     this.deviceFilterUpdated(this.deviceInfoFilterForm.value);
+    this.deviceInfoFilterForm.markAsPristine();
     if (this.panelMode) {
       this.panelResult = this.deviceInfoFilter;
     }
     if (this.overlayRef) {
       this.overlayRef.dispose();
     } else {
+      this.resizeWindows.unsubscribe();
       this.deviceFilterOverlayRef.dispose();
     }
   }
 
+  reset() {
+    const deviceInfoFilter = this.deviceFilterFromFormValue(this.deviceInfoFilterForm.value);
+    if (!this.deviceInfoFilterConfigEquals(deviceInfoFilter, this.initialDeviceFilterConfig)) {
+      this.updateDeviceInfoFilterForm(this.initialDeviceFilterConfig);
+      this.deviceInfoFilterForm.markAsDirty();
+    }
+  }
+
   deviceProfileChanged(deviceProfileInfo: EntityInfoData) {
     this.deviceProfileInfo = deviceProfileInfo;
     this.updateButtonDisplayValue();
   }
 
+  private deviceInfoFilterConfigEquals = (filter1?: DeviceInfoFilter, filter2?: DeviceInfoFilter): boolean => {
+    if (filter1 === filter2) {
+      return true;
+    }
+    if ((isUndefinedOrNull(filter1) || isEmpty(filter1)) && (isUndefinedOrNull(filter2) || isEmpty(filter2))) {
+      return true;
+    } else if (isDefinedAndNotNull(filter1) && isDefinedAndNotNull(filter2)) {
+      if (filter1.active !== filter2.active) {
+        return false;
+      }
+      return filter1.deviceProfileId === filter2.deviceProfileId;
+    }
+    return false;
+  };
+
   private updateDeviceInfoFilterForm(deviceInfoFilter?: DeviceInfoFilter) {
     this.deviceInfoFilterForm.patchValue({
-      deviceProfileId: deviceInfoFilter?.deviceProfileId,
+      deviceProfileId: deviceInfoFilter?.deviceProfileId ?? null,
-      active: isDefinedAndNotNull(deviceInfoFilter?.active) ? deviceInfoFilter?.active : ''
+      active: deviceInfoFilter?.active ?? null
     }, {emitEvent: false});
-    this.updateValidators();
   }
 
   private deviceFilterUpdated(deviceInfoFilter: DeviceInfoFilter) {
-    this.deviceInfoFilter = deviceInfoFilter;
+    this.deviceInfoFilter = this.deviceFilterFromFormValue(deviceInfoFilter);
-    if ((this.deviceInfoFilter.active as any) === '') {
-      this.deviceInfoFilter.active = null;
-    }
     this.updateButtonDisplayValue();
     this.propagateChange(this.deviceInfoFilter);
   }
@@ -256,4 +287,10 @@ export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValu
     }
   }
 
+  private deviceFilterFromFormValue(formValue: any): DeviceInfoFilter {
+    return {
+      deviceProfileId: formValue?.deviceProfileId ?? null,
+      active: formValue?.active ?? null
+    };
+  }
 }

ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html

@@ -15,8 +15,13 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectDeviceProfileFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+<mat-form-field [formGroup]="selectDeviceProfileFormGroup"
-  <mat-label>{{ 'device-profile.device-profile' | translate }}</mat-label>
+                [class.tb-inline-field]="inlineField"
+                [class.flex]="inlineField"
+                class="mat-block"
+                [appearance]="inlineField ? 'outline' : appearance"
+                [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
+  <mat-label *ngIf="!inlineField">{{ 'device-profile.device-profile' | translate }}</mat-label>
   <input matInput type="text"
          #deviceProfileInput
          formControlName="deviceProfile"

ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts

@@ -47,7 +47,7 @@ import { MatAutocomplete } from '@angular/material/autocomplete';
 import { AddDeviceProfileDialogComponent, AddDeviceProfileDialogData } from './add-device-profile-dialog.component';
 import { emptyPageData } from '@shared/models/page/page-data';
 import { getEntityDetailsPageURL } from '@core/utils';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { AuthUser } from '@shared/models/user.model';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
@@ -69,6 +69,9 @@ export class DeviceProfileAutocompleteComponent implements ControlValueAccessor,
 
   modelValue: DeviceProfileId | null;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   @Input()
   subscriptSizing: SubscriptSizing = 'fixed';
 
@@ -106,6 +109,10 @@ export class DeviceProfileAutocompleteComponent implements ControlValueAccessor,
   @Input()
   hint: string;
 
+  @Input()
+  @coerceBoolean()
+  inlineField: boolean;
+
   @Output()
   deviceProfileUpdated = new EventEmitter<DeviceProfileId>();
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -639,7 +639,7 @@
         "delete-alarms-text": "Are you sure you want to delete { count, plural, =1 {1 alarm} other {# alarms} }?",
         "selected-alarms-are-cleared": "Selected alarms are already cleared",
         "alarm-status-filter": "Alarm Status Filter",
-        "alarm-filter-title": "Alarm Filter",
+        "alarm-filter-title": "Alarm filter",
         "assigned": "Assigned",
         "filter-title": "Filter",
         "max-count-load": "Maximum number of alarms to load (0 - unlimited)",
@@ -1080,12 +1080,10 @@
         "type-timeseries-updated": "Telemetry updated",
         "type-timeseries-deleted": "Telemetry deleted",
         "type-sms-sent": "SMS sent",
-        "any":"Any",
+        "any-type":"Any type",
-        "filter":"Audit Log Filters",
+        "audit-log-filter-title": "Audit log filter",
-        "audit-log-filter-title": "Audit Log Filter",
         "filter-title": "Filter",
-        "filter-type-add": "+ Add type",
+        "filter-types": "Audit log types"
-        "filter-types": "Audit Log Types"
     },
     "debug-settings": {
         "label": "Debug Configuration",
@@ -1219,10 +1217,10 @@
         "deduplication-interval": "Deduplication interval",
         "deduplication-interval-min": "Deduplication interval should be at least {{ sec }} seconds.",
         "deduplication-interval-required": "Deduplication interval is required.",
-        "calculated-fields-filter": "Calculated fields filter",
+        "calculated-field-filter-title": "Calculated field filter",
+        "filter-title": "Filter",
         "calculated-field-types": "Calculated field types",
         "any-type": "Any type",
-        "target-entity": "Target entity",
         "metrics": {
             "metrics": "Metrics",
             "metrics-empty": "At least one metric must be configured.",
@@ -1402,10 +1400,7 @@
         "export": "Export alarm rule",
         "export-failed-error": "Unable to export alarm rule: {{error}}",
         "entity-type": "Entity type",
-        "target-entity-type": "Target entity type",
         "entity-type-required": "Entity type is required.",
-        "target-entity": "Target entity",
-        "target-entities": "Target entities",
         "alarm-type": "Alarm type",
         "alarm-type-hint": "Unique identifier (e.g., HighTempAlarm) across the scope of the alarm originator (Device, Asset, etc.) to prevent conflicts.",
         "alarm-type-required": "Alarm type is required.",
@@ -1526,7 +1521,8 @@
         "alarm-rule-relation-types-list-hint": "Defines relation types to filter the related entities. If not set, the alarm will be propagated to all related entities.",
         "propagate-alarm-to-owner": "Propagate alarm to entity owner (Customer or Tenant)",
         "propagate-alarm-to-tenant": "Propagate alarm to Tenant",
-        "alarm-rule-filter-title": "Filter",
+        "alarm-rule-filter-title": "Alarm rule filter",
+        "filter-title": "Filter",
         "debugging": "Alarm rule debugging",
         "any-type": "Any type",
         "enter-alarm-rule-type": "Enter alarm type",
@@ -2247,8 +2243,7 @@
         "unable-delete-device-alias-text": "Device alias '{{deviceAlias}}' can't be deleted as it used by the following widget(s):<br/>{{widgetsList}}",
         "is-gateway": "Is gateway",
         "overwrite-activity-time": "Overwrite activity time for connected device",
-        "device-filter": "Device filter",
+        "device-filter-title": "Device filter",
-        "device-filter-title": "Device Filter",
         "filter-title": "Filter",
         "device-state": "Device state",
         "state": "State",