add third party storage UI change

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

pkg/harvester/config/harvester-cluster.js

@@ -31,7 +31,8 @@ import {
   FINGERPRINT,
   IMAGE_PROGRESS,
   SNAPSHOT_TARGET_VOLUME,
-  IMAGE_VIRTUAL_SIZE
+  IMAGE_VIRTUAL_SIZE,
+  IMAGE_STORAGE_CLASS
 } from './table-headers';
 
 const TEMPLATE = HCI.VM_VERSION;
@@ -221,6 +222,7 @@ export function init($plugin, store) {
     STATE,
     NAME_COL,
     NAMESPACE_COL,
+    IMAGE_STORAGE_CLASS,
     IMAGE_PROGRESS,
     IMAGE_DOWNLOAD_SIZE,
     IMAGE_VIRTUAL_SIZE,

pkg/harvester/config/labels-annotations.js

@@ -15,6 +15,7 @@ export const HCI = {
   TEMPLATE_VERSION_CUSTOM_NAME:     'template-version.harvesterhci.io/customName',
   CREATOR:                          'harvesterhci.io/creator',
   OS:                               'harvesterhci.io/os',
+  GOLDEN_IMAGE:                     'harvesterhci.io/goldenImage',
   NETWORK_TYPE:                     'network.harvesterhci.io/type',
   VM_NAME:                          'harvesterhci.io/vmName',
   VM_NAME_PREFIX:                   'harvesterhci.io/vmNamePrefix',

pkg/harvester/config/table-headers.js

@@ -88,3 +88,13 @@ export const MACHINE_POOLS = {
   align:    'center',
   width:    100,
 };
+
+// The STORAGE_CLASS column in VM image list page
+export const IMAGE_STORAGE_CLASS = {
+  name:     'imageStorageClass',
+  labelKey: 'harvester.tableHeaders.storageClass',
+  sort:     'imageStorageClass',
+  value:    'imageStorageClass',
+  align:    'left',
+  width:    200,
+};

pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue

@@ -16,7 +16,6 @@ import { STORAGE_CLASS } from '@shell/config/types';
 import { VM_IMAGE_FILE_FORMAT } from '../validators/vm-image';
 import { OS } from '../mixins/harvester-vm';
 import { HCI } from '../types';
-import { LVM_DRIVER } from '../models/harvester/storage.k8s.io.storageclass';
 
 const ENCRYPT = 'encrypt';
 const DECRYPT = 'decrypt';
@@ -61,9 +60,12 @@ export default {
       images:         this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.IMAGE }),
       storageClasses: this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS }),
     });
+
     this['storageClassName'] = this.storageClassName || this.defaultStorageClassName();
     this.images = this.$store.getters[`${ inStore }/all`](HCI.IMAGE);
 
+    this.storages = this.$store.getters[`${ inStore }/all`](STORAGE_CLASS);
+
     const { securityParameters } = this.value.spec;
 
     // edit and view mode should show the source image
@@ -99,6 +101,7 @@ export default {
 
     return {
       selectedImage:  null,
+      storageClasses: [],
       images:         [],
       url:            this.value.spec.url,
       files:          [],
@@ -160,7 +163,7 @@ export default {
       const storages = this.value.spec?.securityParameters?.cryptoOperation === ENCRYPT ? this.encryptedStorageClasses : this.nonEncryptedStorageClasses;
 
       return storages
-        .filter((s) => !s.parameters?.backingImage && s.provisioner !== LVM_DRIVER) // Lvm storage is not supported.
+        .filter((s) => !s.parameters?.backingImage)
         .map((s) => {
           const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
 
@@ -178,6 +181,7 @@ export default {
 
       set(nue) {
         this.value.metadata.annotations[HCI_ANNOTATIONS.STORAGE_CLASS] = nue;
+        this.value.spec.targetStorageClassName = nue;
       }
     },
     sourceImageOptions() {
@@ -256,6 +260,13 @@ export default {
       } else { // URL / FILE / DECRYPT should use default storage class
         this.storageClassName = this.defaultStorageClassName();
       }
+    },
+    'storageClassName'(neu) {
+      const storageClass = this.storages.find((s) => s.id === neu);
+
+      if (storageClass) {
+        this.value.spec.backend = storageClass.isLonghornV1 ? 'backingimage' : 'cdi';
+      }
     }
   },
 

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue

@@ -109,6 +109,10 @@ export default {
               return false;
             }
 
+            if (pvc.metadata?.annotations?.[HCI_ANNOTATIONS.GOLDEN_IMAGE] === 'true') {
+              return false;
+            }
+
             if (pvc.attachVM && isAvailable && pvc.attachVM?.id === this.vm?.id && this.isEdit) {
               isBeingUsed = false;
             } else if (pvc.attachVM) {

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/vmImage.vue

@@ -90,7 +90,7 @@ export default {
     imagesOption() {
       return this.images.filter((c) => c.isReady).sort((a, b) => a.creationTimestamp > b.creationTimestamp ? -1 : 1).map( (I) => {
         return {
-          label: `${ I.metadata.namespace }/${ I.spec.displayName }`,
+          label: `${ I.metadata.namespace }/${ I.spec.displayName }  (${ I.imageStorageClass } / ${ I.virtualSize })`,
           value: I.id
         };
       });
@@ -118,6 +118,32 @@ export default {
 
     isLonghornV2() {
       return this.value.pvc?.isLonghornV2 || this.value.pvc?.storageClass?.isLonghornV2;
+    },
+
+    selectedImage() {
+      return this.$store.getters['harvester/all'](HCI.IMAGE)?.find( (I) => this.value.image === I.id);
+    },
+
+    imageVirtualSize() {
+      return this.selectedImage?.virtualSize;
+    },
+
+    diskSize() {
+      const size = this.value?.size || '0';
+
+      return `${ size.replace('Gi', '') } GiB`;
+    },
+
+    imageVirtualSizeInByte() {
+      return Math.max(this.selectedImage?.status?.size, this.selectedImage?.status?.virtualSize);
+    },
+
+    diskSizeInByte() {
+      return parseSi(this.value?.size || '0');
+    },
+
+    showDiskTooSmallError() {
+      return this.imageVirtualSizeInByte > this.diskSizeInByte;
     }
   },
 
@@ -159,6 +185,7 @@ export default {
 
   methods: {
     update() {
+      this.value.hasDiskError = this.showDiskTooSmallError;
       this.$emit('update');
     },
 
@@ -341,5 +368,10 @@ export default {
       class="mb-20"
       :label="value.volumeBackups.error.message"
     />
+    <Banner
+      v-if="!isView && showDiskTooSmallError"
+      color="error"
+      :label="t('harvester.virtualMachine.volume.vmImageVolumeTip', {diskSize: diskSize, imageVirtualSize: imageVirtualSize})"
+    />
   </div>
 </template>

pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue

@@ -195,7 +195,12 @@ export default {
 
       return true;
     },
+    isValidationPassed() {
+      // check if any disk hasDiskError is true
+      const hasError = this.diskRows.some((disk) => disk.hasDiskError === true);
 
+      return !hasError;
+    },
     showCpuPinningBanner() {
       if (!this.value.cpuPinningFeatureEnabled) {
         return false;
@@ -489,6 +494,7 @@ export default {
     :resource="value"
     :cancel-event="true"
     :mode="mode"
+    :validation-passed="isValidationPassed"
     :can-yaml="isSingle ? true : false"
     :errors="errors"
     :generate-yaml="generateYaml"

pkg/harvester/l10n/en-us.yaml

@@ -630,6 +630,7 @@ harvester:
       setFirst: Set as root volume
       saveVolume: Update Volume
       encryption: Encryption
+      vmImageVolumeTip: Disk size ({diskSize}) should greater than selected image virtual size ({imageVirtualSize})
       lockTooltip:
         all: All volumes are encrypted.
         partial: Some volumes are encrypted.

pkg/harvester/list/harvesterhci.io.volume.vue

@@ -9,6 +9,7 @@ import HarvesterVolumeState from '../formatters/HarvesterVolumeState';
 
 import { allSettled } from '../utils/promise';
 import { HCI, VOLUME_SNAPSHOT } from '../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 
 const schema = {
   id:         HCI.VOLUME,
@@ -58,8 +59,10 @@ export default {
     if (!pvcSchema?.collectionMethods.find((x) => x.toLowerCase() === 'post')) {
       this.$store.dispatch('type-map/configureType', { match: HCI.VOLUME, isCreatable: false });
     }
+    // we only show the non golden image PVCs in the list
+    const pvcs = hash.pvcs.filter((pvc) => pvc.metadata.annotations[HCI_ANNOTATIONS.GOLDEN_IMAGE] !== 'true');
 
-    this.rows = hash.pvcs;
+    this.rows = pvcs;
   },
 
   data() {

pkg/harvester/models/harvester/storage.k8s.io.storageclass.js

@@ -62,6 +62,10 @@ export default class HciStorageClass extends StorageClass {
     return this.parameters?.encrypted === 'true';
   }
 
+  get isLonghornV1() {
+    return this.provisioner === LONGHORN_DRIVER && this.longhornVersion === DATA_ENGINE_V1;
+  }
+
   get isLonghornV2() {
     return this.provisioner === LONGHORN_DRIVER && this.longhornVersion === DATA_ENGINE_V2;
   }

pkg/harvester/models/harvesterhci.io.virtualmachineimage.js

@@ -199,6 +199,10 @@ export default class HciVmImage extends HarvesterResource {
     return `${ this.metadata.namespace }/${ this.spec.displayName }`;
   }
 
+  get imageStorageClass() {
+    return this?.metadata?.annotations[HCI_ANNOTATIONS.STORAGE_CLASS] || '';
+  }
+
   get imageMessage() {
     if (this.uploadError) {
       return ucFirst(this.uploadError);
@@ -239,8 +243,8 @@ export default class HciVmImage extends HarvesterResource {
     return formatSi(size, {
       increment:    1024,
       maxPrecision: 2,
-      suffix:       'B',
+      suffix:       'iB',
-      firstSuffix:  'B',
+      firstSuffix:  'iB',
     });
   }
 
@@ -254,8 +258,8 @@ export default class HciVmImage extends HarvesterResource {
     return formatSi(virtualSize, {
       increment:    1024,
       maxPrecision: 2,
-      suffix:       'B',
+      suffix:       'iB',
-      firstSuffix:  'B',
+      firstSuffix:  'iB',
     });
   }