Add Virtual Size to Image List and Image Detail page

This commit adds Virtual Size as an additional column when listing images. I don't know whether or not this is the best way to present this information. Another alternative could be to make the existing Size column simply report the greater of Size and Virtual Size, on the assumption that what you really care about is the size that a volume needs to be when based on that image. I've also added Virtual Size to the Image Detail page. Related issue: harvester/harvester#4905 Signed-off-by: Tim Serong <[email protected]> (cherry picked from commit a0cc74c)
harvester · Aug 16, 2024 · 444363a · 444363a
1 parent 0760a51
commit 444363a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 0 deletions.
diff --git a/pkg/harvester/config/harvester.js b/pkg/harvester/config/harvester.js
@@ -28,6 +28,7 @@ import {
 
 import {
   IMAGE_DOWNLOAD_SIZE,
+  IMAGE_VIRTUAL_SIZE,
   FINGERPRINT,
   IMAGE_PROGRESS,
   SNAPSHOT_TARGET_VOLUME,
@@ -220,6 +221,7 @@ export function init($plugin, store) {
     NAMESPACE_COL,
     IMAGE_PROGRESS,
     IMAGE_DOWNLOAD_SIZE,
+    IMAGE_VIRTUAL_SIZE,
     AGE
   ]);
   virtualType({

diff --git a/pkg/harvester/config/table-headers.js b/pkg/harvester/config/table-headers.js
@@ -11,6 +11,14 @@ export const IMAGE_DOWNLOAD_SIZE = {
   width:    120
 };
 
+export const IMAGE_VIRTUAL_SIZE = {
+  name:     'virtualSize',
+  labelKey: 'harvester.tableHeaders.virtualSize',
+  value:    'virtualSize',
+  sort:     'status.virtualSize',
+  width:    120
+};
+
 export const IMAGE_PROGRESS = {
   name:      'Uploaded',
   labelKey:  'tableHeaders.progress',

diff --git a/pkg/harvester/detail/harvesterhci.io.virtualmachineimage/index.vue b/pkg/harvester/detail/harvesterhci.io.virtualmachineimage/index.vue
@@ -35,6 +35,10 @@ export default {
       return this.value?.downSize;
     },
 
+    virtualSize() {
+      return this.value?.virtualSize;
+    },
+
     url() {
       return this.value?.spec?.url || '-';
     },
@@ -100,6 +104,12 @@ export default {
         </div>
       </div>
 
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue :name="t('harvester.image.virtualSize')" :value="virtualSize" class="mb-20" />
+        </div>
+      </div>
+
       <div class="row">
         <div class="col span-12">
           <LabelValue :name="t('nameNsDescription.description.label')" :value="description" class="mb-20" />

diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
@@ -159,6 +159,7 @@ harvester:
     forceStop: Force Stop
   tableHeaders:
     size: Size
+    virtualSize: Virtual Size
     progress: Progress
     message: Message
     phase: Phase
@@ -698,6 +699,7 @@ harvester:
       basics: Basics
     url: URL
     size: Size
+    virtualSize: Virtual Size
     urlTip: 'supports the <code>raw</code> and <code>qcow2</code> image formats which are supported by <a href="https://www.qemu.org/docs/master/system/images.html#disk-image-file-formats" target="_blank">qemu</a>. Bootable ISO images can also be used and are treated like <code>raw</code> images.'
     fileName: File Name
     uploadFile: Upload File

diff --git a/pkg/harvester/models/harvesterhci.io.virtualmachineimage.js b/pkg/harvester/models/harvesterhci.io.virtualmachineimage.js
@@ -168,6 +168,21 @@ export default class HciVmImage extends HarvesterResource {
     });
   }
 
+  get virtualSize() {
+    const virtualSize = this.status?.virtualSize;
+
+    if (!virtualSize) {
+      return '-';
+    }
+
+    return formatSi(virtualSize, {
+      increment:    1024,
+      maxPrecision: 2,
+      suffix:       'B',
+      firstSuffix:  'B',
+    });
+  }
+
   getStatusConditionOfType(type, defaultValue = []) {
     const conditions = Array.isArray(get(this, 'status.conditions')) ? this.status.conditions : defaultValue;