@rancher/shell 0.1.4 → 0.2.1

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 {
@@ -13,7 +14,7 @@ import {
 } 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';
@@ -29,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';
@@ -94,7 +95,7 @@ export default {
     ContainerMountPaths
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, ResourceManager],
 
   props: {
     value: {
@@ -118,36 +119,11 @@ 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() {
@@ -167,16 +143,21 @@ export default {
           name:            `container-0`,
         }];
 
-        const podSpec = { template: { spec: { containers: podContainers, initContainers: [] } } };
+        const metadata = { ...this.value.metadata };
+
+        const podSpec = { template: { spec: { containers: podContainers, initContainers: [] }, metadata } };
 
         this.$set(this.value, 'spec', podSpec);
       }
     }
 
+    // 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;
@@ -228,37 +209,81 @@ 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'],
-
+      isNamespaceNew:            false,
     };
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     tabErrors() {
       return { general: this.fvGetPathErrors(['image'])?.length > 0 };
     },
@@ -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/index.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';
@@ -47,25 +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: [] };
+    return {};
   },
 
   computed: {
@@ -73,12 +72,6 @@ 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
      */
@@ -110,7 +103,7 @@ export default {
     },
 
     pvcNames() {
-      return this.namespacedPVCs.map(pvc => pvc.metadata.name);
+      return this.namespacedPvcs.map(pvc => pvc.metadata.name);
     },
   },
 
@@ -270,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">

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/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 }}

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

@@ -1,64 +1,24 @@
 <script>
-import { mapGetters } from 'vuex';
 import ResourceTable from '@shell/components/ResourceTable';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import { Banner } from '@components/Banner';
-import { HIDE_DESC, mapPref } from '@shell/store/prefs';
-import { addObject } from '@shell/utils/array';
-
 export default {
   name:       'ListClusterReposApps',
-  components: {
-    Banner,
-    Masthead,
-    ResourceTable
-  },
-
-  props: {
+  components: { ResourceTable },
+  props:      {
     resource: {
       type:     String,
       required: true,
     },
-
     schema: {
       type:     Object,
       required: true,
     },
-
     rows: {
       type:     Array,
       required: true,
     },
-  },
-
-  computed: {
-    ...mapGetters(['currentCluster']),
-    hideDescriptions: mapPref(HIDE_DESC),
-
-    typeDescriptionKey() {
-      // Show a different message to cover support for RKE templates in the local cluster
-      // (no current cluster means catalog requests default to local)
-      const key = !this.currentCluster || this.currentCluster.isLocal ? 'typeDescription."catalog.cattle.io.clusterrepo.local"' : 'typeDescription."catalog.cattle.io.clusterrepo"';
-
-      if ( this.hideDescriptions.includes(this.resource) || this.hideDescriptions.includes('ALL') ) {
-        return false;
-      }
-
-      if ( this.$store.getters['i18n/exists'](key) ) {
-        return key;
-      }
-
-      return false;
-    }
-  },
-
-  methods: {
-    hideTypeDescription() {
-      const neu = this.hideDescriptions.slice();
-
-      addObject(neu, this.resource);
-
-      this.hideDescriptions = neu;
+    loading: {
+      type:     Boolean,
+      required: false,
     },
   }
 };
@@ -66,25 +26,10 @@ export default {
 
 <template>
   <div>
-    <Masthead
-      :schema="schema"
-      :resource="resource"
-    >
-      <template #typeDescription>
-        <Banner
-          v-if="typeDescriptionKey"
-          class="type-banner mb-20 mt-0"
-          color="info"
-          :closable="true"
-          :label-key="typeDescriptionKey"
-          @close="hideTypeDescription"
-        />
-      </template>
-    </Masthead>
-
     <ResourceTable
       :schema="schema"
       :rows="rows"
+      :loading="loading"
     />
   </div>
 </template>

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

@@ -1,13 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { get } from '@shell/utils/object';
 import { AGE } from '@shell/config/table-headers';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
-  components: { Loading, ResourceTable },
-
-  props: {
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -20,11 +20,7 @@ export default {
   },
 
   async fetch() {
-    this.rows = await this.$store.dispatch('cluster/findAll', { type: this.resource });
-  },
-
-  data() {
-    return { rows: null };
+    await this.$fetchType(this.resource);
   },
 
   computed: {
@@ -53,12 +49,16 @@ export default {
       } else {
         return headersFromSchema;
       }
-    }
+    },
   },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <ResourceTable v-else :schema="schema" :rows="rows" :headers="headers" />
+  <ResourceTable
+    :schema="schema"
+    :rows="rows"
+    :headers="headers"
+    :loading="loading"
+  />
 </template>