From 04317d630000bf03c09e02066f62b270a6f92b5d Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <dgerik2015@gmail.com>
Date: Mon, 30 Aug 2021 12:53:28 +0300
Subject: [PATCH 1/3] Change button close to reset add change default
 changeDetection to onPush

---
 .../event/event-filter-panel.component.html   |  5 +++--
 .../event/event-filter-panel.component.ts     | 22 ++++++++++++++++---
 .../assets/locale/locale.constant-en_US.json  |  3 ++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
index 579301d086..7126273169 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
@@ -61,8 +61,9 @@
   <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
     <button type="button"
             mat-button
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
+            [disabled]="resetButtonDisabled"
+            (click)="reset()">
+      {{ 'action.reset' | translate }}
     </button>
     <button type="submit"
             mat-raised-button
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
index 954253b459..3cffa42907 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, InjectionToken } from '@angular/core';
+import { Component, Inject, InjectionToken, ChangeDetectionStrategy } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { EntityType } from '@shared/models/entity-type.models';
 import { FilterEventBody } from '@shared/models/event.models';
-import { deepTrim } from '@core/utils';
+import { deepTrim, isEqual } from '@core/utils';
 
 export const EVENT_FILTER_PANEL_DATA = new InjectionToken<any>('AlarmFilterPanelData');
 
@@ -37,7 +37,8 @@ export interface FilterEntityColumn {
 @Component({
   selector: 'tb-event-filter-panel',
   templateUrl: './event-filter-panel.component.html',
-  styleUrls: ['./event-filter-panel.component.scss']
+  styleUrls: ['./event-filter-panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EventFilterPanelComponent {
 
@@ -106,6 +107,21 @@ export class EventFilterPanelComponent {
     this.overlayRef.dispose();
   }
 
+  reset() {
+    const emptyInputValue = {};
+
+    for (const inputValue in this.eventFilterFormGroup.value) {
+      emptyInputValue[inputValue] = '';
+    }
+
+    this.eventFilterFormGroup.reset(emptyInputValue);
+    this.update();
+  }
+
+  get resetButtonDisabled() {
+    return isEqual(this.data.filterParams, {});
+  }
+
   changeIsError(value: boolean | string) {
     if (this.conditionError && value === '') {
       this.eventFilterFormGroup.get('error').reset('', {emitEvent: false});
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index bcc13aa024..4d80540b03 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -57,7 +57,8 @@
         "download": "Download",
         "next-with-label": "Next: {{label}}",
         "read-more": "Read more",
-        "hide": "Hide"
+        "hide": "Hide",
+        "reset": "Reset"
     },
     "aggregation": {
         "aggregation": "Aggregation",

From 56d1c4677b787766b684cee633ae9b2932bef212 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <dgerik2015@gmail.com>
Date: Wed, 1 Sep 2021 12:15:00 +0300
Subject: [PATCH 2/3] remove reset button form filter panel and add clear
 filter button to table config

---
 ui-ngx/src/app/app.component.ts               |  7 +++++++
 .../entity/entities-table.component.html      |  3 ++-
 .../event/event-filter-panel.component.html   |  5 ++---
 .../event/event-filter-panel.component.ts     | 15 ---------------
 .../components/event/event-table-config.ts    | 19 +++++++++++++++++++
 .../entity/entities-table-config.models.ts    |  1 +
 .../assets/locale/locale.constant-en_US.json  |  6 +++---
 7 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/ui-ngx/src/app/app.component.ts b/ui-ngx/src/app/app.component.ts
index 39d51ced92..2c089ac5a8 100644
--- a/ui-ngx/src/app/app.component.ts
+++ b/ui-ngx/src/app/app.component.ts
@@ -68,6 +68,13 @@ export class AppComponent implements OnInit {
       )
     );
 
+    this.matIconRegistry.addSvgIconLiteral(
+      'filter-variant-remove',
+      this.domSanitizer.bypassSecurityTrustHtml(
+        '<svg viewBox="0 0 24 24"><path d="M21 8H3V6h18v2m-7.19 8H10v2h3.09c.12-.72.37-1.39.72-2M18 11H6v2h12v-2m3.12 4.46L19 17.59l-2.12-2.13-1.41 1.42L17.59 19l-2.12 2.12 1.41 1.42L19 20.41l2.12 2.13 1.42-1.42L20.41 19l2.13-2.12-1.42-1.42z"/></svg>'
+      )
+    );
+
     this.matIconRegistry.addSvgIconLiteral(
       'google-logo',
       this.domSanitizer.bypassSecurityTrustHtml(
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index 539371301e..c4f470bbd2 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -85,7 +85,8 @@
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event)">
-              <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+              <mat-icon *ngIf="actionDescriptor.isMdiIcon" [svgIcon]="actionDescriptor.icon"></mat-icon>
+              <mat-icon *ngIf="!actionDescriptor.isMdiIcon">{{actionDescriptor.icon}}</mat-icon>
             </button>
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
index 7126273169..579301d086 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
@@ -61,9 +61,8 @@
   <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
     <button type="button"
             mat-button
-            [disabled]="resetButtonDisabled"
-            (click)="reset()">
-      {{ 'action.reset' | translate }}
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
     </button>
     <button type="submit"
             mat-raised-button
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
index 3cffa42907..64ad0d07e1 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
@@ -107,21 +107,6 @@ export class EventFilterPanelComponent {
     this.overlayRef.dispose();
   }
 
-  reset() {
-    const emptyInputValue = {};
-
-    for (const inputValue in this.eventFilterFormGroup.value) {
-      emptyInputValue[inputValue] = '';
-    }
-
-    this.eventFilterFormGroup.reset(emptyInputValue);
-    this.update();
-  }
-
-  get resetButtonDisabled() {
-    return isEqual(this.data.filterParams, {});
-  }
-
   changeIsError(value: boolean | string) {
     if (this.conditionError && value === '') {
       this.eventFilterFormGroup.get('error').reset('', {emitEvent: false});
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
index 8caa6c7aab..e972aee04c 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
@@ -120,6 +120,15 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
     this.updateFilterColumns();
 
     this.headerActionDescriptors.push({
+      name: this.translate.instant('event.clear-filter'),
+      icon: 'filter-variant-remove',
+      isMdiIcon: true,
+      isEnabled: () => !isEqual(this.filterParams, {}),
+      onAction: ($event) => {
+        this.clearFiter($event);
+      }
+    },
+    {
       name: this.translate.instant('event.events-filter'),
       icon: 'filter_list',
       isEnabled: () => true,
@@ -316,6 +325,16 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
     }
   }
 
+  private clearFiter($event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+
+    this.filterParams = {};
+    this.table.paginator.pageIndex = 0;
+    this.table.updateData();
+  }
+
   private editEventFilter($event: MouseEvent) {
     if ($event) {
       $event.stopPropagation();
diff --git a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
index a1393b0bd2..f554329cc2 100644
--- a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
+++ b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
@@ -73,6 +73,7 @@ export interface GroupActionDescriptor<T extends BaseData<HasId>> {
 export interface HeaderActionDescriptor {
   name: string;
   icon: string;
+  isMdiIcon?: boolean;
   isEnabled: () => boolean;
   onAction: ($event: MouseEvent) => void;
 }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 4d80540b03..95d0ec9949 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -57,8 +57,7 @@
         "download": "Download",
         "next-with-label": "Next: {{label}}",
         "read-more": "Read more",
-        "hide": "Hide",
-        "reset": "Reset"
+        "hide": "Hide"
     },
     "aggregation": {
         "aggregation": "Aggregation",
@@ -1823,7 +1822,8 @@
         "all-events": "All",
         "has-error": "Has error",
         "entity-id": "Entity Id",
-        "entity-type": "Entity type"
+        "entity-type": "Entity type",
+        "clear-filter": "Clear Filter"
     },
     "extension": {
         "extensions": "Extensions",

From 66cdb24b379bd9cc0b2de2f56858c9f60a88a737 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <dgerik2015@gmail.com>
Date: Wed, 1 Sep 2021 12:19:31 +0300
Subject: [PATCH 3/3] remove isEqual form imports and remove changeDetection
 from component

---
 .../home/components/event/event-filter-panel.component.ts  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
index 64ad0d07e1..954253b459 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, InjectionToken, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Inject, InjectionToken } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { EntityType } from '@shared/models/entity-type.models';
 import { FilterEventBody } from '@shared/models/event.models';
-import { deepTrim, isEqual } from '@core/utils';
+import { deepTrim } from '@core/utils';
 
 export const EVENT_FILTER_PANEL_DATA = new InjectionToken<any>('AlarmFilterPanelData');
 
@@ -37,8 +37,7 @@ export interface FilterEntityColumn {
 @Component({
   selector: 'tb-event-filter-panel',
   templateUrl: './event-filter-panel.component.html',
-  styleUrls: ['./event-filter-panel.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  styleUrls: ['./event-filter-panel.component.scss']
 })
 export class EventFilterPanelComponent {