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,18 +27,18 @@ 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() {
@@ -50,20 +52,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/+reporting/reporting.component.ts

@@ -60,7 +60,8 @@ export class ReportingComponent implements OnInit, OnDestroy {
     ReportingFilterTypes.PROFILE_WITH_VERSION,
     ReportingFilterTypes.PROFILE_NAME,
     ReportingFilterTypes.RECIPE,
-    ReportingFilterTypes.ROLE
+    ReportingFilterTypes.ROLE,
+    ReportingFilterTypes.STATUS
   ];
 
   // Query search bar

components/automate-ui/src/app/types/types.ts

@@ -869,5 +869,6 @@ export enum ReportingFilterTypes {
   RECIPE = 'recipe',
   ROLE = 'role',
   END_TIME = 'end_time',
-  DATE_INTERVAL = 'date_interval'
+  DATE_INTERVAL = 'date_interval',
+  STATUS = 'status'
 }