From 62b6b83afb27a4d573c66adb25c8e7fe9291d978 Mon Sep 17 00:00:00 2001
From: Alejandro Bonilla <abonilla@suse.com>
Date: Tue, 18 Aug 2026 20:43:18 -0500
Subject: [PATCH] feat(storage): expose volume encryption for the LVM CSI
 StorageClass

The StorageClass creation form only rendered the encryption toggle + secret
picker for the Longhorn provisioner components; the LVM provisioner form had no
way to enable encryption. Add the same encryption UI to the LVM provisioner so
users can create encrypted lvm.driver.harvesterhci.io StorageClasses from the
dashboard.

The block mirrors provisioners/driver.longhorn.io_v1.vue: a Volume Encryption
RadioGroup bound to parameters.encrypted, and a Secret LabeledSelect that
populates the csi.storage.k8s.io provisioner/node-publish/node-stage (and
node-expand, when the online-expansion feature is enabled) secret parameters
from CSI_SECRETS. It is gated on the existing `volumeEncryption` feature flag
(value.volumeEncryptionFeatureEnabled) and reuses the secret prefetch already
done in index.vue. Encrypted params are stripped from the raw KeyValue editor
to avoid duplicate entry.

Everything downstream (VM images, volumes, VMs, snapshot/backup restore)
already recognizes an encrypted StorageClass generically via
StorageClass.isEncrypted (parameters.encrypted === 'true'), so no other UI
changes are needed. Companion driver support:
harvester/csi-driver-lvm#67.

Signed-off-by: Alejandro Bonilla <abonilla@suse.com>
---
 .../lvm.driver.harvesterhci.io.vue            | 507 ++++++++++++------
 1 file changed, 338 insertions(+), 169 deletions(-)

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 7b7b925c3..beb40ec3f 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
@@ -1,175 +1,344 @@
-<script>
-
-import KeyValue from '@shell/components/form/KeyValue';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-
-import { allHash } from '@shell/utils/promise';
-import { clone } from '@shell/utils/object';
-import { HCI } from '../../../types';
-import { NODE } from '@shell/config/types';
-import { LVM_TOPOLOGY_LABEL } from '../index.vue';
-
-const DEFAULT_PARAMETERS = [
-  'type',
-  'vgName'
-];
-
-const DEFAULT_TOPOLOGIES = [{
-  matchLabelExpressions: [{
-    key:    LVM_TOPOLOGY_LABEL,
-    values: []
-  }]
-}];
-
-export default {
-  components: {
-    KeyValue,
-    LabeledSelect,
-  },
-
-  props: {
-    value: {
-      type:     Object,
-      required: true
-    },
-    mode: {
-      type:     String,
-      required: true
-    },
-    realMode: {
-      type:     String,
-      required: true
-    },
-  },
-
-  async fetch() {
-    const inStore = this.$store.getters['currentProduct'].inStore;
-
-    await allHash({
-      nodes:           this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
-      lvmVolumeGroups: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.LVM_VOLUME_GROUP }),
-    });
-  },
-
-  data() {
-    const node = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).find((t) => t.key === LVM_TOPOLOGY_LABEL)?.values[0];
-
-    return {
-      volumeGroupTypes: ['striped', 'dm-thin'],
-      node,
-    };
-  },
-
-  watch: {
-    node(value) {
-      delete (this.value.parameters.vgName);
-
-      const allowedTopologies = [...DEFAULT_TOPOLOGIES];
-
-      allowedTopologies[0].matchLabelExpressions[0].values = [value];
-
-      this.value.allowedTopologies = allowedTopologies;
-    }
-  },
-
-  computed: {
-    nodes() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const nodes = this.$store.getters[`${ inStore }/all`](NODE) || [];
-
-      return nodes.filter((n) => n.labels[LVM_TOPOLOGY_LABEL] === n.name).map((n) => n.name);
-    },
-
-    volumeGroups() {
-      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)
-        .map((g) => g.spec.vgName);
-    },
-
-    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);
-      }
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="row mt-10">
-      <div class="col span-6">
-        <LabeledSelect
-          v-model:value="node"
-          :label="t('harvester.storage.parameters.node.label')"
-          :options="nodes"
-          :mode="mode"
-          :required="true"
-        >
-          <template #no-options="{ searching }">
+<script>
+
+import KeyValue from '@shell/components/form/KeyValue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import RadioGroup from '@components/Form/Radio/RadioGroup';
+import Checkbox from '@components/Form/Checkbox/Checkbox';
+
+import { allHash } from '@shell/utils/promise';
+import { clone } from '@shell/utils/object';
+import { HCI } from '../../../types';
+import { NODE, SECRET } from '@shell/config/types';
+import { _CREATE, _VIEW, _EDIT } from '@shell/config/query-params';
+import { CSI_SECRETS } from '@pkg/harvester/config/harvester-map';
+import { LVM_TOPOLOGY_LABEL } from '../index.vue';
+
+const {
+  CSI_PROVISIONER_SECRET_NAME,
+  CSI_PROVISIONER_SECRET_NAMESPACE,
+  CSI_NODE_PUBLISH_SECRET_NAME,
+  CSI_NODE_PUBLISH_SECRET_NAMESPACE,
+  CSI_NODE_STAGE_SECRET_NAME,
+  CSI_NODE_STAGE_SECRET_NAMESPACE,
+  CSI_NODE_EXPAND_SECRET_NAME,
+  CSI_NODE_EXPAND_SECRET_NAMESPACE
+} = CSI_SECRETS;
+
+const DEFAULT_PARAMETERS = [
+  'type',
+  'vgName'
+];
+
+const DEFAULT_TOPOLOGIES = [{
+  matchLabelExpressions: [{
+    key:    LVM_TOPOLOGY_LABEL,
+    values: []
+  }]
+}];
+
+export default {
+  components: {
+    KeyValue,
+    LabeledSelect,
+    RadioGroup,
+    Checkbox,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+    mode: {
+      type:     String,
+      required: true
+    },
+    realMode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      nodes:           this.$store.dispatch(`${ inStore }/findAll`, { type: NODE }),
+      lvmVolumeGroups: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.LVM_VOLUME_GROUP }),
+    };
+
+    if (this.value.volumeEncryptionFeatureEnabled) {
+      hash.secrets = this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET });
+    }
+
+    await allHash(hash);
+  },
+
+  data() {
+    const node = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).find((t) => t.key === LVM_TOPOLOGY_LABEL)?.values[0];
+
+    const hasExpandSecret = !!(this.value.parameters?.[CSI_NODE_EXPAND_SECRET_NAME] && this.value.parameters?.[CSI_NODE_EXPAND_SECRET_NAMESPACE]);
+    const volumeExpansionCheckBoxEnabled = this.realMode === _CREATE ? true : hasExpandSecret;
+
+    return {
+      volumeGroupTypes: ['striped', 'dm-thin'],
+      node,
+      volumeExpansionCheckBoxEnabled,
+    };
+  },
+
+  watch: {
+    node(value) {
+      delete (this.value.parameters.vgName);
+
+      const allowedTopologies = [...DEFAULT_TOPOLOGIES];
+
+      allowedTopologies[0].matchLabelExpressions[0].values = [value];
+
+      this.value.allowedTopologies = allowedTopologies;
+    },
+
+    volumeExpansionCheckBoxEnabled(enabled) {
+      const currentSecret = this.secret;
+
+      if (!currentSecret) {
+        return;
+      }
+
+      const [namespace, name] = currentSecret.split('/');
+
+      if (enabled && this.enableOnlineExpansionVolumeEncryption) {
+        this.value['parameters'] = {
+          ...this.value.parameters,
+          [CSI_NODE_EXPAND_SECRET_NAME]:      name,
+          [CSI_NODE_EXPAND_SECRET_NAMESPACE]: namespace,
+        };
+      } else {
+        const params = { ...this.value.parameters };
+
+        delete params[CSI_NODE_EXPAND_SECRET_NAME];
+        delete params[CSI_NODE_EXPAND_SECRET_NAMESPACE];
+        this.value['parameters'] = params;
+      }
+    },
+  },
+
+  computed: {
+    nodes() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const nodes = this.$store.getters[`${ inStore }/all`](NODE) || [];
+
+      return nodes.filter((n) => n.labels[LVM_TOPOLOGY_LABEL] === n.name).map((n) => n.name);
+    },
+
+    volumeGroups() {
+      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)
+        .map((g) => g.spec.vgName);
+    },
+
+    secrets() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const allSecrets = this.$store.getters[`${ inStore }/all`](SECRET) || [];
+
+      // only show non-system secret to user to select
+      return allSecrets.filter((secret) => secret.isSystem === false);
+    },
+
+    secretOptions() {
+      return this.secrets.map((secret) => secret.id);
+    },
+
+    volumeEncryptionOptions() {
+      return [{
+        label: this.t('generic.yes'),
+        value: 'true'
+      }, {
+        label: this.t('generic.no'),
+        value: 'false'
+      }];
+    },
+
+    isEdit() {
+      return this.realMode === _EDIT;
+    },
+    isView() {
+      return this.realMode === _VIEW;
+    },
+
+    enableOnlineExpansionVolumeEncryption() {
+      return this.value.expandOnlineEncryptedVolumeFeatureEnabled;
+    },
+
+    volumeEncryption: {
+      set(neu) {
+        this.value['parameters'] = {
+          ...this.value.parameters,
+          encrypted: neu
+        };
+      },
+
+      get() {
+        return this.value?.parameters?.encrypted || 'false';
+      }
+    },
+
+    secret: {
+      get() {
+        const selectedNs = this.value.parameters[CSI_PROVISIONER_SECRET_NAMESPACE];
+        const selectedName = this.value.parameters[CSI_PROVISIONER_SECRET_NAME];
+
+        if (selectedNs && selectedName) {
+          return `${ selectedNs }/${ selectedName }`;
+        }
+
+        return '';
+      },
+
+      set(selectedSecret) {
+        const [namespace, name] = selectedSecret.split('/');
+
+        const expandSecretParams = (this.enableOnlineExpansionVolumeEncryption && this.volumeExpansionCheckBoxEnabled) ? {
+          [CSI_NODE_EXPAND_SECRET_NAME]:      name,
+          [CSI_NODE_EXPAND_SECRET_NAMESPACE]: namespace,
+        } : {};
+
+        this.value['parameters'] = {
+          ...this.value.parameters,
+          [CSI_PROVISIONER_SECRET_NAME]:       name,
+          [CSI_NODE_PUBLISH_SECRET_NAME]:      name,
+          [CSI_NODE_STAGE_SECRET_NAME]:        name,
+          [CSI_PROVISIONER_SECRET_NAMESPACE]:  namespace,
+          [CSI_NODE_PUBLISH_SECRET_NAMESPACE]: namespace,
+          [CSI_NODE_STAGE_SECRET_NAMESPACE]:   namespace,
+          ...expandSecretParams,
+        };
+      }
+    },
+
+    parameters: {
+      get() {
+        const parameters = clone(this.value?.parameters) || {};
+
+        const managedKeys = [
+          ...DEFAULT_PARAMETERS,
+          ...(this.value.volumeEncryptionFeatureEnabled ? ['encrypted', ...Object.values(CSI_SECRETS)] : []),
+        ];
+
+        managedKeys.forEach((key) => {
+          delete parameters[key];
+        });
+
+        return parameters;
+      },
+
+      set(value) {
+        Object.assign(this.value.parameters, value);
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model:value="node"
+          :label="t('harvester.storage.parameters.node.label')"
+          :options="nodes"
+          :mode="mode"
+          :required="true"
+        >
+          <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">
-        <LabeledSelect
-          v-model:value="value.parameters.vgName"
-          :label="t('harvester.storage.parameters.lvmVolumeGroup.label')"
-          :options="volumeGroups"
-          :mode="mode"
-          :required="true"
-        >
-          <template #no-options="{ searching }">
+            >
+              {{ t('harvester.storage.parameters.diskSelector.no-options', null, true) }}
+            </span>
+          </template>
+        </LabeledSelect>
+      </div>
+    </div>
+    <div class="row mt-10">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model:value="value.parameters.vgName"
+          :label="t('harvester.storage.parameters.lvmVolumeGroup.label')"
+          :options="volumeGroups"
+          :mode="mode"
+          :required="true"
+        >
+          <template #no-options="{ searching }">
             <span
               v-if="!searching"
               class="text-muted"
-            >
-              {{ t('harvester.storage.parameters.lvmVolumeGroup.no-options', null, true) }}
-            </span>
-          </template>
-        </LabeledSelect>
-      </div>
-      <div class="col span-6">
-        <LabeledSelect
-          v-model:value="value.parameters.type"
-          :label="t('harvester.storage.parameters.lvmVolumeGroupType.label')"
-          :options="volumeGroupTypes"
-          :mode="mode"
-          :required="true"
-        />
-      </div>
-    </div>
-    <KeyValue
-      v-model:value="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>
+            >
+              {{ t('harvester.storage.parameters.lvmVolumeGroup.no-options', null, true) }}
+            </span>
+          </template>
+        </LabeledSelect>
+      </div>
+      <div class="col span-6">
+        <LabeledSelect
+          v-model:value="value.parameters.type"
+          :label="t('harvester.storage.parameters.lvmVolumeGroupType.label')"
+          :options="volumeGroupTypes"
+          :mode="mode"
+          :required="true"
+        />
+      </div>
+    </div>
+    <template v-if="value.volumeEncryptionFeatureEnabled">
+      <div class="row mt-20">
+        <RadioGroup
+          v-model:value="volumeEncryption"
+          name="volumeEncryption"
+          :label="t('harvester.storage.volumeEncryption')"
+          :mode="mode"
+          :options="volumeEncryptionOptions"
+        />
+      </div>
+      <div
+        v-if="value.parameters.encrypted === 'true'"
+        class="row mt-20"
+      >
+        <div class="col span-6">
+          <LabeledSelect
+            v-model:value="secret"
+            :label="t('harvester.storage.secret')"
+            :options="secretOptions"
+            :mode="mode"
+          />
+        </div>
+        <div
+          v-if="enableOnlineExpansionVolumeEncryption"
+          class="col span-6 flex items-center mt-20"
+        >
+          <Checkbox
+            v-model:value="volumeExpansionCheckBoxEnabled"
+            :label="t('harvester.storage.volumeExpansionCheckbox')"
+            :disabled="isEdit || isView"
+          />
+        </div>
+      </div>
+    </template>
+    <KeyValue
+      v-model:value="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>