etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[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
This commit is contained in:
Nicolas Vazquez 2025-01-23 11:06:38 -03:00 committed by GitHub
parent 4d9fd1b73f
commit c9fea62276
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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