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

* 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

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: add noopener noreferrer rel

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>

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
+    <div class="consumption-gauge">
-      :capacity="cpuTotal"
+      <div class="numbers">
-      :used="reserved"
+        <span class="mr-5">
-      :units="cpuUnits"
-      :resource-name="resourceName"
-    >
-      <template #title="{amountTemplateValues, formattedPercentage}">
-        <span>
           {{ t('harvester.formatters.hardwareResourceGauge.reserved') }}
         </span>
         <span class="precent-data">
-          {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
+          {{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
-          <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
-          </span>
         </span>
-      </template>
+      </div>
-    </ConsumptionGauge>
+      <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
+      <div class="numbers">
-        :capacity="cpuTotal"
+        <span>
-        :used="used"
+          {{ t('harvester.formatters.hardwareResourceGauge.used') }}
-        :units="cpuUnits"
+        </span>
-      >
+        <span class="precent-data">
-        <template #title="{amountTemplateValues, formattedPercentage}">
+          {{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
-          <span>
+        </span>
-            {{ t('harvester.formatters.hardwareResourceGauge.used') }}
+      </div>
-          </span>
+      <div class="mt-10">
-          <span class="precent-data">
+        <PercentageBar
-            {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
+          :model-value="usedPercentage"
-            <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+          show-percentage
-            </span>
+        />
-          </span>
+      </div>
-        </template>
-      </ConsumptionGauge>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.consumption-gauge {
+  .numbers {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
 .precent-data {
   white-space: nowrap;
 }

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
+    <div class="consumption-gauge">
-      :capacity="memoryTotal"
+      <div class="numbers">
-      :used="reserved"
+        <span class="mr-10">
-      :units="memoryUnits"
-      :number-formatter="memoryFormatter"
-      :resource-name="resourceName"
-    >
-      <template #title="{amountTemplateValues, formattedPercentage}">
-        <span>
           {{ t('harvester.formatters.hardwareResourceGauge.reserved') }}
         </span>
         <span class="precent-data">
-          {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
+          {{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
-          <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
-          </span>
         </span>
-      </template>
+      </div>
-    </ConsumptionGauge>
+      <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
+      <div class="numbers">
-        :capacity="memoryTotal"
+        <span>
-        :used="used"
+          {{ t('harvester.formatters.hardwareResourceGauge.used') }}
-        :units="memoryUnits"
+        </span>
-        :number-formatter="memoryFormatter"
+        <span class="precent-data">
-      >
+          {{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
-        <template #title="{amountTemplateValues, formattedPercentage}">
+        </span>
-          <span>
+      </div>
-            {{ t('harvester.formatters.hardwareResourceGauge.used') }}
+      <div class="mt-10">
-          </span>
+        <PercentageBar
-          <span class="precent-data">
+          :model-value="usedPercentage"
-            {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
+          show-percentage
-            <span class="ml-10 percentage">/&nbsp;{{ formattedPercentage }}
+        />
-            </span>
+      </div>
-          </span>
-        </template>
-      </ConsumptionGauge>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.consumption-gauge {
+  .numbers {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
 .precent-data {
   white-space: nowrap;
 }

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

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

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>