From e2142c099308f13e77a99017f820d9ffddf5503e Mon Sep 17 00:00:00 2001
From: Volker Theile <vtheile@suse.com>
Date: Mon, 19 Aug 2024 17:32:34 +0200
Subject: [PATCH] Reserved storage size in the dashboard isn't useful

... display allocated/scheduled storage instead.

Relates to: https://github.com/harvester/harvester/issues/6362

Signed-off-by: Volker Theile <vtheile@suse.com>
(cherry picked from commit bc0a6716ba23f7e7cf59ea36846f52a998c22f25)
---
 .../HarvesterHostBasic.vue                    |   2 +-
 .../formatters/HarvesterStorageUsed.vue       | 105 +++++++++---------
 .../list/harvesterhci.io.dashboard.vue        |  99 ++++++++---------
 pkg/harvester/list/harvesterhci.io.host.vue   |   2 +-
 shell/assets/translations/en-us.yaml          |   1 +
 shell/components/HardwareResourceGauge.vue    |  14 ++-
 6 files changed, 116 insertions(+), 107 deletions(-)

diff --git a/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostBasic.vue b/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostBasic.vue
index 3f7e86c673b..28d9f486922 100644
--- a/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostBasic.vue
+++ b/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostBasic.vue
@@ -268,7 +268,7 @@ export default {
           <HarvesterStorageUsed
             :row="value"
             :resource-name="t('harvester.host.detail.storage')"
-            :show-reserved="true"
+            :show-allocated="true"
           />
         </div>
       </div>
diff --git a/pkg/harvester/formatters/HarvesterStorageUsed.vue b/pkg/harvester/formatters/HarvesterStorageUsed.vue
index 97ec63ea3dc..edd4d417e27 100644
--- a/pkg/harvester/formatters/HarvesterStorageUsed.vue
+++ b/pkg/harvester/formatters/HarvesterStorageUsed.vue
@@ -23,77 +23,76 @@ export default {
       default: ''
     },
 
-    showReserved: {
+    showAllocated: {
       type:    Boolean,
       default: false,
     },
   },
 
-  data() {
-    return {};
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    this.longhornSettings = await this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.SETTINGS });
   },
 
-  computed: {
-    usage() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`) || {};
+  data() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const longhornSettings = this.$store.getters[`${ inStore }/all`](LONGHORN.SETTINGS) || [];
 
-      return longhornNode?.used || 0;
-    },
+    return { longhornSettings };
+  },
 
-    reserved() {
+  computed: {
+    storageStats() {
+      const stats = {
+        used:      0,
+        scheduled: 0,
+        maximum:   0,
+        reserved:  0,
+        total:     0
+      };
       const inStore = this.$store.getters['currentProduct'].inStore;
-      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`);
-      let reserved = 0;
+      const node = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`) || {};
+      const storageOverProvisioningPercentageSetting = this.longhornSettings.find(s => s.id === 'longhorn-system/storage-over-provisioning-percentage');
+      const disks = node?.spec?.disks || {};
+      const diskStatus = node?.status?.diskStatus || {};
 
-      const disks = longhornNode?.spec?.disks || {};
+      stats.used += node?.spec?.allowScheduling ? node.used : 0;
 
-      Object.values(disks).map((disk) => {
-        if (disk.allowScheduling) {
-          reserved += disk.storageReserved;
-        }
+      Object.keys(disks).map((key) => {
+        stats.scheduled += node?.spec?.allowScheduling ? (diskStatus[key]?.storageScheduled || 0) : 0;
+        stats.reserved += disks[key]?.storageReserved || 0;
       });
-
-      return reserved;
-    },
-
-    total() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `longhorn-system/${ this.row.id }`);
-      let out = 0;
-
-      const diskStatus = longhornNode?.status?.diskStatus || {};
-
-      Object.values(diskStatus).map((disk) => {
-        if (disk?.storageMaximum) {
-          out += disk.storageMaximum;
-        }
+      Object.values(diskStatus).map((diskStat) => {
+        stats.maximum += diskStat?.storageMaximum || 0;
       });
 
-      return out;
+      stats.total = ((stats.maximum - stats.reserved) * Number(storageOverProvisioningPercentageSetting?.value ?? 0)) / 100;
+
+      return stats;
     },
 
     units() {
-      const exponent = exponentNeeded(this.total, 1024);
+      const exponent = exponentNeeded(this.storageStats.maximum, 1024);
 
       return `${ UNITS[exponent] }iB`;
     },
 
     used() {
-      let out = this.formatter(this.usage || 0);
+      let out = this.formatter(this.storageStats.used);
 
       if (!Number.parseFloat(out) > 0) {
-        out = this.formatter(this.usage || 0, { canRoundToZero: false });
+        out = this.formatter(this.storageStats.used, { canRoundToZero: false });
       }
 
       return out;
     },
 
-    formatReserved() {
-      let out = this.formatter(this.reserved || 0);
+    formatAllocated() {
+      let out = this.formatter(this.storageStats.scheduled);
 
       if (!Number.parseFloat(out) > 0) {
-        out = this.formatter(this.reserved || 0, { canRoundToZero: false });
+        out = this.formatter(this.storageStats.scheduled, { canRoundToZero: false });
       }
 
       return out;
@@ -102,15 +101,15 @@ export default {
     usedAmountTemplateValues() {
       return {
         used:  this.used,
-        total: this.formatter(this.total || 0),
+        total: this.formatter(this.storageStats.maximum),
         unit:  this.units,
       };
     },
 
-    reservedAmountTemplateValues() {
+    allocatedAmountTemplateValues() {
       return {
-        used:  this.formatReserved,
-        total: this.formatter(this.total || 0),
+        used:  this.formatAllocated,
+        total: this.formatter(this.storageStats.total),
         unit:  this.units,
       };
     },
@@ -118,7 +117,7 @@ export default {
 
   methods: {
     formatter(value, format) {
-      const minExponent = exponentNeeded(this.total, 1024);
+      const minExponent = exponentNeeded(this.storageStats.maximum, 1024);
       const formatOptions = {
         addSuffix: false,
         increment: 1024,
@@ -137,21 +136,21 @@ export default {
 <template>
   <div>
     <div
-      v-if="showReserved"
+      v-if="showAllocated"
     >
       <ConsumptionGauge
-        :capacity="total"
-        :used="reserved"
+        :capacity="storageStats.total"
+        :used="storageStats.scheduled"
         :units="units"
         :number-formatter="formatter"
         :resource-name="resourceName"
       >
         <template #title="{formattedPercentage}">
           <span>
-            {{ t('clusterIndexPage.hardwareResourceGauge.reserved') }}
+            {{ t('clusterIndexPage.hardwareResourceGauge.allocated') }}
           </span>
           <span class="precent-data">
-            {{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
+            {{ t('node.detail.glance.consumptionGauge.amount', allocatedAmountTemplateValues) }}
             <span class="ml-10 percentage">
               /&nbsp;{{ formattedPercentage }}
             </span>
@@ -160,13 +159,13 @@ export default {
       </ConsumptionGauge>
     </div>
     <ConsumptionGauge
-      :capacity="total"
-      :used="usage"
+      :capacity="storageStats.maximum"
+      :used="storageStats.used"
       :units="units"
       :number-formatter="formatter"
-      :resource-name="showReserved ? '' : resourceName"
+      :resource-name="showAllocated ? '' : resourceName"
       :class="{
-        'mt-10': showReserved,
+        'mt-10': showAllocated,
       }"
     >
       <template #title="{formattedPercentage}">
diff --git a/pkg/harvester/list/harvesterhci.io.dashboard.vue b/pkg/harvester/list/harvesterhci.io.dashboard.vue
index 8cf0219ef8a..9e2f68bec96 100644
--- a/pkg/harvester/list/harvesterhci.io.dashboard.vue
+++ b/pkg/harvester/list/harvesterhci.io.dashboard.vue
@@ -134,15 +134,16 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
 
     const hash = {
-      vms:          this.fetchClusterResources(HCI.VM),
-      nodes:        this.fetchClusterResources(NODE),
-      events:       this.fetchClusterResources(EVENT),
-      metricNodes:  this.fetchClusterResources(METRIC.NODE),
-      settings:     this.fetchClusterResources(HCI.SETTING),
-      services:     this.fetchClusterResources(SERVICE),
-      metric:       this.fetchClusterResources(METRIC.NODE),
-      longhornNode: this.fetchClusterResources(LONGHORN.NODES) || [],
-      _pods:        this.$store.dispatch('harvester/findAll', { type: POD }),
+      vms:              this.fetchClusterResources(HCI.VM),
+      nodes:            this.fetchClusterResources(NODE),
+      events:           this.fetchClusterResources(EVENT),
+      metricNodes:      this.fetchClusterResources(METRIC.NODE),
+      settings:         this.fetchClusterResources(HCI.SETTING),
+      services:         this.fetchClusterResources(SERVICE),
+      metric:           this.fetchClusterResources(METRIC.NODE),
+      longhornNodes:    this.fetchClusterResources(LONGHORN.NODES),
+      longhornSettings: this.fetchClusterResources(LONGHORN.SETTINGS),
+      _pods:            this.$store.dispatch('harvester/findAll', { type: POD }),
     };
 
     (this.accessibleResources || []).map((a) => {
@@ -155,6 +156,10 @@ export default {
       hash.addons = this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS });
     }
 
+    if (this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.NODES)) {
+      this.hasLonghornSchema = true;
+    }
+
     const res = await allHash(hash);
 
     for ( const k in res ) {
@@ -226,6 +231,7 @@ export default {
       showClusterMetrics:     false,
       showVmMetrics:          false,
       enabledMonitoringAddon: false,
+      hasLonghornSchema:      false,
     };
   },
 
@@ -305,8 +311,7 @@ export default {
 
     currentVersion() {
       const inStore = this.$store.getters['currentProduct'].inStore;
-      const settings = this.$store.getters[`${ inStore }/all`](HCI.SETTING);
-      const setting = settings.find( S => S.id === 'server-version');
+      const setting = this.$store.getters[`${ inStore }/byId`](HCI.SETTING, 'server-version');
 
       return setting?.value || setting?.default;
     },
@@ -364,53 +369,46 @@ export default {
       return out;
     },
 
-    storageUsage() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const longhornNodes = this.$store.getters[`${ inStore }/all`](LONGHORN.NODES) || [];
-
-      return longhornNodes.filter(node => node.spec?.allowScheduling).reduce((total, node) => {
-        return total + node.used;
-      }, 0);
-    },
-
-    storageReservedTotal() {
-      let out = 0;
-
-      (this.longhornNode || []).filter(node => node.spec?.allowScheduling).forEach((node) => {
+    storageStats() {
+      const storageOverProvisioningPercentageSetting = this.longhornSettings.find(s => s.id === 'longhorn-system/storage-over-provisioning-percentage');
+      const stats = this.longhornNodes.reduce((total, node) => {
         const disks = node?.spec?.disks || {};
-
-        Object.values(disks).map((disk) => {
-          if (disk.allowScheduling) {
-            out += disk.storageReserved;
-          }
-        });
-      });
-
-      return out;
-    },
-
-    storageTotal() {
-      let out = 0;
-
-      (this.longhornNode || []).forEach((node) => {
         const diskStatus = node?.status?.diskStatus || {};
 
-        Object.values(diskStatus).map((disk) => {
-          if (disk?.storageMaximum) {
-            out += disk.storageMaximum;
-          }
+        total.used += node?.spec?.allowScheduling ? node.used : 0;
+
+        Object.keys(disks).map((key) => {
+          total.scheduled += node?.spec?.allowScheduling ? (diskStatus[key]?.storageScheduled || 0) : 0;
+          total.reserved += disks[key]?.storageReserved || 0;
         });
+        Object.values(diskStatus).map((diskStat) => {
+          total.maximum += diskStat?.storageMaximum || 0;
+        });
+
+        return total;
+      }, {
+        used:      0,
+        scheduled: 0,
+        maximum:   0,
+        reserved:  0,
+        total:     0
       });
 
-      return out;
+      stats.total = ((stats.maximum - stats.reserved) * Number(storageOverProvisioningPercentageSetting?.value ?? 0)) / 100;
+
+      return stats;
     },
 
     storageUsed() {
-      return this.createMemoryValues(this.storageTotal, this.storageUsage);
+      const stats = this.storageStats;
+
+      return this.createMemoryValues(stats.maximum, stats.used);
     },
 
-    storageReserved() {
-      return this.createMemoryValues(this.storageTotal, this.storageReservedTotal);
+    storageAllocated() {
+      const stats = this.storageStats;
+
+      return this.createMemoryValues(stats.total, stats.scheduled);
     },
 
     vmEvents() {
@@ -646,7 +644,7 @@ export default {
       <div
         class="hardware-resource-gauges"
         :class="{
-          live: !storageTotal,
+          live: !hasLonghornSchema,
         }"
       >
         <HardwareResourceGauge
@@ -660,10 +658,11 @@ export default {
           :used="ramUsed"
         />
         <HardwareResourceGauge
-          v-if="storageTotal"
+          v-if="hasLonghornSchema"
           :name="t('harvester.dashboard.hardwareResourceGauge.storage')"
           :used="storageUsed"
-          :reserved="storageReserved"
+          :reserved="storageAllocated"
+          :reserved-title="t('clusterIndexPage.hardwareResourceGauge.allocated')"
         />
       </div>
     </template>
diff --git a/pkg/harvester/list/harvesterhci.io.host.vue b/pkg/harvester/list/harvesterhci.io.host.vue
index 4705d06a559..2d992703cdc 100644
--- a/pkg/harvester/list/harvesterhci.io.host.vue
+++ b/pkg/harvester/list/harvesterhci.io.host.vue
@@ -120,7 +120,7 @@ export default {
           labelKey:      'tableHeaders.storage',
           value:         'id',
           formatter:     'HarvesterStorageUsed',
-          formatterOpts: { showReserved: true },
+          formatterOpts: { showAllocated: true },
         };
 
         out.splice(-1, 0, storageHeader);
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 0f1b4113086..3badc7a46e3 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -1964,6 +1964,7 @@ clusterIndexPage:
     ram: Memory
     used: Used
     reserved: Reserved
+    allocated: Allocated
     units:
       cores: |-
         {count, plural,
diff --git a/shell/components/HardwareResourceGauge.vue b/shell/components/HardwareResourceGauge.vue
index 8a2ac37791e..176444a5477 100644
--- a/shell/components/HardwareResourceGauge.vue
+++ b/shell/components/HardwareResourceGauge.vue
@@ -20,9 +20,19 @@ export default {
       default: null
     },
 
+    usedTitle: {
+      type:    String,
+      default: null
+    },
+
     reserved: {
       type:    Object,
       default: null
+    },
+
+    reservedTitle: {
+      type:    String,
+      default: null
     }
   },
   computed: {
@@ -78,7 +88,7 @@ export default {
         >
           <template #title>
             <span>
-              {{ t('clusterIndexPage.hardwareResourceGauge.reserved') }}
+              {{ reservedTitle ?? t('clusterIndexPage.hardwareResourceGauge.reserved') }}
               <span class="values text-muted">
                 <span v-if="reserved.formattedUseful">
                   {{ reserved.formattedUseful }}
@@ -112,7 +122,7 @@ export default {
         >
           <template #title>
             <span>
-              {{ t('clusterIndexPage.hardwareResourceGauge.used') }}
+              {{ usedTitle ?? t('clusterIndexPage.hardwareResourceGauge.used') }}
               <span class="values text-muted">
                 <span v-if="used.formattedUseful">
                   {{ used.formattedUseful }}