@rancher/shell 3.0.7 → 3.0.8-rc.10

package/edit/persistentvolume/index.vue

@@ -22,6 +22,8 @@ import InfoBox from '@shell/components/InfoBox';
 import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
 import ResourceManager from '@shell/mixins/resource-manager';
 
+const DEFAULT_ACCESS_MODES = ['ReadWriteOnce'];
+
 export default {
   name:         'PersistentVolume',
   inheritAttrs: false,
@@ -64,36 +66,42 @@ export default {
   },
 
   data() {
-    const NONE_OPTION = {
-      label: this.t('generic.none'),
-      value: ''
+    return {
+      secondaryResourceData: this.secondaryResourceDataConfig(),
+      storageClassOptions:   [],
+      currentClaim:          null,
+      plugin:                '',
+      initialNodeAffinity:   null,
+      NODE,
     };
-    const defaultAccessModes = ['ReadWriteOnce'];
+  },
 
+  created() {
     this.value['spec'] = this.value.spec || {};
-    this.value.spec['accessModes'] = this.value.spec.accessModes || defaultAccessModes;
+    this.value.spec['accessModes'] = this.value.spec.accessModes || DEFAULT_ACCESS_MODES;
     this.value.spec['capacity'] = this.value.spec.capacity || {};
     this.value.spec.capacity['storage'] = this.value.spec.capacity.storage || '10Gi';
-    this.value.spec['storageClassName'] = this.value.spec.storageClassName || NONE_OPTION.value;
+    this.value.spec['storageClassName'] = this.value.spec.storageClassName || this.noneOption.value;
 
     const foundPlugin = this.value.isLonghorn ? LONGHORN_PLUGIN : VOLUME_PLUGINS.find((plugin) => this.value.spec[plugin.value]);
-    const plugin = (foundPlugin || VOLUME_PLUGINS[0]).value;
 
-    return {
-      secondaryResourceData: this.secondaryResourceDataConfig(),
-      storageClassOptions:   [],
-      currentClaim:          null,
-      plugin,
-      NONE_OPTION,
-      NODE,
-      initialNodeAffinity:   clone(this.value.spec.nodeAffinity),
-    };
+    this.plugin = (foundPlugin || VOLUME_PLUGINS[0]).value;
+    this.initialNodeAffinity = clone(this.value.spec.nodeAffinity);
+
+    this.registerBeforeHook(this.willSave, 'willSave');
   },
 
   computed: {
     showUnsupportedStorage: mapFeature(UNSUPPORTED_STORAGE_DRIVERS),
     ...mapGetters(['currentProduct', 'currentCluster']),
 
+    noneOption() {
+      return {
+        label: this.t('generic.none'),
+        value: ''
+      };
+    },
+
     readWriteOnce: {
       get() {
         return this.value.spec.accessModes.includes('ReadWriteOnce');
@@ -149,10 +157,6 @@ export default {
     }
   },
 
-  created() {
-    this.registerBeforeHook(this.willSave, 'willSave');
-  },
-
   methods: {
     secondaryResourceDataConfig() {
       return {
@@ -168,7 +172,7 @@ export default {
                     value: s.metadata.name
                   }));
 
-                  storageClassOptions.unshift(this.NONE_OPTION);
+                  storageClassOptions.unshift(this.noneOption);
 
                   return storageClassOptions;
                 }
@@ -194,7 +198,7 @@ export default {
       return require(`./plugins/${ name }`).default;
     },
     willSave() {
-      if (this.value.spec.storageClassName === this.NONE_OPTION.value) {
+      if (this.value.spec.storageClassName === this.noneOption.value) {
         this.value.spec['storageClassName'] = null;
       }
 
@@ -280,6 +284,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="plugin-configuration"

package/edit/persistentvolume/plugins/awsElasticBlockStore.vue

@@ -14,25 +14,24 @@ export default {
       required: true,
     },
   },
-  data() {
+  created() {
     this.value.spec['awsElasticBlockStore'] = this.value.spec.awsElasticBlockStore || {};
     this.value.spec.awsElasticBlockStore['readOnly'] = this.value.spec.awsElasticBlockStore.readOnly || false;
     this.value.spec.awsElasticBlockStore['partition'] = this.value.spec.awsElasticBlockStore.partition || 0;
-
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
-    return { readOnlyOptions };
   },
   computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    },
     partition: {
       get() {
         return this.value.spec.awsElasticBlockStore.partition;

package/edit/persistentvolume/plugins/azureDisk.vue

@@ -14,57 +14,58 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
-    const kindOptions = [
-      {
-        label: this.t('persistentVolume.azureDisk.kind.dedicated'),
-        value: 'Dedicated'
-      },
-      {
-        label: this.t('persistentVolume.azureDisk.kind.managed'),
-        value: 'Managed'
-      },
-      {
-        label: this.t('persistentVolume.azureDisk.kind.shared'),
-        value: 'Shared'
-      }
-    ];
-
-    const cachingModeOptions = [
-      {
-        label: this.t('persistentVolume.azureDisk.cachingMode.none'),
-        value: 'None'
-      },
-      {
-        label: this.t('persistentVolume.azureDisk.cachingMode.readOnly'),
-        value: 'ReadOnly'
-      },
-      {
-        label: this.t('persistentVolume.azureDisk.cachingMode.readWrite'),
-        value: 'ReadWrite'
-      }
-    ];
-
+  created() {
     this.value.spec['azureDisk'] = this.value.spec.azureDisk || {};
     this.value.spec.azureDisk['readOnly'] = this.value.spec.azureDisk.readOnly || false;
-    this.value.spec.azureDisk['cachingMode'] = this.value.spec.azureDisk.cachingMode || cachingModeOptions[0].value;
-    this.value.spec.azureDisk['kind'] = this.value.spec.azureDisk.kind || kindOptions[2].value;
-
-    return {
-      kindOptions, readOnlyOptions, cachingModeOptions
-    };
+    this.value.spec.azureDisk['cachingMode'] = this.value.spec.azureDisk.cachingMode || this.cachingModeOptions[0].value;
+    this.value.spec.azureDisk['kind'] = this.value.spec.azureDisk.kind || this.kindOptions[2].value;
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    },
+    kindOptions() {
+      return [
+        {
+          label: this.t('persistentVolume.azureDisk.kind.dedicated'),
+          value: 'Dedicated'
+        },
+        {
+          label: this.t('persistentVolume.azureDisk.kind.managed'),
+          value: 'Managed'
+        },
+        {
+          label: this.t('persistentVolume.azureDisk.kind.shared'),
+          value: 'Shared'
+        }
+      ];
+    },
+    cachingModeOptions() {
+      return [
+        {
+          label: this.t('persistentVolume.azureDisk.cachingMode.none'),
+          value: 'None'
+        },
+        {
+          label: this.t('persistentVolume.azureDisk.cachingMode.readOnly'),
+          value: 'ReadOnly'
+        },
+        {
+          label: this.t('persistentVolume.azureDisk.cachingMode.readWrite'),
+          value: 'ReadWrite'
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/azureFile.vue

@@ -14,23 +14,24 @@ export default {
       required: true,
     },
   },
-  data() {
+  created() {
     this.value.spec['azureFile'] = this.value.spec.azureFile || {};
     this.value.spec.azureFile['readOnly'] = this.value.spec.azureFile.readOnly || false;
-
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/cephfs.vue

@@ -17,24 +17,25 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['cephfs'] = this.value.spec.cephfs || {};
     this.value.spec.cephfs['readOnly'] = this.value.spec.cephfs.readOnly || false;
     this.value.spec.cephfs['secretRef'] = this.value.spec.cephfs.secretRef || {};
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/cinder.vue

@@ -14,24 +14,25 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['cinder'] = this.value.spec.cinder || {};
     this.value.spec.cinder['readOnly'] = this.value.spec.cinder.readOnly || false;
     this.value.spec.cinder['secretRef'] = this.value.spec.cinder.secretRef || {};
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/csi.vue

@@ -36,32 +36,34 @@ export default {
   },
 
   data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
+    return {
+      loadingDrivers: true,
+      csiDrivers:     [],
+    };
+  },
 
+  created() {
     this.value.spec['csi'] = this.value.spec.csi || {};
     this.value.spec.csi['readOnly'] = this.value.spec.csi.readOnly || false;
     this.value.spec.csi['nodePublishSecretRef'] = this.value.spec.csi.nodePublishSecretRef || {};
     this.value.spec.csi['nodeStageSecretRef'] = this.value.spec.csi.nodeStageSecretRef || {};
     this.value.spec.csi['controllerExpandSecretRef'] = this.value.spec.csi.controllerExpandSecretRef || {};
     this.value.spec.csi['controllerPublishSecretRef'] = this.value.spec.csi.controllerPublishSecretRef || {};
-
-    return {
-      readOnlyOptions,
-      loadingDrivers: true,
-      csiDrivers:     [],
-    };
   },
 
   computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    },
     driverOptions() {
       return this.csiDrivers.map((driver) => {
         return driver.metadata.name;

package/edit/persistentvolume/plugins/fc.vue

@@ -17,25 +17,24 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['fc'] = this.value.spec.fc || {};
     this.value.spec.fc['readOnly'] = this.value.spec.fc.readOnly || false;
     this.value.spec.fc['secretRef'] = this.value.spec.fc.secretRef || {};
-
-    return { readOnlyOptions };
   },
   computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    },
     lun: {
       get() {
         return this.value.spec.fc.lun;

package/edit/persistentvolume/plugins/flexVolume.vue

@@ -17,24 +17,25 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['flexVolume'] = this.value.spec.flexVolume || {};
     this.value.spec.flexVolume['readOnly'] = this.value.spec.flexVolume.readOnly || false;
     this.value.spec.flexVolume['secretRef'] = this.value.spec.flexVolume.secretRef || {};
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/flocker.vue

@@ -13,10 +13,8 @@ export default {
       required: true,
     },
   },
-  data() {
+  created() {
     this.value.spec['flocker'] = this.value.spec.flocker || {};
-
-    return {};
   },
 };
 </script>

package/edit/persistentvolume/plugins/gcePersistentDisk.vue

@@ -14,25 +14,24 @@ export default {
       required: true,
     },
   },
-  data() {
+  created() {
     this.value.spec['gcePersistentDisk'] = this.value.spec.gcePersistentDisk || {};
     this.value.spec.gcePersistentDisk['readOnly'] = this.value.spec.gcePersistentDisk.readOnly || false;
     this.value.spec.gcePersistentDisk['partition'] = this.value.spec.gcePersistentDisk.partition || 0;
-
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
-    return { readOnlyOptions };
   },
   computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    },
     partition: {
       get() {
         return this.value.spec.gcePersistentDisk.partition;

package/edit/persistentvolume/plugins/glusterfs.vue

@@ -14,23 +14,24 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['glusterfs'] = this.value.spec.glusterfs || {};
     this.value.spec.glusterfs['readOnly'] = this.value.spec.glusterfs.readOnly || false;
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/hostPath.vue

@@ -14,47 +14,48 @@ export default {
       required: true,
     },
   },
-  data() {
-    const mustBeOptions = [
-      {
-        label: this.t('persistentVolume.hostPath.mustBe.anything'),
-        value: ''
-      },
-      {
-        label: this.t('persistentVolume.hostPath.mustBe.directory'),
-        value: 'DirectoryOrCreate'
-      },
-      {
-        label: this.t('persistentVolume.hostPath.mustBe.file'),
-        value: 'FileOrCreate'
-      },
-      {
-        label: this.t('persistentVolume.hostPath.mustBe.existingDirectory'),
-        value: 'Directory'
-      },
-      {
-        label: this.t('persistentVolume.hostPath.mustBe.existingFile'),
-        value: 'File'
-      },
-      {
-        label: this.t('persistentVolume.hostPath.mustBe.existingSocket'),
-        value: 'Socket'
-      },
-      {
-        label: this.t('persistentVolume.hostPath.mustBe.existingCharacter'),
-        value: 'CharDevice'
-      },
-      {
-        label: this.t('persistentVolume.hostPath.mustBe.existingBlock'),
-        value: 'BlockDevice'
-      },
-    ];
-
+  created() {
     this.value.spec['hostPath'] = this.value.spec.hostPath || {};
-    this.value.spec.hostPath['type'] = this.value.spec.hostPath.type || mustBeOptions[0].value;
-
-    return { mustBeOptions };
+    this.value.spec.hostPath['type'] = this.value.spec.hostPath.type || this.mustBeOptions[0].value;
   },
+  computed: {
+    mustBeOptions() {
+      return [
+        {
+          label: this.t('persistentVolume.hostPath.mustBe.anything'),
+          value: ''
+        },
+        {
+          label: this.t('persistentVolume.hostPath.mustBe.directory'),
+          value: 'DirectoryOrCreate'
+        },
+        {
+          label: this.t('persistentVolume.hostPath.mustBe.file'),
+          value: 'FileOrCreate'
+        },
+        {
+          label: this.t('persistentVolume.hostPath.mustBe.existingDirectory'),
+          value: 'Directory'
+        },
+        {
+          label: this.t('persistentVolume.hostPath.mustBe.existingFile'),
+          value: 'File'
+        },
+        {
+          label: this.t('persistentVolume.hostPath.mustBe.existingSocket'),
+          value: 'Socket'
+        },
+        {
+          label: this.t('persistentVolume.hostPath.mustBe.existingCharacter'),
+          value: 'CharDevice'
+        },
+        {
+          label: this.t('persistentVolume.hostPath.mustBe.existingBlock'),
+          value: 'BlockDevice'
+        },
+      ];
+    }
+  }
 };
 </script>