fix volume re-name

edit/workload/storage/Mount.vue

@@ -11,12 +11,6 @@ export default {
       default: 'create'
     },
 
-    // container volume mounts
-    value: {
-      type:    Array,
-      default: () => []
-    },
-
     // volume name
     name: {
       type:     String,
@@ -42,13 +36,7 @@ export default {
     return { volumeMounts };
   },
 
-  computed: {
-    type() {
-      return Object.keys(this.value).filter(key => key !== 'name')[0];
-    },
-
-    ...mapGetters({ t: 'i18n/t' })
-  },
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
 
   watch: {
     volumeMounts(neu) {

edit/workload/storage/hostPath.vue

@@ -84,7 +84,7 @@ export default {
     <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')" @input="e=>updateMountNames(e)" />
+          <LabeledInput v-model="value.name" :required="true" :mode="mode" :label="t('workload.storage.volumeName')" />
         </div>
       </div>
       <div class="row mb-10">

edit/workload/storage/index.vue

@@ -1,6 +1,6 @@
 <script>
 import { PVC } from '@/config/types';
-import { removeObject, removeObjects, addObjects } from '@/utils/array.js';
+import { removeObjects, addObjects } from '@/utils/array.js';
 import ButtonDropdown from '@/components/ButtonDropdown';
 import Mount from '@/edit/workload/storage/Mount';
 import { _VIEW } from '@/config/query-params';
@@ -61,7 +61,24 @@ export default {
   },
 
   data() {
-    return { pvcs: [] };
+    if (!this.container.volumeMounts) {
+      this.$set(this.container, 'volumeMounts', []);
+    }
+    if (!this.value.volumes) {
+      this.$set(this.value, 'volumes', []);
+    }
+    const { volumeMounts = [] } = this.container;
+    const names = volumeMounts.reduce((total, each) => {
+      total.push(each.name);
+
+      return total;
+    }, []);
+
+    const containerVolumes = this.value.volumes.filter((volume) => {
+      return names.includes(volume.name);
+    });
+
+    return { pvcs: [], containerVolumes };
   },
 
   computed: {
@@ -104,33 +121,19 @@ export default {
     pvcNames() {
       return this.namespacedPVCs.map(pvc => pvc.metadata.name);
     },
-    // only show volumes mounted in current container
-    containerVolumes: {
-      get() {
-        const { volumeMounts = [] } = this.container;
-        const names = volumeMounts.reduce((total, each) => {
-          total.push(each.name);
-
-          return total;
-        }, []);
-
-        return this.value.volumes.filter((volume) => {
-          return names.includes(volume.name);
-        });
   },
-      set(neu, old = []) {
+
+  watch: {
+    containerVolumes(neu, old) {
       removeObjects(this.value.volumes, old);
       addObjects(this.value.volumes, neu);
-      }
-    }
-  },
+      const names = neu.reduce((all, each) => {
+        all.push(each.name);
 
-  created() {
-    if (!this.container.volumeMounts) {
-      this.$set(this.container, 'volumeMounts', []);
-    }
-    if (!this.value.volumes) {
-      this.$set(this.value, 'volumes', []);
+        return all;
+      }, []);
+
+      this.container.volumeMounts = this.container.volumeMounts.filter(mount => names.includes(mount.name));
     }
   },
 
@@ -139,32 +142,26 @@ export default {
       const name = `vol${ this.value.volumes.length }`;
 
       if (type === 'createPVC') {
-        this.value.volumes.push({
+        this.containerVolumes.push({
           _type:                 'createPVC',
           persistentVolumeClaim: {},
           name,
         });
       } else if (type === 'csi') {
-        this.value.volumes.push({
+        this.containerVolumes.push({
           _type: type,
           csi:   { volumeAttributes: {} },
           name,
         });
       } else {
-        this.value.volumes.push({
+        this.containerVolumes.push({
           _type:  type,
           [type]: {},
           name,
         });
       }
-      if (!this.container.volumeMounts) {
-        this.$set(this.container, 'volumeMounts', []);
-      }
-      this.container.volumeMounts.push({ name });
-    },
 
-    removeVolume(vol) {
-      removeObject(this.value.volumes, vol);
+      this.container.volumeMounts.push({ name });
     },
 
     volumeType(vol) {
@@ -260,7 +257,7 @@ export default {
             />
           </div>
         </div>
-        <Mount :container="container" :pod-spec="value" :name="props.row.value.name" :mode="mode" />
+        <Mount :key="props.row.value.name" :container="container" :pod-spec="value" :name="props.row.value.name" :mode="mode" />
       </template>
       <template #add>
         <ButtonDropdown

edit/workload/storage/nfs.vue

@@ -40,7 +40,7 @@ export default {
     <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')" @input="e=>updateMountNames(e)" />
+          <LabeledInput v-model="value.name" :required="true" :mode="mode" :label="t('workload.storage.volumeName')" />
         </div>
         <div class="col span-6">
           <Checkbox v-model="value.nfs.readOnly" :mode="mode" :label="t('workload.storage.readOnly')" />

edit/workload/storage/persistentVolumeClaim/index.vue

@@ -97,7 +97,7 @@ export default {
       </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')" @input="e=>updateMountNames(e)" />
+          <LabeledInput v-model="value.name" :required="true" :mode="mode" :label="t('workload.storage.volumeName')" />
         </div>
         <div class="col span-6">
           <LabeledSelect v-if="!createNew" v-model="value.persistentVolumeClaim.claimName" :mode="mode" :label="t('workload.storage.subtypes.persistentVolumeClaim')" :options="pvcs" />

edit/workload/storage/secret.vue

@@ -129,7 +129,7 @@ export default {
     <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')" @input="e=>updateMountNames(e)" />
+          <LabeledInput v-model="value.name" :required="true" :mode="mode" :label="t('workload.storage.volumeName')" />
         </div>
 
         <div class="col span-6">