refactor(host): update resource usage gauges and table column headers to fit small screen (#1031) (#1034)

* refactor(host): update resource usage gauges and table column headers - Replace ConsumptionGauge with PercentageBar in CPU/Memory/Storage formatters to show the percentage next to the progress bar - Rename the Disk State column header to Disk (via i18n) - Display the CPU Manager column header on two lines * refactor: add noopener noreferrer rel --------- (cherry picked from commit 1c3b40b6316df61239ed1875db67e8a8aeb68168) Signed-off-by: Andy Lee <andy.lee@suse.com> Co-authored-by: Andy Lee <andy.lee@suse.com>
2026-08-16 12:49:14 +00:00 · 2026-07-20 15:52:16 +08:00 · 2026-07-20 15:52:16 +08:00 · 3cbaf97399
commit 3cbaf97399
parent bcde1744e1
5 changed files with 189 additions and 108 deletions
--- a/pkg/harvester/formatters/HarvesterCPUUsed.vue
+++ b/pkg/harvester/formatters/HarvesterCPUUsed.vue
@ -1,11 +1,11 @@
 <script>
-import ConsumptionGauge from '@shell/components/ConsumptionGauge';
+import PercentageBar from '@shell/components/PercentageBar';
 import { METRIC, NODE } from '@shell/config/types';
 import { parseSi } from '@shell/utils/units';

 export default {
  name:       'HarvesterCpuUsed',
-  components: { ConsumptionGauge },
+  components: { PercentageBar },

  props: {
    value: {
@ -74,54 +74,89 @@ export default {
        return 0;
      }
    },
-  }
+
+    reservedPercentage() {
+      return this.cpuTotal ? (this.reserved * 100) / this.cpuTotal : 0;
+    },
+
+    usedPercentage() {
+      return this.cpuTotal ? (this.used * 100) / this.cpuTotal : 0;
+    },
+
+    reservedAmountTemplateValues() {
+      return {
+        used:  this.numberFormatter(this.reserved || 0),
+        total: this.numberFormatter(this.cpuTotal || 0),
+        unit:  ` ${ this.cpuUnits }`,
+      };
+    },
+
+    usedAmountTemplateValues() {
+      return {
+        used:  this.numberFormatter(this.used || 0),
+        total: this.numberFormatter(this.cpuTotal || 0),
+        unit:  ` ${ this.cpuUnits }`,
+      };
+    },
+  },
+
+  methods: {
+    numberFormatter(value) {
+      return Number.isInteger(value) ? value : value.toFixed(2);
+    },
+  },
 };
 </script>

 <template>
  <div>
-    <ConsumptionGauge
-      :capacity="cpuTotal"
-      :used="reserved"
-      :units="cpuUnits"
-      :resource-name="resourceName"
-    >
-      <template #title="{amountTemplateValues, formattedPercentage}">
-        <span>
+    <div class="consumption-gauge">
+      <div class="numbers">
+        <span class="mr-5">
          {{ t('harvester.formatters.hardwareResourceGauge.reserved') }}
        </span>
        <span class="precent-data">
-          {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
-          <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+          {{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
        </span>
-        </span>
-      </template>
-    </ConsumptionGauge>
+      </div>
+      <div class="mt-10">
+        <PercentageBar
+          :model-value="reservedPercentage"
+          show-percentage
+        />
+      </div>
+    </div>
    <div
      v-if="showUsed"
-      class="mt-10"
+      class="consumption-gauge mt-10"
    >
-      <ConsumptionGauge
-        :capacity="cpuTotal"
-        :used="used"
-        :units="cpuUnits"
-      >
-        <template #title="{amountTemplateValues, formattedPercentage}">
+      <div class="numbers">
        <span>
          {{ t('harvester.formatters.hardwareResourceGauge.used') }}
        </span>
        <span class="precent-data">
-            {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
-            <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+          {{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
        </span>
-          </span>
-        </template>
-      </ConsumptionGauge>
+      </div>
+      <div class="mt-10">
+        <PercentageBar
+          :model-value="usedPercentage"
+          show-percentage
+        />
+      </div>
    </div>
  </div>
 </template>

 <style lang="scss" scoped>
+.consumption-gauge {
+  .numbers {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
 .precent-data {
  white-space: nowrap;
 }
--- a/pkg/harvester/formatters/HarvesterMemoryUsed.vue
+++ b/pkg/harvester/formatters/HarvesterMemoryUsed.vue
@ -1,11 +1,11 @@
 <script>
-import ConsumptionGauge from '@shell/components/ConsumptionGauge';
+import PercentageBar from '@shell/components/PercentageBar';
 import { METRIC, NODE } from '@shell/config/types';
 import { formatSi, exponentNeeded, UNITS, parseSi } from '@shell/utils/units';
 import { UNIT_SUFFIX } from '../utils/unit';
 export default {
  name:       'HarvesterMemoryUsed',
-  components: { ConsumptionGauge },
+  components: { PercentageBar },

  props: {
    value: {
@ -76,6 +76,30 @@ export default {
        return 0;
      }
    },
+
+    reservedPercentage() {
+      return this.memoryTotal ? (this.reserved * 100) / this.memoryTotal : 0;
+    },
+
+    usedPercentage() {
+      return this.memoryTotal ? (this.used * 100) / this.memoryTotal : 0;
+    },
+
+    reservedAmountTemplateValues() {
+      return {
+        used:  this.memoryFormatter(this.reserved || 0),
+        total: this.memoryFormatter(this.memoryTotal || 0),
+        unit:  ` ${ this.memoryUnits }`,
+      };
+    },
+
+    usedAmountTemplateValues() {
+      return {
+        used:  this.memoryFormatter(this.used || 0),
+        total: this.memoryFormatter(this.memoryTotal || 0),
+        unit:  ` ${ this.memoryUnits }`,
+      };
+    },
  },

  methods: {
@ -96,50 +120,53 @@ export default {

 <template>
  <div>
-    <ConsumptionGauge
-      :capacity="memoryTotal"
-      :used="reserved"
-      :units="memoryUnits"
-      :number-formatter="memoryFormatter"
-      :resource-name="resourceName"
-    >
-      <template #title="{amountTemplateValues, formattedPercentage}">
-        <span>
+    <div class="consumption-gauge">
+      <div class="numbers">
+        <span class="mr-10">
          {{ t('harvester.formatters.hardwareResourceGauge.reserved') }}
        </span>
        <span class="precent-data">
-          {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
-          <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+          {{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
        </span>
-        </span>
-      </template>
-    </ConsumptionGauge>
+      </div>
+      <div class="mt-10">
+        <PercentageBar
+          :model-value="reservedPercentage"
+          show-percentage
+        />
+      </div>
+    </div>
    <div
      v-if="showUsed"
-      class="mt-10"
+      class="consumption-gauge mt-10"
    >
-      <ConsumptionGauge
-        :capacity="memoryTotal"
-        :used="used"
-        :units="memoryUnits"
-        :number-formatter="memoryFormatter"
-      >
-        <template #title="{amountTemplateValues, formattedPercentage}">
+      <div class="numbers">
        <span>
          {{ t('harvester.formatters.hardwareResourceGauge.used') }}
        </span>
        <span class="precent-data">
-            {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
-            <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+          {{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
        </span>
-          </span>
-        </template>
-      </ConsumptionGauge>
+      </div>
+      <div class="mt-10">
+        <PercentageBar
+          :model-value="usedPercentage"
+          show-percentage
+        />
+      </div>
    </div>
  </div>
 </template>

 <style lang="scss" scoped>
+.consumption-gauge {
+  .numbers {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
 .precent-data {
  white-space: nowrap;
 }
--- a/pkg/harvester/formatters/HarvesterStorageUsed.vue
+++ b/pkg/harvester/formatters/HarvesterStorageUsed.vue
@ -1,12 +1,12 @@
 <script>
-import ConsumptionGauge from '@shell/components/ConsumptionGauge';
+import PercentageBar from '@shell/components/PercentageBar';
 import { LONGHORN } from '@shell/config/types';
 import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
 import { UNIT_SUFFIX } from '../utils/unit';

 export default {
  name:       'HarvesterStorageUsed',
-  components: { ConsumptionGauge },
+  components: { PercentageBar },

  props: {
    value: {
@ -120,6 +120,14 @@ export default {
        unit:  this.allocatedUnits,
      };
    },
+
+    usedPercentage() {
+      return this.storageStats.maximum ? (this.storageStats.used * 100) / this.storageStats.maximum : 0;
+    },
+
+    allocatedPercentage() {
+      return this.storageStats.total ? (this.storageStats.scheduled * 100) / this.storageStats.total : 0;
+    },
  },

  methods: {
@ -144,53 +152,54 @@ export default {
  <div>
    <div
      v-if="showAllocated"
+      class="consumption-gauge"
    >
-      <ConsumptionGauge
-        :capacity="storageStats.total"
-        :used="storageStats.scheduled"
-        :units="allocatedUnits"
-        :number-formatter="formatter"
-        :resource-name="resourceName"
-      >
-        <template #title="{formattedPercentage}">
-          <span>
+      <div class="numbers">
+        <span class="mr-10">
          {{ t('harvester.dashboard.hardwareResourceGauge.allocated') }}
        </span>
        <span class="precent-data">
          {{ t('node.detail.glance.consumptionGauge.amount', allocatedAmountTemplateValues) }}
-            <span class="ml-10 percentage">
-              /&nbsp;{{ formattedPercentage }}
        </span>
-          </span>
-        </template>
-      </ConsumptionGauge>
      </div>
-    <ConsumptionGauge
-      :capacity="storageStats.maximum"
-      :used="storageStats.used"
-      :units="usedUnits"
-      :number-formatter="formatter"
-      :resource-name="showAllocated ? '' : resourceName"
-      :class="{
-        'mt-10': showAllocated,
-      }"
+      <div class="mt-10">
+        <PercentageBar
+          :model-value="allocatedPercentage"
+          show-percentage
+        />
+      </div>
+    </div>
+    <div
+      class="consumption-gauge"
+      :class="{ 'mt-10': showAllocated }"
    >
-      <template #title="{formattedPercentage}">
+      <div class="numbers">
        <span>
          {{ t('node.detail.glance.consumptionGauge.used') }}
        </span>
        <span class="precent-data">
          {{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
-          <span class="ml-10 percentage">
-            /&nbsp;{{ formattedPercentage }}
        </span>
-        </span>
-      </template>
-    </ConsumptionGauge>
+      </div>
+      <div class="mt-10">
+        <PercentageBar
+          :model-value="usedPercentage"
+          show-percentage
+        />
+      </div>
+    </div>
  </div>
 </template>

 <style lang="scss" scoped>
+.consumption-gauge {
+  .numbers {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
 .precent-data {
  white-space: nowrap;
 }
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@ -331,7 +331,8 @@ harvester:
    message: Message
    phase: Phase
    attachedVM: Attached Virtual Machine
-    cpuManager: CPU Manager
+    cpuManager: CPU<br>Manager
+    diskState: Disk
    routeConnectivityTooltip: Connectivity between the VM network and the management network, which the Harvester nodes are connected to.
    fingerprint: Fingerprint
    value: Value
--- a/pkg/harvester/list/harvesterhci.io.host.vue
+++ b/pkg/harvester/list/harvesterhci.io.host.vue
@ -84,7 +84,7 @@ export default {
        },
        {
          ...NAME,
-          width: 130,
+          width: 150,
        },
        {
          name:      'host-ip',
@ -136,14 +136,14 @@ export default {
          value:         'id',
          formatter:     'HarvesterCPUPinning',
          formatterOpts: { rows: this.rows },
-          width:         150,
+          width:         75,
          align:         'center',
        });
      }
      if (this.hasLonghornSchema) {
        out.push({
          name:      'diskState',
-          labelKey:  'tableHeaders.diskState',
+          labelKey:  'harvester.tableHeaders.diskState',
          value:     'diskState',
          formatter: 'HarvesterDiskState',
          width:     130,
@ -156,7 +156,6 @@ export default {
        name:  'console',
        label: ' ',
        align: 'right',
-        width: 80,
      });

      return out;
@ -239,6 +238,8 @@ export default {
            v-if="!row.consoleUrl"
            :href="consoleDocLink"
            target="_blank"
+            rel="noopener noreferrer"
+            class="console-info"
          ><i class="icon icon-info" /></a>
        </div>
      </template>
@ -249,5 +250,13 @@ export default {
 <style lang="scss" scoped>
  .console-button {
    display: flex;
+    position: relative;
+    justify-content: flex-end;
+  }
+
+  .console-info {
+    position: absolute;
+    top: -8px;
+    right: -3px;
  }
 </style>