Merge pull request #145 from a110605/issue_7572

External/third-party storage UI change

pkg/harvester/config/feature-flags.js

@@ -51,7 +51,8 @@ const featuresV150 = [
   'tpmPersistentState',
   'efiPersistentState',
   'untaggedNetworkSetting',
-  'skipSingleReplicaDetachedVol'
+  'skipSingleReplicaDetachedVol',
+  'thirdPartyStorage'
 ];
 
 export const RELEASE_FEATURES = {

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

@@ -61,9 +61,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
@@ -98,14 +101,15 @@ export default {
     }
 
     return {
-      selectedImage: null,
+      selectedImage:  null,
-      images:        [],
+      storageClasses: [],
-      url:           this.value.spec.url,
+      images:         [],
-      files:         [],
+      url:            this.value.spec.url,
-      resource:      '',
+      files:          [],
-      headers:       {},
+      resource:       '',
-      fileUrl:       '',
+      headers:        {},
-      file:          '',
+      fileUrl:        '',
+      file:           '',
     };
   },
 
@@ -158,9 +162,10 @@ export default {
 
     storageClassOptions() {
       const storages = this.value.spec?.securityParameters?.cryptoOperation === ENCRYPT ? this.encryptedStorageClasses : this.nonEncryptedStorageClasses;
+      const filteredStorages = this.value.thirdPartyStorageFeatureEnabled ? storages.filter((s) => !s.parameters?.backingImage) : storages
+        .filter((s) => !s.parameters?.backingImage && s.provisioner !== LVM_DRIVER) ;
 
-      return storages
+      return filteredStorages
-        .filter((s) => !s.parameters?.backingImage && s.provisioner !== LVM_DRIVER) // Lvm storage is not supported.
         .map((s) => {
           const label = s.isDefault ? `${ s.name } (${ this.t('generic.default') })` : s.name;
 
@@ -178,6 +183,9 @@ export default {
 
       set(nue) {
         this.value.metadata.annotations[HCI_ANNOTATIONS.STORAGE_CLASS] = nue;
+        if (this.value.thirdPartyStorageFeatureEnabled) {
+          this.value.spec.targetStorageClassName = nue;
+        }
       }
     },
     sourceImageOptions() {
@@ -256,6 +264,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.thirdPartyStorageFeatureEnabled) {
+        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: this.imageOptionLabel(I),
           value: I.id
         };
       });
@@ -116,8 +116,42 @@ export default {
       });
     },
 
+    thirdPartyStorageEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
+    },
+
     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', '') } GB`;
+    },
+
+    imageVirtualSizeInByte() {
+      return Math.max(this.selectedImage?.status?.size, this.selectedImage?.status?.virtualSize);
+    },
+
+    diskSizeInByte() {
+      return parseSi(this.value?.size || '0');
+    },
+
+    showDiskTooSmallError() {
+      if (!this.thirdPartyStorageEnabled ) {
+        return false;
+      }
+
+      return this.imageVirtualSizeInByte > this.diskSizeInByte;
     }
   },
 
@@ -158,7 +192,17 @@ export default {
   },
 
   methods: {
+    imageOptionLabel(image) {
+      let label = `${ image.metadata.namespace }/${ image.spec.displayName }`;
+
+      if (this.thirdPartyStorageEnabled) {
+        label += ` (${ image.imageStorageClass } / ${ image.virtualSize })`;
+      }
+
+      return label;
+    },
     update() {
+      this.value.hasDiskError = this.showDiskTooSmallError;
       this.$emit('update');
     },
 
@@ -341,5 +385,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() {
@@ -92,7 +95,8 @@ export default {
         {
           name:     'storageClass',
           labelKey: 'tableHeaders.storageClass',
-          value:    'spec.storageClassName'
+          value:    'spec.storageClassName',
+          sort:     'spec.storageClassName'
         },
         {
           name:     'AttachedVM',

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;
   }
@@ -73,4 +77,8 @@ export default class HciStorageClass extends StorageClass {
   get volumeEncryptionFeatureEnabled() {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('volumeEncryption');
   }
+
+  get thirdPartyStorageFeatureEnabled() {
+    return this.$rootGetters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
+  }
 }

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);
@@ -385,6 +389,10 @@ export default class HciVmImage extends HarvesterResource {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('volumeEncryption');
   }
 
+  get thirdPartyStorageFeatureEnabled() {
+    return this.$rootGetters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
+  }
+
   download() {
     window.location.href = this.links.download;
   }

pkg/harvester/models/kubevirt.io.virtualmachine.js

@@ -1183,6 +1183,10 @@ export default class VirtVm extends HarvesterResource {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('efiPersistentState');
   }
 
+  get thirdPartyStorageFeatureEnabled() {
+    return this.$rootGetters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
+  }
+
   setInstanceLabels(val) {
     if ( !this.spec?.template?.metadata?.labels ) {
       set(this, 'spec.template.metadata.labels', {});