From 71b4b983b9aee67919fe6c2fdf9374878898e94e Mon Sep 17 00:00:00 2001 From: Allen Wight Date: Mon, 13 Nov 2017 19:34:57 -0500 Subject: [PATCH 1/3] Use correct storage attribute, use metrics from last hour (not present) Position 0 has metrics from current hour, position 1 has metrics from last hour, current hour does not report anything useful :sob: --- .../resource-details.component.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/client/app/services/resource-details/resource-details.component.js b/client/app/services/resource-details/resource-details.component.js index 8a62947ab..483890e70 100644 --- 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') } } From f26f719d6e7e3e48fb1d785492c568a12da58fec Mon Sep 17 00:00:00 2001 From: Allen Wight Date: Mon, 13 Nov 2017 20:08:23 -0500 Subject: [PATCH 2/3] Ensure bytes to gb service returns a number --- client/app/services/usage-graphs/usage-graphs.service.js | 2 +- client/app/services/usage-graphs/usage-graphs.service.spec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/app/services/usage-graphs/usage-graphs.service.js b/client/app/services/usage-graphs/usage-graphs.service.js index e1f1c2fe1..46653ea47 100644 --- 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 index 4e6e15533..d3fd2b927 100644 --- 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) }) }) From 4fc9a01b593f42546fdd169a0793ebe04fc044f1 Mon Sep 17 00:00:00 2001 From: Allen Wight Date: Mon, 13 Nov 2017 20:10:00 -0500 Subject: [PATCH 3/3] Refactor graph component to break less Switching from assuming true to assuming false, ensures we don't throw erros running calculations on values that don't exist --- .../usage-graphs/usage-graphs.component.js | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/client/app/services/usage-graphs/usage-graphs.component.js b/client/app/services/usage-graphs/usage-graphs.component.js index 6673c9639..a5d6962e1 100644 --- 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 } }