@rancher/shell 0.1.2 → 0.1.4

package/edit/workload/storage/ContainerMountPaths.vue

@@ -0,0 +1,240 @@
+<script>
+import { PVC } from '@shell/config/types';
+import ButtonDropdown from '@shell/components/ButtonDropdown';
+import Mount from '@shell/edit/workload/storage/Mount';
+import { _VIEW } from '@shell/config/query-params';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+import { randomStr } from '@shell/utils/string';
+
+export default {
+  name:       'ContainerMountPaths',
+  components: {
+    ArrayListGrouped, ButtonDropdown, Mount
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+
+    // pod spec
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+
+    container: {
+      type:     Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+
+  async fetch() {
+    if ( this.$store.getters['cluster/schemaFor'](PVC) ) {
+      this.pvcs = await this.$store.dispatch('cluster/findAll', { type: PVC });
+    } else {
+      this.pvcs = [];
+    }
+  },
+
+  data() {
+    this.initializeStorage();
+
+    return {
+      containerVolumes:         [],
+      pvcs:                     [],
+      storageVolumes:           this.getStorageVolumes(),
+      selectedContainerVolumes: this.getSelectedContainerVolumes()
+    };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    availableVolumeOptions() {
+      const containerVolumes = this.container.volumeMounts.map(item => item.name);
+
+      return this.value.volumes.filter(vol => !containerVolumes.includes(vol.name)).map((item) => {
+        return {
+          label:  `${ item.name } (${ this.headerFor(item) })`,
+          action: this.selectVolume,
+          value:  item.name
+        };
+      });
+    },
+  },
+
+  watch: {
+    value(neu, old) {
+      this.selectedVolumes = this.getSelectedContainerVolumes();
+    },
+    storageVolumes(neu, old) {
+      // removeObjects(this.value.volumes, old);
+      // addObjects(this.value.volumes, neu);
+      const names = neu.reduce((all, each) => {
+        all.push(each.name);
+
+        return all;
+      }, []);
+
+      this.container.volumeMounts = this.container.volumeMounts.filter(mount => names.includes(mount.name));
+    },
+
+    selectedContainerVolumes(neu, old) {
+      // removeObjects(this.value.volumes, old);
+      // addObjects(this.value.volumes, neu);
+      const names = neu.map(item => item.name);
+
+      this.container.volumeMounts = this.container.volumeMounts.filter(mount => names.includes(mount.name));
+    }
+
+  },
+
+  methods: {
+    /**
+     * Initialize missing values for the container
+     */
+    initializeStorage() {
+      if (!this.container.volumeMounts) {
+        this.$set(this.container, 'volumeMounts', []);
+      }
+      if (!this.value.volumes) {
+        this.$set(this.value, 'volumes', []);
+      }
+    },
+
+    /**
+     * Get existing paired storage volumes
+     */
+    getStorageVolumes() {
+      // Extract volume mounts to map storage volumes
+      const { volumeMounts = [] } = this.container;
+      const names = volumeMounts.map(({ name }) => name);
+
+      // Extract storage volumes to allow mutation, if matches mount map
+      return this.value.volumes.filter(volume => names.includes(volume.name));
+    },
+
+    getSelectedContainerVolumes() {
+      // Extract volume mounts to map storage volumes
+      const { volumeMounts = [] } = this.container;
+      const names = volumeMounts.map(({ name }) => name);
+
+      // Extract storage volumes to allow mutation, if matches mount map
+      return this.value.volumes.filter(volume => names.includes(volume.name));
+    },
+
+    /**
+     * Remove all mounts for given storage volume
+     */
+    removeVolume(volume) {
+      const removeName = volume.row.value.name;
+
+      this.selectedContainerVolumes = this.selectedContainerVolumes.filter(({ name }) => name !== removeName);
+    },
+
+    selectVolume(event) {
+      const selectedVolume = this.value.volumes.find(vol => vol.name === event.value);
+
+      this.selectedContainerVolumes.push(selectedVolume);
+
+      const { name } = selectedVolume;
+
+      this.container.volumeMounts.push(name);
+    },
+
+    addVolume(type) {
+      const name = `vol-${ randomStr(5).toLowerCase() }`;
+
+      if (type === 'createPVC') {
+        this.storageVolumes.push({
+          _type:                 'createPVC',
+          persistentVolumeClaim: {},
+          name,
+        });
+      } else if (type === 'csi') {
+        this.storageVolumes.push({
+          _type: type,
+          csi:   { volumeAttributes: {} },
+          name,
+        });
+      } else {
+        this.storageVolumes.push({
+          _type:  type,
+          [type]: {},
+          name,
+        });
+      }
+
+      this.container.volumeMounts.push({ name });
+    },
+
+    headerFor(value) {
+      const type = Object.keys(value).filter(
+        key => typeof value[key] === 'object'
+      )[0];
+
+      if (
+        this.$store.getters['i18n/exists'](`workload.storage.subtypes.${ type }`)
+      ) {
+        return this.t(`workload.storage.subtypes.${ type }`);
+      } else {
+        return type;
+      }
+    },
+
+    openPopover() {
+      const button = this.$refs.buttonDropdown;
+
+      try {
+        button.togglePopover();
+      } catch (e) {}
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <!-- Storage Volumes -->
+    <ArrayListGrouped
+      :key="selectedContainerVolumes.length"
+      v-model="selectedContainerVolumes"
+      :mode="mode"
+      @remove="removeVolume"
+    >
+      <!-- Custom/default storage volume form -->
+      <template #default="props">
+        <h3>{{ props.row.value.name }} ({{ headerFor(props.row.value) }})</h3>
+        <Mount
+          :container="container"
+          :name="props.row.value.name"
+          :mode="mode"
+        />
+      </template>
+
+      <!-- Add Storage Volume -->
+      <template #add>
+        <ButtonDropdown
+          v-if="!isView"
+          id="add-volume"
+          :button-label="t('workload.storage.selectVolume')"
+          :dropdown-options="availableVolumeOptions"
+          size="sm"
+          @click-action="e=>selectVolume(e)"
+        >
+          <template #no-options>
+            {{ t('workload.storage.noVolumes') }}
+          </template>
+        </ButtonDropdown>
+      </template>
+    </ArrayListGrouped>
+  </div>
+</template>

package/edit/workload/storage/Mount.vue

@@ -4,6 +4,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import { mapGetters } from 'vuex';
 import { removeObject } from '@shell/utils/array';
 export default {
+  name:       'Mount',
   components: { LabeledInput, Checkbox },
   props:      {
     mode: {

package/edit/workload/storage/awsElasticBlockStore.vue

@@ -1,9 +1,11 @@
 <script>
 import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+
 import { mapGetters } from 'vuex';
 
 export default {
-  components: { LabeledInput },
+  components: { LabeledInput, Checkbox },
   props:      {
     // volumeAttributes object
     value: {
@@ -24,6 +26,23 @@ export default {
 
 <template>
   <div>
+    <div class="row mb-10">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.name"
+          :required="true"
+          :mode="mode"
+          :label="t('workload.storage.volumeName')"
+        />
+      </div>
+      <div class="col span-6">
+        <Checkbox
+          v-model="value.awsElasticBlockStore.readOnly"
+          :mode="mode"
+          :label="t('workload.storage.readOnly')"
+        />
+      </div>
+    </div>
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput

package/edit/workload/storage/azureDisk.vue

@@ -1,10 +1,13 @@
 <script>
+import { mapGetters } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
-import { mapGetters } from 'vuex';
+import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
-  components: { LabeledInput, RadioGroup },
+  components: {
+    LabeledInput, RadioGroup, Checkbox
+  },
   props:      {
     // volumeAttributes object
     value: {
@@ -31,6 +34,23 @@ export default {
 
 <template>
   <div>
+    <div class="row mb-10">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.name"
+          :required="true"
+          :mode="mode"
+          :label="t('workload.storage.volumeName')"
+        />
+      </div>
+      <div class="col span-6">
+        <Checkbox
+          v-model="value.azureDisk.readOnly"
+          :mode="mode"
+          :label="t('workload.storage.readOnly')"
+        />
+      </div>
+    </div>
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput

package/edit/workload/storage/azureFile.vue

@@ -1,9 +1,10 @@
 <script>
-import { LabeledInput } from '@components/Form/LabeledInput';
 import { mapGetters } from 'vuex';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
-  components: { LabeledInput },
+  components: { LabeledInput, Checkbox },
 
   props:      {
     value: {
@@ -25,6 +26,23 @@ export default {
 
 <template>
   <div>
+    <div class="row mb-10">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.name"
+          :required="true"
+          :mode="mode"
+          :label="t('workload.storage.volumeName')"
+        />
+      </div>
+      <div class="col span-6">
+        <Checkbox
+          v-model="value.azureFile.readOnly"
+          :mode="mode"
+          :label="t('workload.storage.readOnly')"
+        />
+      </div>
+    </div>
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput

package/edit/workload/storage/csi/index.vue

@@ -1,9 +1,14 @@
 <script>
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
 import { mapGetters } from 'vuex';
 
 export default {
-  components: { LabeledSelect },
+  components: {
+    LabeledSelect, Checkbox, LabeledInput
+  },
 
   props:      {
     podSpec: {
@@ -45,6 +50,23 @@ export default {
 <template>
   <div>
     <div>
+      <div class="row mb-10">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="value.name"
+            :required="true"
+            :mode="mode"
+            :label="t('workload.storage.volumeName')"
+          />
+        </div>
+        <div class="col span-6">
+          <Checkbox
+            v-model="value.csi.readOnly"
+            :mode="mode"
+            :label="t('workload.storage.readOnly')"
+          />
+        </div>
+      </div>
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledSelect

package/edit/workload/storage/gcePersistentDisk.vue

@@ -1,9 +1,10 @@
 <script>
-import { LabeledInput } from '@components/Form/LabeledInput';
 import { mapGetters } from 'vuex';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
-  components: { LabeledInput },
+  components: { LabeledInput, Checkbox },
 
   props:      {
     value: {
@@ -25,6 +26,23 @@ export default {
 
 <template>
   <div>
+    <div class="row mb-10">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.name"
+          :required="true"
+          :mode="mode"
+          :label="t('workload.storage.volumeName')"
+        />
+      </div>
+      <div class="col span-6">
+        <Checkbox
+          v-model="value.gcePersistentDisk.readOnly"
+          :mode="mode"
+          :label="t('workload.storage.readOnly')"
+        />
+      </div>
+    </div>
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput

package/edit/workload/storage/index.vue

@@ -1,6 +1,5 @@
 <script>
 import { PVC } from '@shell/config/types';
-import { removeObjects, addObjects } from '@shell/utils/array';
 import ButtonDropdown from '@shell/components/ButtonDropdown';
 import Mount from '@shell/edit/workload/storage/Mount';
 import { _VIEW } from '@shell/config/query-params';
@@ -33,13 +32,6 @@ export default {
       default: null,
     },
 
-    container: {
-      type:     Object,
-      default: () => {
-        return {};
-      },
-    },
-
     savePvcHookName: {
       type:     String,
       required: true,
@@ -73,10 +65,7 @@ export default {
   data() {
     this.initializeStorage();
 
-    return {
-      pvcs:           [],
-      storageVolumes: this.getStorageVolumes(),
-    };
+    return { pvcs: [] };
   },
 
   computed: {
@@ -94,7 +83,7 @@ export default {
      * Generated list of volumes
      */
     volumeTypeOptions() {
-      const excludedFiles = ['index', 'Mount', 'PVC'];
+      const excludedFiles = ['index', 'Mount', 'PVC', 'ContainerMountPaths'];
       const defaultVolumeTypes = [
         'csi',
         'configMap',
@@ -125,78 +114,63 @@ export default {
     },
   },
 
-  watch: {
-    storageVolumes(neu, old) {
-      removeObjects(this.value.volumes, old);
-      addObjects(this.value.volumes, neu);
-      const names = neu.reduce((all, each) => {
-        all.push(each.name);
+  // watch: {
+  //   storageVolumes(neu, old) {
+  //     removeObjects(this.value.volumes, old);
+  //     addObjects(this.value.volumes, neu);
+  //     const names = neu.reduce((all, each) => {
+  //       all.push(each.name);
 
-        return all;
-      }, []);
+  //       return all;
+  //     }, []);
 
-      this.container.volumeMounts = this.container.volumeMounts.filter(mount => names.includes(mount.name));
-    }
-  },
+  //     this.container.volumeMounts = this.container.volumeMounts.filter(mount => names.includes(mount.name));
+  //   }
+  // },
 
   methods: {
     /**
      * Initialize missing values for the container
      */
     initializeStorage() {
-      if (!this.container.volumeMounts) {
-        this.$set(this.container, 'volumeMounts', []);
-      }
       if (!this.value.volumes) {
         this.$set(this.value, 'volumes', []);
       }
     },
 
-    /**
-     * Get existing paired storage volumes
-     */
-    getStorageVolumes() {
-      // Extract volume mounts to map storage volumes
-      const { volumeMounts = [] } = this.container;
-      const names = volumeMounts.map(({ name }) => name);
-
-      // Extract storage volumes to allow mutation, if matches mount map
-      return this.value.volumes.filter(volume => names.includes(volume.name));
-    },
-
     /**
      * Remove all mounts for given storage volume
      */
     removeVolume(volume) {
       const removeName = volume.row.value.name;
 
-      this.storageVolumes = this.storageVolumes.filter(({ name }) => name !== removeName);
+      this.value.volumes = this.value.volumes.filter(({ name }) => name !== removeName);
     },
 
     addVolume(type) {
       const name = `vol-${ randomStr(5).toLowerCase() }`;
 
       if (type === 'createPVC') {
-        this.storageVolumes.push({
+        this.value.volumes.push({
           _type:                 'createPVC',
           persistentVolumeClaim: {},
           name,
         });
       } else if (type === 'csi') {
-        this.storageVolumes.push({
+        this.value.volumes.push({
           _type: type,
           csi:   { volumeAttributes: {} },
           name,
         });
       } else {
-        this.storageVolumes.push({
+        this.value.volumes.push({
           _type:  type,
           [type]: {},
           name,
         });
       }
 
-      this.container.volumeMounts.push({ name });
+      // this.container.volumeMounts.push({ name });
     },
 
     volumeType(vol) {
@@ -275,8 +249,8 @@ export default {
   <div>
     <!-- Storage Volumes -->
     <ArrayListGrouped
-      :key="storageVolumes.length"
-      v-model="storageVolumes"
+      :key="value.volumes.length"
+      v-model="value.volumes"
       :mode="mode"
       @remove="removeVolume"
     >
@@ -307,19 +281,19 @@ export default {
           </div>
         </div>
 
-        <!-- Mount point list to be mapped to volume -->
+        <!-- Mount point list to be mapped to volume
         <Mount
           :container="container"
           :name="props.row.value.name"
           :mode="mode"
-        />
+        /> -->
       </template>
 
       <!-- Add Storage Volume -->
       <template #add>
         <ButtonDropdown
           v-if="!isView"
-          id="add-volume"
+          id="select-volume"
           :button-label="t('workload.storage.addVolume')"
           :dropdown-options="volumeTypeOptions"
           size="sm"

package/edit/workload/storage/persistentVolumeClaim/persistentvolumeclaim.vue

@@ -209,6 +209,7 @@ export default {
           :label="t('persistentVolumeClaim.capacity')"
           :increment="1024"
           :input-exponent="3"
+          :required="true"
           :output-modifier="true"
         />
       </div>

package/edit/workload/storage/vsphereVolume.vue

@@ -1,6 +1,6 @@
 <script>
-import { LabeledInput } from '@components/Form/LabeledInput';
 import { mapGetters } from 'vuex';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },
@@ -25,6 +25,16 @@ export default {
 
 <template>
   <div>
+    <div class="row mb-10">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.name"
+          :required="true"
+          :mode="mode"
+          :label="t('workload.storage.volumeName')"
+        />
+      </div>
+    </div>
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput