remove reset button form filter panel and add clear filter button to table config

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(

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 }}"

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)="cancel()">
-            (click)="reset()">
+      {{ 'action.cancel' | translate }}
-      {{ 'action.reset' | translate }}
     </button>
     <button type="submit"
             mat-raised-button

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});

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();

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;
 }

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",
+        "hide": "Hide"
-        "reset": "Reset"
     },
     "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",