From 9467063f5ea51289f66363b8d790111bf6d379df Mon Sep 17 00:00:00 2001
From: nvazquez <nicovazquez90@gmail.com>
Date: Mon, 20 Jan 2025 10:14:59 -0300
Subject: [PATCH 1/4] [UI] Switch between allocated and used capacity on
 dashboard

---
 ui/src/views/dashboard/CapacityDashboard.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index dae53cf0015b..2366b519a2df 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -174,6 +174,11 @@
         <template #title>
           <div class="center">
             <h3><cloud-outlined /> {{ $t('label.compute') }}</h3>
+            Display Allocated Capacity
+            <a-switch
+              v-model:checked="this.displayAllocatedCompute"
+              @change="val => { this.displayAllocatedCompute = val }"
+            />
           </div>
         </template>
         <div>
@@ -184,15 +189,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 ?
+                this.displayAllocatedCompute ? parseFloat(100.0 * statsMap[ctype]?.capacityallocated / statsMap[ctype]?.capacitytotal) : parseFloat(100.0 * statsMap[ctype]?.capacityused / statsMap[ctype]?.capacitytotal)
+                : 0"
+              :format="p => statsMap[ctype]?.capacitytotal > 0 ?
+                this.displayAllocatedCompute ? parseFloat(100.0 * statsMap[ctype]?.capacityallocated / statsMap[ctype]?.capacitytotal).toFixed(2) + '%' : parseFloat(100.0 * statsMap[ctype]?.capacityused / statsMap[ctype]?.capacitytotal).toFixed(2) + '%'
+                : '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') }}
+                {{ this.displayAllocatedCompute ? displayData(ctype, statsMap[ctype]?.capacityallocated) : displayData(ctype, statsMap[ctype]?.capacityused) }} {{ this.displayAllocatedCompute ? $t('label.allocated') : $t('label.used') }} | {{ displayData(ctype, statsMap[ctype]?.capacitytotal) }} {{ $t('label.total') }}
               </div>
             </div>
           </div>
@@ -346,6 +355,7 @@ export default {
       zones: [],
       zoneSelected: {},
       statsMap: {},
+      displayAllocatedCompute: false,
       data: {
         pods: 0,
         clusters: 0,

From bf13ec8c54c996a2ddbc2f6823a3825271097480 Mon Sep 17 00:00:00 2001
From: nvazquez <nicovazquez90@gmail.com>
Date: Mon, 20 Jan 2025 13:14:38 -0300
Subject: [PATCH 2/4] Fix text

---
 ui/src/views/dashboard/CapacityDashboard.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index 2366b519a2df..552eb6acfc9f 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -174,8 +174,9 @@
         <template #title>
           <div class="center">
             <h3><cloud-outlined /> {{ $t('label.compute') }}</h3>
-            Display Allocated Capacity
             <a-switch
+              :checked-children="$t('label.allocated') + ' Capacity'"
+              :un-checked-children="$t('label.used') + ' Capacity'"
               v-model:checked="this.displayAllocatedCompute"
               @change="val => { this.displayAllocatedCompute = val }"
             />

From d14002f177acc606fcf0137464b22ced5401142c Mon Sep 17 00:00:00 2001
From: nvazquez <nicovazquez90@gmail.com>
Date: Wed, 22 Jan 2025 21:39:46 -0300
Subject: [PATCH 3/4] Refactor

---
 ui/src/views/dashboard/CapacityDashboard.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index 552eb6acfc9f..f33c62af243b 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -191,10 +191,10 @@
               <a-progress
               status="active"
               :percent="statsMap[ctype]?.capacitytotal > 0 ?
-                this.displayAllocatedCompute ? parseFloat(100.0 * statsMap[ctype]?.capacityallocated / statsMap[ctype]?.capacitytotal) : parseFloat(100.0 * statsMap[ctype]?.capacityused / statsMap[ctype]?.capacitytotal)
+                displayPercentUsedOrAllocated(statsMap[ctype]?.capacityused, statsMap[ctype]?.capacityallocated, statsMap[ctype]?.capacitytotal)
                 : 0"
               :format="p => statsMap[ctype]?.capacitytotal > 0 ?
-                this.displayAllocatedCompute ? parseFloat(100.0 * statsMap[ctype]?.capacityallocated / statsMap[ctype]?.capacitytotal).toFixed(2) + '%' : parseFloat(100.0 * statsMap[ctype]?.capacityused / statsMap[ctype]?.capacitytotal).toFixed(2) + '%'
+                displayPercentFormatUsedOrAllocated(statsMap[ctype]?.capacityused, statsMap[ctype]?.capacityallocated, statsMap[ctype]?.capacitytotal)
                 : '0%'"
               stroke-color="#52c41a"
               size="small"
@@ -202,7 +202,7 @@
               />
               <br/>
               <div style="text-align: center">
-                {{ this.displayAllocatedCompute ? displayData(ctype, statsMap[ctype]?.capacityallocated) : displayData(ctype, statsMap[ctype]?.capacityused) }} {{ this.displayAllocatedCompute ? $t('label.allocated') : $t('label.used') }} | {{ 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>
@@ -413,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

From fa90e523dc832e77df3d8a4a879b0d0d62be4bfb Mon Sep 17 00:00:00 2001
From: nvazquez <nicovazquez90@gmail.com>
Date: Thu, 23 Jan 2025 10:36:10 -0300
Subject: [PATCH 4/4] Internationalize capacity text

---
 ui/src/views/dashboard/CapacityDashboard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index f33c62af243b..c2461b5adced 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -175,8 +175,8 @@
           <div class="center">
             <h3><cloud-outlined /> {{ $t('label.compute') }}</h3>
             <a-switch
-              :checked-children="$t('label.allocated') + ' Capacity'"
-              :un-checked-children="$t('label.used') + ' Capacity'"
+              :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 }"
             />