@rancher/shell 0.1.3 → 0.1.21

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,4 @@
 <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 +31,6 @@ export default {
       default: null,
     },
 
-    container: {
-      type:     Object,
-      default: () => {
-        return {};
-      },
-    },
-
     savePvcHookName: {
       type:     String,
       required: true,
@@ -55,28 +46,25 @@ export default {
       type:    Array,
       default: () => [],
     },
+    namespacedPvcs: {
+      type:    Array,
+      default: () => [],
+    },
 
     registerBeforeHook: {
       type:    Function,
       default: null,
     },
-  },
-
-  async fetch() {
-    if ( this.$store.getters['cluster/schemaFor'](PVC) ) {
-      this.pvcs = await this.$store.dispatch('cluster/findAll', { type: PVC });
-    } else {
-      this.pvcs = [];
-    }
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
     this.initializeStorage();
 
-    return {
-      pvcs:           [],
-      storageVolumes: this.getStorageVolumes(),
-    };
+    return {};
   },
 
   computed: {
@@ -84,17 +72,11 @@ export default {
       return this.mode === _VIEW;
     },
 
-    namespacedPVCs() {
-      const namespace = this.namespace || this.$store.getters['defaultNamespace'];
-
-      return this.pvcs.filter(pvc => pvc.metadata.namespace === namespace);
-    },
-
     /**
      * Generated list of volumes
      */
     volumeTypeOptions() {
-      const excludedFiles = ['index', 'Mount', 'PVC'];
+      const excludedFiles = ['index', 'Mount', 'PVC', 'ContainerMountPaths'];
       const defaultVolumeTypes = [
         'csi',
         'configMap',
@@ -121,82 +103,67 @@ export default {
     },
 
     pvcNames() {
-      return this.namespacedPVCs.map(pvc => pvc.metadata.name);
+      return this.namespacedPvcs.map(pvc => pvc.metadata.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);
+  // 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 +242,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"
     >
@@ -296,6 +263,7 @@ export default {
             :pvcs="pvcNames"
             :register-before-hook="registerBeforeHook"
             :save-pvc-hook-name="savePvcHookName"
+            :loading="loading"
             @removePvcForm="removePvcForm"
           />
           <div v-else-if="isView">
@@ -307,19 +275,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/index.vue

@@ -53,6 +53,10 @@ export default {
       type:     String,
       required: true
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   async fetch() {
@@ -129,6 +133,7 @@ export default {
             :mode="mode"
             :label="t('workload.storage.subtypes.persistentVolumeClaim')"
             :options="pvcs"
+            :loading="loading"
           />
         </div>
       </div>

package/edit/workload/storage/secret.vue

@@ -43,7 +43,10 @@ export default {
         return {};
       }
     },
-
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   computed: {
@@ -154,6 +157,7 @@ export default {
             :mode="mode"
             :required="true"
             :label="t('workload.storage.subtypes.secret')"
+            :loading="loading"
           />
           <LabeledSelect
             v-else-if="type==='configMap'"
@@ -162,6 +166,7 @@ export default {
             :required="true"
             :mode="mode"
             :label="t('workload.storage.subtypes.configMap')"
+            :loading="loading"
           />
         </div>
         <div class="col span-6">

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

package/layouts/default.vue

@@ -1,7 +1,12 @@
 <script>
 import debounce from 'lodash/debounce';
 import { mapState, mapGetters } from 'vuex';
-import { mapPref, DEV, FAVORITE_TYPES, AFTER_LOGIN_ROUTE } from '@shell/store/prefs';
+import {
+  mapPref,
+  FAVORITE_TYPES,
+  AFTER_LOGIN_ROUTE,
+  THEME_SHORTCUT
+} from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
 import WindowManager from '@shell/components/nav/WindowManager';
@@ -55,9 +60,10 @@ export default {
   // Note - This will not run on route change
   data() {
     return {
-      groups:                        [],
-      gettingGroups:                 false,
-      wantNavSync:                   false,
+      noLocaleShortcut: process.env.dev || false,
+      groups:           [],
+      gettingGroups:    false,
+      wantNavSync:      false,
     };
   },
 
@@ -78,8 +84,8 @@ export default {
       return this.$store.getters['activeNamespaceCache'];
     },
 
-    dev:            mapPref(DEV),
-    favoriteTypes:  mapPref(FAVORITE_TYPES),
+    themeShortcut:    mapPref(THEME_SHORTCUT),
+    favoriteTypes:    mapPref(FAVORITE_TYPES),
 
     pageActions() {
       const pageActions = [];
@@ -647,8 +653,8 @@ export default {
         <PromptRestore />
         <AssignTo />
         <PromptModal />
-        <button v-if="dev" v-shortkey.once="['shift','l']" class="hide" @shortkey="toggleNoneLocale()" />
-        <button v-if="dev" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+        <button v-if="noLocaleShortcut" v-shortkey.once="['shift','l']" class="hide" @shortkey="toggleNoneLocale()" />
+        <button v-if="themeShortcut" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
         <button v-shortkey.once="['f8']" class="hide" @shortkey="wheresMyDebugger()" />
         <button v-shortkey.once="['`']" class="hide" @shortkey="toggleShell" />
       </main>

package/layouts/home.vue

@@ -3,7 +3,7 @@ import Header from '@shell/components/nav/Header';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
-import { mapPref, DEV } from '@shell/store/prefs';
+import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
@@ -26,12 +26,13 @@ export default {
   data() {
     return {
       // Assume home pages have routes where the name is the key to use for string lookup
-      name: this.$route.name
+      name:             this.$route.name,
+      noLocaleShortcut: process.env.dev || false
     };
   },
 
   computed: {
-    dev: mapPref(DEV),
+    themeShortcut: mapPref(THEME_SHORTCUT),
     ...mapState(['managementReady']),
   },
 
@@ -39,6 +40,9 @@ export default {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
     },
+    toggleNoneLocale() {
+      this.$store.dispatch('i18n/toggleNone');
+    },
   }
 
 };
@@ -59,7 +63,8 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
-    <button v-if="dev" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+    <button v-if="themeShortcut" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+    <button v-if="noLocaleShortcut" v-shortkey.once="['shift','l']" class="hide" @shortkey="toggleNoneLocale()" />
   </div>
 </template>
 

package/layouts/plain.vue

@@ -1,5 +1,5 @@
 <script>
-import { mapPref, DEV } from '@shell/store/prefs';
+import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import Header from '@shell/components/nav/Header';
 import PromptRemove from '@shell/components/PromptRemove';
@@ -33,16 +33,20 @@ export default {
   data() {
     return {
       // Assume home pages have routes where the name is the key to use for string lookup
-      name: this.$route.name,
+      name:             this.$route.name,
+      noLocaleShortcut: process.env.dev || false,
     };
   },
 
-  computed: { dev: mapPref(DEV) },
+  computed: { themeShortcut: mapPref(THEME_SHORTCUT) },
 
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
-    }
+    },
+    toggleNoneLocale() {
+      this.$store.dispatch('i18n/toggleNone');
+    },
   }
 };
 </script>
@@ -62,7 +66,8 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <AssignTo />
-        <button v-if="dev" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+        <button v-if="themeShortcut" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
+        <button v-if="noLocaleShortcut" v-shortkey.once="['shift','l']" class="hide" @shortkey="toggleNoneLocale()" />
       </main>
     </div>
 

package/list/catalog.cattle.io.app.vue

@@ -1,10 +1,11 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListApps',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
 
   props: {
     resource: {
@@ -21,18 +22,18 @@ export default {
   async fetch() {
     await this.$store.dispatch('catalog/load');
 
-    this.rows = await this.$store.dispatch('cluster/findAll', { type: this.resource });
-  },
-
-  data() {
-    return { rows: null };
+    await this.$fetchType(this.resource);
   },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <ResourceTable v-else class="apps" :schema="schema" :rows="rows">
+  <ResourceTable
+    class="apps"
+    :schema="schema"
+    :rows="rows"
+    :loading="loading"
+  >
     <template #cell:upgrade="{row}">
       <span v-if="row.upgradeAvailable" class="badge-state bg-warning hand" @click="row.goToUpgrade(row.upgradeAvailable)">
         {{ row.upgradeAvailable }}