@rancher/shell 0.1.4 → 0.1.21

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -1222,32 +1222,40 @@ export default {
         return;
       }
 
-      const clusterId = get(this.credential, 'decodedData.clusterId') || '';
+      try {
+        const clusterId = get(this.credential, 'decodedData.clusterId') || '';
 
-      this.applyChartValues(this.value.spec.rkeConfig);
+        this.applyChartValues(this.value.spec.rkeConfig);
 
-      const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
+        const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
 
-      if (this.agentConfig['cloud-provider-name'] === HARVESTER && clusterId && (this.isCreate || isUpgrade)) {
-        const namespace = this.machinePools?.[0]?.config?.vmNamespace;
+        if (this.agentConfig['cloud-provider-name'] === HARVESTER && clusterId && (this.isCreate || isUpgrade)) {
+          const namespace = this.machinePools?.[0]?.config?.vmNamespace;
 
-        const res = await this.$store.dispatch('management/request', {
-          url:                  `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
-          method:               'POST',
-          data:                 {
-            clusterRoleName:    'harvesterhci.io:cloudprovider',
-            namespace,
-            serviceAccountName: this.value.metadata.name,
-          },
-        });
+          const res = await this.$store.dispatch('management/request', {
+            url:                  `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
+            method:               'POST',
+            data:                 {
+              clusterRoleName:    'harvesterhci.io:cloudprovider',
+              namespace,
+              serviceAccountName: this.value.metadata.name,
+            },
+          });
+
+          const kubeconfig = res.data;
 
-        const kubeconfig = res.data;
+          const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
 
-        const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
+          set(this.agentConfig, 'cloud-provider-config', `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`);
+          set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.clusterName`, this.value.metadata.name);
+          set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, '/var/lib/rancher/rke2/etc/config-files/cloud-provider-config');
+        }
+      } catch (err) {
+        this.errors.push(err);
+
+        btnCb(false);
 
-        set(this.agentConfig, 'cloud-provider-config', `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`);
-        set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.clusterName`, this.value.metadata.name);
-        set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, '/var/lib/rancher/rke2/etc/config-files/cloud-provider-config');
+        return;
       }
 
       await this.save(btnCb);

package/edit/workload/index.vue

@@ -4,7 +4,7 @@ import FormValidation from '@shell/mixins/form-validation';
 import WorkLoadMixin from '@shell/edit/workload/mixins/workload';
 
 export default {
-  name:       'WorkloadDeployments',
+  name:       'Workload',
   mixins:     [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
   props:      {
     value: {
@@ -56,6 +56,7 @@ export default {
         :mode="mode"
         :rules="{name: fvGetAndReportPathRules('metadata.name'), namespace: fvGetAndReportPathRules('metadata.namespace'), description: []}"
         @change="name=value.metadata.name"
+        @isNamespaceNew="isNamespaceNew = $event"
       />
       <div v-if="isCronJob || isReplicable || isStatefulSet || containerOptions.length > 1" class="row mb-20">
         <div v-if="isCronJob" class="col span-3">
@@ -91,10 +92,10 @@ export default {
           />
         </div>
       </div>
-      <Tabbed class="deployment-tabs" :show-tabs-add-remove="true" :default-tab="defaultTab" @changed="changed">
+      <Tabbed class="deployment-tabs" :show-tabs-add-remove="true" :default-tab="defaultTab" :flat="true" @changed="changed">
         <Tab
           v-for="(tab, i) in allContainers"
-          :key="i+tab.name"
+          :key="i"
           :label="tab.name"
           :name="tab.name"
           :weight="tab.weight"
@@ -110,7 +111,7 @@ export default {
               <div>
                 <div :style="{'align-items':'center'}" class="row mb-20">
                   <div class="col span-6">
-                    <LabeledInput v-model="container.name" :mode="mode" :label="t('workload.container.containerName')" />
+                    <LabeledInput v-model="allContainers[i].name" :mode="mode" :label="t('workload.container.containerName')" />
                   </div>
                   <div class="col span-6">
                     <RadioGroup
@@ -127,7 +128,7 @@ export default {
                 <div class="row mb-20">
                   <div class="col span-6">
                     <LabeledInput
-                      v-model.trim="container.image"
+                      v-model.trim="allContainers[i].image"
                       :mode="mode"
                       :label="t('workload.container.image')"
                       :placeholder="t('generic.placeholder', {text: 'nginx:latest'}, true)"
@@ -136,7 +137,7 @@ export default {
                   </div>
                   <div class="col span-6">
                     <LabeledSelect
-                      v-model="container.imagePullPolicy"
+                      v-model="allContainers[i].imagePullPolicy"
                       :label="t('workload.container.imagePullPolicy')"
                       :options="pullPolicyOptions"
                       :mode="mode"
@@ -169,7 +170,13 @@ export default {
               <div class="spacer" />
               <div>
                 <h3>{{ t('workload.container.titles.command') }}</h3>
-                <Command v-model="allContainers[i]" :secrets="namespacedSecrets" :config-maps="namespacedConfigMaps" :mode="mode" />
+                <Command
+                  v-model="allContainers[i]"
+                  :secrets="namespacedSecrets"
+                  :config-maps="namespacedConfigMaps"
+                  :mode="mode"
+                  :loading="isLoadingSecondaryResources"
+                />
               </div>
               <ServiceNameSelect
                 :value="podTemplateSpec.serviceAccountName"
@@ -178,6 +185,7 @@ export default {
                 :select-placeholder="t('workload.serviceAccountName.label')"
                 :options="namespacedServiceNames"
                 option-label="metadata.name"
+                :loading="isLoadingSecondaryResources"
                 @input="updateServiceAccount"
               />
               <div class="spacer" />
@@ -234,6 +242,8 @@ export default {
                 :secrets="namespacedSecrets"
                 :config-maps="namespacedConfigMaps"
                 :save-pvc-hook-name="savePvcHookName"
+                :loading="isLoadingSecondaryResources"
+                :namespaced-pvcs="pvcs"
                 @removePvcForm="clearPvcFormState"
               />
             </Tab>
@@ -265,10 +275,10 @@ export default {
               </template>
             </Tab>
             <Tab :label="t('workload.container.titles.podScheduling')" name="podScheduling" :weight="tabWeightMap['podScheduling']">
-              <PodAffinity :mode="mode" :value="podTemplateSpec" :nodes="allNodeObjects" />
+              <PodAffinity :mode="mode" :value="podTemplateSpec" :nodes="allNodeObjects" :loading="isLoadingSecondaryResources" />
             </Tab>
             <Tab :label="t('workload.container.titles.nodeScheduling')" name="nodeScheduling" :weight="tabWeightMap['nodeScheduling']">
-              <NodeScheduling :mode="mode" :value="podTemplateSpec" :nodes="allNodes" />
+              <NodeScheduling :mode="mode" :value="podTemplateSpec" :nodes="allNodes" :loading="isLoadingSecondaryResources" />
             </Tab>
             <Tab :label="t('workload.container.titles.upgrading')" name="upgrading" :weight="tabWeightMap['upgrading']">
               <Job v-if="isJob || isCronJob" v-model="spec" :mode="mode" :type="type" />

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