From 28d3fab64a5d394eb655636d22d23f8e5ef67eb7 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sun, 22 Sep 2024 16:11:04 +0200
Subject: [PATCH] Various enhancements

- Add lvm driver addon
- Add longhorn v2 engine in provisioner dropdowns
- Save storage class parameters for longhorn
- Decouple Storage class longhron params
- Add create new option for LVM groups

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/config/harvester-map.js         |   3 +-
 pkg/harvester/config/labels-annotations.js    |   3 +-
 .../HarvesterHostDisk.vue                     |   2 +-
 .../harvesterhci.io.host/HarvesterDisk.vue    | 169 ++++++++++--
 .../edit/harvesterhci.io.host/index.vue       |  29 +-
 .../edit/harvesterhci.io.storage/index.vue    | 103 +++----
 ....vue => driver.longhorn.io_LonghornV1.vue} |  19 +-
 .../driver.longhorn.io_LonghornV2.vue         | 253 ++++++++++++++++++
 .../lvm.driver.harvesterhci.io.vue            |  12 +-
 .../harvesterhci.io.virtualmachineimage.vue   |   2 +-
 pkg/harvester/l10n/en-us.yaml                 |  10 +-
 .../harvester/storage.k8s.io.storageclass.js  |  25 ++
 shell/models/storage.k8s.io.storageclass.js   |   2 -
 13 files changed, 523 insertions(+), 109 deletions(-)
 rename pkg/harvester/edit/harvesterhci.io.storage/provisioners/{driver.longhorn.io.vue => driver.longhorn.io_LonghornV1.vue} (86%)
 create mode 100644 pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_LonghornV2.vue

diff --git a/pkg/harvester/config/harvester-map.js b/pkg/harvester/config/harvester-map.js
index 3a685557afd..f2f00bed3d7 100644
--- a/pkg/harvester/config/harvester-map.js
+++ b/pkg/harvester/config/harvester-map.js
@@ -67,5 +67,6 @@ export const ADD_ONS = {
   NVIDIA_DRIVER_TOOLKIT_CONTROLLER: 'nvidia-driver-toolkit',
   RANCHER_LOGGING:                  'rancher-logging',
   RANCHER_MONITORING:               'rancher-monitoring',
-  VM_IMPORT_CONTROLLER:             'vm-import-controller'
+  VM_IMPORT_CONTROLLER:             'vm-import-controller',
+  LVM_DRIVER:                       'lvm.driver.harvesterhci.io'
 };
diff --git a/pkg/harvester/config/labels-annotations.js b/pkg/harvester/config/labels-annotations.js
index 1a01034507f..67703c80c43 100644
--- a/pkg/harvester/config/labels-annotations.js
+++ b/pkg/harvester/config/labels-annotations.js
@@ -51,5 +51,6 @@ export const HCI = {
   PARENT_SRIOV_GPU:               'harvesterhci.io/parentSRIOVGPUDevice',
   VM_MAINTENANCE_MODE_STRATEGY:   'harvesterhci.io/maintain-mode-strategy',
   NODE_CPU_MANAGER_UPDATE_STATUS: 'harvesterhci.io/cpu-manager-update-status',
-  CPU_MANAGER:                    'cpumanager'
+  CPU_MANAGER:                    'cpumanager',
+  DISABLE_LONGHORN_V2_ENGINE:     'node.longhorn.io/disable-v2-data-engine'
 };
diff --git a/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostDisk.vue b/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostDisk.vue
index 0a441a6045f..3a820f35fe4 100644
--- a/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostDisk.vue
+++ b/pkg/harvester/detail/harvesterhci.io.host/HarvesterHostDisk.vue
@@ -91,7 +91,7 @@ export default {
       let labelKey = `harvester.storage.storageClass.longhorn.${ LONGHORN_VERSION_V1 }.label`;
 
       if (this.value?.blockDevice?.spec?.provisioner.longhorn) {
-        labelKey = `harvester.storage.storageClass.longhorn.${ this.value.blockDevice.spec.provisioner.engineVersion }.label`;
+        labelKey = `harvester.storage.storageClass.longhorn.${ this.value.blockDevice.spec.provisioner.longhorn.engineVersion }.label`;
       }
 
       if (this.value?.blockDevice?.spec?.provisioner.lvm) {
diff --git a/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue b/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue
index ac66a65b559..40c4f2d2c15 100644
--- a/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue
+++ b/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue
@@ -10,11 +10,16 @@ import { RadioGroup, RadioButton } from '@components/Form/Radio';
 import HarvesterDisk from '../../mixins/harvester-disk';
 import Tags from '../../components/DiskTags';
 import { HCI } from '../../types';
+import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 import { LONGHORN_SYSTEM } from './index';
 import { LONGHORN_DRIVER, LONGHORN_VERSION_V1, LONGHORN_VERSION_V2 } from '@shell/models/persistentvolume';
-import { LVM_DRIVER } from '@shell/models/storage.k8s.io.storageclass';
+import { LVM_DRIVER } from '../../models/harvester/storage.k8s.io.storageclass';
+import ModalWithCard from '@shell/components/ModalWithCard';
+import { randomStr } from '@shell/utils/string';
+import { LONGHORN_V2_DATA_ENGINE } from './index.vue';
+import { _EDIT } from '@shell/config/query-params';
 
-const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
+const _NEW = '_NEW';
 
 export default {
   components: {
@@ -25,6 +30,7 @@ export default {
     Banner,
     RadioGroup,
     RadioButton,
+    ModalWithCard,
     Tags,
   },
 
@@ -59,30 +65,72 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
 
     await allHash({
-      csiDrivers:           this.$store.dispatch(`${ inStore }/findAll`, { type: CSI_DRIVER }),
-      longhornV2DataEngine: this.$store.dispatch(`${ inStore }/find`, { type: LONGHORN.SETTINGS, id: LONGHORN_V2_DATA_ENGINE }),
-      lvmVolumeGroups:      this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.LVM_VOLUME_GROUP }),
+      csiDrivers:      this.$store.dispatch(`${ inStore }/findAll`, { type: CSI_DRIVER }),
+      lvmVolumeGroups: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.LVM_VOLUME_GROUP }),
     });
   },
 
+  data() {
+    let provisioner = `${ this.value.provisioner || LONGHORN_DRIVER }`;
+
+    if (provisioner === LONGHORN_DRIVER) {
+      provisioner = `${ provisioner }_${ this.value.provisionerVersion || LONGHORN_VERSION_V1 }`;
+    }
+
+    return {
+      provisioner,
+      volumeGroupDialog: null,
+      randomStr:         randomStr(10).toLowerCase(),
+    };
+  },
+
   computed: {
     provisioners() {
+      const out = [];
+
       const inStore = this.$store.getters['currentProduct'].inStore;
       const csiDrivers = this.$store.getters[`${ inStore }/all`](CSI_DRIVER) || [];
 
-      return csiDrivers.map((provisioner) => {
-        return {
-          label: this.provisionersLabelKeys[provisioner.name],
-          value: provisioner.name,
-        };
+      csiDrivers.forEach(({ name }) => {
+        switch (name) {
+        case LONGHORN_DRIVER:
+          out.push({
+            label: `harvester.storage.storageClass.longhorn.${ LONGHORN_VERSION_V1 }.label`,
+            value: `${ name }_${ LONGHORN_VERSION_V1 }`,
+          });
+
+          if (this.longhornSystemVersion === LONGHORN_VERSION_V2 || this.value.provisionerVersion === LONGHORN_VERSION_V2) {
+            out.push({
+              label:    `harvester.storage.storageClass.longhorn.${ LONGHORN_VERSION_V2 }.label`,
+              value:    `${ name }_${ LONGHORN_VERSION_V2 }`,
+              disabled: this.forceLonghornV1
+            });
+          }
+          break;
+        case LVM_DRIVER:
+          out.push({
+            label: 'harvester.storage.storageClass.lvm.label',
+            value: name,
+          });
+          break;
+        }
       });
+
+      return out;
     },
 
     lvmVolumeGroups() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const lvmVolumeGroups = this.$store.getters[`${ inStore }/all`](HCI.LVM_VOLUME_GROUP) || [];
 
-      return lvmVolumeGroups.filter(group => group.spec.nodeName === this.node.name).map(g => g.spec.vgName);
+      const out = lvmVolumeGroups.filter(group => group.spec.nodeName === this.node.name).map(g => g.spec.vgName);
+
+      out.unshift({
+        label: this.t('harvester.host.disk.lvmVolumeGroup.create'),
+        value: _NEW,
+      });
+
+      return out;
     },
 
     targetDisk() {
@@ -130,7 +178,7 @@ export default {
     },
 
     isProvisioned() {
-      return this.blockDevice?.spec.fileSystem.provisioned;
+      return this.blockDevice?.spec?.fileSystem?.provisioned;
     },
 
     forceFormattedDisabled() {
@@ -197,30 +245,82 @@ export default {
       return this.blockDevice.isFormatting;
     },
 
-    longhornVersion() {
+    longhornSystemVersion() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const v2DataEngine = this.$store.getters[`${ inStore }/byId`](LONGHORN.SETTINGS, LONGHORN_V2_DATA_ENGINE) || {};
 
       return v2DataEngine.value === 'true' ? LONGHORN_VERSION_V2 : LONGHORN_VERSION_V1;
     },
 
+    forceLonghornV1() {
+      return this.node?.labels[HCI_LABELS_ANNOTATIONS.DISABLE_LONGHORN_V2_ENGINE] === 'true';
+    },
+
     isLvm() {
       return this.value.provisioner === LVM_DRIVER;
     },
 
+    isLonghorn() {
+      return this.value.provisioner === LONGHORN_DRIVER;
+    },
+
     isLonghornV1() {
-      return this.value.provisioner === LONGHORN_DRIVER && this.longhornVersion === LONGHORN_VERSION_V1;
+      return this.value.provisioner === LONGHORN_DRIVER && (this.longhornSystemVersion === LONGHORN_VERSION_V1 || this.forceLonghornV1);
     },
 
-    provisionersLabelKeys() {
-      return {
-        [LONGHORN_DRIVER]: `harvester.storage.storageClass.longhorn.${ this.longhornVersion }.label`,
-        [LVM_DRIVER]:      'harvester.storage.storageClass.lvm.label'
-      };
+    provisionerTooltip() {
+      if (
+        this.mode === _EDIT &&
+        this.isLonghorn &&
+        this.longhornSystemVersion === LONGHORN_VERSION_V2 &&
+        this.forceLonghornV1
+      ) {
+        return this.t('harvester.storage.storageClass.longhorn.versionTooltip');
+      }
+
+      return null;
+    }
+  },
+
+  watch: {
+    provisioner(value) {
+      this.randomStr = randomStr(10).toLowerCase();
+
+      const [provisioner, provisionerVersion] = value?.split('_');
+
+      this.value.provisioner = provisioner;
+
+      if (provisioner === LONGHORN_DRIVER) {
+        this.value.provisionerVersion = provisionerVersion || LONGHORN_VERSION_V1;
+      } else {
+        delete this.value.provisionerVersion;
+      }
     },
+
+    'value.lvmVolumeGroup'(neu) {
+      if (neu === _NEW) {
+        this.value.lvmVolumeGroup = null;
+        this.showCreateVolumeGroup();
+      }
+    }
   },
 
   methods: {
+    showCreateVolumeGroup() {
+      this.volumeGroupDialog = null;
+      this.$modal.show(this.randomStr);
+    },
+
+    hideCreateVolumeGroup() {
+      this.$modal.hide(this.randomStr);
+    },
+
+    saveCreateVolumeGroup(buttonCb) {
+      buttonCb(true);
+      this.value.lvmVolumeGroup = this.volumeGroupDialog;
+      this.hideCreateVolumeGroup();
+    },
+
     update() {
       this.$emit('input', this.value);
     },
@@ -327,13 +427,14 @@ export default {
       <div class="col span-6">
         <LabeledSelect
           v-if="value.isNew"
-          v-model="value.provisioner"
+          v-model="provisioner"
           :mode="mode"
           label-key="harvester.host.disk.provisioner"
           :localized-label="true"
           :searchable="true"
           :options="provisioners"
           :disabled="isProvisioned"
+          :tooltip="provisionerTooltip"
           @keydown.native.enter.prevent="()=>{}"
         />
       </div>
@@ -363,16 +464,38 @@ export default {
         <LabeledSelect
           v-model="value.lvmVolumeGroup"
           :mode="mode"
-          label-key="harvester.host.disk.lvmVolumeGroup"
+          label-key="harvester.host.disk.lvmVolumeGroup.label"
           :localized-label="true"
-          :searchable="true"
-          :options="lvmVolumeGroups"
+          :searchable="false"
+          :taggable="true"
+          :multiple="false"
           :required="true"
           :disabled="isProvisioned"
+          :options="lvmVolumeGroups"
           @keydown.native.enter.prevent="()=>{}"
         />
       </div>
     </div>
+    <ModalWithCard
+      :ref="randomStr"
+      :name="randomStr"
+      width="30%"
+      @finish="saveCreateVolumeGroup"
+    >
+      <template #title>
+        {{ t('harvester.host.disk.lvmVolumeGroup.label') }}
+      </template>
+
+      <template #content>
+        <LabeledInput
+          v-model="volumeGroupDialog"
+          :label="t('generic.name')"
+          class="mb-20"
+          required
+          @keydown.native.enter.prevent="()=>{}"
+        />
+      </template>
+    </ModalWithCard>
   </div>
 </template>
 
diff --git a/pkg/harvester/edit/harvesterhci.io.host/index.vue b/pkg/harvester/edit/harvesterhci.io.host/index.vue
index 951b8395abf..50c79d8973b 100644
--- a/pkg/harvester/edit/harvesterhci.io.host/index.vue
+++ b/pkg/harvester/edit/harvesterhci.io.host/index.vue
@@ -29,12 +29,14 @@ import HarvesterDisk from './HarvesterDisk';
 import HarvesterKsmtuned from './HarvesterKsmtuned';
 import HarvesterSeeder from './HarvesterSeeder';
 import Tags from '../../components/DiskTags';
-import { LONGHORN_DRIVER, LONGHORN_VERSION_V1 } from '@shell/models/persistentvolume';
-import { LVM_DRIVER } from '@shell/models/storage.k8s.io.storageclass';
+import { LONGHORN_DRIVER, LONGHORN_VERSION_V1, LONGHORN_VERSION_V2 } from '@shell/models/persistentvolume';
+import { LVM_DRIVER } from '../../models/harvester/storage.k8s.io.storageclass';
 import isEqual from 'lodash/isEqual';
 
 export const LONGHORN_SYSTEM = 'longhorn-system';
 
+export const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
+
 export default {
   name:       'HarvesterEditNode',
   components: {
@@ -65,10 +67,11 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
 
     const hash = {
-      longhornNodes: this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.NODES }),
-      blockDevices:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BLOCK_DEVICE }),
-      addons:        this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
-      secrets:       this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET }),
+      longhornNodes:        this.$store.dispatch(`${ inStore }/findAll`, { type: LONGHORN.NODES }),
+      blockDevices:         this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.BLOCK_DEVICE }),
+      addons:               this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.ADD_ONS }),
+      secrets:              this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET }),
+      longhornV2DataEngine: this.$store.dispatch(`${ inStore }/find`, { type: LONGHORN.SETTINGS, id: LONGHORN_V2_DATA_ENGINE }),
     };
 
     if (this.$store.getters[`${ inStore }/schemaFor`](HCI.INVENTORY)) {
@@ -97,7 +100,7 @@ export default {
           displayName:        d?.displayName,
           forceFormatted:     corrupted ? true : d?.spec?.fileSystem?.forceFormatted || false,
           provisioner:        d?.spec?.provisioner?.lvm ? LVM_DRIVER : LONGHORN_DRIVER,
-          provisionerVersion: d?.spec?.provisioner?.longhorn?.engineVersion || LONGHORN_VERSION_V1, // todo get default from system version
+          provisionerVersion: d?.spec?.provisioner?.longhorn?.engineVersion || LONGHORN_VERSION_V1,
           lvmVolumeGroup:     d?.spec?.provisioner?.lvm?.vgName,
         };
       });
@@ -162,6 +165,13 @@ export default {
       return out;
     },
 
+    longhornSystemVersion() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const v2DataEngine = this.$store.getters[`${ inStore }/byId`](LONGHORN.SETTINGS, LONGHORN_V2_DATA_ENGINE) || {};
+
+      return v2DataEngine.value === 'true' ? LONGHORN_VERSION_V2 : LONGHORN_VERSION_V1;
+    },
+
     longhornDisks() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const longhornNode = this.$store.getters[`${ inStore }/byId`](LONGHORN.NODES, `${ LONGHORN_SYSTEM }/${ this.value.id }`);
@@ -193,7 +203,7 @@ export default {
           forceFormatted:     blockDevice?.spec?.fileSystem?.forceFormatted || false,
           tags:               diskSpec?.[key]?.tags || [],
           provisioner:        blockDevice?.spec?.provisioner?.lvm ? LVM_DRIVER : LONGHORN_DRIVER,
-          provisionerVersion: blockDevice?.spec?.provisioner?.longhorn?.engineVersion || LONGHORN_VERSION_V1, // todo get default from system version
+          provisionerVersion: blockDevice?.spec?.provisioner?.longhorn?.engineVersion || LONGHORN_VERSION_V1,
           lvmVolumeGroup:     blockDevice?.spec?.provisioner?.lvm?.vgName,
         };
       });
@@ -331,7 +341,7 @@ export default {
         displayName:        disk?.displayName,
         forceFormatted,
         provisioner:        LONGHORN_DRIVER,
-        provisionerVersion: LONGHORN_VERSION_V1, // todo get default from system version
+        provisionerVersion: LONGHORN_VERSION_V1,
         lvmVolumeGroup:     null,
       });
     },
@@ -370,6 +380,7 @@ export default {
             break;
           case LVM_DRIVER:
             blockDevice.spec.provisioner = { lvm: { vgName: d.lvmVolumeGroup } };
+            blockDevice.spec.provision = true;
             break;
           }
 
diff --git a/pkg/harvester/edit/harvesterhci.io.storage/index.vue b/pkg/harvester/edit/harvesterhci.io.storage/index.vue
index e3629fe30ff..63ce3235680 100644
--- a/pkg/harvester/edit/harvesterhci.io.storage/index.vue
+++ b/pkg/harvester/edit/harvesterhci.io.storage/index.vue
@@ -19,9 +19,9 @@ import { CSI_DRIVER } from '../../types';
 import { allHash } from '@shell/utils/promise';
 import { clone } from '@shell/utils/object';
 import { LONGHORN_DRIVER, LONGHORN_VERSION_V1, LONGHORN_VERSION_V2 } from '@shell/models/persistentvolume';
-import { LVM_DRIVER } from '@shell/models/storage.k8s.io.storageclass';
+import { LVM_DRIVER } from '../../models/harvester/storage.k8s.io.storageclass';
 
-const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
+const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
 
 export const LVM_TOPOLOGY_LABEL = 'topology.lvm.csi/node';
 
@@ -78,17 +78,28 @@ export default {
 
     this.$set(this.value, 'parameters', this.value.parameters || {});
     this.$set(this.value, 'provisioner', this.value.provisioner || LONGHORN_DRIVER);
+
+    if (this.value.provisioner === LONGHORN_DRIVER) {
+      this.$set(this.value.parameters, 'engineVersion', this.value.longhornVersion);
+    }
+
     this.$set(this.value, 'allowVolumeExpansion', this.value.allowVolumeExpansion || allowVolumeExpansionOptions[0].value);
     this.$set(this.value, 'reclaimPolicy', this.value.reclaimPolicy || reclaimPolicyOptions[0].value);
     this.$set(this.value, 'volumeBindingMode', this.value.volumeBindingMode || volumeBindingModeOptions[0].value);
 
+    let provisioner = `${ this.value.provisioner || LONGHORN_DRIVER }`;
+
+    if (provisioner === LONGHORN_DRIVER) {
+      provisioner = `${ provisioner }_${ this.value.longhornVersion }`;
+    }
+
     return {
       reclaimPolicyOptions,
       allowVolumeExpansionOptions,
       volumeBindingModeOptions,
       mountOptions:    [],
-      provisioner:     LONGHORN_DRIVER,
       STORAGE_CLASS,
+      provisioner,
       allowedTopologies,
       defaultAddValue: {
         key:    '',
@@ -119,19 +130,37 @@ export default {
       return this.isCreate ? _CREATE : _VIEW;
     },
 
-    provisionerWatch() {
-      return this.value.provisioner;
-    },
-
     provisioners() {
-      const csiDrivers = this.$store.getters[`${ this.inStore }/all`](CSI_DRIVER) || [];
+      const out = [];
 
-      return csiDrivers.map((provisioner) => {
-        return {
-          label: this.provisionersLabelKeys[provisioner.name],
-          value: provisioner.name,
-        };
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const csiDrivers = this.$store.getters[`${ inStore }/all`](CSI_DRIVER) || [];
+
+      csiDrivers.forEach(({ name }) => {
+        switch (name) {
+        case LONGHORN_DRIVER:
+          out.push({
+            label: `harvester.storage.storageClass.longhorn.${ LONGHORN_VERSION_V1 }.label`,
+            value: `${ name }_${ LONGHORN_VERSION_V1 }`,
+          });
+
+          if (this.longhornSystemVersion === LONGHORN_VERSION_V2 || this.value.longhornVersion === LONGHORN_VERSION_V2) {
+            out.push({
+              label: `harvester.storage.storageClass.longhorn.${ LONGHORN_VERSION_V2 }.label`,
+              value: `${ name }_${ LONGHORN_VERSION_V2 }`,
+            });
+          }
+          break;
+        case LVM_DRIVER:
+          out.push({
+            label: 'harvester.storage.storageClass.lvm.label',
+            value: name,
+          });
+          break;
+        }
       });
+
+      return out;
     },
 
     schema() {
@@ -140,38 +169,21 @@ export default {
       return this.$store.getters[`${ inStore }/schemaFor`](STORAGE_CLASS);
     },
 
-    provisionersLabelKeys() {
-      return {
-        [LONGHORN_DRIVER]: `harvester.storage.storageClass.longhorn.${ this.longhornVersion }.label`,
-        [LVM_DRIVER]:      'harvester.storage.storageClass.lvm.label'
-      };
-    },
-
-    longhornVersion() {
+    longhornSystemVersion() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const v2DataEngine = this.$store.getters[`${ inStore }/byId`](LONGHORN.SETTINGS, LONGHORN_V2_DATA_ENGINE) || {};
 
       return v2DataEngine.value === 'true' ? LONGHORN_VERSION_V2 : LONGHORN_VERSION_V1;
     },
-
-    isLonghornV2() {
-      return this.value.provisioner === LONGHORN_DRIVER && this.longhornVersion === LONGHORN_VERSION_V2;
-    },
-
-    isLvm() {
-      return this.value.provisioner === LVM_DRIVER;
-    },
   },
 
   watch: {
-    provisionerWatch() {
-      const parameters = {};
+    provisioner(neu) {
+      const [provisioner, engineVersion] = neu?.split('_');
 
-      if (this.isLonghornV2) {
-        parameters.migratable = false;
-      }
+      let parameters = {};
 
-      if (!this.isLvm) {
+      if (provisioner === LVM_DRIVER) {
         const matchLabelExpressions = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).filter(t => t.key !== LVM_TOPOLOGY_LABEL);
 
         if (matchLabelExpressions.length > 0) {
@@ -181,11 +193,18 @@ export default {
         }
       }
 
+      this.$set(this.value, 'provisioner', provisioner);
+
+      if (provisioner === LONGHORN_DRIVER) {
+        parameters = { engineVersion };
+      }
+
+      this.$set(this.value, 'allowVolumeExpansion', this.value.provisioner === LONGHORN_DRIVER);
       this.$set(this.value, 'parameters', parameters);
     }
   },
 
-  created() {
+  created(neu) {
     this.registerBeforeHook(this.willSave, 'willSave');
   },
 
@@ -198,11 +217,6 @@ export default {
       }
     },
 
-    updateProvisioner(provisioner) {
-      this.$set(this.value, 'provisioner', provisioner);
-      this.$set(this.value, 'allowVolumeExpansion', provisioner === LONGHORN_DRIVER);
-    },
-
     willSave() {
       Object.keys(this.value.parameters).forEach((key) => {
         if (this.value.parameters[key] === null || this.value.parameters[key] === '') {
@@ -259,7 +273,7 @@ export default {
       :register-before-hook="registerBeforeHook"
     />
     <LabeledSelect
-      :value="value.provisioner"
+      v-model="provisioner"
       label="Provisioner"
       :options="provisioners"
       :localized-label="true"
@@ -267,13 +281,12 @@ export default {
       :searchable="true"
       :taggable="true"
       class="mb-20"
-      @input="updateProvisioner($event)"
     />
     <Tabbed :side-tabs="true">
       <Tab name="parameters" :label="t('storageClass.parameters.label')" :weight="2">
         <component
-          :is="getComponent(value.provisioner)"
-          :key="value.provisioner"
+          :is="getComponent(provisioner)"
+          :key="provisioner"
           :value="value"
           :mode="modeOverride"
           :real-mode="realMode"
diff --git a/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io.vue b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_LonghornV1.vue
similarity index 86%
rename from pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io.vue
rename to pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_LonghornV1.vue
index 7f1a155ad72..5b806bdaeed 100644
--- a/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io.vue
+++ b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_LonghornV1.vue
@@ -8,9 +8,7 @@ import { _CREATE, _VIEW } from '@shell/config/query-params';
 import { LONGHORN } from '@shell/config/types';
 import { clone } from '@shell/utils/object';
 import { uniq } from '@shell/utils/array';
-import { LONGHORN_VERSION_V1, LONGHORN_VERSION_V2 } from '@shell/models/persistentvolume';
-
-const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
+import { LONGHORN_VERSION_V1 } from '@shell/models/persistentvolume';
 
 const DEFAULT_PARAMETERS = [
   'numberOfReplicas',
@@ -18,6 +16,7 @@ const DEFAULT_PARAMETERS = [
   'diskSelector',
   'nodeSelector',
   'migratable',
+  'engineVersion',
 ];
 
 export default {
@@ -44,25 +43,18 @@ export default {
   },
 
   data() {
-    const inStore = this.$store.getters['currentProduct'].inStore;
-    const v2DataEngine = this.$store.getters[`${ inStore }/byId`](LONGHORN.SETTINGS, LONGHORN_V2_DATA_ENGINE) || {};
-
-    const longhornVersion = v2DataEngine.value === 'true' ? LONGHORN_VERSION_V2 : LONGHORN_VERSION_V1;
-
     if (this.realMode === _CREATE) {
       this.$set(this.value, 'parameters', {
         numberOfReplicas:    '3',
         staleReplicaTimeout: '30',
         diskSelector:        null,
         nodeSelector:        null,
-        migratable:          longhornVersion === LONGHORN_VERSION_V2 ? 'false' : 'true',
+        migratable:          'true',
+        engineVersion:       LONGHORN_VERSION_V1
       });
     }
 
-    return {
-      LONGHORN_VERSION_V2,
-      longhornVersion
-    };
+    return {};
   },
 
   computed: {
@@ -240,7 +232,6 @@ export default {
           :label="t('harvester.storage.parameters.migratable.label')"
           :mode="mode"
           :options="migratableOptions"
-          :disabled="longhornVersion === LONGHORN_VERSION_V2"
         />
       </div>
     </div>
diff --git a/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_LonghornV2.vue b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_LonghornV2.vue
new file mode 100644
index 00000000000..60a78d9f32f
--- /dev/null
+++ b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/driver.longhorn.io_LonghornV2.vue
@@ -0,0 +1,253 @@
+<script>
+import KeyValue from '@shell/components/form/KeyValue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import RadioGroup from '@components/Form/Radio/RadioGroup';
+
+import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { LONGHORN } from '@shell/config/types';
+import { clone } from '@shell/utils/object';
+import { uniq } from '@shell/utils/array';
+import { LONGHORN_VERSION_V2 } from '@shell/models/persistentvolume';
+
+const DEFAULT_PARAMETERS = [
+  'numberOfReplicas',
+  'staleReplicaTimeout',
+  'diskSelector',
+  'nodeSelector',
+  'migratable',
+  'engineVersion',
+];
+
+export default {
+  components: {
+    KeyValue,
+    LabeledSelect,
+    LabeledInput,
+    RadioGroup,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+    mode: {
+      type:     String,
+      required: true
+    },
+    realMode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  data() {
+    if (this.realMode === _CREATE) {
+      this.$set(this.value, 'parameters', {
+        numberOfReplicas:    '3',
+        staleReplicaTimeout: '30',
+        diskSelector:        null,
+        nodeSelector:        null,
+        migratable:          'false',
+        engineVersion:       LONGHORN_VERSION_V2
+      });
+    }
+
+    return {};
+  },
+
+  computed: {
+    longhornNodes() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/all`](LONGHORN.NODES);
+    },
+
+    nodeTags() {
+      return (this.longhornNodes || []).reduce((sum, node) => {
+        const tags = node.spec?.tags || [];
+
+        return uniq([...sum, ...tags]);
+      }, []);
+    },
+
+    diskTags() {
+      return (this.longhornNodes || []).reduce((sum, node) => {
+        const disks = node.spec?.disks;
+
+        const tagsOfNode = Object.keys(disks).reduce((sum, key) => {
+          const tags = disks[key]?.tags || [];
+
+          return uniq([...sum, ...tags]);
+        }, []);
+
+        return uniq([...sum, ...tagsOfNode]);
+      }, []);
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    migratableOptions() {
+      return [{
+        label: this.t('generic.yes'),
+        value: 'true'
+      }, {
+        label: this.t('generic.no'),
+        value: 'false'
+      }];
+    },
+
+    parameters: {
+      get() {
+        const parameters = clone(this.value?.parameters) || {};
+
+        DEFAULT_PARAMETERS.map((key) => {
+          delete parameters[key];
+        });
+
+        return parameters;
+      },
+
+      set(value) {
+        Object.assign(this.value.parameters, value);
+      }
+    },
+
+    nodeSelector: {
+      get() {
+        const nodeSelector = this.value?.parameters?.nodeSelector;
+
+        if ((nodeSelector || '').includes(',')) {
+          return nodeSelector.split(',');
+        } else if (nodeSelector) {
+          return [nodeSelector];
+        } else {
+          return [];
+        }
+      },
+
+      set(value) {
+        this.value.parameters.nodeSelector = (value || []).join(',');
+      }
+    },
+
+    diskSelector: {
+      get() {
+        const diskSelector = this.value?.parameters?.diskSelector;
+
+        if ((diskSelector || '').includes(',')) {
+          return diskSelector.split(',');
+        } else if (diskSelector) {
+          return [diskSelector];
+        } else {
+          return [];
+        }
+      },
+
+      set(value) {
+        this.value.parameters.diskSelector = (value || []).join(',');
+      }
+    },
+
+    numberOfReplicas: {
+      get() {
+        return this.value?.parameters?.numberOfReplicas;
+      },
+
+      set(value) {
+        if (value >= 1 && value <= 3) {
+          this.value.parameters.numberOfReplicas = String(value);
+        }
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="numberOfReplicas"
+          :label="t('harvester.storage.parameters.numberOfReplicas.label')"
+          :required="true"
+          :mode="mode"
+          min="1"
+          max="3"
+          type="number"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.parameters.staleReplicaTimeout"
+          :label="t('harvester.storage.parameters.staleReplicaTimeout.label')"
+          :required="true"
+          :mode="mode"
+          type="number"
+        />
+      </div>
+    </div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="nodeSelector"
+          :label="t('harvester.storage.parameters.nodeSelector.label')"
+          :options="nodeTags"
+          :taggable="true"
+          :multiple="true"
+          :mode="mode"
+        >
+          <template #no-options="{ searching }">
+            <span v-if="!searching" class="text-muted">
+              {{ t('harvester.storage.parameters.nodeSelector.no-options', null, true) }}
+            </span>
+          </template>
+        </LabeledSelect>
+      </div>
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="diskSelector"
+          :label="t('harvester.storage.parameters.diskSelector.label')"
+          :options="diskTags"
+          :taggable="true"
+          :multiple="true"
+          :mode="mode"
+        >
+          <template #no-options="{ searching }">
+            <span v-if="!searching" class="text-muted">
+              {{ t('harvester.storage.parameters.diskSelector.no-options', null, true) }}
+            </span>
+          </template>
+        </LabeledSelect>
+      </div>
+    </div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <RadioGroup
+          v-model="value.parameters.migratable"
+          name="layer3NetworkMode"
+          :label="t('harvester.storage.parameters.migratable.label')"
+          :mode="mode"
+          :options="migratableOptions"
+          :disabled="true"
+        />
+      </div>
+    </div>
+    <KeyValue
+      v-model="parameters"
+      :add-label="t('storageClass.longhorn.addLabel')"
+      :read-allowed="false"
+      :mode="mode"
+      class="mt-10"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.labeled-input.compact-input {
+  padding: 7px 10px;
+}
+</style>
diff --git a/pkg/harvester/edit/harvesterhci.io.storage/provisioners/lvm.driver.harvesterhci.io.vue b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/lvm.driver.harvesterhci.io.vue
index f20a2a23497..2f00234062a 100644
--- a/pkg/harvester/edit/harvesterhci.io.storage/provisioners/lvm.driver.harvesterhci.io.vue
+++ b/pkg/harvester/edit/harvesterhci.io.storage/provisioners/lvm.driver.harvesterhci.io.vue
@@ -77,7 +77,7 @@ export default {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const nodes = this.$store.getters[`${ inStore }/all`](NODE) || [];
 
-      return nodes.map(n => n.name);
+      return nodes.filter(n => n.labels[LVM_TOPOLOGY_LABEL] === n.name).map(n => n.name);
     },
 
     volumeGroups() {
@@ -137,7 +137,7 @@ export default {
         >
           <template #no-options="{ searching }">
             <span v-if="!searching" class="text-muted">
-              {{ t('harvester.storage.parameters.diskSelector.no-options', null, true) }}
+              {{ t('harvester.storage.parameters.lvmVolumeGroup.no-options', null, true) }}
             </span>
           </template>
         </LabeledSelect>
@@ -149,13 +149,7 @@ export default {
           :options="volumeGroupTypes"
           :mode="mode"
           :required="true"
-        >
-          <template #no-options="{ searching }">
-            <span v-if="!searching" class="text-muted">
-              {{ t('harvester.storage.parameters.nodeSelector.no-options', null, true) }}
-            </span>
-          </template>
-        </LabeledSelect>
+        />
       </div>
     </div>
     <KeyValue
diff --git a/pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue b/pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue
index f4a76e7f1c9..a04c1971b23 100644
--- a/pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue
+++ b/pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue
@@ -17,7 +17,7 @@ import { exceptionToErrorsArray } from '@shell/utils/error';
 import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS } from '@shell/config/types';
 import { HCI } from '../types';
-import { LVM_DRIVER } from '@shell/models/storage.k8s.io.storageclass';
+import { LVM_DRIVER } from '../models/harvester/storage.k8s.io.storageclass';
 
 const DOWNLOAD = 'download';
 const UPLOAD = 'upload';
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index 78f07ed2d17..f719193be76 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -445,7 +445,9 @@ harvester:
       storageMaximum:
         label: Storage Maximum
       provisioner: Provisioner
-      lvmVolumeGroup: Volume Group
+      lvmVolumeGroup:
+        label: Volume Group
+        create: Create New...
     tags:
       label: Host Tags
       addLabel: Add Host Tag
@@ -1072,9 +1074,10 @@ harvester:
       label: Storage Class
       longhorn:
         LonghornV1:
-          label: LonghornV1 (CSI)
+          label: Longhorn V1 (CSI)
         LonghornV2:
-          label: LonghornV2 (CSI)
+          label: Longhorn V2 (CSI)
+        versionTooltip: Longhorn V2 is disabled for this node.
       lvm:
         label: LVM
     title: Storage Classes
@@ -1098,6 +1101,7 @@ harvester:
         label: Volume Group Type
       lvmVolumeGroup:
         label: Volume Group Name
+        no-options: No available Volume Grups, please add in the `Host > Storage` page
       node:
         label: Node
     allowedTopologies:
diff --git a/pkg/harvester/models/harvester/storage.k8s.io.storageclass.js b/pkg/harvester/models/harvester/storage.k8s.io.storageclass.js
index 80dffc49df6..30fcf79411f 100644
--- a/pkg/harvester/models/harvester/storage.k8s.io.storageclass.js
+++ b/pkg/harvester/models/harvester/storage.k8s.io.storageclass.js
@@ -2,6 +2,9 @@ import { clone } from '@shell/utils/object';
 import { HCI } from '../../types';
 import StorageClass from '@shell/models/storage.k8s.io.storageclass';
 import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../config/harvester';
+import { LONGHORN_DRIVER, LONGHORN_VERSION_V1 } from '@shell/models/persistentvolume';
+
+export const LVM_DRIVER = 'lvm.driver.harvesterhci.io';
 
 export default class HciStorageClass extends StorageClass {
   get detailLocation() {
@@ -31,4 +34,26 @@ export default class HciStorageClass extends StorageClass {
   get parentNameOverride() {
     return this.$rootGetters['i18n/t'](`typeLabel."${ HCI.STORAGE }"`, { count: 1 })?.trim();
   }
+
+  get longhornVersion() {
+    if (this.provisioner === LONGHORN_DRIVER) {
+      return (this.parameters || {}).engineVersion || LONGHORN_VERSION_V1;
+    }
+
+    return null;
+  }
+
+  get provisionerDisplay() {
+    let key = '';
+
+    if (this.provisioner === LONGHORN_DRIVER) {
+      key = `harvester.storage.storageClass.longhorn.${ this.longhornVersion }.label`;
+    }
+
+    if (this.provisioner === LVM_DRIVER) {
+      key = `harvester.storage.storageClass.lvm.label`;
+    }
+
+    return this.$rootGetters['i18n/t'](key);
+  }
 }
diff --git a/shell/models/storage.k8s.io.storageclass.js b/shell/models/storage.k8s.io.storageclass.js
index df3e72696b0..7b38d2fc5a4 100644
--- a/shell/models/storage.k8s.io.storageclass.js
+++ b/shell/models/storage.k8s.io.storageclass.js
@@ -81,8 +81,6 @@ export const PROVISIONER_OPTIONS = [
   }
 ];
 
-export const LVM_DRIVER = 'lvm.driver.harvesterhci.io';
-
 export default class extends SteveModel {
   get provisionerDisplay() {
     const option = PROVISIONER_OPTIONS.find(o => o.value === this.provisioner);