perf: optimize subscriptions and reduce redundant calls

Author: mjabascal10

frontend/src/app/data-management/alert-management/alert-view/alert-view.component.ts

@@ -148,7 +148,6 @@ export class AlertViewComponent implements OnInit, OnDestroy {
                 this.changeParamsByDataType(type).then(() => this.setDefaultParams());
               });
             }
-            this.setDefaultParams();
           });
         });
       } else {
@@ -428,14 +427,14 @@ export class AlertViewComponent implements OnInit, OnDestroy {
       this.filters = filters;
       this.page = 1;
       this.getAlert('on generic filter change');
-      this.updateStatusServiceBehavior.$updateStatus.next(true);
+      // this.updateStatusServiceBehavior.$updateStatus.next(true);
       this.alertFiltersBehavior.$filters.next(this.filters);
     });
   }
 
   processFilters(filter: ElasticFilterType): Promise<ElasticFilterType[]> {
     return new Promise<ElasticFilterType[]>(resolve => {
-      const indexFilters = this.filters.findIndex(value => filter.field.includes(value.field));
+      const indexFilters = this.filters.findIndex(value => filter.field === value.field && value.value !== FALSE_POSITIVE_OBJECT.tagName);
       if (indexFilters === -1) {
         this.filters.push(filter);
       } else {

frontend/src/app/data-management/alert-management/shared/components/filters/alert-generic-filter/alert-generic-filter.component.ts

@@ -1,4 +1,6 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 import {ALERT_TAGS_FIELD} from '../../../../../../shared/constants/alert/alert-field.constant';
 import {ALERT_INDEX_PATTERN} from '../../../../../../shared/constants/main-index-pattern.constant';
 import {ElasticDataTypesEnum} from '../../../../../../shared/enums/elastic-data-types.enum';
@@ -14,7 +16,7 @@ import {AlertUpdateTagBehavior} from '../../../behavior/alert-update-tag.behavio
   templateUrl: './alert-generic-filter.component.html',
   styleUrls: ['./alert-generic-filter.component.scss']
 })
-export class AlertGenericFilterComponent implements OnInit {
+export class AlertGenericFilterComponent implements OnInit, OnDestroy {
   @Output() filterGenericChange = new EventEmitter<ElasticFilterType>();
   @Input() fieldFilter: UtmFieldType;
   activeFilters: ElasticFilterType[] = [];
@@ -27,6 +29,7 @@ export class AlertGenericFilterComponent implements OnInit {
   top = 6;
   filter: ElasticFilterType;
   sort: { orderByCount: boolean, sortAsc: boolean } = {orderByCount: true, sortAsc: false};
+  destroy$: Subject<void> = new Subject<void>();
 
   constructor(private elasticSearchIndexService: ElasticSearchIndexService,
               private alertFiltersBehavior: AlertFiltersBehavior,
@@ -39,7 +42,9 @@ export class AlertGenericFilterComponent implements OnInit {
      * If filter is tags subscribe to changes to reload data on add new tag on alert
      */
     if (this.fieldFilter.field === ALERT_TAGS_FIELD) {
-      this.alertUpdateTagBehavior.$tagRefresh.subscribe(tagUpdate => {
+      this.alertUpdateTagBehavior.$tagRefresh
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(tagUpdate => {
         if (tagUpdate) {
           this.getFieldValues();
         }
@@ -48,12 +53,16 @@ export class AlertGenericFilterComponent implements OnInit {
     /**
      * Reset all values of selected filter
      */
-    this.alertFiltersBehavior.$resetFilter.subscribe(reset => {
+    this.alertFiltersBehavior.$resetFilter
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(reset => {
       if (reset) {
         this.selected = [];
       }
     });
-    this.alertFiltersBehavior.$deleteFilterValue.subscribe(deleteFilter => {
+    this.alertFiltersBehavior.$deleteFilterValue
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(deleteFilter => {
       if (deleteFilter) {
         const deleteField = deleteFilter.field.replace('.keyword', '');
         if (this.fieldFilter.field === deleteField) {
@@ -64,7 +73,9 @@ export class AlertGenericFilterComponent implements OnInit {
         }
       }
     });
-    this.alertFiltersBehavior.$filters.subscribe((filters: ElasticFilterType[]) => {
+    this.alertFiltersBehavior.$filters
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((filters: ElasticFilterType[]) => {
       if (filters) {
         this.activeFilters = filters;
         this.getFieldValues();
@@ -160,4 +171,9 @@ export class AlertGenericFilterComponent implements OnInit {
     this.sort = $event;
     this.getFieldValues();
   }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

frontend/src/app/data-management/alert-management/shared/components/filters/status-filter/status-filter.component.ts

@@ -1,4 +1,6 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {merge, Subject} from 'rxjs';
+import {filter, map, takeUntil} from "rxjs/operators";
 import {ALERT_STATUS_FIELD} from '../../../../../../shared/constants/alert/alert-field.constant';
 import {ALL_STATUS, AUTOMATIC_REVIEW, CLOSED, IGNORED, OPEN, REVIEW} from '../../../../../../shared/constants/alert/alert-status.constant';
 import {ALERT_INDEX_PATTERN} from '../../../../../../shared/constants/main-index-pattern.constant';
@@ -16,7 +18,7 @@ import {getCurrentAlertStatus} from '../../../util/alert-util-function';
   templateUrl: './status-filter.component.html',
   styleUrls: ['./status-filter.component.scss']
 })
-export class StatusFilterComponent implements OnInit {
+export class StatusFilterComponent implements OnInit, OnDestroy {
   @Input() dataNature: DataNatureTypeEnum;
   @Input() filters: ElasticFilterType[];
   @Input() dataType: EventDataTypeEnum;
@@ -35,6 +37,7 @@ export class StatusFilterComponent implements OnInit {
   ];
   allStatusValue = ALL_STATUS;
   autoReview = AUTOMATIC_REVIEW;
+  destroy$: Subject<void> = new Subject();
 
   constructor(private elasticSearchIndexService: ElasticSearchIndexService,
               private alertFiltersBehavior: AlertFiltersBehavior,
@@ -45,25 +48,26 @@ export class StatusFilterComponent implements OnInit {
     if (typeof this.statusFilter === 'string') {
       this.statusFilter = Number(this.statusFilter);
     }
-    this.getValuesOfStatus();
-    /**
-     * Update amount on alert status change
-     */
-    this.updateStatusServiceBehavior.$updateStatus.subscribe((update) => {
-      if (update) {
-        this.getValuesOfStatus();
-      }
-    });
-    /**
-     * Update amount on filter change
-     */
-    this.alertFiltersBehavior.$filters.subscribe(value => {
-      if (value) {
-        this.filters = value;
-        this.statusFilter = getCurrentAlertStatus(this.filters);
+
+    merge(
+      this.updateStatusServiceBehavior.$updateStatus.pipe(
+        filter(value => !!value),
+        map(() => ({source: 'updateStatus', filters: null}))
+      ),
+      this.alertFiltersBehavior.$filters.pipe(
+        filter(value => !!value),
+        map((filters) => ({source: 'filters', filters}))
+      )
+    )
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((event) => {
+        if (event.source === 'filters') {
+          this.filters = event.filters;
+          this.statusFilter = getCurrentAlertStatus(this.filters);
+        }
         this.getValuesOfStatus();
-      }
-    });
+      });
+
   }
 
   getValuesOfStatus() {
@@ -137,4 +141,9 @@ export class StatusFilterComponent implements OnInit {
       return true;
     }
   }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }