Automate-3144 API compliance reports node filters

components/automate-ui/src/app/pages/+compliance/+reporting/+reporting-nodes/reporting-nodes.component.html

@@ -10,7 +10,7 @@
   <chef-phat-radio
     class="nodes-list-status-filters"
     [value]="nodeFilterStatus"
-    (change)="filterNodeStatus($event, $event.target.value)">
+    (change)="statusFilter($event, $event.target.value)">
     <chef-option class="filter all" value='all'>
       <span class="filter-label">Total Nodes</span>
       <span class="filter-total">
@@ -85,7 +85,7 @@
       </chef-tr>
     </chef-thead>
     <chef-tbody *ngIf="!reportData.nodesListLoading">
-      <chef-tr *ngFor="let node of filteredNodes(reportData.nodesList.items)">
+      <chef-tr *ngFor="let node of reportData.nodesList.items">
         <chef-td>
           <chef-icon *ngIf="node.latest_report.status !== 'waived'" class="status-icon" [ngClass]="node.latest_report.status">
             {{ statusIcon(node.latest_report.status) }}

components/automate-ui/src/app/pages/+compliance/+reporting/+reporting-nodes/reporting-nodes.component.ts

@@ -2,9 +2,11 @@ import { takeUntil } from 'rxjs/operators';
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { groupBy } from 'lodash';
+import { includes } from 'lodash/fp';
 import * as moment from 'moment/moment';
 import { FilterC } from '../types';
 import { paginationOverride } from '../shared';
+import { TelemetryService } from 'app/services/telemetry/telemetry.service';
 import {
   StatsService,
   ReportQueryService,
@@ -25,21 +27,22 @@ export class ReportingNodesComponent implements OnInit, OnDestroy {
   layerTwoData: any = {};
   control: any = {};
   nodeFilterStatus = 'all';
-
   scanResultsPane = 0;
   openControls = {};
-
+  private allowedStatus = ['failed', 'passed', 'skipped', 'waived'];
   private isDestroyed: Subject<boolean> = new Subject<boolean>();
 
   constructor(
     private statsService: StatsService,
     public reportQuery: ReportQueryService,
     public reportData: ReportDataService,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private telemetryService: TelemetryService
   ) {}
 
   ngOnInit() {
+    this.nodeFilterStatus = this.route.queryParams['_value'].status || 'all';
     this.reportQuery.state.pipe(
       takeUntil(this.isDestroyed))
       .subscribe(this.getData.bind(this));
@@ -50,20 +53,27 @@ export class ReportingNodesComponent implements OnInit, OnDestroy {
     this.isDestroyed.complete();
   }
 
-  filterNodeStatus(_event, status) {
+  public statusFilter(_event, status: string): void {
     this.nodeFilterStatus = status;
+
+    const queryParams = {...this.route.snapshot.queryParams};
+
+    delete queryParams['status'];
+    delete queryParams['page'];
+
+    if ( includes(status, this.allowedStatus) ) {
+      queryParams['status'] = status;
+      this.telemetryService.track('applicationsStatusFilter',
+        { entity: 'reportingNodes', statusFilter: status});
+    }
+
+    this.router.navigate([], {queryParams});
   }
 
   isNodeStatusSelected(status): boolean {
     return this.nodeFilterStatus === status;
   }
 
-  filteredNodes(nodes) {
-    return this.nodeFilterStatus === 'all'
-      ? nodes
-      : nodes.filter((node) => node.latest_report.status === this.nodeFilterStatus);
-  }
-
   onNodesListPageChanged(event) {
     const reportQuery = this.reportQuery.getReportQuery();
     this.reportData.nodesListParams.page = event;

components/automate-ui/src/app/pages/+compliance/shared/reporting/report-data.service.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { of as observableOf } from 'rxjs';
 import { StatsService } from './stats.service';
@@ -23,6 +24,7 @@ describe('ReportDataService', () => {
         { provide: TelemetryService, useClass: MockTelemetryService }
       ],
       imports: [
+        RouterTestingModule,
         HttpClientTestingModule
       ]
     });

components/automate-ui/src/app/pages/+compliance/shared/reporting/stats.service.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { ChefSessionService } from 'app/services/chef-session/chef-session.service';
 import { MockChefSessionService } from 'app/testing/mock-chef-session.service';
@@ -12,14 +13,14 @@ const COMPLIANCE_URL = environment.compliance_url;
 describe('StatsService', () => {
   let httpTestingController: HttpTestingController;
   let service: StatsService;
-
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
         { provide: ChefSessionService, useClass: MockChefSessionService },
         StatsService
       ],
       imports: [
+        RouterTestingModule,
         HttpClientTestingModule
       ]
     });

components/automate-ui/src/app/pages/+compliance/shared/reporting/stats.service.ts

@@ -2,6 +2,7 @@ import { map } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 import * as moment from 'moment/moment';
 import { omitBy, isNil } from 'lodash';
 import { environment } from '../../../../../environments/environment';
@@ -20,7 +21,8 @@ export type ControlStatus = 'passed' | 'failed' | 'waived' | 'skipped';
 @Injectable()
 export class StatsService {
   constructor(
-    private httpClient: HttpClient
+    private httpClient: HttpClient,
+    private route: ActivatedRoute
   ) {}
 
   getFailures(types: Array<string>, reportQuery: ReportQuery): Observable<any> {
@@ -100,8 +102,9 @@ export class StatsService {
 
   getNodes(reportQuery: ReportQuery, listParams: any): Observable<any> {
     const url = `${CC_API_URL}/reporting/nodes/search`;
+    let formatted = this.formatFilters(reportQuery);
+    formatted = this.addStatusParam(formatted);
 
-    const formatted = this.formatFilters(reportQuery);
     let body = { filters: formatted };
 
     const {page, perPage} = listParams;
@@ -119,6 +122,14 @@ export class StatsService {
         ({ total, total_failed, total_passed, total_skipped, total_waived, items: nodes })));
   }
 
+  private addStatusParam(filters): any {
+    const statusValue = this.route.queryParams['_value'].status;
+    if (statusValue) {
+      filters.push({ type: 'status', values: [statusValue] });
+    }
+    return filters;
+  }
+
   getProfiles(reportQuery: ReportQuery, listParams: any): Observable<any> {
     const url = `${CC_API_URL}/reporting/profiles`;
 

components/automate-ui/src/app/pages/+compliance/shared/reporting/suggestions.service.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { CookieModule } from 'ngx-cookie';
 import { SuggestionsService } from './suggestions.service';
@@ -16,6 +17,7 @@ describe('SuggestionsService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
+        RouterTestingModule,
         CookieModule.forRoot(),
         HttpClientTestingModule
       ],