@rancher/shell 0.1.3 → 0.1.21

package/list/provisioning.cattle.io.cluster.vue

@@ -8,17 +8,35 @@ import { MODE, _IMPORT } from '@shell/config/query-params';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/features';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
     Banner, ResourceTable, Masthead
   },
+  mixins: [ResourceFetch],
+  props:  {
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
+  },
 
   async fetch() {
     const hash = {
+      rancherClusters: this.$fetchType(CAPI.RANCHER_CLUSTER),
       normanClusters:  this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER }),
       mgmtClusters:    this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
-      rancherClusters: this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
     };
 
     if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
@@ -50,7 +68,6 @@ export default {
     const res = await allHash(hash);
 
     this.mgmtClusters = res.mgmtClusters;
-    this.rancherClusters = res.rancherClusters;
   },
 
   data() {
@@ -58,19 +75,18 @@ export default {
       resource:        CAPI.RANCHER_CLUSTER,
       schema:          this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
       mgmtClusters:    [],
-      rancherClusters: [],
     };
   },
 
   computed: {
-    rows() {
+    filteredRows() {
       // If Harvester feature is enabled, hide Harvester Clusters
       if (this.harvesterEnabled) {
-        return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.rancherClusters), this.$store);
+        return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.rows), this.$store);
       }
 
       // Otherwise, show Harvester clusters - these will be shown with a warning
-      return filterHiddenLocalCluster(this.rancherClusters, this.$store);
+      return filterHiddenLocalCluster(this.rows, this.$store);
     },
 
     hiddenHarvesterCount() {
@@ -82,7 +98,7 @@ export default {
         return 0;
       }
 
-      return this.rancherClusters.length - filterOnlyKubernetesClusters(this.rancherClusters).length;
+      return this.rows.length - filterOnlyKubernetesClusters(this.rows).length;
     },
 
     createLocation() {
@@ -115,6 +131,13 @@ export default {
     harvesterEnabled: mapFeature(HARVESTER_FEATURE),
   },
 
+  $loadingResources() {
+    return {
+      loadResources:     [CAPI.RANCHER_CLUSTER],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
+
   mounted() {
     window.c = this;
   },
@@ -130,6 +153,9 @@ export default {
       :resource="resource"
       :create-location="createLocation"
       component-testid="cluster-manager-list"
+      :show-incremental-loading-indicator="incrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     >
       <template v-if="canImport" slot="extraActions">
         <n-link
@@ -142,14 +168,14 @@ export default {
       </template>
     </Masthead>
 
-    <ResourceTable :schema="schema" :rows="rows" :namespaced="false" :loading="$fetchState.pending">
+    <ResourceTable :schema="schema" :rows="filteredRows" :namespaced="false" :loading="loading">
       <template #cell:summary="{row}">
         <span v-if="!row.stateParts.length">{{ row.nodes.length }}</span>
       </template>
       <template #cell:explorer="{row}">
         <span v-if="row.mgmt && row.mgmt.isHarvester"></span>
         <n-link
-          v-else-if="row.mgmt && row.mgmt.isReady"
+          v-else-if="row.mgmt && row.mgmt.isReady && !row.hasError"
           data-testid="cluster-manager-list-explore-management"
           class="btn btn-sm role-secondary"
           :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"

package/list/service.vue

@@ -1,12 +1,25 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { NODE } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListService',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    schema: {
+      type:     Object,
+      required: true,
+    },
+  },
+
   // fetch nodes before loading this page, as they may be referenced in the Target table column
   async fetch() {
     const store = this.$store;
@@ -21,23 +34,22 @@ export default {
       }
     } catch {}
 
-    const hash = { rows: store.dispatch(`${ inStore }/findAll`, { type: this.$attrs.resource }) };
+    const hash = { rows: this.$fetchType(this.resource) };
 
     if (hasNodes) {
       hash.nodes = store.dispatch(`${ inStore }/findAll`, { type: NODE });
     }
-    const res = await allHash(hash);
-
-    this.rows = res.rows;
-  },
-
-  data() {
-    return { rows: [] };
+    await allHash(hash);
   }
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <ResourceTable v-else :schema="$attrs.schema" :rows="rows" :headers="$attrs.headers" :group-by="$attrs.groupBy" />
+  <ResourceTable
+    :schema="schema"
+    :rows="rows"
+    :headers="$attrs.headers"
+    :group-by="$attrs.groupBy"
+    :loading="loading"
+  />
 </template>

package/list/ui.cattle.io.navlink.vue

@@ -16,6 +16,11 @@ export default {
       type:     Array,
       required: true,
     },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: { ...mapGetters(['clusterId']) }
@@ -26,6 +31,7 @@ export default {
   <ResourceTable
     :schema="schema"
     :rows="rows"
+    :loading="loading"
   >
     <template #cell:to="{row}">
       <template v-if="row.spec && row.spec.toService">

package/list/workload.vue

@@ -76,7 +76,7 @@ export default {
       return schema;
     },
 
-    rows() {
+    filteredRows() {
       const out = [];
 
       for ( const typeRows of this.resources ) {
@@ -151,5 +151,5 @@ export default {
 </script>
 
 <template>
-  <ResourceTable :loading="$fetchState.pending" :schema="schema" :rows="rows" :overflow-y="true" />
+  <ResourceTable :loading="$fetchState.pending" :schema="schema" :rows="filteredRows" :overflow-y="true" />
 </template>

package/machine-config/harvester.vue

@@ -170,8 +170,10 @@ export default {
           };
         });
 
-        (res.namespaces.value.data || []).forEach((namespace) => {
-          if (!namespace.isSystem) {
+        (res.namespaces.value.data || []).forEach(async(namespace) => {
+          const proxyNamespace = await this.$store.dispatch('cluster/create', namespace);
+
+          if (!proxyNamespace.isSystem && namespace.links.update) {
             const value = namespace.metadata.name;
             const label = namespace.metadata.name;
 
@@ -519,7 +521,7 @@ export default {
             :options="imageOptions"
             :required="true"
             :searchable="true"
-            :disabled="disabledEdit"
+            :disabled="disabled"
             label-key="cluster.credential.harvester.image"
             :placeholder="t('cluster.harvester.machinePool.image.placeholder')"
             @on-open="onOpen"

package/middleware/authenticated.js

@@ -234,6 +234,8 @@ export default async function({
         }
       }
     }
+
+    store.dispatch('gcStartIntervals');
   }
 
   if (!process.server) {
@@ -245,6 +247,10 @@ export default async function({
       window.location.href = backTo;
     }
   }
+
+  // GC should be notified of route change before any find/get request is made that might be used for that page
+  store.dispatch('gcRouteChanged', route);
+
   // Load stuff
   await applyProducts(store, $plugin);
   // Setup a beforeEach hook once to keep track of the current product

package/mixins/resource-fetch.js

@@ -1,26 +1,10 @@
 import { mapGetters } from 'vuex';
-import {
-  COUNT, MANAGEMENT, POD, WORKLOAD_TYPES, WORKLOAD, SECRET
-} from '@shell/config/types';
+import { COUNT, MANAGEMENT } from '@shell/config/types';
 import { SETTING, DEFAULT_PERF_SETTING } from '@shell/config/settings';
 
 // Number of pages to fetch when loading incrementally
 const PAGES = 4;
 
-// restrict advanced features of manual refresh and incremental loading to these resource types
-export const TYPES_RESTRICTED = [
-  SECRET,
-  POD,
-  WORKLOAD_TYPES.DEPLOYMENT,
-  WORKLOAD_TYPES.CRON_JOB,
-  WORKLOAD_TYPES.DAEMON_SET,
-  WORKLOAD_TYPES.JOB,
-  WORKLOAD_TYPES.STATEFUL_SET,
-  WORKLOAD_TYPES.REPLICA_SET,
-  WORKLOAD_TYPES.REPLICATION_CONTROLLER,
-  WORKLOAD
-];
-
 export default {
   data() {
     // fetching the settings related to manual refresh from global settings
@@ -66,7 +50,17 @@ export default {
     }
   },
 
-  computed: { ...mapGetters({ refreshFlag: 'resource-fetch/refreshFlag' }) },
+  computed: {
+    ...mapGetters({ refreshFlag: 'resource-fetch/refreshFlag' }),
+    rows() {
+      const inStore = this.$store.getters['currentStore'](this.resource);
+
+      return this.$store.getters[`${ inStore }/all`](this.resource);
+    },
+    loading() {
+      return this.rows.length ? false : this.$fetchState.pending;
+    },
+  },
   watch:    {
     refreshFlag(neu) {
       // this is where the data assignment will trigger the update of the list view...

package/mixins/resource-manager.js

@@ -0,0 +1,126 @@
+import { mapGetters } from 'vuex';
+import { allHashSettled } from '@shell/utils/promise';
+
+export default {
+  computed: { ...mapGetters(['currentCluster']) },
+  data() {
+    return { isLoadingSecondaryResources: false };
+  },
+  methods:  {
+    /**
+    *
+    * Function resourceManagerFetchSecondaryResources
+    * This method is used to fetch what is called "secondary resources", which can be defined as resources that are needed to populate
+    * the page/component itself (ex: used as options on a Select) but don't need to be put into Vuex store or watched to get constant updates.
+    * This method allows to fetch resources for a given namespace to reduce the amount of results instead of needing to fetch all and filtering afterwards.
+    *
+    *
+    * @param {String} resourceData.namespace - Namespace identifier
+    * @param {Object} resourceData.data - Object containing info about the data needed to be fetched and how it should be parsed. Note: The KEY NEEDS to be the resource TYPE!
+    * @param {Array} resourceData.data[TYPE].applyTo - The array of operations needed to be performed for the specific data TYPE
+    * @param {String} resourceData.data[TYPE].applyTo[x].var - The 'this' property name that should be populated with the data fetched
+    * @param {Boolean} resourceData.data[TYPE].applyTo[x].classify - Whether the data fetched should have a model applied to it
+    * @param {Function} resourceData.data[TYPE].applyTo[x].parsingFunc - Optional parsing function if the fetched data needs to be parsed
+    * @param {Boolean} onlyNamespaced - Only fetch namespaced resources
+    */
+    async resourceManagerFetchSecondaryResources(resourceData, onlyNamespaced = false) {
+      const requests = {};
+      const namespace = resourceData.namespace;
+
+      // Only fetch types if the user is allowed to...
+      Object.keys(resourceData.data).forEach((type) => {
+        const schema = this.$store.getters['cluster/schemaFor'](type);
+
+        if (schema) {
+          let url = schema.links.collection;
+
+          if (schema?.attributes?.namespaced && namespace) {
+            const parts = url.split('/');
+
+            parts.splice(parts.length - 2, 0, `api`);
+            parts.splice(parts.length - 1, 0, `namespaces/${ namespace }`);
+            url = parts.join('/');
+          } else if (onlyNamespaced) {
+            // Type isn't namespaced and we've been requested to only fetch namespaced types
+            return;
+          }
+
+          requests[type] = this.$store.dispatch('cluster/request', { url });
+        }
+      });
+
+      if (Object.keys(requests).length) {
+        // this is the flag/variable that we need to apply to all places that rely on this data. Ex: LabeledSelect
+        this.isLoadingSecondaryResources = true;
+        const hash = await allHashSettled(requests);
+        const types = Object.keys(hash);
+
+        for (let i = 0; i < types.length; i++) {
+          const type = types[i];
+          const status = hash[type].status;
+          // if it's namespaced, we get the data on 'items' prop, for non-namespaced it's  'data' prop...
+          const requestData = hash[type].value.items || hash[type].value.data || hash[type].value;
+          const schema = this.$store.getters['cluster/schemaFor'](type);
+
+          if (status === 'fulfilled' && resourceData.data[type] && resourceData.data[type].applyTo?.length) {
+            for (let y = 0; y < resourceData.data[type].applyTo.length; y++) {
+              const apply = resourceData.data[type].applyTo[y];
+              let resources = requestData;
+
+              if (schema?.attributes?.namespaced) {
+                // The resources returned when requesting namespaced types do not contain id, type and links properties.
+                // This isn't perfect, or universally applicable, but will work for the current set of use cases
+                // To make this more generic
+                // - id param = this.$store.getters['cluster/keyFieldForType'](type)
+                // - id value = new dashboard-store getter, overwritten by steve store getter
+                requestData.forEach((item) => {
+                  item.type = type;
+                  item.id = `${ item.metadata.namespace }/${ item.metadata.name }`;
+                });
+              }
+
+              if (apply.classify) {
+                resources = await this.$store.dispatch('cluster/createMany', requestData);
+              }
+
+              if (apply.parsingFunc) {
+                this[apply.var] = apply.parsingFunc(resources);
+              } else {
+                this[apply.var] = resources;
+              }
+            }
+          } else if (status === 'rejected') {
+            console.error(`Resource Manager - secondary data request for type ${ type } has failed`, status.error); // eslint-disable-line no-console
+          }
+        }
+
+        this.isLoadingSecondaryResources = false;
+      }
+    },
+
+    /**
+     * Clear the cached secondary resources
+     *
+     * @param {*} resourceData See resourceManagerFetchSecondaryResources
+     * @param {*} onlyNamespaced Clear only namespaced resources
+     */
+    resourceManagerClearSecondaryResources(resourceData, onlyNamespaced = false) {
+      Object.keys(resourceData.data).forEach((type) => {
+        const schema = this.$store.getters['cluster/schemaFor'](type);
+
+        if (schema) {
+          if (!schema?.attributes?.namespaced && onlyNamespaced) {
+            // resource isn't namespaced and we're only interested in namespaced resources
+            return;
+          }
+
+          for (let y = 0; y < resourceData.data[type].applyTo.length; y++) {
+            const apply = resourceData.data[type].applyTo[y];
+
+            this[apply.var] = [];
+          }
+        }
+      });
+    }
+  },
+};

package/models/catalog.cattle.io.uiplugin.js

@@ -0,0 +1,38 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+
+const CACHED_STATUS = 'cached';
+
+export default class UIPlugin extends SteveModel {
+  get name() {
+    return this.spec?.plugin?.name;
+  }
+
+  get description() {
+    return this.spec?.plugin?.description;
+  }
+
+  get version() {
+    return this.spec?.plugin?.version;
+  }
+
+  get willBeCached() {
+    return this.spec?.plugin?.noCache === false;
+  }
+
+  // Has the plugin been cached?
+  get isCached() {
+    return !this.willBeCached || (this.willBeCached && this.status?.cacheState === CACHED_STATUS);
+  }
+
+  get pluginMetadata() {
+    return this.spec?.plugin?.metadata || {};
+  }
+
+  get isDeveloper() {
+    return this.pluginMetadata?.developer === 'true';
+  }
+
+  get plugin() {
+    return this.spec?.plugin || {};
+  }
+}

package/models/cluster/node.js

@@ -153,6 +153,14 @@ export default class ClusterNode extends SteveModel {
   }
 
   get cpuUsage() {
+    /*
+      With EKS nodes that have been migrated from norman,
+      cpu/memory usage is by the annotation `management.cattle.io/pod-requests`
+    */
+    if ( this.isFromNorman && this.provider === 'eks' ) {
+      return parseSi(this.podRequests.cpu || '0');
+    }
+
     return parseSi(this.$rootGetters['cluster/byId'](METRIC.NODE, this.id)?.usage?.cpu || '0');
   }
 
@@ -165,6 +173,10 @@ export default class ClusterNode extends SteveModel {
   }
 
   get ramUsage() {
+    if ( this.isFromNorman && this.provider === 'eks' ) {
+      return parseSi(this.podRequests.memory || '0');
+    }
+
     return parseSi(this.$rootGetters['cluster/byId'](METRIC.NODE, this.id)?.usage?.memory || '0');
   }
 
@@ -192,6 +204,10 @@ export default class ClusterNode extends SteveModel {
     return this.pods.length;
   }
 
+  get podRequests() {
+    return JSON.parse(this.metadata.annotations['management.cattle.io/pod-requests'] || '{}');
+  }
+
   get isPidPressureOk() {
     return this.isCondition('PIDPressure', 'False');
   }
@@ -368,14 +384,13 @@ export default class ClusterNode extends SteveModel {
   }
 
   get canDelete() {
-    const provider = this.$rootGetters['currentCluster'].provisioner.toLowerCase();
     const cloudProviders = [
       'aks', 'azureaks', 'azurekubernetesservice',
       'eks', 'amazoneks',
       'gke', 'googlegke'
     ];
 
-    return !cloudProviders.includes(provider);
+    return !cloudProviders.includes(this.provider);
   }
 
   // You need to preload CAPI.MACHINEs to use this
@@ -389,6 +404,14 @@ export default class ClusterNode extends SteveModel {
 
     return null;
   }
+
+  get isFromNorman() {
+    return (this.$rootGetters['currentCluster'].metadata.labels || {})['cattle.io/creator'] === 'norman';
+  }
+
+  get provider() {
+    return this.$rootGetters['currentCluster'].provisioner.toLowerCase();
+  }
 }
 
 function calculatePercentage(allocatable, capacity) {

package/models/fleet.cattle.io.bundle.js

@@ -18,7 +18,7 @@ export default class FleetBundle extends SteveModel {
   }
 
   get lastUpdateTime() {
-    return this.status.conditions[0].lastUpdateTime;
+    return this.status?.conditions?.[0].lastUpdateTime;
   }
 
   get bundleType() {

package/models/harvesterhci.io.management.cluster.js

@@ -79,11 +79,11 @@ export default class HciCluster extends ProvCluster {
     const pkgName = `${ HARVESTER_NAME }-1.0.3`;
 
     if (uiOfflinePreferred === 'true') {
-      // Embedded (aka give me the version of the embedded plugin that was in the last release)
-      const embeddedPath = `dashboard/${ pkgName }/${ pkgName }.umd.min.js`;
+      // Embedded (aka give me the embedded plugin that was in the last rancher release)
+      const embeddedPath = `${ pkgName }/${ pkgName }.umd.min.js`;
 
       return {
-        pkgUrl: process.env.dev ? `${ process.env.api }/${ embeddedPath }` : embeddedPath,
+        pkgUrl: process.env.dev ? `${ process.env.api }/dashboard/${ embeddedPath }` : embeddedPath,
         pkgName
       };
     }
@@ -111,15 +111,21 @@ export default class HciCluster extends ProvCluster {
    * Determine the harvester plugin's package name and url for clusters that provide the plugin
    */
   _supportedClusterPkgDetails(uiInfo, clusterId) {
-    const pkgName = `${ HARVESTER_NAME }-${ uiInfo['ui-plugin-bundled-version'] }`;
+    let pkgName = `${ HARVESTER_NAME }-${ uiInfo['ui-plugin-bundled-version'] }`;
     const fileName = `${ pkgName }.umd.min.js`;
     let pkgUrl;
 
     if (uiInfo['ui-source'] === 'bundled' ) { // offline bundled
-      pkgUrl = `k8s/clusters/${ clusterId }/v1/harvester/plugin-assets/${ fileName }`;
+      pkgUrl = `/k8s/clusters/${ clusterId }/v1/harvester/plugin-assets/${ fileName }`;
     } else if (uiInfo['ui-source'] === 'external') {
       if (uiInfo['ui-plugin-index']) {
         pkgUrl = uiInfo['ui-plugin-index'];
+
+        // When using an external address, the pkgName should also be get from the url
+        const names = pkgUrl.split('/');
+        const jsName = names[names.length - 1];
+
+        pkgName = jsName?.split('.umd.min.js')[0];
       } else {
         throw new Error('Harvester cluster requested the plugin at `ui-plugin-index` is used, however did not provide a value for it');
       }

package/models/pod.js

@@ -182,19 +182,29 @@ export default class Pod extends WorkloadService {
   }
 
   save() {
+    const prev = { ...this };
+
     const { metadata, spec } = this.spec.template;
 
     this.spec = {
       ...this.spec,
-      metadata: {
-        ...this.metadata,
-        ...metadata
-      },
       ...spec
     };
 
+    this.metadata = {
+      ...this.metadata,
+      ...metadata
+    };
+
     delete this.spec.template;
 
-    return this._save(...arguments);
+    // IF there is an error POD world model get overwritten
+    // For the workloads this need be reset back
+    return this._save(...arguments).catch((e) => {
+      this.spec = prev.spec;
+      this.metadata = prev.metadata;
+
+      return Promise.reject(e);
+    });
   }
 }

package/models/provisioning.cattle.io.cluster.js

@@ -197,12 +197,10 @@ export default class ProvCluster extends SteveModel {
     return super.canEditYaml;
   }
 
-  get isAKS() {
-    return this.provisioner === 'AKS';
-  }
+  get isHostedKubernetesProvider() {
+    const providers = ['AKS', 'EKS', 'GKE'];
 
-  get isEKS() {
-    return this.provisioner === 'EKS';
+    return providers.includes(this.provisioner);
   }
 
   get isImported() {
@@ -230,13 +228,17 @@ export default class ProvCluster extends SteveModel {
   get isImportedK3s() {
     // As of Rancher v2.6.7, this returns false for imported K3s clusters,
     // in which this.provisioner is `k3s`.
-    return this.isImported && this.mgmt?.status?.provider === 'k3s';
+    return this.isImported && this.isK3s;
   }
 
   get isImportedRke2() {
     return this.isImported && this.mgmt?.status?.provider?.startsWith('rke2');
   }
 
+  get isK3s() {
+    return this.mgmt?.status?.provider === 'k3s';
+  }
+
   get isRke2() {
     return !!this.spec?.rkeConfig;
   }
@@ -677,6 +679,10 @@ export default class ProvCluster extends SteveModel {
   }
 
   get supportsWindows() {
+    if (this.isK3s || this.isImportedK3s) {
+      return false;
+    }
+
     if ( this.isRke1 ) {
       return this.mgmt?.spec?.windowsPreferedCluster || false;
     }
@@ -764,4 +770,8 @@ export default class ProvCluster extends SteveModel {
       await this.$dispatch('ws.resource.remove', { data: this });
     }
   }
+
+  get hasError() {
+    return this.status?.conditions?.some(condition => condition.error === true);
+  }
 }