@rancher/shell 0.1.3 → 0.1.21

package/edit/workload/mixins/workload.js

@@ -1,3 +1,4 @@
+import { mapGetters } from 'vuex';
 import omitBy from 'lodash/omitBy';
 import { cleanUp } from '@shell/utils/object';
 import {
@@ -9,10 +10,11 @@ import {
   PVC,
   SERVICE_ACCOUNT,
   CAPI,
+  POD,
 } from '@shell/config/types';
 import Tab from '@shell/components/Tabbed/Tab';
 import CreateEditView from '@shell/mixins/create-edit-view';
-import { allHash } from '@shell/utils/promise';
+import ResourceManager from '@shell/mixins/resource-manager';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import ServiceNameSelect from '@shell/components/form/ServiceNameSelect';
@@ -28,7 +30,7 @@ import WorkloadPorts from '@shell/components/form/WorkloadPorts';
 import ContainerResourceLimit from '@shell/components/ContainerResourceLimit';
 import KeyValue from '@shell/components/form/KeyValue';
 import Tabbed from '@shell/components/Tabbed';
-import { mapGetters } from 'vuex';
+
 import NodeScheduling from '@shell/components/form/NodeScheduling';
 import PodAffinity from '@shell/components/form/PodAffinity';
 import Tolerations from '@shell/components/form/Tolerations';
@@ -36,6 +38,7 @@ import CruResource from '@shell/components/CruResource';
 import Command from '@shell/components/form/Command';
 import LifecycleHooks from '@shell/components/form/LifecycleHooks';
 import Storage from '@shell/edit/workload/storage';
+import ContainerMountPaths from '@shell/edit/workload/storage/ContainerMountPaths.vue';
 import Labels from '@shell/components/form/Labels';
 import { RadioGroup } from '@components/Form/Radio';
 import { UI_MANAGED } from '@shell/config/labels-annotations';
@@ -89,9 +92,10 @@ export default {
     Upgrading,
     VolumeClaimTemplate,
     WorkloadPorts,
+    ContainerMountPaths
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, ResourceManager],
 
   props: {
     value: {
@@ -115,40 +119,14 @@ export default {
   },
 
   async fetch() {
-    const requests = { rancherClusters: this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }) };
-    const needed = {
-      configMaps: CONFIG_MAP,
-      nodes:      NODE,
-      services:   SERVICE,
-      pvcs:       PVC,
-      sas:        SERVICE_ACCOUNT,
-      secrets:    SECRET,
-    };
-
-    // Only fetch types if the user can see them
-    Object.keys(needed).forEach((key) => {
-      const type = needed[key];
-
-      if (this.$store.getters['cluster/schemaFor'](type)) {
-        requests[key] = this.$store.dispatch('cluster/findAll', { type });
-      }
-    });
-
-    const hash = await allHash(requests);
+    await this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
 
-    this.servicesOwned = hash.services ? await this.value.getServicesOwned() : [];
-
-    this.allSecrets = hash.secrets || [];
-    this.allConfigMaps = hash.configMaps || [];
-    this.allNodeObjects = hash.nodes || [];
-    this.allNodes = this.allNodeObjects.map(node => node.id);
-    this.allServices = hash.services || [];
-    this.pvcs = hash.pvcs || [];
-    this.sas = hash.sas || [];
+    // don't block UI for these resources
+    this.resourceManagerFetchSecondaryResources(this.secondaryResourceData);
+    this.servicesOwned = await this.value.getServicesOwned();
   },
 
   data() {
-    let defaultTab;
     let type = this.$route.params.resource;
     const createSidecar = !!this.$route.query.sidecar;
     const isInitContainer = !!this.$route.query.init;
@@ -159,28 +137,27 @@ export default {
 
     if (!this.value.spec) {
       this.value.spec = {};
-      if (this.value.type === WORKLOAD_TYPES.POD) {
+      if (this.value.type === POD) {
         const podContainers = [{
           imagePullPolicy: 'Always',
           name:            `container-0`,
         }];
 
-        defaultTab = 'container-0';
+        const metadata = { ...this.value.metadata };
 
-        const podSpec = { template: { spec: { containers: podContainers, initContainers: [] } } };
+        const podSpec = { template: { spec: { containers: podContainers, initContainers: [] }, metadata } };
 
         this.$set(this.value, 'spec', podSpec);
       }
     }
 
-    if (this.mode === _CREATE) {
-      defaultTab = 'container-0';
-    }
-
+    // EDIT view for POD
+    // Transform it from POD world to workload
     if ((this.mode === _EDIT || this.mode === _VIEW ) && this.value.type === 'pod' ) {
       const podSpec = { ...this.value.spec };
+      const metadata = { ...this.value.metadata };
 
-      this.$set(this.value.spec, 'template', { spec: podSpec });
+      this.$set(this.value.spec, 'template', { spec: podSpec, metadata });
     }
 
     const spec = this.value.spec;
@@ -214,7 +191,6 @@ export default {
           imagePullPolicy: 'Always',
           name:            `container-${ allContainers.length }`,
         });
-        defaultTab = 'container-0';
 
         containers = podTemplateSpec.initContainers;
       }
@@ -224,8 +200,6 @@ export default {
           name:            `container-${ allContainers.length }`,
         };
 
-        defaultTab = 'container-0';
-
         containers.push(container);
       } else {
         container = containers[0];
@@ -235,42 +209,93 @@ export default {
     this.selectContainer(container);
 
     return {
-      allConfigMaps:     [],
-      allNodes:          null,
-      allNodeObjects:    [],
-      allSecrets:        [],
-      allServices:       [],
-      name:              this.value?.metadata?.name || null,
-      pvcs:              [],
-      sas:               [],
-      showTabs:          false,
-      pullPolicyOptions: ['Always', 'IfNotPresent', 'Never'],
+      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'],
       spec,
       type,
-      servicesOwned:     [],
-      servicesToRemove:  [],
-      portsForServices:  [],
+      servicesOwned:               [],
+      servicesToRemove:            [],
+      portsForServices:            [],
       isInitContainer,
       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'],
-      defaultTab
-
+      isNamespaceNew:            false,
     };
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     tabErrors() {
       return { general: this.fvGetPathErrors(['image'])?.length > 0 };
     },
 
+    defaultTab() {
+      if (!!this.$route.query.sidecar || this.$route.query.init || this.mode === _CREATE) {
+        return 'container-0';
+      }
+
+      return this.allContainers.length ? this.allContainers[0].name : '';
+    },
+
     isEdit() {
       return this.mode === _EDIT;
     },
@@ -297,7 +322,7 @@ export default {
     },
 
     isPod() {
-      return this.value.type === WORKLOAD_TYPES.POD;
+      return this.value.type === POD;
     },
 
     isStatefulSet() {
@@ -326,13 +351,13 @@ export default {
           }
 
           return this.spec.jobTemplate.metadata.labels;
-        } else {
-          if (!this.spec.template.metadata) {
-            this.$set(this.spec.template, 'metadata', { labels: {} });
-          }
+        }
 
-          return this.spec.template.metadata.labels;
+        if (!this.spec.template.metadata) {
+          this.$set(this.spec.template, 'metadata', { labels: {} });
         }
+
+        return this.spec.template.metadata.labels;
       },
       set(neu) {
         if (this.isCronJob) {
@@ -351,13 +376,12 @@ export default {
           }
 
           return this.spec.jobTemplate.metadata.annotations;
-        } else {
-          if (!this.spec.template.metadata) {
-            this.$set(this.spec.template, 'metadata', { annotations: {} });
-          }
-
-          return this.spec.template.metadata.annotations;
         }
+        if (!this.spec.template.metadata) {
+          this.$set(this.spec.template, 'metadata', { annotations: {} });
+        }
+
+        return this.spec.template.metadata.annotations;
       },
       set(neu) {
         if (this.isCronJob) {
@@ -467,55 +491,6 @@ export default {
       return this.$store.getters['cluster/schemaFor'](this.type);
     },
 
-    namespacedSecrets() {
-      const namespace = this.value?.metadata?.namespace;
-
-      if (namespace) {
-        return this.allSecrets.filter(
-          secret => secret.metadata.namespace === namespace
-        );
-      } else {
-        return this.allSecrets;
-      }
-    },
-
-    imagePullNamespacedSecrets() {
-      const namespace = this.value?.metadata?.namespace;
-
-      return this.allSecrets.filter(secret => secret.metadata.namespace === namespace && (secret._type === SECRET_TYPES.DOCKER || secret._type === SECRET_TYPES.DOCKER_JSON));
-    },
-
-    namespacedConfigMaps() {
-      const namespace = this.value?.metadata?.namespace;
-
-      if (namespace) {
-        return this.allConfigMaps.filter(
-          configMap => configMap.metadata.namespace === namespace
-        );
-      } else {
-        return this.allConfigMaps;
-      }
-    },
-
-    namespacedServiceNames() {
-      const { namespace } = this.value?.metadata;
-
-      if (namespace) {
-        return this.sas.filter(
-          serviceName => serviceName.metadata.namespace === namespace
-        );
-      } else {
-        return this.sas;
-      }
-    },
-
-    headlessServices() {
-      return this.allServices.filter(
-        service => service.spec.clusterIP === 'None' &&
-          service.metadata.namespace === this.value.metadata.namespace
-      );
-    },
-
     workloadTypes() {
       return omitBy(WORKLOAD_TYPES, (type) => {
         return (
@@ -558,6 +533,25 @@ export default {
   },
 
   watch: {
+    async 'value.metadata.namespace'(neu) {
+      if (this.isNamespaceNew) {
+        // we don't need to re-fetch namespace specific (or non-namespace specific) resources when the namespace hasn't been created yet
+        return;
+      }
+      this.secondaryResourceData.namespace = neu;
+      // Fetch resources that are namespace specific, we don't need to re-fetch non-namespaced resources on namespace change
+      this.resourceManagerFetchSecondaryResources(this.secondaryResourceData, true);
+
+      this.servicesOwned = await this.value.getServicesOwned();
+    },
+
+    isNamespaceNew(neu, old) {
+      if (!old && neu) {
+        // As the namespace is new any resource that's been fetched with a namespace is now invalid
+        this.resourceManagerClearSecondaryResources(this.secondaryResourceData, true);
+      }
+    },
+
     type(neu, old) {
       const template =
         old === WORKLOAD_TYPES.CRON_JOB ? this.spec?.jobTemplate?.spec?.template : this.spec?.template;
@@ -689,6 +683,7 @@ export default {
         template = this.spec.template;
       }
 
+      // WORKLOADS
       if (
         this.type !== WORKLOAD_TYPES.JOB &&
         this.type !== WORKLOAD_TYPES.CRON_JOB &&

package/edit/workload/storage/ContainerMountPaths.vue

@@ -0,0 +1,240 @@
+<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';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+import { randomStr } from '@shell/utils/string';
+
+export default {
+  name:       'ContainerMountPaths',
+  components: {
+    ArrayListGrouped, ButtonDropdown, Mount
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+
+    // pod spec
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
+
+    container: {
+      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()
+    };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    availableVolumeOptions() {
+      const containerVolumes = this.container.volumeMounts.map(item => item.name);
+
+      return this.value.volumes.filter(vol => !containerVolumes.includes(vol.name)).map((item) => {
+        return {
+          label:  `${ item.name } (${ this.headerFor(item) })`,
+          action: this.selectVolume,
+          value:  item.name
+        };
+      });
+    },
+  },
+
+  watch: {
+    value(neu, old) {
+      this.selectedVolumes = this.getSelectedContainerVolumes();
+    },
+    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;
+      }, []);
+
+      this.container.volumeMounts = this.container.volumeMounts.filter(mount => names.includes(mount.name));
+    },
+
+    selectedContainerVolumes(neu, old) {
+      // removeObjects(this.value.volumes, old);
+      // addObjects(this.value.volumes, neu);
+      const names = neu.map(item => item.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));
+    },
+
+    getSelectedContainerVolumes() {
+      // 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.selectedContainerVolumes = this.selectedContainerVolumes.filter(({ name }) => name !== removeName);
+    },
+
+    selectVolume(event) {
+      const selectedVolume = this.value.volumes.find(vol => vol.name === event.value);
+
+      this.selectedContainerVolumes.push(selectedVolume);
+
+      const { name } = selectedVolume;
+
+      this.container.volumeMounts.push(name);
+    },
+
+    addVolume(type) {
+      const name = `vol-${ randomStr(5).toLowerCase() }`;
+
+      if (type === 'createPVC') {
+        this.storageVolumes.push({
+          _type:                 'createPVC',
+          persistentVolumeClaim: {},
+          name,
+        });
+      } else if (type === 'csi') {
+        this.storageVolumes.push({
+          _type: type,
+          csi:   { volumeAttributes: {} },
+          name,
+        });
+      } else {
+        this.storageVolumes.push({
+          _type:  type,
+          [type]: {},
+          name,
+        });
+      }
+
+      this.container.volumeMounts.push({ name });
+    },
+
+    headerFor(value) {
+      const type = Object.keys(value).filter(
+        key => typeof value[key] === 'object'
+      )[0];
+
+      if (
+        this.$store.getters['i18n/exists'](`workload.storage.subtypes.${ type }`)
+      ) {
+        return this.t(`workload.storage.subtypes.${ type }`);
+      } else {
+        return type;
+      }
+    },
+
+    openPopover() {
+      const button = this.$refs.buttonDropdown;
+
+      try {
+        button.togglePopover();
+      } catch (e) {}
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <!-- Storage Volumes -->
+    <ArrayListGrouped
+      :key="selectedContainerVolumes.length"
+      v-model="selectedContainerVolumes"
+      :mode="mode"
+      @remove="removeVolume"
+    >
+      <!-- Custom/default storage volume form -->
+      <template #default="props">
+        <h3>{{ props.row.value.name }} ({{ headerFor(props.row.value) }})</h3>
+        <Mount
+          :container="container"
+          :name="props.row.value.name"
+          :mode="mode"
+        />
+      </template>
+
+      <!-- Add Storage Volume -->
+      <template #add>
+        <ButtonDropdown
+          v-if="!isView"
+          id="add-volume"
+          :button-label="t('workload.storage.selectVolume')"
+          :dropdown-options="availableVolumeOptions"
+          size="sm"
+          @click-action="e=>selectVolume(e)"
+        >
+          <template #no-options>
+            {{ t('workload.storage.noVolumes') }}
+          </template>
+        </ButtonDropdown>
+      </template>
+    </ArrayListGrouped>
+  </div>
+</template>

package/edit/workload/storage/Mount.vue

@@ -4,6 +4,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import { mapGetters } from 'vuex';
 import { removeObject } from '@shell/utils/array';
 export default {
+  name:       'Mount',
   components: { LabeledInput, Checkbox },
   props:      {
     mode: {

package/edit/workload/storage/awsElasticBlockStore.vue

@@ -1,9 +1,11 @@
 <script>
 import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+
 import { mapGetters } from 'vuex';
 
 export default {
-  components: { LabeledInput },
+  components: { LabeledInput, Checkbox },
   props:      {
     // volumeAttributes object
     value: {
@@ -24,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.awsElasticBlockStore.readOnly"
+          :mode="mode"
+          :label="t('workload.storage.readOnly')"
+        />
+      </div>
+    </div>
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput