Change button close to reset add change default changeDetection to onPush

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

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

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