This is an automated email from the ASF dual-hosted git repository.
nvazquez pushed a commit to branch 4.19
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.19 by this push:
new c9fea62276c [UI] Switch between allocated and used capacity on
dashboard (#10215)
c9fea62276c is described below
commit c9fea62276ca1d4d0886a3513702732c502cae6d
Author: Nicolas Vazquez <[email protected]>
AuthorDate: Thu Jan 23 11:06:38 2025 -0300
[UI] Switch between allocated and used capacity on dashboard (#10215)
* [UI] Switch between allocated and used capacity on dashboard
* Fix text
* Refactor
* Internationalize capacity text
---
ui/src/views/dashboard/CapacityDashboard.vue | 29 +++++++++++++++++++++++++---
1 file changed, 26 insertions(+), 3 deletions(-)
diff --git a/ui/src/views/dashboard/CapacityDashboard.vue
b/ui/src/views/dashboard/CapacityDashboard.vue
index dae53cf0015..c2461b5adce 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -174,6 +174,12 @@
<template #title>
<div class="center">
<h3><cloud-outlined /> {{ $t('label.compute') }}</h3>
+ <a-switch
+ :checked-children="$t('label.allocated') + ' ' +
$t('label.capacity')"
+ :un-checked-children="$t('label.used') + ' ' +
$t('label.capacity')"
+ v-model:checked="this.displayAllocatedCompute"
+ @change="val => { this.displayAllocatedCompute = val }"
+ />
</div>
</template>
<div>
@@ -184,15 +190,19 @@
</div>
<a-progress
status="active"
- :percent="statsMap[ctype]?.capacitytotal > 0 ? parseFloat(100.0
* statsMap[ctype]?.capacityused / statsMap[ctype]?.capacitytotal) : 0"
- :format="p => statsMap[ctype]?.capacitytotal > 0 ?
parseFloat(100.0 * statsMap[ctype]?.capacityused /
statsMap[ctype]?.capacitytotal).toFixed(2) + '%' : '0%'"
+ :percent="statsMap[ctype]?.capacitytotal > 0 ?
+ displayPercentUsedOrAllocated(statsMap[ctype]?.capacityused,
statsMap[ctype]?.capacityallocated, statsMap[ctype]?.capacitytotal)
+ : 0"
+ :format="p => statsMap[ctype]?.capacitytotal > 0 ?
+
displayPercentFormatUsedOrAllocated(statsMap[ctype]?.capacityused,
statsMap[ctype]?.capacityallocated, statsMap[ctype]?.capacitytotal)
+ : '0%'"
stroke-color="#52c41a"
size="small"
style="width:95%; float: left"
/>
<br/>
<div style="text-align: center">
- {{ displayData(ctype, statsMap[ctype]?.capacityused) }} {{
$t('label.allocated') }} | {{ displayData(ctype,
statsMap[ctype]?.capacitytotal) }} {{ $t('label.total') }}
+ {{ displayDataUsedOrAllocated(ctype,
statsMap[ctype]?.capacityused, statsMap[ctype]?.capacityallocated) }} {{
this.displayAllocatedCompute ? $t('label.allocated') : $t('label.used') }} | {{
displayData(ctype, statsMap[ctype]?.capacitytotal) }} {{ $t('label.total') }}
</div>
</div>
</div>
@@ -346,6 +356,7 @@ export default {
zones: [],
zoneSelected: {},
statsMap: {},
+ displayAllocatedCompute: false,
data: {
pods: 0,
clusters: 0,
@@ -402,6 +413,18 @@ export default {
}
return 'normal'
},
+ displayPercentUsedOrAllocated (used, allocated, total) {
+ var value = this.displayAllocatedCompute ? allocated : used
+ return parseFloat(100.0 * value / total)
+ },
+ displayPercentFormatUsedOrAllocated (used, allocated, total) {
+ var value = this.displayAllocatedCompute ? allocated : used
+ return parseFloat(100.0 * value / total).toFixed(2) + '%'
+ },
+ displayDataUsedOrAllocated (dataType, used, allocated) {
+ var value = this.displayAllocatedCompute ? allocated : used
+ return this.displayData(dataType, value)
+ },
displayData (dataType, value) {
if (!value) {
value = 0
