METRON-2140: [UI] Implement logic behind show/hide RESOLVE and DISMISS items in Alerts UI

metron-interface/metron-alerts/src/app/alerts/alerts-list/alerts-list.component.html

@@ -24,7 +24,7 @@
                         <button class="btn btn-secondary btn-search-clear" type="button" (click)="onClear()"></button>
                     </span>
                     <span class="input-group-append" style="white-space: nowrap;">
-                        <app-time-range class="d-flex position-relative" (timeRangeChange)="onTimeRangeChange($event)" [disabled]="timeStampfilterPresent" [selectedTimeRange]="selectedTimeRange"> </app-time-range>
+                        <app-time-range class="d-flex position-relative" (timeRangeChange)="onTimeRangeChange($event)" [disabled]="timeStampFilterPresent" [selectedTimeRange]="selectedTimeRange"> </app-time-range>
                     </span>
                     <span class="input-group-append">
                         <button data-qe-id="alert-search-btn" class="btn btn-secondary btn-search rounded-right" type="button" data-name="search" (click)="onSearch(alertSearchDirective.getSeacrhText())"></button>
@@ -82,26 +82,27 @@
         <div class="col-xs-12 px-0">
             <app-table-view #dataViewComponent
                             [alerts]="alerts" *ngIf="groups.length === 0"
-                            [queryBuilder]="queryBuilder"
                             [pagination]="pagination"
                             [alertsColumnsToDisplay]="alertsColumnsToDisplay"
                             [selectedAlerts]="selectedAlerts"
                             (onResize)="onResize()"
                             (onAddFilter)="onAddFilter($event)"
-                            (onRefreshData)="onRefreshData($event)"
                             (onShowDetails)="showDetails($event)"
-                            (onSelectedAlertsChange)="onSelectedAlertsChange($event)"></app-table-view>
+                            (onSelectedAlertsChange)="onSelectedAlertsChange($event)"
+                            (onSortChanged)="onSortChanged($event)"
+                            (onPageChanged)="onPageChanged($event)"></app-table-view>
             <app-tree-view #dataViewComponent *ngIf="groups.length !== 0"
                            [alerts]="alerts"
-                           [queryBuilder]="queryBuilder"
                            [alertsColumnsToDisplay]="alertsColumnsToDisplay"
                            [selectedAlerts]="selectedAlerts"
                            [globalConfig]="globalConfig"
+                           [query]="queryBuilder.generateSelect()"
+                           [groups]="groups"
                            (onResize)="onResize()"
                            (onAddFilter)="onAddFilter($event)"
-                           (onRefreshData)="onRefreshData($event)"
                            (onShowDetails)="showDetails($event)"
                            (onSelectedAlertsChange)="onSelectedAlertsChange($event)"
+                           (onMetaAlertCreated)="search($event)"
                            (treeViewChange)="onTreeViewChange($event)"></app-tree-view>
         </div>
     </div>

metron-interface/metron-alerts/src/app/alerts/alerts-list/alerts-list.component.spec.ts

@@ -30,6 +30,7 @@ import { GlobalConfigService } from 'app/service/global-config.service';
 import { DialogService } from 'app/service/dialog.service';
 import { Observable } from 'rxjs';
 import { Filter } from 'app/model/filter';
+import { QueryBuilder } from './query-builder';
 
 describe('AlertsListComponent', () => {
 
@@ -68,6 +69,9 @@ describe('AlertsListComponent', () => {
           get: () => new Observable(),
         } } },
         { provide: DialogService, useClass: () => { return {} } },
+        { provide: QueryBuilder, useClass: () => { return {
+          addOrUpdateFilter: () => {}
+        } } },
       ]
     })
     .compileComponents();

metron-interface/metron-alerts/src/app/alerts/alerts-list/alerts-list.component.ts

@@ -37,16 +37,15 @@ import {SearchResponse} from '../../model/search-response';
 import {ElasticsearchUtils} from '../../utils/elasticsearch-utils';
 import {Filter} from '../../model/filter';
 import { TIMESTAMP_FIELD_NAME, ALL_TIME, POLLING_DEFAULT_STATE } from '../../utils/constants';
-import {TableViewComponent} from './table-view/table-view.component';
+import {TableViewComponent, PageChangedEvent, SortChangedEvent} from './table-view/table-view.component';
 import {Pagination} from '../../model/pagination';
-import {META_ALERTS_SENSOR_TYPE} from '../../utils/constants';
 import {MetaAlertService} from '../../service/meta-alert.service';
 import {Facets} from '../../model/facets';
 import { GlobalConfigService } from '../../service/global-config.service';
 import { DialogService } from 'app/service/dialog.service';
 import { DialogType } from 'app/model/dialog-type';
 import { Utils } from 'app/utils/utils';
-import {AlertSource} from "../../model/alert-source";
+import { AlertSource } from '../../model/alert-source';
 
 @Component({
   selector: 'app-alerts-list',
@@ -67,7 +66,7 @@ export class AlertsListComponent implements OnInit, OnDestroy {
   isRefreshPaused = POLLING_DEFAULT_STATE;
   lastIsRefreshPausedValue = false;
   isMetaAlertPresentInSelectedAlerts = false;
-  timeStampfilterPresent = false;
+  timeStampFilterPresent = false;
 
   readonly DEFAULT_TIME_RANGE = 'last-15-minutes';
   selectedTimeRange: Filter;
@@ -77,7 +76,6 @@ export class AlertsListComponent implements OnInit, OnDestroy {
   @ViewChild(AlertSearchDirective) alertSearchDirective: AlertSearchDirective;
 
   tableMetaData = new TableMetadata();
-  queryBuilder: QueryBuilder = new QueryBuilder();
   pagination: Pagination = new Pagination();
   alertChangedSubscription: Subscription;
   groupFacets: Facets;
@@ -96,7 +94,8 @@ export class AlertsListComponent implements OnInit, OnDestroy {
               private metaAlertsService: MetaAlertService,
               private globalConfigService: GlobalConfigService,
               private dialogService: DialogService,
-              private cdRef : ChangeDetectorRef) {
+              public queryBuilder: QueryBuilder,
+              private cdRef: ChangeDetectorRef) {
     router.events.subscribe(event => {
       if (event instanceof NavigationStart && event.url === '/alerts-list') {
         this.selectedAlerts = [];
@@ -128,14 +127,11 @@ export class AlertsListComponent implements OnInit, OnDestroy {
 
   addLoadSavedSearchListner() {
     this.saveSearchService.loadSavedSearch$.subscribe((savedSearch: SaveSearch) => {
-      let queryBuilder = new QueryBuilder();
-      queryBuilder.setGroupby(this.getGroupRequest().groups.map(group => group.field));
-      queryBuilder.searchRequest = savedSearch.searchRequest;
-      queryBuilder.filters = savedSearch.filters;
-      this.queryBuilder = queryBuilder;
+      this.queryBuilder.searchRequest = savedSearch.searchRequest;
+      this.queryBuilder.filters = savedSearch.filters;
       this.setSelectedTimeRange(savedSearch.filters);
       this.prepareColumnData(savedSearch.tableColumns, []);
-      this.timeStampfilterPresent = this.queryBuilder.isTimeStampFieldPresent();
+      this.timeStampFilterPresent = this.queryBuilder.isTimeStampFieldPresent();
       this.search(true, savedSearch);
     });
   }
@@ -223,15 +219,15 @@ export class AlertsListComponent implements OnInit, OnDestroy {
   }
 
   onClear() {
-    this.timeStampfilterPresent = false;
+    this.timeStampFilterPresent = false;
     this.queryBuilder.clearSearch();
     this.selectedTimeRange = new Filter(TIMESTAMP_FIELD_NAME, ALL_TIME, false);
     this.search();
   }
 
   onSearch(query: string) {
     this.queryBuilder.setSearch(query);
-    this.timeStampfilterPresent = this.queryBuilder.isTimeStampFieldPresent();
+    this.timeStampFilterPresent = this.queryBuilder.isTimeStampFieldPresent();
     this.search();
     return false;
   }
@@ -240,8 +236,14 @@ export class AlertsListComponent implements OnInit, OnDestroy {
     this.onAddFilter(new Filter($event.name, $event.key));
   }
 
-  onRefreshData($event) {
-    this.search($event);
+  onSortChanged(event: SortChangedEvent) {
+    this.queryBuilder.setSort(event.sortBy, event.sortOrder);
+    this.search(true);
+  }
+
+  onPageChanged(event: PageChangedEvent) {
+    this.queryBuilder.setFromAndSize(event.from, event.size);
+    this.search(false);
   }
 
   onSelectedAlertsChange(selectedAlerts) {
@@ -258,7 +260,7 @@ export class AlertsListComponent implements OnInit, OnDestroy {
   }
 
   onAddFilter(filter: Filter) {
-    this.timeStampfilterPresent = (filter.field === TIMESTAMP_FIELD_NAME);
+    this.timeStampFilterPresent = (filter.field === TIMESTAMP_FIELD_NAME);
     this.queryBuilder.addOrUpdateFilter(filter);
     this.search();
   }
@@ -295,7 +297,7 @@ export class AlertsListComponent implements OnInit, OnDestroy {
 
   private updateQueryBuilder(timeRangeFilter: Filter) {
     if (timeRangeFilter.value === ALL_TIME) {
-      this.queryBuilder.removeFilter(timeRangeFilter.field);
+      this.queryBuilder.removeFilter(timeRangeFilter);
     } else {
       this.queryBuilder.addOrUpdateFilter(timeRangeFilter);
     }
@@ -365,12 +367,6 @@ export class AlertsListComponent implements OnInit, OnDestroy {
     }
   }
 
-  removeFilter(field: string) {
-    this.timeStampfilterPresent = (field === TIMESTAMP_FIELD_NAME) ? false : this.timeStampfilterPresent;
-    this.queryBuilder.removeFilter(field);
-    this.search();
-  }
-
   restoreRefreshState() {
     this.isRefreshPaused = this.lastIsRefreshPausedValue;
     this.tryStartPolling();
@@ -394,12 +390,8 @@ export class AlertsListComponent implements OnInit, OnDestroy {
     this.tryStartPolling();
   }
 
-  getGroupRequest() {
-    return this.queryBuilder.groupRequest(this.globalConfig['threat.triage.score.field']);
-  }
-
   setSearchRequestSize() {
-    if (this.getGroupRequest().groups.length === 0) {
+    if (this.groups.length === 0) {
       this.queryBuilder.searchRequest.from = this.pagination.from;
       if (this.tableMetaData.size) {
         this.pagination.size = this.tableMetaData.size;
@@ -486,7 +478,7 @@ export class AlertsListComponent implements OnInit, OnDestroy {
   tryStartPolling() {
     if (!this.isRefreshPaused) {
       this.tryStopPolling();
-      this.refreshTimer = this.searchService.pollSearch(this.queryBuilder).subscribe(results => {
+      this.refreshTimer = this.searchService.pollSearch(this.queryBuilder.searchRequest).subscribe(results => {
         this.setData(results);
       });
     }

metron-interface/metron-alerts/src/app/alerts/alerts-list/alerts-list.module.ts

@@ -1,43 +1,56 @@
 /**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {NgModule} from '@angular/core';
-import {DecimalPipe} from '@angular/common';
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+import { NgModule } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
 
-import {AlertsListComponent}   from './alerts-list.component';
-import {routing} from './alerts-list.routing';
-import {SharedModule} from '../../shared/shared.module';
-import {MetronSorterModule} from '../../shared/metron-table/metron-sorter/metron-sorter.module';
-import {ListGroupModule} from '../../shared/list-group/list-grup.module';
-import {CollapseModule} from '../../shared/collapse/collapse.module';
-import {MetronTablePaginationModule} from '../../shared/metron-table/metron-table-pagination/metron-table-pagination.module';
-import {ConfigureRowsModule} from '../configure-rows/configure-rows.module';
-import {TimeRangeModule} from '../../shared/time-range/time-range.module';
-import {GroupByModule} from '../../shared/group-by/group-by.module';
-import {AlertFiltersComponent} from './alert-filters/alert-filters.component';
-import {TableViewComponent} from './table-view/table-view.component';
-import {TreeViewComponent} from './tree-view/tree-view.component';
+import { AlertsListComponent }   from './alerts-list.component';
+import { routing } from './alerts-list.routing';
+import { SharedModule } from '../../shared/shared.module';
+import { MetronSorterModule } from '../../shared/metron-table/metron-sorter/metron-sorter.module';
+import { ListGroupModule } from '../../shared/list-group/list-grup.module';
+import { CollapseModule } from '../../shared/collapse/collapse.module';
+import { MetronTablePaginationModule } from '../../shared/metron-table/metron-table-pagination/metron-table-pagination.module';
+import { ConfigureRowsModule } from '../configure-rows/configure-rows.module';
+import { TimeRangeModule } from '../../shared/time-range/time-range.module';
+import { GroupByModule } from '../../shared/group-by/group-by.module';
+import { AlertFiltersComponent } from './alert-filters/alert-filters.component';
+import { TableViewComponent } from './table-view/table-view.component';
+import { TreeViewComponent } from './tree-view/tree-view.component';
 
 @NgModule({
-    imports: [routing, SharedModule, ConfigureRowsModule, MetronSorterModule, MetronTablePaginationModule,
-                ListGroupModule, CollapseModule, GroupByModule, TimeRangeModule],
-    exports: [AlertsListComponent],
-    declarations: [AlertsListComponent, TableViewComponent, TreeViewComponent, AlertFiltersComponent],
-    providers: [DecimalPipe]
+  imports: [
+    routing,
+    SharedModule,
+    ConfigureRowsModule,
+    MetronSorterModule,
+    MetronTablePaginationModule,
+    ListGroupModule,
+    CollapseModule,
+    GroupByModule,
+    TimeRangeModule,
+  ],
+  exports: [ AlertsListComponent ],
+  declarations: [
+    AlertsListComponent,
+    TableViewComponent,
+    TreeViewComponent,
+    AlertFiltersComponent
+  ],
+  providers: [ DecimalPipe ]
 })
-export class AlertsListModule {
-}
+export class AlertsListModule {}

metron-interface/metron-alerts/src/app/alerts/alerts-list/query-builder.ts

@@ -22,7 +22,9 @@ import {SortField} from '../../model/sort-field';
 import {TIMESTAMP_FIELD_NAME} from '../../utils/constants';
 import {GroupRequest} from '../../model/group-request';
 import {Group} from '../../model/group';
+import { Injectable } from '@angular/core';
 
+@Injectable()
 export class QueryBuilder {
   private _searchRequest = new SearchRequest();
   private _groupRequest = new GroupRequest();
@@ -48,7 +50,6 @@ export class QueryBuilder {
     return this._filters;
   }
 
-
   get searchRequest(): SearchRequest {
     this._searchRequest.query = this.generateSelect();
     return this._searchRequest;
@@ -78,9 +79,11 @@ export class QueryBuilder {
   addOrUpdateFilter(filter: Filter) {
     let existingFilterIndex = -1;
 
-    // only one timerange filter applicable
     if (filter.field === TIMESTAMP_FIELD_NAME) {
-      this.removeFilter(filter.field);
+      const existingTimeRangeFilter = this.filters.find(fItem => fItem.field === TIMESTAMP_FIELD_NAME);
+      if (existingTimeRangeFilter) {
+        this.removeFilter(existingTimeRangeFilter);
+      }
       this._filters.push(filter);
       this.onSearchChange();
       return;
@@ -136,11 +139,12 @@ export class QueryBuilder {
     this._displayQuery = this.generateSelectForDisplay();
   }
 
-  removeFilter(field: string) {
-    let filter = this._filters.find(tFilter => tFilter.field === field);
-    this._filters.splice(this._filters.indexOf(filter), 1);
-
-    this.onSearchChange();
+  removeFilter(filter: Filter) {
+    const filterIndex = this._filters.indexOf(filter);
+    if (filterIndex >= 0) {
+      this._filters.splice(filterIndex, 1);
+      this.onSearchChange();
+    }
   }
 
   setFields(fieldNames: string[]) {