@rancher/shell 0.3.0 → 0.3.1

package/edit/persistentvolume/index.vue

@@ -16,7 +16,7 @@ import UnitInput from '@shell/components/form/UnitInput';
 import { NODE, PVC, STORAGE_CLASS } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
 import { LONGHORN_PLUGIN, VOLUME_PLUGINS } from '@shell/models/persistentvolume';
-import { _CREATE, _VIEW, _EDIT } from '@shell/config/query-params';
+import { _CREATE, _VIEW } from '@shell/config/query-params';
 import { clone } from '@shell/utils/object';
 import InfoBox from '@shell/components/InfoBox';
 import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
@@ -44,7 +44,7 @@ export default {
   mixins: [CreateEditView, ResourceManager],
 
   fetch() {
-    if (this.mode === _EDIT) {
+    if (this.mode !== _CREATE) {
       this.secondaryResourceData.namespace = this.value?.spec?.claimRef?.namespace || null;
 
       this.secondaryResourceData.data[PVC] = {
@@ -80,34 +80,13 @@ export default {
     const plugin = (foundPlugin || VOLUME_PLUGINS[0]).value;
 
     return {
-      secondaryResourceData: {
-        namespace: null,
-        data:      {
-          [STORAGE_CLASS]: {
-            applyTo: [
-              {
-                var:         'storageClassOptions',
-                parsingFunc: (data) => {
-                  const storageClassOptions = data.map(s => ({
-                    label: s.metadata.name,
-                    value: s.metadata.name
-                  }));
-
-                  storageClassOptions.unshift(this.NONE_OPTION);
-
-                  return storageClassOptions;
-                }
-              }
-            ]
-          },
-        }
-      },
-      storageClassOptions: [],
-      currentClaim:        null,
+      secondaryResourceData: this.secondaryResourceDataConfig(),
+      storageClassOptions:   [],
+      currentClaim:          null,
       plugin,
       NONE_OPTION,
       NODE,
-      initialNodeAffinity: clone(this.value.spec.nodeAffinity),
+      initialNodeAffinity:   clone(this.value.spec.nodeAffinity),
     };
   },
 
@@ -175,6 +154,30 @@ export default {
   },
 
   methods: {
+    secondaryResourceDataConfig() {
+      return {
+        namespace: null,
+        data:      {
+          [STORAGE_CLASS]: {
+            applyTo: [
+              {
+                var:         'storageClassOptions',
+                parsingFunc: (data) => {
+                  const storageClassOptions = data.map(s => ({
+                    label: s.metadata.name,
+                    value: s.metadata.name
+                  }));
+
+                  storageClassOptions.unshift(this.NONE_OPTION);
+
+                  return storageClassOptions;
+                }
+              }
+            ]
+          },
+        }
+      };
+    },
     checkboxSetter(key, value) {
       if (value) {
         this.value.spec.accessModes.push(key);

package/edit/persistentvolume/plugins/cephfs.vue

@@ -42,47 +42,47 @@ export default {
   <div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.cephfs.path"
-          :mode="mode"
-          :label="t('persistentVolume.cephfs.path.label')"
-          :placeholder="t('persistentVolume.cephfs.path.placeholder')"
+        <LabeledInput
+          v-model="value.spec.cephfs.path"
+          :mode="mode"
+          :label="t('persistentVolume.cephfs.path.label')"
+          :placeholder="t('persistentVolume.cephfs.path.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.cephfs.user"
-          :mode="mode"
-          :label="t('persistentVolume.cephfs.user.label')"
-          :placeholder="t('persistentVolume.cephfs.user.placeholder')"
+        <LabeledInput
+          v-model="value.spec.cephfs.user"
+          :mode="mode"
+          :label="t('persistentVolume.cephfs.user.label')"
+          :placeholder="t('persistentVolume.cephfs.user.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.cephfs.secretFile"
-          :mode="mode"
-          :label="t('persistentVolume.cephfs.secretFile.label')"
-          :placeholder="t('persistentVolume.cephfs.secretFile.placeholder')"
+        <LabeledInput
+          v-model="value.spec.cephfs.secretFile"
+          :mode="mode"
+          :label="t('persistentVolume.cephfs.secretFile.label')"
+          :placeholder="t('persistentVolume.cephfs.secretFile.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.cephfs.secretRef.name"
-          :mode="mode"
-          :label="t('persistentVolume.shared.secretName.label')"
-          :placeholder="t('persistentVolume.shared.secretName.placeholder')"
+        <LabeledInput
+          v-model="value.spec.cephfs.secretRef.name"
+          :mode="mode"
+          :label="t('persistentVolume.shared.secretName.label')"
+          :placeholder="t('persistentVolume.shared.secretName.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.cephfs.secretRef.namespace"
-          :mode="mode"
-          :label="t('persistentVolume.shared.secretNamespace.label')"
-          :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
+        <LabeledInput
+          v-model="value.spec.cephfs.secretRef.namespace"
+          :mode="mode"
+          :label="t('persistentVolume.shared.secretNamespace.label')"
+          :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
         />
       </div>
     </div>
@@ -98,10 +98,10 @@ export default {
         />
       </div>
       <div class="col span-6">
-        <ArrayList
-          v-model="value.spec.cephfs.monitors"
-          :add-label="t('persistentVolume.shared.monitors.add')"
-          :mode="mode"
+        <ArrayList
+          v-model="value.spec.cephfs.monitors"
+          :add-label="t('persistentVolume.shared.monitors.add')"
+          :mode="mode"
         />
       </div>
     </div>

package/edit/persistentvolume/plugins/csi.vue

@@ -2,10 +2,16 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 import KeyValue from '@shell/components/form/KeyValue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { CSI_DRIVER } from '@shell/config/types';
+import { set } from '@shell/utils/object';
 
 export default {
   components: {
-    KeyValue, LabeledInput, RadioGroup
+    KeyValue,
+    LabeledInput,
+    RadioGroup,
+    LabeledSelect
   },
   props: {
     value: {
@@ -17,6 +23,18 @@ export default {
       required: true,
     },
   },
+
+  fetch() {
+    if (this.$store.getters['cluster/schemaFor'](CSI_DRIVER)) {
+      this.$store.dispatch('cluster/findAll', { type: CSI_DRIVER }).then((drivers) => {
+        this.csiDrivers = drivers;
+        this.loadingDrivers = false;
+      });
+    } else {
+      this.loadingDrivers = false;
+    }
+  },
+
   data() {
     const readOnlyOptions = [
       {
@@ -36,8 +54,25 @@ export default {
     this.$set(this.value.spec.csi, 'controllerExpandSecretRef', this.value.spec.csi.controllerExpandSecretRef || {});
     this.$set(this.value.spec.csi, 'controllerPublishSecretRef', this.value.spec.csi.controllerPublishSecretRef || {});
 
-    return { readOnlyOptions };
+    return {
+      readOnlyOptions,
+      loadingDrivers: true,
+      csiDrivers:     [],
+    };
+  },
+
+  computed: {
+    driverOptions() {
+      return this.csiDrivers.map((driver) => {
+        return driver.metadata.name;
+      });
+    }
   },
+  methods: {
+    selectDriver(e) {
+      set(this.value, 'spec.csi.driver', e.value ? e.value : e.label);
+    }
+  }
 };
 </script>
 
@@ -45,29 +80,34 @@ export default {
   <div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.driver"
-          :mode="mode"
-          :label="t('persistentVolume.csi.driver.label')"
-          :placeholder="t('persistentVolume.csi.driver.placeholder')"
+        <LabeledSelect
+          :value="value.spec.csi.driver"
+          :loading="loadingDrivers"
+          :options="driverOptions"
+          :mode="mode"
+          :label="t('persistentVolume.csi.driver.label')"
+          :placeholder="t('persistentVolume.csi.driver.placeholder')"
+          searchable
+          taggable
+          @selecting="selectDriver"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.fsType"
-          :mode="mode"
-          :label="t('persistentVolume.shared.filesystemType.label')"
-          :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.fsType"
+          :mode="mode"
+          :label="t('persistentVolume.shared.filesystemType.label')"
+          :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.volumeHandle"
-          :mode="mode"
-          :label="t('persistentVolume.csi.volumeHandle.label')"
-          :placeholder="t('persistentVolume.csi.volumeHandle.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.volumeHandle"
+          :mode="mode"
+          :label="t('persistentVolume.csi.volumeHandle.label')"
+          :placeholder="t('persistentVolume.csi.volumeHandle.placeholder')"
         />
       </div>
       <div class="col span-6">
@@ -83,83 +123,83 @@ export default {
     </div>
     <div class="row mb-20">
       <div class="col span-12">
-        <KeyValue
-          v-model="value.spec.csi.volumeAttributes"
-          :add-label="t('persistentVolume.csi.volumeAttributes.add')"
-          :mode="mode"
-          :read-allowed="false"
+        <KeyValue
+          v-model="value.spec.csi.volumeAttributes"
+          :add-label="t('persistentVolume.csi.volumeAttributes.add')"
+          :mode="mode"
+          :read-allowed="false"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.nodePublishSecretRef.name"
-          :mode="mode"
-          :label="t('persistentVolume.csi.nodePublishSecretName.label')"
-          :placeholder="t('persistentVolume.csi.nodePublishSecretName.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.nodePublishSecretRef.name"
+          :mode="mode"
+          :label="t('persistentVolume.csi.nodePublishSecretName.label')"
+          :placeholder="t('persistentVolume.csi.nodePublishSecretName.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.nodePublishSecretRef.namespace"
-          :mode="mode"
-          :label="t('persistentVolume.csi.nodePublishSecretNamespace.label')"
-          :placeholder="t('persistentVolume.csi.nodePublishSecretNamespace.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.nodePublishSecretRef.namespace"
+          :mode="mode"
+          :label="t('persistentVolume.csi.nodePublishSecretNamespace.label')"
+          :placeholder="t('persistentVolume.csi.nodePublishSecretNamespace.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.nodeStageSecretRef.name"
-          :mode="mode"
-          :label="t('persistentVolume.csi.nodeStageSecretName.label')"
-          :placeholder="t('persistentVolume.csi.nodeStageSecretName.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.nodeStageSecretRef.name"
+          :mode="mode"
+          :label="t('persistentVolume.csi.nodeStageSecretName.label')"
+          :placeholder="t('persistentVolume.csi.nodeStageSecretName.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.nodeStageSecretRef.namespace"
-          :mode="mode"
-          :label="t('persistentVolume.csi.nodeStageSecretNamespace.label')"
-          :placeholder="t('persistentVolume.csi.nodeStageSecretNamespace.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.nodeStageSecretRef.namespace"
+          :mode="mode"
+          :label="t('persistentVolume.csi.nodeStageSecretNamespace.label')"
+          :placeholder="t('persistentVolume.csi.nodeStageSecretNamespace.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.controllerExpandSecretRef.name"
-          :mode="mode"
-          :label="t('persistentVolume.csi.controllerExpandSecretName.label')"
-          :placeholder="t('persistentVolume.csi.controllerExpandSecretName.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.controllerExpandSecretRef.name"
+          :mode="mode"
+          :label="t('persistentVolume.csi.controllerExpandSecretName.label')"
+          :placeholder="t('persistentVolume.csi.controllerExpandSecretName.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.controllerExpandSecretRef.namespace"
-          :mode="mode"
-          :label="t('persistentVolume.csi.controllerExpandSecretNamespace.label')"
-          :placeholder="t('persistentVolume.csi.controllerExpandSecretNamespace.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.controllerExpandSecretRef.namespace"
+          :mode="mode"
+          :label="t('persistentVolume.csi.controllerExpandSecretNamespace.label')"
+          :placeholder="t('persistentVolume.csi.controllerExpandSecretNamespace.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.controllerPublishSecretRef.name"
-          :mode="mode"
-          :label="t('persistentVolume.csi.controllerPublishSecretName.label')"
-          :placeholder="t('persistentVolume.csi.controllerPublishSecretName.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.controllerPublishSecretRef.name"
+          :mode="mode"
+          :label="t('persistentVolume.csi.controllerPublishSecretName.label')"
+          :placeholder="t('persistentVolume.csi.controllerPublishSecretName.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.csi.controllerPublishSecretRef.namespace"
-          :mode="mode"
-          :label="t('persistentVolume.csi.controllerPublishSecretNamespace.label')"
-          :placeholder="t('persistentVolume.csi.controllerPublishSecretNamespace.placeholder')"
+        <LabeledInput
+          v-model="value.spec.csi.controllerPublishSecretRef.namespace"
+          :mode="mode"
+          :label="t('persistentVolume.csi.controllerPublishSecretNamespace.label')"
+          :placeholder="t('persistentVolume.csi.controllerPublishSecretNamespace.placeholder')"
         />
       </div>
     </div>

package/edit/persistentvolume/plugins/fc.vue

@@ -52,36 +52,36 @@ export default {
   <div>
     <div class="row mb-20">
       <div class="col span-6">
-        <ArrayList
-          v-model="value.spec.fc.targetWWNs"
-          :add-label="t('persistentVolume.fc.targetWWNS.add')"
-          :mode="mode"
+        <ArrayList
+          v-model="value.spec.fc.targetWWNs"
+          :add-label="t('persistentVolume.fc.targetWWNS.add')"
+          :mode="mode"
         />
       </div>
       <div class="col span-6">
-        <ArrayList
-          v-model="value.spec.fc.wwids"
-          :add-label="t('persistentVolume.fc.wwids.add')"
-          :mode="mode"
+        <ArrayList
+          v-model="value.spec.fc.wwids"
+          :add-label="t('persistentVolume.fc.wwids.add')"
+          :mode="mode"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="lun"
-          :mode="mode"
-          :label="t('persistentVolume.fc.lun.label')"
-          :placeholder="t('persistentVolume.fc.lun.placeholder')"
-          type="number"
+        <LabeledInput
+          v-model="lun"
+          :mode="mode"
+          :label="t('persistentVolume.fc.lun.label')"
+          :placeholder="t('persistentVolume.fc.lun.placeholder')"
+          type="number"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.fc.fsType"
-          :mode="mode"
-          :label="t('persistentVolume.shared.filesystemType.label')"
-          :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
+        <LabeledInput
+          v-model="value.spec.fc.fsType"
+          :mode="mode"
+          :label="t('persistentVolume.shared.filesystemType.label')"
+          :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
         />
       </div>
     </div>

package/edit/persistentvolume/plugins/iscsi.vue

@@ -54,19 +54,19 @@ export default {
   <div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.iscsi.initiatorName"
-          :mode="mode"
-          :label="t('persistentVolume.iscsi.initiatorName.label')"
-          :placeholder="t('persistentVolume.iscsi.initiatorName.placeholder')"
+        <LabeledInput
+          v-model="value.spec.iscsi.initiatorName"
+          :mode="mode"
+          :label="t('persistentVolume.iscsi.initiatorName.label')"
+          :placeholder="t('persistentVolume.iscsi.initiatorName.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.iscsi.iscsiInterface"
-          :mode="mode"
-          :label="t('persistentVolume.iscsi.iscsiInterface.label')"
-          :placeholder="t('persistentVolume.iscsi.iscsiInterface.placeholder')"
+        <LabeledInput
+          v-model="value.spec.iscsi.iscsiInterface"
+          :mode="mode"
+          :label="t('persistentVolume.iscsi.iscsiInterface.label')"
+          :placeholder="t('persistentVolume.iscsi.iscsiInterface.placeholder')"
         />
       </div>
     </div>
@@ -94,65 +94,65 @@ export default {
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.iscsi.iqn"
-          :mode="mode"
-          :label="t('persistentVolume.iscsi.iqn.label')"
-          :placeholder="t('persistentVolume.iscsi.iqn.placeholder')"
+        <LabeledInput
+          v-model="value.spec.iscsi.iqn"
+          :mode="mode"
+          :label="t('persistentVolume.iscsi.iqn.label')"
+          :placeholder="t('persistentVolume.iscsi.iqn.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="lun"
-          :mode="mode"
-          :label="t('persistentVolume.iscsi.lun.label')"
-          :placeholder="t('persistentVolume.iscsi.lun.placeholder')"
-          type="number"
+        <LabeledInput
+          v-model="lun"
+          :mode="mode"
+          :label="t('persistentVolume.iscsi.lun.label')"
+          :placeholder="t('persistentVolume.iscsi.lun.placeholder')"
+          type="number"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.iscsi.targetPortal"
-          :mode="mode"
-          :label="t('persistentVolume.iscsi.targetPortal.label')"
-          :placeholder="t('persistentVolume.iscsi.targetPortal.placeholder')"
+        <LabeledInput
+          v-model="value.spec.iscsi.targetPortal"
+          :mode="mode"
+          :label="t('persistentVolume.iscsi.targetPortal.label')"
+          :placeholder="t('persistentVolume.iscsi.targetPortal.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <ArrayList
-          v-model="value.spec.iscsi.portals"
-          :mode="mode"
-          :add-label="t('persistentVolume.iscsi.portals.add')"
+        <ArrayList
+          v-model="value.spec.iscsi.portals"
+          :mode="mode"
+          :add-label="t('persistentVolume.iscsi.portals.add')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.iscsi.secretRef.name"
-          :mode="mode"
-          :label="t('persistentVolume.shared.secretName.label')"
-          :placeholder="t('persistentVolume.shared.secretName.placeholder')"
+        <LabeledInput
+          v-model="value.spec.iscsi.secretRef.name"
+          :mode="mode"
+          :label="t('persistentVolume.shared.secretName.label')"
+          :placeholder="t('persistentVolume.shared.secretName.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.iscsi.secretRef.namespace"
-          :mode="mode"
-          :label="t('persistentVolume.shared.secretNamespace.label')"
-          :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
+        <LabeledInput
+          v-model="value.spec.iscsi.secretRef.namespace"
+          :mode="mode"
+          :label="t('persistentVolume.shared.secretNamespace.label')"
+          :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.iscsi.fsType"
-          :mode="mode"
-          :label="t('persistentVolume.shared.filesystemType.label')"
-          :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
+        <LabeledInput
+          v-model="value.spec.iscsi.fsType"
+          :mode="mode"
+          :label="t('persistentVolume.shared.filesystemType.label')"
+          :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
         />
       </div>
       <div class="col span-6">