@rancher/shell 0.2.5 → 0.3.1

package/edit/workload/index.vue

@@ -4,9 +4,9 @@ import FormValidation from '@shell/mixins/form-validation';
 import WorkLoadMixin from '@shell/edit/workload/mixins/workload';
 
 export default {
-  name:       'Workload',
-  mixins:     [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
-  props:      {
+  name:   'Workload',
+  mixins: [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
+  props:  {
     value: {
       type:     Object,
       required: true,
@@ -22,12 +22,48 @@ export default {
   },
   methods: {
     changed(tab) {
+      const key = this.idKey;
+
       this.selectedName = tab.selectedName;
-      const container = this.containerOptions.find( c => c.name === tab.selectedName);
+      const container = this.containerOptions.find( c => c[key] === tab.selectedName);
 
       if ( container ) {
         this.selectContainer(container);
       }
+    },
+
+    /**
+     * Find error exceptions to be mapped for each case
+     */
+    mapError(error) {
+      switch (true) {
+      case error.includes('violates PodSecurity'): {
+        const match = error.match(/\"(.*?)\"/gi);
+        const name = match[0];
+        const policy = match[1];
+
+        return {
+          message: `Pod ${ name } Security Policy Violation ${ policy }`,
+          icon:    'icon-pod_security'
+        };
+      }
+
+      default:
+        break;
+      }
+    },
+
+    /**
+     * Map all the error texts to a message and icon object
+     */
+    getErrorsMap(errors) {
+      return !errors || !Array.isArray(errors) ? {} : errors.reduce((acc, error) => ({
+        ...acc,
+        [error]: this.mapError(error) || {
+          message: error,
+          icon:    null
+        }
+      }), {});
     }
   }
 };
@@ -49,6 +85,7 @@ export default {
       :subtypes="workloadSubTypes"
       :apply-hooks="applyHooks"
       :value="value"
+      :errors-map="getErrorsMap(fvUnreportedValidationErrors)"
       @finish="save"
       @select-type="selectType"
       @error="e=>errors = e"
@@ -108,6 +145,7 @@ export default {
         </div>
       </div>
       <Tabbed
+        ref="containersTabbed"
         class="deployment-tabs"
         :show-tabs-add-remove="true"
         :default-tab="defaultTab"
@@ -116,9 +154,9 @@ export default {
       >
         <Tab
           v-for="(tab, i) in allContainers"
-          :key="i"
+          :key="tab[idKey]"
           :label="tab.name"
-          :name="tab.name"
+          :name="tab[idKey]"
           :weight="tab.weight"
           :error="!!tab.error"
         >
@@ -160,11 +198,11 @@ export default {
                   <div class="col span-6">
                     <RadioGroup
                       :mode="mode"
-                      :value="isInitContainer"
+                      :value="allContainers[i]._init"
                       name="initContainer"
                       :options="[true, false]"
                       :labels="[t('workload.container.init'), t('workload.container.standard')]"
-                      @input="updateInitContainer"
+                      @input="updateInitContainer($event, allContainers[i])"
                     />
                   </div>
                 </div>
@@ -206,7 +244,16 @@ export default {
               </div>
               <div class="spacer" />
               <div>
-                <h3>{{ t('workload.container.titles.ports') }}</h3>
+                <h3>
+                  {{ t('workload.container.ports.expose') }}
+                  <i
+                    v-tooltip="t('workload.container.ports.toolTip')"
+                    class="icon icon-info"
+                  />
+                </h3>
+                <p class="padded">
+                  {{ t('workload.container.ports.description') }}
+                </p>
                 <div class="row">
                   <WorkloadPorts
                     v-model="allContainers[i].ports"
@@ -260,7 +307,7 @@ export default {
             </Tab>
 
             <Tab
-              v-if="!isInitContainer"
+              v-if="!allContainers[i]._init"
               :label="t('workload.container.titles.healthCheck')"
               name="healthCheck"
               :weight="tabWeightMap['healthCheck']"
@@ -528,7 +575,7 @@ export default {
               class="btn-sm role-link"
               @click="addContainerBtn"
             >
-              <i class="icon icon-plus icon-lg" /> {{ t('workload.container.addContainer') }}
+              <i class="icon icon-plus pr-5" /> {{ t('workload.container.addContainer') }}
             </button>
           </li>
         </template>
@@ -597,4 +644,7 @@ export default {
     margin-bottom: 10px;
   }
 }
+.padded {
+  padding-bottom: 10px;
+}
 </style>

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,76 +235,36 @@ 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');
-                }
-              }
-            ]
-          },
-        }
-      },
-      namespacedConfigMaps:        [],
-      allNodes:                    null,
-      allNodeObjects:              [],
-      namespacedSecrets:           [],
-      imagePullNamespacedSecrets:  [],
-      allServices:                 [],
-      headlessServices:            [],
-      name:                        this.value?.metadata?.name || null,
-      pvcs:                        [],
-      namespacedServiceNames:      [],
-      showTabs:                    false,
-      pullPolicyOptions:           ['Always', 'IfNotPresent', 'Never'],
+      secondaryResourceData:      this.secondaryResourceDataConfig(),
+      namespacedConfigMaps:       [],
+      allNodes:                   null,
+      allNodeObjects:             [],
+      namespacedSecrets:          [],
+      imagePullNamespacedSecrets: [],
+      allServices:                [],
+      headlessServices:           [],
+      name:                       this.value?.metadata?.name || null,
+      pvcs:                       [],
+      namespacedServiceNames:     [],
+      showTabs:                   false,
+      pullPolicyOptions:          ['Always', 'IfNotPresent', 'Never'],
       spec,
       type,
-      servicesOwned:               [],
-      servicesToRemove:            [],
-      portsForServices:            [],
-      isInitContainer,
+      servicesOwned:              [],
+      servicesToRemove:           [],
+      portsForServices:           [],
       container,
-      containerChange:             0,
-      tabChange:                   0,
-      podFsGroup:                  podTemplateSpec.securityContext?.fsGroup,
-      savePvcHookName:             'savePvcHook',
-      tabWeightMap:                TAB_WEIGHT_MAP,
-      fvFormRuleSets:              [{
+      containerChange:            0,
+      tabChange:                  0,
+      podFsGroup:                 podTemplateSpec.securityContext?.fsGroup,
+      savePvcHookName:            'savePvcHook',
+      tabWeightMap:               TAB_WEIGHT_MAP,
+      fvFormRuleSets:             [{
         path: 'image', rootObject: this.container, rules: ['required'], translationKey: 'workload.container.image'
       }],
       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';
@@ -27,27 +26,18 @@ export default {
     },
 
     container: {
-      type:     Object,
+      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()
     };

package/edit/workload/storage/Mount.vue

@@ -14,7 +14,7 @@ export default {
 
     // volume name
     name: {
-      type:     String,
+      type:    String,
       default: ''
     },
 

package/edit/workload/storage/azureDisk.vue

@@ -8,7 +8,7 @@ export default {
   components: {
     LabeledInput, RadioGroup, Checkbox
   },
-  props:      {
+  props: {
     // volumeAttributes object
     value: {
       type:    Object,

package/edit/workload/storage/azureFile.vue

@@ -6,7 +6,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 export default {
   components: { LabeledInput, Checkbox },
 
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {

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

@@ -10,7 +10,7 @@ export default {
     LabeledSelect, Checkbox, LabeledInput
   },
 
-  props:      {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {

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

@@ -10,7 +10,7 @@ export default {
     LabeledSelect, LabeledInput, Checkbox, Mount
   },
 
-  props:      {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {
@@ -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/gcePersistentDisk.vue

@@ -6,7 +6,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 export default {
   components: { LabeledInput, Checkbox },
 
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {

package/edit/workload/storage/hostPath.vue

@@ -9,7 +9,7 @@ export default {
     LabeledSelect,
   },
 
-  props:  {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {