Add option to select last 24h compliance report

This commit adds the option to view the last 24h of compliance data. Compliance API endpoints were recently updated to return last 24h window of data if `start_time` and `end_time` are excluded from requests.

Signed-off-by: Scott Christopherson <scott@chef.io>

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

@@ -99,7 +99,8 @@ describe('ReportingOverviewComponent', () => {
       endDate: endDate,
       interval: 0,
       filters: [ {type: { name: 'node'}, value: { id: '1231'}},
-          {type: { name: 'platform'}, value: { text: 'ubuntu'}} ]
+          {type: { name: 'platform'}, value: { text: 'ubuntu'}} ],
+      last24h: false
     };
 
     describe('when selected tab is "Node Status"', () => {
@@ -418,7 +419,8 @@ describe('ReportingOverviewComponent', () => {
       startDate: moment(endDate).subtract(10, 'days'),
       endDate: endDate,
       interval: 0,
-      filters: [ {type: { name: 'node'}, value: { id: '1231'}}]
+      filters: [ {type: { name: 'node'}, value: { id: '1231'}}],
+      last24h: false
     };
     const data = [
       {
@@ -449,7 +451,8 @@ describe('ReportingOverviewComponent', () => {
       startDate: moment(endDate).subtract(10, 'days'),
       endDate: endDate,
       interval: 0,
-      filters: [ {type: { name: 'node'}, value: { id: '1231'}}]
+      filters: [ {type: { name: 'node'}, value: { id: '1231'}}],
+      last24h: false
     };
     const data = [
       {

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

@@ -81,7 +81,8 @@ describe('ReportingProfileComponent', () => {
         startDate: moment(endDate).subtract(10, 'days'),
         endDate: endDate,
         interval: 0,
-        filters: [ ]
+        filters: [ ],
+        last24h: false
       };
       component.getNodes(reportQuery, {profileId: '123', controlId: '321'});
 
@@ -92,7 +93,8 @@ describe('ReportingProfileComponent', () => {
         filters: [
           {type: { name: 'profile_id' }, value: { text: '123'} },
           {type: { name: 'control_id' }, value: { text: '321'} }
-        ]
+        ],
+        last24h: false
       };
 
       expect(statsService.getNodes).toHaveBeenCalledWith(

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

@@ -66,10 +66,24 @@
       <chef-icon>filter_list</chef-icon>
       <span>{{ filters.length }}</span>
     </chef-button>
-    <chef-button class="calendar-btn" secondary (click)="toggleCalendar()">
-      <chef-icon>date_range</chef-icon>
-      <span>{{ date | datetime: CHEF_SHORT_DATE }}</span>
+    <chef-button class="calendar-menu-btn" secondary (click)="toggleCalendarMenu()">
+      <span *ngIf="last24h">Last 24 hours</span>
+      <ng-container *ngIf="!last24h">
+        <chef-icon>date_range</chef-icon>
+        <span>{{ date | datetime: CHEF_SHORT_DATE }}</span>
+      </ng-container>
     </chef-button>
+    <chef-dropdown class="calendar-menu-dropdown" [attr.visible]="calendarMenuVisible">
+      <chef-click-outside omit="calendar-menu-btn" (clickOutside)="hideCalendarMenu()">
+        <chef-button class="select-last-btn" secondary (click)="handleSelectLast24()">
+          Last 24 hours
+        </chef-button>
+        <chef-button class="calendar-btn" secondary (click)="showCalendar()">
+          <chef-icon>date_range</chef-icon>
+          <span>{{ date | datetime: CHEF_SHORT_DATE }}</span>
+        </chef-button>
+      </chef-click-outside>
+    </chef-dropdown>
     <chef-dropdown class="calendar-dropdown" [attr.visible]="calendarVisible">
       <chef-click-outside omit="calendar-btn" (clickOutside)="hideCalendar()">
         <chef-calendar

components/automate-ui/src/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.scss

@@ -50,6 +50,19 @@
       padding: 0.5em;
       z-index: 1;
     }
+
+    .calendar-menu-dropdown {
+      top: calc(100% - 0.5em);
+      right: 1em;
+      padding: 0;
+
+      chef-button {
+        margin: 0;
+        width: 100%;
+        border: none;
+        border-radius: 0;
+      }
+    }
   }
 }
 

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

@@ -29,6 +29,7 @@ import { DateTime } from 'app/helpers/datetime/datetime';
 })
 export class ReportingSearchbarComponent implements OnInit {
   @Input() date = moment().utc();
+  @Input() last24h = true;
   @Input() filters: FilterC[] = [];
   @Input() filterTypes = [];
   @Input() filterValues = [];
@@ -38,6 +39,7 @@ export class ReportingSearchbarComponent implements OnInit {
   @Output() filterRemoved = new EventEmitter();
   @Output() filterAdded = new EventEmitter();
   @Output() dateChanged = new EventEmitter();
+  @Output() last24Selected = new EventEmitter();
 
   @ViewChild('keyInput', { static: true }) keyInput: ElementRef;
   @ViewChild('valInput', { static: true }) valInput: ElementRef;
@@ -48,6 +50,7 @@ export class ReportingSearchbarComponent implements OnInit {
   public CHEF_SHORT_DATE = DateTime.CHEF_SHORT_DATE;
 
   filterTypesCategories = [];
+  calendarMenuVisible = false;
   calendarVisible = false;
   keyInputVisible = true;
   valInputVisible = false;
@@ -116,6 +119,18 @@ export class ReportingSearchbarComponent implements OnInit {
     this.filtersVisible = true;
   }
 
+  toggleCalendarMenu() {
+    this.calendarMenuVisible = !this.calendarMenuVisible;
+  }
+
+  hideCalendarMenu() {
+    this.calendarMenuVisible = false;
+  }
+
+  showCalendarMenu() {
+    this.calendarMenuVisible = true;
+  }
+
   toggleCalendar() {
     this.calendarVisible = !this.calendarVisible;
   }
@@ -128,6 +143,10 @@ export class ReportingSearchbarComponent implements OnInit {
     this.calendarVisible = true;
   }
 
+  handleSelectLast24() {
+    this.last24Selected.emit();
+  }
+
   handleFocus(event: Event): void {
     event.stopPropagation();
     this.suggestionsVisibleStream.next(true);

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

@@ -10,13 +10,15 @@
         <app-reporting-searchbar
           [date]="endDate$ | async"
           [filters]="filters$ | async"
+          [last24h]="(reportQuery.state | async).last24h"
           [filterTypes]="availableFilterTypes"
           [filterValues]="availableFilterValues"
           (suggestValues)="onSuggestValues($event)"
           (filtersCleared)="onFiltersClear($event)"
           (filterRemoved)="onFilterRemoved($event)"
           (filterAdded)="onFilterAdded($event)"
-          (dateChanged)="onEndDateChanged($event)">
+          (dateChanged)="onEndDateChanged($event)"
+          (last24Selected)="onLast24Selected()">
         </app-reporting-searchbar>
         <div class="download-report">
           <chef-button class="dropdown-toggle" secondary (click)="toggleDownloadDropdown()">

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

@@ -92,7 +92,8 @@ describe('ReportingComponent', () => {
         startDate: start,
         endDate: originalDate,
         interval: 0,
-        filters: []
+        filters: [],
+        last24h: false
       } as ReportQuery);
       fixture.detectChanges();
 
@@ -150,21 +151,6 @@ describe('ReportingComponent', () => {
   });
 
   describe('onEndDateChanged', () => {
-    it('no date set when today is selected with date object', () => {
-      spyOn(router, 'navigate');
-      const endDate = new Date();
-      const event = {detail: endDate};
-      component.onEndDateChanged(event);
-      expect(router.navigate).toHaveBeenCalledWith([], {queryParams: { }});
-    });
-
-    it('no date set when today is selected with string', () => {
-      spyOn(router, 'navigate');
-      const event = {detail: moment().utc().format('YYYY-MM-DD')};
-      component.onEndDateChanged(event);
-      expect(router.navigate).toHaveBeenCalledWith([], {queryParams: { }});
-    });
-
     it('specific string date', () => {
       spyOn(router, 'navigate');
       const event = {detail: '2017-10-23'};
@@ -180,6 +166,14 @@ describe('ReportingComponent', () => {
     });
   });
 
+  describe('onLast24Selected', () => {
+    it('no date set when last 24 hours is selected', () => {
+      spyOn(router, 'navigate');
+      component.onLast24Selected();
+      expect(router.navigate).toHaveBeenCalledWith([], {queryParams: {}});
+    });
+  });
+
   describe('getSuggestions()', () => {
     describe('when the item has a version', () => {
       it('sets the title to text, version values to display to the user', () => {
@@ -189,7 +183,8 @@ describe('ReportingComponent', () => {
           endDate: moment(0).utc().startOf('day'),
           startDate: moment(0).utc().startOf('day'),
           interval: 0,
-          filters: []
+          filters: [],
+          last24h: false
         };
         spyOn(suggestionsService, 'getSuggestions').and.returnValue(observableOf([
           {text: 'dev sec baseline, v2.0', version: '2.0'}
@@ -210,7 +205,8 @@ describe('ReportingComponent', () => {
           endDate: moment(0).utc().startOf('day'),
           startDate: moment(0).utc().startOf('day'),
           interval: 0,
-          filters: []
+          filters: [],
+          last24h: false
         };
         spyOn(suggestionsService, 'getSuggestions').and.returnValue(observableOf([
           {text: 'teal-spohn'}
@@ -233,7 +229,8 @@ describe('ReportingComponent', () => {
       filters: [
         {type: {name: 'Node'}, value: { id: '1231' }},
         {type: {name: 'Platform'}, value: { id: 'ubuntu'}}
-      ]
+      ],
+      last24h: false
     };
     const reportingSummaryData: ReportingSummary = {
       'stats': {
@@ -292,7 +289,8 @@ describe('ReportingComponent', () => {
         filters: [
           {type: {name: 'chef_tags'}, value: { text: '123' }},
           {type: {name: 'chef_tags'}, value: { text: '456'}}
-        ]
+        ],
+        last24h: true
       };
       component.applyParamFilters([
         {type: 'chef_tags', text: '123', type_key: ''},
@@ -309,7 +307,8 @@ describe('ReportingComponent', () => {
         interval: 0,
         filters: [
           {type: {name: 'chef_tags'}, value: { text: '123' }}
-        ]
+        ],
+        last24h: true
       };
 
       component.applyParamFilters([{type: 'chef_tags', text: '123', type_key: ''}]);
@@ -331,7 +330,8 @@ describe('ReportingComponent', () => {
         interval: interval,
         filters: [
           {type: {name: 'chef_tags'}, value: { text: '123' }}
-        ]
+        ],
+        last24h: false
       };
 
       component.applyParamFilters([
@@ -354,7 +354,8 @@ describe('ReportingComponent', () => {
         interval: interval,
         filters: [
           {type: {name: 'chef_tags'}, value: { text: '123' }}
-        ]
+        ],
+        last24h: true
       };
 
       component.applyParamFilters([
@@ -377,7 +378,8 @@ describe('ReportingComponent', () => {
         interval: interval,
         filters: [
           {type: {name: 'chef_tags'}, value: { text: '123' }}
-        ]
+        ],
+        last24h: true
       };
 
       component.applyParamFilters([
@@ -400,7 +402,8 @@ describe('ReportingComponent', () => {
         interval: interval,
         filters: [
           {type: {name: 'chef_tags'}, value: { text: '123' }}
-        ]
+        ],
+        last24h: true
       };
 
       component.applyParamFilters([
@@ -423,7 +426,8 @@ describe('ReportingComponent', () => {
         interval: interval,
         filters: [
           {type: {name: 'chef_tags'}, value: { text: '123' }}
-        ]
+        ],
+        last24h: true
       };
 
       component.applyParamFilters([

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

@@ -313,11 +313,15 @@ export class ReportingComponent implements OnInit, OnDestroy {
     const queryParams = {...this.route.snapshot.queryParams};
     const endDate = moment.utc(event.detail);
 
-    if (moment().utc().format('YYYY-MM-DD') === moment(endDate).format('YYYY-MM-DD')) {
-      delete queryParams['end_time'];
-    } else {
-      queryParams['end_time'] = moment(endDate).format('YYYY-MM-DD');
-    }
+    queryParams['end_time'] = moment(endDate).format('YYYY-MM-DD');
+
+    this.router.navigate([], {queryParams});
+  }
+
+  onLast24Selected() {
+    const queryParams = {...this.route.snapshot.queryParams};
+
+    delete queryParams['end_time'];
 
     this.router.navigate([], {queryParams});
   }
@@ -468,6 +472,7 @@ export class ReportingComponent implements OnInit, OnDestroy {
     reportQuery.endDate = this.getEndDate(urlFilters);
     reportQuery.startDate = this.reportQuery.findTimeIntervalStartDate(
       reportQuery.interval, reportQuery.endDate);
+    reportQuery.last24h = this.isLast24h(urlFilters);
 
     this.reportQuery.setState(reportQuery);
   }
@@ -517,4 +522,8 @@ export class ReportingComponent implements OnInit, OnDestroy {
   convertMomentToDate(m: moment.Moment): Date {
     return new Date(Date.UTC(m.year(), m.month(), m.date()));
   }
+
+  isLast24h(urlFilters: Chicklet[]): boolean {
+    return !urlFilters.some((filter: Chicklet) => filter.type === 'end_time');
+  }
 }

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

@@ -69,7 +69,8 @@ describe('ReportDataService', () => {
         startDate: moment(endDate).subtract(10, 'days'),
         endDate: endDate,
         interval: 0,
-        filters: [ ]
+        filters: [ ],
+        last24h: false
       };
       const data = {stats: {}};
       spyOn(statsService, 'getSummary').and.returnValue(observableOf(data));
@@ -87,7 +88,8 @@ describe('ReportDataService', () => {
         startDate: moment(endDate).subtract(10, 'days'),
         endDate: endDate,
         interval: 0,
-        filters: [ ]
+        filters: [ ],
+        last24h: false
       };
       const params = {};
       const data = [];
@@ -109,7 +111,8 @@ describe('ReportDataService', () => {
         startDate: moment(endDate).subtract(10, 'days'),
         endDate: endDate,
         interval: 0,
-        filters: [ ]
+        filters: [ ],
+        last24h: false
       };
       const params = {};
       const data = [];
@@ -131,7 +134,8 @@ describe('ReportDataService', () => {
         startDate: moment(endDate).subtract(10, 'days'),
         endDate: endDate,
         interval: 0,
-        filters: [ ]
+        filters: [ ],
+        last24h: false
       };
       const data = [];
       spyOn(statsService, 'getControls').and.returnValue(observableOf(data));