@rancher/shell 0.1.4 → 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,7 +168,7 @@ 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>

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

@@ -31,4 +31,8 @@ export default class UIPlugin extends SteveModel {
   get isDeveloper() {
     return this.pluginMetadata?.developer === 'true';
   }
+
+  get plugin() {
+    return this.spec?.plugin || {};
+  }
 }

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

@@ -679,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;
     }

package/models/workload.service.js

@@ -123,6 +123,11 @@ export default class WorkloadService extends SteveModel {
 
       return containers;
     }
+
+    if ( this.spec.containers ) {
+      return this.spec.containers;
+    }
+
     const { spec:{ template:{ spec:{ containers } } } } = this;
 
     return containers;
@@ -135,6 +140,11 @@ export default class WorkloadService extends SteveModel {
 
       return initContainers;
     }
+
+    if (this.spec.initContainers) {
+      return this.spec.initContainers;
+    }
+
     const { spec:{ template:{ spec:{ initContainers } } } } = this;
 
     return initContainers;

package/nuxt.config.js

@@ -582,6 +582,7 @@ export default function(dir, _appConfig) {
       { src: path.join(NUXT_SHELL, 'plugins/plugin'), ssr: false }, // Load dyanmic plugins
       { src: path.join(NUXT_SHELL, 'plugins/codemirror-loader'), ssr: false },
       { src: path.join(NUXT_SHELL, 'plugins/formatters'), ssr: false }, // Populate formatters cache for sorted table
+      { src: path.join(NUXT_SHELL, 'plugins/version'), ssr: false }, // Makes a fetch to the backend to get version metadata
     ],
 
     // Proxy: https://github.com/nuxt-community/proxy-module#options
@@ -595,8 +596,8 @@ export default function(dir, _appConfig) {
       '/v3-public':      proxyOpts(api), // Rancher Unauthed API
       '/api-ui':         proxyOpts(api), // Browser API UI
       '/meta':           proxyMetaOpts(api), // Browser API UI
-      '/rancherversion': proxyPrimeOpts(api), // Rancher version endpoint
       '/v1-*':           proxyOpts(api), // SAML, KDM, etc
+      '/rancherversion': proxyPrimeOpts(api), // Rancher version endpoint
       // These are for Ember embedding
       '/c/*/edit':       proxyOpts('https://127.0.0.1:8000'), // Can't proxy all of /c because that's used by Vue too
       '/k/':             proxyOpts('https://127.0.0.1:8000'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.1.4",
+  "version": "0.1.21",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/auth/login.vue

@@ -26,6 +26,7 @@ import {
   setBrand,
   setVendor
 } from '@shell/config/private-label';
+import loadPlugins from '@shell/plugins/plugin';
 
 export default {
   name:       'Login',
@@ -255,6 +256,15 @@ export default {
           this.$cookies.remove(USERNAME);
         }
 
+        // User logged with local login - we don't do any redirect/reload, so the boot-time plugin will not run again to laod the plugins
+        // so we manually load them here - other SSO auth providers bounce out and back to the Dashboard, so on the bounce-back
+        // the plugins will load via the boot-time plugin
+        await loadPlugins({
+          app:     this.$store.app,
+          store:   this.$store,
+          $plugin: this.$store.$plugin
+        });
+
         if (this.firstLogin || user[0]?.mustChangePassword) {
           this.$store.dispatch('auth/setInitialPass', this.password);
           this.$router.push({ name: 'auth-setup' });

package/pages/auth/verify.vue

@@ -2,6 +2,8 @@
 import { GITHUB_CODE, GITHUB_NONCE, BACK_TO } from '@shell/config/query-params';
 import { get } from '@shell/utils/object';
 import { base64Decode } from '@shell/utils/crypto';
+import loadPlugins from '@shell/plugins/plugin';
+
 const samlProviders = ['ping', 'adfs', 'keycloak', 'okta', 'shibboleth'];
 
 function reply(err, code) {
@@ -60,6 +62,13 @@ export default {
       if ( res._status === 200) {
         const backTo = route.query[BACK_TO] || '/';
 
+        // Load plugins
+        await loadPlugins({
+          app:     store.app,
+          store,
+          $plugin: store.$plugin
+        });
+
         redirect(backTo);
       } else {
         redirect(`/auth/login?err=${ escape(res) }`);

package/pages/c/_cluster/settings/DefaultLinksEditor.vue

@@ -0,0 +1,108 @@
+<script>
+import Vue from 'vue';
+
+import { _VIEW } from '@shell/config/query-params';
+import { Checkbox } from '@components/Form/Checkbox';
+
+export default {
+  name: 'DefaultLinksEditor',
+
+  components: { Checkbox },
+
+  props: {
+    // Array of objects with key, label, value and enabled properties
+    value: {
+      type:    Array,
+      default: () => [],
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
+  methods: {
+    showhide(row, i, e) {
+      const value = this.value[i];
+
+      Vue.set(value, 'enabled', !!value.enabled);
+      this.$emit('input', this.value);
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="key-value">
+    <div class="clearfix">
+      <h3>
+        {{ t('customLinks.settings.default') }}
+      </h3>
+    </div>
+
+    <div class="kv-container">
+      <label class="text-label">
+        {{ t('customLinks.settings.keyLabel') }}
+      </label>
+      <label class="text-label">
+        {{ t('customLinks.settings.valueLabel') }}
+      </label>
+      <label class="text-label">
+      </label>
+
+      <template v-for="(row,i) in value">
+        <div :key="i+'key'" class="kv-item key" :class="{'link-hidden': !row.enabled}">
+          <span>{{ row.label }}</span>
+        </div>
+
+        <div :key="i+'value'" class="kv-item value" :class="{'link-hidden': !row.enabled}">
+          <span>{{ row.value }}</span>
+        </div>
+
+        <div v-if="!row.readonly && !isView" :key="i+'show'">
+          <Checkbox v-if="!isView" v-model="row.enabled" label-key="customLinks.settings.showLabel" @input="showhide(row, i, $event)" />
+        </div>
+        <div v-else :key="i+'show'"></div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.key-value {
+  width: 100%;
+
+  .kv-container {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr 1fr 50px;
+    column-gap: $column-gutter;
+
+    .kv-item {
+      background-color: var(--disabled-bg);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      width: 100%;
+      margin: 10px 0px 10px 0px;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 10px;
+
+      &.link-hidden {
+        color: var(--disabled-text);
+      }
+
+      &.key {
+        align-self: flex-start;
+      }
+    }
+  }
+}
+</style>