apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

dashboard: render human readable statistics with units

Browse Source 
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2019-09-25 14:01:38 +05:30
parent 1748e79ec4
commit 4cc8a6deb0
2 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/locales/en.json
View File

@ -1,4 +1,16 @@
{
"MEMORY": "MEMORY",
"CPU": "CPU",
"STORAGE": "STORAGE USED",
"STORAGE_ALLOCATED": "STORAGE ALLOCATED",
"VIRTUAL_NETWORK_PUBLIC_IP": "PUBLIC IP",
"PRIVATE_IP": "MANAGEMENT IP",
"DIRECT_ATTACHED_PUBLIC_IP": "SHARED NETWORK IP",
"SECONDARY_STORAGE": "SECONDARY STORAGE",
"CAPACITY_TYPE_LOCAL_STORAGE": "LOCAL STORAGE",
"VLAN": "VLAN/VNI",
"GPU": "GPU",
"CPU_CORE": "CPU CORES",
"Accounts": "Accounts",
"Affinity Groups": "Affinity Groups",
"Alerts": "Alerts",

35
ui/src/views/dashboard/CapacityDashboard.vue
View File

@ -64,10 +64,15 @@
:key="stat.type">
<chart-card :loading="loading">
<div class="capacity-dashboard-chart-card-inner">
<h4>{{ stat.name }}</h4>
<a-progress type="dashboard" :percent="Number(parseFloat(stat.percentused, 10).toFixed(2))" :width="100" />
<h4>{{ $t(stat.name) }}</h4>
<a-progress
type="dashboard"
:status="getStatus(parseFloat(stat.percentused))"
:percent="parseFloat(stat.percentused)"
:format="percent => `${parseFloat(stat.percentused, 10).toFixed(2)}%`"
:width="100" />
</div>
<template slot="footer"><span>{{ stat.capacityused }} / {{ stat.capacitytotal }}</span></template>
<template slot="footer"><center>{{ displayData(stat.name, stat.capacityused) }} / {{ displayData(stat.name, stat.capacitytotal) }}</center></template>
</chart-card>
</a-col>
</a-row>
@ -134,6 +139,30 @@ export default {
}, 1000)
},
methods: {
getStatus (value) {
if (value > 85) {
return 'exception'
}
if (value > 75) {
return 'active'
}
return 'normal'
},
displayData (dataType, value) {
switch (dataType) {
case 'CPU':
value = parseFloat(value / 1000.0, 10).toFixed(2) + ' GHz'
break
case 'MEMORY':
case 'STORAGE':
case 'STORAGE_ALLOCATED':
case 'SECONDARY_STORAGE':
case 'CAPACITY_TYPE_LOCAL_STORAGE':
value = parseFloat(value / (1024 * 1024 * 1024.0), 10).toFixed(2) + ' GB'
break
}
return value
},
fetchData () {
this.listZones()
this.listEvents()