Merge pull request ManageIQ#1284 from AllenBW/bug/master/#1516807-update-resource-details

Ensure correct compliance icon, 7 day timeline, last hour utilization

Author: chriskacerguis

client/app/services/resource-details/resource-details.component.js

@@ -95,6 +95,14 @@ function ComponentController ($state, $stateParams, VmsService, lodash, EventNot
     vm.today = new Date()
     vm.presentDate = new Date()
     vm.lastWeekDay = new Date(vm.presentDate.setDate(vm.presentDate.getDate() - 7))
+    vm.tlOptions = {
+      start: new Date(vm.lastWeekDay),
+      end: new Date(vm.today),
+      eventClick: tlTooltip,
+      eventGrouping: 60000,
+      minScale: 0.234,
+      maxScale: 1440
+    }
     resolveData()
   }
 
@@ -198,14 +206,17 @@ function ComponentController ($state, $stateParams, VmsService, lodash, EventNot
         capture_interval: 'hourly'
       }).then((response) => {
         vm.metrics = response
-        const lastHour = response.resources[1]
-
-        vm.cpuUtil = UsageGraphsService.getChartConfig({
-          'units': __('%'),
-          'chartId': 'cpuChart',
-          'label': __('used')
-        }, (lastHour.cpu_usage_rate_average).toPrecision(3), 100)
+        const lastHour = response.resources.find((item) => {
+          return new Date(item.timestamp).getUTCHours() === (vm.today.getUTCHours() - 1)
+        })
 
+        if (lastHour.cpu_usage_rate_average) {
+          vm.cpuUtil = UsageGraphsService.getChartConfig({
+            'units': __('%'),
+            'chartId': 'cpuChart',
+            'label': __('used')
+          }, (lastHour.cpu_usage_rate_average).toPrecision(3), 100)
+        }
         vm.memUtil = UsageGraphsService.getChartConfig({
           'units': __('GB'),
           'chartId': 'memoryChart',
@@ -266,9 +277,10 @@ function ComponentController ($state, $stateParams, VmsService, lodash, EventNot
         : `${retirementDate.getFullYear()}-${retirementDate.toString().split(' ')[1]}-${retirementDate.getDate()}`
       vm.retirement.notifications[0].iconClass = angular.isUndefined(response.retires_on) ? ''
         : `fa fa-clock-o`
-      vm.compliance.notifications[0].count = angular.isUndefined(response.last_compliance_status) ? `Never Verified` : response.last_compliance_status
+      vm.compliance.notifications[0].count = angular.isUndefined(response.last_compliance_status) ? `Never Verified`
+        : lodash.capitalize(response.last_compliance_status)
       vm.compliance.notifications[0].iconClass = angular.isUndefined(response.last_compliance_status) ? ''
-        : response.last_compliance_status === 'compliant' ? 'pficon pficon-error-circle-o' : 'pficon pficon-ok'
+        : response.last_compliance_status ? 'pficon pficon-ok' : 'pficon pficon-error-circle-o'
       vm.vmDetails.complianceHistory = (vm.vmDetails.compliances.length > 0 ? vm.availableText : vm.notAvailable)
 
       getListActions()
@@ -449,13 +461,13 @@ function ComponentController ($state, $stateParams, VmsService, lodash, EventNot
     const fontSize = 12 // in pixels
     const tooltipWidth = 9 // in rem
     const tooltip = d3
-      .select('body')
-      .append('div')
-      .attr('class', 'popover fade bottom in')
-      .attr('role', 'tooltip')
-      .on('mouseleave', () => {
-        d3.select('body').selectAll('.popover').remove()
-      })
+    .select('body')
+    .append('div')
+    .attr('class', 'popover fade bottom in')
+    .attr('role', 'tooltip')
+    .on('mouseleave', () => {
+      d3.select('body').selectAll('.popover').remove()
+    })
     const rightOrLeftLimit = fontSize * tooltipWidth
     const direction = d3.event.pageX > rightOrLeftLimit ? 'right' : 'left'
     const left = direction === 'right' ? d3.event.pageX - rightOrLeftLimit : d3.event.pageX
@@ -487,8 +499,8 @@ function ComponentController ($state, $stateParams, VmsService, lodash, EventNot
       `
     )
     tooltip
-      .style('left', `${left}px`)
-      .style('top', `${d3.event.pageY + 8}px`)
-      .style('display', 'block')
+    .style('left', `${left}px`)
+    .style('top', `${d3.event.pageY + 8}px`)
+    .style('display', 'block')
   }
 }

client/app/services/usage-graphs/usage-graphs.component.spec.js

@@ -54,9 +54,9 @@ describe('Component: usageGraphs', () => {
   })
   it('Chart availble values match', () => {
     const graphs = element[0].querySelectorAll('.metric-number')
-    expect(graphs[0].innerHTML).to.eq('1000')
-    expect(graphs[1].innerHTML).to.eq('6')
-    expect(graphs[2].innerHTML).to.eq('38')
+    expect(graphs[0].innerHTML).to.eq('1,000.000')
+    expect(graphs[1].innerHTML).to.eq('6.000')
+    expect(graphs[2].innerHTML).to.eq('38.000')
   })
 })
 

client/app/services/usage-graphs/usage-graphs.html

@@ -7,7 +7,7 @@ <h2>{{ 'Utilization' | translate}}
         <div class="metric-title" translate>CPU</div>
         <div ng-if="vm.cpuDataExists">
             <div class="metric-details-container">
-                <span class="metric-number">{{vm.availableCPU}}</span>
+                <span class="metric-number">{{vm.availableCPU | number:3}}</span>
                 <span class="metric-details">
                 <p>{{vm.cpuChart.config.units}} {{'Available' | translate}}</p>
                 <p>{{'of' | translate }} {{vm.cpuChart.data.total}}{{vm.cpuChart.config.units}}</p>
@@ -23,7 +23,7 @@ <h2>{{ 'Utilization' | translate}}
         <div class="metric-title" translate>Memory</div>
         <div ng-if="vm.memoryDataExists">
             <div class="metric-details-container">
-                <span class="metric-number">{{vm.availableMemory}}</span>
+                <span class="metric-number">{{vm.availableMemory | number:3}}</span>
                 <span class="metric-details">
                     <p>{{vm.memoryChart.config.units}} {{'Available' | translate}}</p>
                     <p>{{'of' | translate }} {{vm.memoryChart.data.total}}{{vm.memoryChart.config.units}}</p>
@@ -39,7 +39,7 @@ <h2>{{ 'Utilization' | translate}}
         <div class="metric-title" translate>Storage</div>
         <div ng-if="vm.storageDataExists">
             <div class="metric-details-container">
-                <span class="metric-number">{{vm.availableStorage}}</span>
+                <span class="metric-number">{{vm.availableStorage | number:3}}</span>
                 <span class="metric-details">
                     <p>{{vm.storageChart.config.units}} {{'Available' | translate}}</p>
                     <p>{{'of' | translate }} {{vm.storageChart.data.total}}{{vm.storageChart.config.units}}</p>