From b56e89f22e2e5ccfc199775d7194a14afe66a272 Mon Sep 17 00:00:00 2001
From: Allen Wight <awight@redhat.com>
Date: Tue, 28 Nov 2017 17:44:03 -0500
Subject: [PATCH] Ensure correct compliance icon, 7 day timeline, last hour
utilization
Resource details state also now truncates utilization available resources to 3 places Ends up vm metrics stream sometimes returns two entries per hour, that means we need to find the one from the last hour, hence the .find Set default timeline option to a 7 day period, this is then updated to better fit the events data Ensured compliance is capitalized
---
.../resource-details.component.js | 50 ++++++++++++-------
.../services/usage-graphs/usage-graphs.html | 6 +--
2 files changed, 34 insertions(+), 22 deletions(-)
diff --git a/client/app/services/resource-details/resource-details.component.js b/client/app/services/resource-details/resource-details.component.js
index 483890e70..a979ef3f9 100644
--- a/client/app/services/resource-details/resource-details.component.js
+++ b/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')
}
}
diff --git a/client/app/services/usage-graphs/usage-graphs.html b/client/app/services/usage-graphs/usage-graphs.html
index 55df15f73..faae15e1f 100644
--- a/client/app/services/usage-graphs/usage-graphs.html
+++ b/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>