@rancher/shell 0.3.0 → 0.3.2

package/edit/workload/mixins/workload.js

@@ -47,6 +47,7 @@ import { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import formRulesGenerator from '@shell/utils/validators/formRules';
 import { TYPES as SECRET_TYPES } from '@shell/models/secret';
+import { defaultContainer } from '@shell/models/workload';
 
 const TAB_WEIGHT_MAP = {
   general:              99,
@@ -63,6 +64,28 @@ const TAB_WEIGHT_MAP = {
 };
 
 const GPU_KEY = 'nvidia.com/gpu';
+const ID_KEY = Symbol('container-id');
+
+const serialMaker = function() {
+  let prefix = '';
+  let seq = 0;
+
+  return {
+    setPrefix(p) {
+      prefix = p;
+    },
+    setSeq(s) {
+      seq = s;
+    },
+    genSym() {
+      const result = prefix + seq;
+
+      seq += 1;
+
+      return result;
+    }
+  };
+}();
 
 export default {
   name:       'CruWorkload',
@@ -127,9 +150,10 @@ export default {
   },
 
   data() {
+    serialMaker.setPrefix('container-');
+    serialMaker.setSeq(0);
     let type = this.$route.params.resource;
     const createSidecar = !!this.$route.query.sidecar;
-    const isInitContainer = !!this.$route.query.init;
 
     if (type === 'workload') {
       type = null;
@@ -190,6 +214,7 @@ export default {
         podTemplateSpec.initContainers.push({
           imagePullPolicy: 'Always',
           name:            `container-${ allContainers.length }`,
+          _init:           true,
         });
 
         containers = podTemplateSpec.initContainers;
@@ -198,6 +223,7 @@ export default {
         container = {
           imagePullPolicy: 'Always',
           name:            `container-${ allContainers.length }`,
+          _init:           false,
         };
 
         containers.push(container);
@@ -209,47 +235,7 @@ export default {
     this.selectContainer(container);
 
     return {
-      secondaryResourceData: {
-        namespace: this.value?.metadata?.namespace || null,
-        data:      {
-          [CONFIG_MAP]:      { applyTo: [{ var: 'namespacedConfigMaps' }] },
-          [PVC]:             { applyTo: [{ var: 'pvcs' }] },
-          [SERVICE_ACCOUNT]: { applyTo: [{ var: 'namespacedServiceNames' }] },
-          [SECRET]:          {
-            applyTo: [
-              { var: 'namespacedSecrets' },
-              {
-                var:         'imagePullNamespacedSecrets',
-                parsingFunc: (data) => {
-                  return data.filter(secret => (secret._type === SECRET_TYPES.DOCKER || secret._type === SECRET_TYPES.DOCKER_JSON));
-                }
-              }
-            ]
-          },
-          [NODE]: {
-            applyTo: [
-              { var: 'allNodeObjects' },
-              {
-                var:         'allNodes',
-                parsingFunc: (data) => {
-                  return data.map(node => node.id);
-                }
-              }
-            ]
-          },
-          [SERVICE]: {
-            applyTo: [
-              { var: 'allServices' },
-              {
-                var:         'headlessServices',
-                parsingFunc: (data) => {
-                  return data.filter(service => service.spec.clusterIP === 'None');
-                }
-              }
-            ]
-          },
-        }
-      },
+      secondaryResourceData:      this.secondaryResourceDataConfig(),
       namespacedConfigMaps:       [],
       allNodes:                   null,
       allNodeObjects:             [],
@@ -267,7 +253,6 @@ export default {
       servicesOwned:              [],
       servicesToRemove:           [],
       portsForServices:           [],
-      isInitContainer,
       container,
       containerChange:            0,
       tabChange:                  0,
@@ -279,6 +264,7 @@ export default {
       }],
       fvReportedValidationPaths: ['spec'],
       isNamespaceNew:            false,
+      idKey:                     ID_KEY
     };
   },
 
@@ -290,10 +276,12 @@ export default {
 
     defaultTab() {
       if (!!this.$route.query.sidecar || this.$route.query.init || this.mode === _CREATE) {
-        return 'container-0';
+        const container = this.allContainers.find(c => c.__active);
+
+        return container?.name ?? 'container-0';
       }
 
-      return this.allContainers.length ? this.allContainers[0].name : '';
+      return this.allContainers.length ? this.allContainers[0][this.idKey] : '';
     },
 
     isEdit() {
@@ -395,11 +383,22 @@ export default {
     allContainers() {
       const containers = this.podTemplateSpec?.containers || [];
       const initContainers = this.podTemplateSpec?.initContainers || [];
+      const key = this.idKey;
 
       return [
-        ...containers,
+        ...containers.map((each) => {
+          each._init = false;
+          if (!each[key]) {
+            each[key] = serialMaker.genSym();
+          }
+
+          return each;
+        }),
         ...initContainers.map((each) => {
           each._init = true;
+          if (!each[key]) {
+            each[key] = serialMaker.genSym();
+          }
 
           return each;
         }),
@@ -587,13 +586,6 @@ export default {
       this.$set(this.value, 'type', neu);
       delete this.value.apiVersion;
     },
-
-    container(neu) {
-      const containers = this.isInitContainer ? this.podTemplateSpec.initContainers : this.podTemplateSpec.containers;
-      const existing = containers.find(container => container.__active) || {};
-
-      Object.assign(existing, neu);
-    },
   },
 
   created() {
@@ -604,6 +596,49 @@ export default {
   },
 
   methods: {
+    secondaryResourceDataConfig() {
+      return {
+        namespace: this.value?.metadata?.namespace || null,
+        data:      {
+          [CONFIG_MAP]:      { applyTo: [{ var: 'namespacedConfigMaps' }] },
+          [PVC]:             { applyTo: [{ var: 'pvcs' }] },
+          [SERVICE_ACCOUNT]: { applyTo: [{ var: 'namespacedServiceNames' }] },
+          [SECRET]:          {
+            applyTo: [
+              { var: 'namespacedSecrets' },
+              {
+                var:         'imagePullNamespacedSecrets',
+                parsingFunc: (data) => {
+                  return data.filter(secret => (secret._type === SECRET_TYPES.DOCKER || secret._type === SECRET_TYPES.DOCKER_JSON));
+                }
+              }
+            ]
+          },
+          [NODE]: {
+            applyTo: [
+              { var: 'allNodeObjects' },
+              {
+                var:         'allNodes',
+                parsingFunc: (data) => {
+                  return data.map(node => node.id);
+                }
+              }
+            ]
+          },
+          [SERVICE]: {
+            applyTo: [
+              { var: 'allServices' },
+              {
+                var:         'headlessServices',
+                parsingFunc: (data) => {
+                  return data.filter(service => service.spec.clusterIP === 'None');
+                }
+              }
+            ]
+          },
+        }
+      };
+    },
     addContainerBtn() {
       this.selectContainer({ name: 'Add Container', __add: true });
     },
@@ -855,7 +890,6 @@ export default {
       });
       container.__active = true;
       this.container = container;
-      this.isInitContainer = !!container._init;
       this.containerChange++;
     },
 
@@ -871,13 +905,16 @@ export default {
         nameNumber++;
       }
       const container = {
-        imagePullPolicy: 'Always',
-        name:            `container-${ nameNumber }`,
-        active:          true
+        ...defaultContainer,
+        name:   `container-${ nameNumber }`,
+        active: true
       };
 
       this.podTemplateSpec.containers.push(container);
       this.selectContainer(container);
+      this.$nextTick(() => {
+        this.$refs.containersTabbed?.select(container.name);
+      });
     },
 
     removeContainer(container) {
@@ -889,27 +926,27 @@ export default {
       this.selectContainer(this.allContainers[0]);
     },
 
-    updateInitContainer(neu) {
-      if (!this.container) {
+    updateInitContainer(neu, container) {
+      if (!container) {
         return;
       }
       const containers = this.podTemplateSpec.containers;
+      const initContainers = this.podTemplateSpec.initContainers ?? [];
 
       if (neu) {
-        if (!this.podTemplateSpec.initContainers) {
-          this.podTemplateSpec.initContainers = [];
+        this.podTemplateSpec.initContainers = initContainers;
+        container._init = true;
+        if (!initContainers.includes(container)) {
+          initContainers.push(container);
         }
-        this.podTemplateSpec.initContainers.push(this.container);
-
-        removeObject(containers, this.container);
+        removeObject(containers, container);
       } else {
-        delete this.container._init;
-        const initContainers = this.podTemplateSpec.initContainers;
-
-        removeObject(initContainers, this.container);
-        containers.push(this.container);
+        container._init = false;
+        removeObject(initContainers, container);
+        if (!containers.includes(container)) {
+          containers.push(container);
+        }
       }
-      this.isInitContainer = neu;
     },
     clearPvcFormState(hookName) {
       // On the `closePvcForm` event, remove the

package/edit/workload/storage/ContainerMountPaths.vue

@@ -1,5 +1,4 @@
 <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';
@@ -34,20 +33,11 @@ export default {
     },
   },
 
-  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()
     };

package/edit/workload/storage/emptyDir.vue

@@ -0,0 +1,88 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import UnitInput from '@shell/components/form/UnitInput';
+
+export default {
+  components: {
+    LabeledInput,
+    LabeledSelect,
+    UnitInput
+  },
+  props: {
+    podSpec: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+  },
+  data() {
+    return {
+      mediumOpts: [{
+        label: 'workload.storage.emptyDir.medium.default',
+        value: ''
+      }, {
+        label: 'workload.storage.emptyDir.medium.memory',
+        value: 'Memory'
+      }]
+    };
+  },
+  computed: {
+    medium: {
+      get() {
+        return this.value.emptyDir.medium ?? '';
+      },
+      set(v) {
+        this.$set(this.value.emptyDir, 'medium', v);
+      }
+    },
+  },
+};
+</script>
+<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">
+        <LabeledSelect
+          v-model="medium"
+          :mode="mode"
+          :label="t('workload.storage.emptyDir.medium.label')"
+          :options="mediumOpts"
+          localized-label
+        />
+      </div>
+    </div>
+    <div class="row mb-10">
+      <div class="col span-6">
+        <UnitInput
+          v-model="value.emptyDir.sizeLimit"
+          :mode="mode"
+          :label="t('workload.storage.emptyDir.sizeLimit.label')"
+          :increment="1024"
+          :input-exponent="2"
+          :output-modifier="true"
+          :placeholder="t('workload.storage.emptyDir.sizeLimit.placeholder')"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -54,7 +54,7 @@ export default {
       class="role-link btn btn-lg remove-vol"
       @click="$emit('remove')"
     >
-      <i class="icon icon-2x icon-x" />
+      <i class="icon icon-x" />
     </button>
     <div>
       <h3>{{ t('workload.storage.subtypes.csi') }}</h3>

package/edit/workload/storage/index.vue

@@ -8,6 +8,8 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { randomStr } from '@shell/utils/string';
 
 export default {
+  name: 'Storage',
+
   components: {
     ArrayListGrouped, ButtonDropdown, Mount, CodeMirror
   },
@@ -155,6 +157,12 @@ export default {
           csi:   { volumeAttributes: {} },
           name,
         });
+      } else if (type === 'emptyDir') {
+        this.value.volumes.push({
+          _type:    type,
+          emptyDir: { medium: '' },
+          name,
+        });
       } else {
         this.value.volumes.push({
           _type:  type,

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

@@ -87,7 +87,7 @@ export default {
 
   watch: {
     namespace(neu) {
-      this.__newPvc.metadata.namespace = neu;
+      this.value.__newPvc.metadata.namespace = neu;
     },
 
     'value.__newPvc.metadata.name'(neu) {

package/layouts/default.vue

@@ -20,6 +20,7 @@ import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
+import DraggableZone from '@shell/components/DraggableZone';
 import {
   COUNT, SCHEMA, MANAGEMENT, UI, CATALOG
 } from '@shell/config/types';
@@ -27,7 +28,7 @@ import { BASIC, FAVORITE, USED } from '@shell/store/type-map';
 import { addObjects, replaceWith, clear, addObject } from '@shell/utils/array';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import isEqual from 'lodash/isEqual';
 import { ucFirst } from '@shell/utils/string';
 import { getVersionInfo, markSeenReleaseNotes } from '@shell/utils/version';
@@ -36,7 +37,6 @@ import PageHeaderActions from '@shell/mixins/page-actions';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import { getProductFromRoute } from '@shell/middleware/authenticated';
 import { BOTTOM } from '@shell/utils/position';
-import { DraggableZone } from '@components/Utils/DraggableZone';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 
@@ -69,6 +69,7 @@ export default {
       wantNavSync:      false,
       unwatchPin:       undefined,
       wmPin:            null,
+      draggable:        false,
     };
   },
 
@@ -364,48 +365,9 @@ export default {
       });
     },
 
-    getGroups() {
-      if ( this.gettingGroups ) {
-        return;
-      }
-      this.gettingGroups = true;
-
-      if ( !this.clusterReady ) {
-        clear(this.groups);
-        this.gettingGroups = false;
-
-        return;
-      }
-
+    getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap) {
       const clusterId = this.$store.getters['clusterId'];
-      const currentProduct = this.$store.getters['productId'];
       const currentType = this.$route.params.resource || '';
-      let namespaces = null;
-
-      if ( !this.$store.getters['isAllNamespaces'] ) {
-        const namespacesObject = this.$store.getters['namespaces']();
-
-        namespaces = Object.keys(namespacesObject);
-      }
-
-      // Always show cluster-level types, regardless of the namespace filter
-      const namespaceMode = 'both';
-      const out = [];
-      const loadProducts = this.isExplorer ? [EXPLORER] : [];
-      const productMap = this.activeProducts.reduce((acc, p) => {
-        return { ...acc, [p.name]: p };
-      }, {});
-
-      if ( this.isExplorer ) {
-        for ( const product of this.activeProducts ) {
-          if ( product.inStore === 'cluster' ) {
-            addObject(loadProducts, product.name);
-          }
-        }
-      }
-
-      // This should already have come into the list from above, but in case it hasn't...
-      addObject(loadProducts, currentProduct);
 
       for ( const productId of loadProducts ) {
         const modes = [BASIC];
@@ -442,7 +404,9 @@ export default {
           }
         }
       }
+    },
 
+    getExplorerGroups(out) {
       if ( this.isExplorer ) {
         const allNavLinks = this.allNavLinks;
         const toAdd = [];
@@ -508,6 +472,55 @@ export default {
 
         addObjects(out, toAdd);
       }
+    },
+
+    /**
+     * Fetch navigation by creating groups from product schemas
+     */
+    getGroups() {
+      if ( this.gettingGroups ) {
+        return;
+      }
+      this.gettingGroups = true;
+
+      if ( !this.clusterReady ) {
+        clear(this.groups);
+        this.gettingGroups = false;
+
+        return;
+      }
+
+      const currentProduct = this.$store.getters['productId'];
+      let namespaces = null;
+
+      if ( !this.$store.getters['isAllNamespaces'] ) {
+        const namespacesObject = this.$store.getters['namespaces']();
+
+        namespaces = Object.keys(namespacesObject);
+      }
+
+      // Always show cluster-level types, regardless of the namespace filter
+      const namespaceMode = 'both';
+      const out = [];
+      const loadProducts = this.isExplorer ? [EXPLORER] : [];
+
+      const productMap = this.activeProducts.reduce((acc, p) => {
+        return { ...acc, [p.name]: p };
+      }, {});
+
+      if ( this.isExplorer ) {
+        for ( const product of this.activeProducts ) {
+          if ( product.inStore === 'cluster' ) {
+            addObject(loadProducts, product.name);
+          }
+        }
+      }
+
+      // This should already have come into the list from above, but in case it hasn't...
+      addObject(loadProducts, currentProduct);
+
+      this.getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap);
+      this.getExplorerGroups(out);
 
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
       this.gettingGroups = false;
@@ -739,11 +752,11 @@ export default {
           'drag-end': !$refs.draggableZone.drag.active,
           'drag-start': $refs.draggableZone.drag.active,
         }"
-        draggable="true"
+        :draggable="draggable"
         @dragstart="$refs.draggableZone.onDragStart($event)"
         @dragend="$refs.draggableZone.onDragEnd($event)"
       >
-        <WindowManager />
+        <WindowManager @draggable="draggable=$event" />
       </div>
     </div>
     <FixedBanner :footer="true" />

package/list/__tests__/workload.test.ts

@@ -23,8 +23,9 @@ describe('component: workload', () => {
       mixins:     [ResourceFetch],
       mocks:      {
         $store: {
-          getters: {
-            currentStore:                  () => jest.fn(),
+          dispatch: () => jest.fn(),
+          getters:  {
+            currentStore:                  () => 'cluster',
             namespaces:                    () => jest.fn(),
             'management/byId':             () => jest.fn(),
             'resource-fetch/refreshFlag':  () => jest.fn(),
@@ -33,6 +34,8 @@ describe('component: workload', () => {
             'type-map/optionsFor':         () => jest.fn(),
             'type-map/headersFor':         () => jest.fn(),
             'prefs/get':                   () => resource,
+            'cluster/schemaFor':           () => {},
+            'cluster/all':                 () => [{}],
           }
         },
         $fetchState: {

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

@@ -38,6 +38,7 @@ export default {
     :rows="rows"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
   >
     <template #cell:upgrade="{row}">
       <span

package/list/cis.cattle.io.clusterscan.vue

@@ -66,5 +66,6 @@ export default {
     :headers="headers"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
   />
 </template>

package/list/fleet.cattle.io.bundle.vue

@@ -30,8 +30,8 @@ export default {
   },
 
   async fetch() {
-    await this.$fetchType(FLEET.BUNDLE);
-    this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
+    await this.$fetchType(this.resource);
+    this.allFleet = await this.$fetchType(FLEET.CLUSTER);
   },
 
   data() {
@@ -90,10 +90,8 @@ export default {
 
   // override with relevant info for the loading indicator since this doesn't use it's own masthead
   $loadingResources() {
-    return {
-      loadResources:     [FLEET.BUNDLE],
-      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
-    };
+    // results are filtered so we wouldn't get the correct count on indicator...
+    return { loadIndeterminate: true };
   },
 };
 </script>
@@ -111,6 +109,7 @@ export default {
       :rows="bundles"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     >
       <template #cell:deploymentsReady="{row}">
         <span