Merge pull request #1237 from AllenBW/BZ/MASTER/#1512721-util-chart-r…

…efresh BZ#1512721-Use correct storage attribute, use metrics from last hour (not present)
ManageIQ · Nov 14, 2017 · ea753f3 · ea753f3
2 parents 92c59af + 4fc9a01
commit ea753f3
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 31 deletions.
diff --git a/client/app/services/resource-details/resource-details.component.js b/client/app/services/resource-details/resource-details.component.js
@@ -198,7 +198,7 @@ function ComponentController ($state, $stateParams, VmsService, lodash, EventNot
         capture_interval: 'hourly'
       }).then((response) => {
         vm.metrics = response
-        const lastHour = response.resources[0]
+        const lastHour = response.resources[1]
 
         vm.cpuUtil = UsageGraphsService.getChartConfig({
           'units': __('%'),
@@ -216,7 +216,7 @@ function ComponentController ($state, $stateParams, VmsService, lodash, EventNot
           'units': __('GB'),
           'chartId': 'storageChart',
           'label': __('used')
-        }, UsageGraphsService.convertBytestoGb(lastHour.derived_vm_allocated_disk_storage), UsageGraphsService.convertBytestoGb(lastHour.derived_vm_allocated_disk_storage))
+        }, UsageGraphsService.convertBytestoGb(lastHour.derived_vm_used_disk_storage), UsageGraphsService.convertBytestoGb(lastHour.derived_vm_allocated_disk_storage))
       })
 
       vm.diskUsage = response.disks.map((item) => {
@@ -449,13 +449,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 +487,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')
   }
 }
diff --git a/client/app/services/usage-graphs/usage-graphs.component.js b/client/app/services/usage-graphs/usage-graphs.component.js
@@ -16,31 +16,30 @@ export const UsageGraphsComponent = {
 /** @ngInject */
 function ComponentController () {
   const vm = this
-  vm.$onChanges = activate
-
-  function activate () {
+  vm.$onChanges = () => {
     angular.extend(vm, {
       cpuChart: vm.cpuChart || {data: {total: 0}},
       memoryChart: vm.memoryChart || {data: {total: 0}},
       storageChart: vm.storageChart || {data: {total: 0}},
-      cpuDataExists: true,
-      memoryDataExists: true,
-      storageDataExists: true,
-      emptyState: {icon: 'pficon pficon-help', title: 'No Information Available'}
-
+      cpuDataExists: false,
+      memoryDataExists: false,
+      storageDataExists: false,
+      emptyState: {icon: 'pficon pficon-help', title: __('No Information Available')}
     })
 
-    if (vm.cpuChart.data.total === 0) {
-      vm.cpuDataExists = false
+    if (vm.cpuChart.data.total > 0) {
+      vm.cpuDataExists = true
+      vm.availableCPU = vm.cpuChart.data.total - vm.cpuChart.data.used
     }
-    if (vm.memoryChart.data.total === 0) {
-      vm.memoryDataExists = false
+
+    if (vm.memoryChart.data.total > 0) {
+      vm.memoryDataExists = true
+      vm.availableMemory = vm.memoryChart.data.total - vm.memoryChart.data.used
     }
-    if (vm.storageChart.data.total === 0) {
-      vm.storageDataExists = false
+
+    if (vm.storageChart.data.total > 0) {
+      vm.storageDataExists = true
+      vm.availableStorage = vm.storageChart.data.total - vm.storageChart.data.used
     }
-    vm.availableCPU = vm.cpuChart.data.total - vm.cpuChart.data.used
-    vm.availableMemory = vm.memoryChart.data.total - vm.memoryChart.data.used
-    vm.availableStorage = vm.storageChart.data.total - vm.storageChart.data.used
   }
 }
diff --git a/client/app/services/usage-graphs/usage-graphs.service.js b/client/app/services/usage-graphs/usage-graphs.service.js
@@ -28,7 +28,7 @@ export function UsageGraphsFactory () {
   }
 
   function convertBytestoGb (bytes) {
-    return (bytes / 1073741824).toFixed(2)
+    return Number((bytes / 1073741824).toFixed(2))
   }
 
   return service

diff --git a/client/app/services/usage-graphs/usage-graphs.service.spec.js b/client/app/services/usage-graphs/usage-graphs.service.spec.js
@@ -18,6 +18,6 @@ describe('Service: UsageGraphsFactory', () => {
   })
   it('should convert bytes to gb', () => {
     const gb = service.convertBytestoGb(1073741824)
-    expect(gb).to.eq('1.00')
+    expect(gb).to.eq(1.00)
   })
 })