@rancher/shell 0.1.4 → 0.2.1

package/list/management.cattle.io.feature.vue

@@ -3,23 +3,22 @@ import { mapState, mapGetters } from 'vuex';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Card } from '@components/Card';
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
     AsyncButton,
     Banner,
     Card,
-    Loading,
     ResourceTable,
     LabeledInput
   },
-
-  props: {
+  mixins:     [ResourceFetch],
+  props:  {
     resource: {
       type:     String,
       required: true,
@@ -32,7 +31,7 @@ export default {
   },
 
   async fetch() {
-    this.rows = await this.$store.dispatch('management/findAll', { type: this.resource });
+    await this.$fetchType(this.resource);
 
     this.serverUrlSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
 
@@ -52,7 +51,6 @@ export default {
 
   data() {
     return {
-      rows:             null,
       update:           [],
       updateMode:       'activate',
       error:            null,
@@ -85,6 +83,13 @@ export default {
     },
   },
 
+  $loadingResources() {
+    return {
+      loadResources:     [MANAGEMENT.FEATURE],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
+
   watch: {
     showPromptUpdate(show) {
       if (show) {
@@ -184,12 +189,12 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else>
+  <div>
     <ResourceTable
       :schema="schema"
       :rows="filteredRows"
       :row-actions="enableRowActions"
+      :loading="loading"
     >
       <template slot="cell:name" slot-scope="scope">
         <div class="feature-name">

package/list/management.cattle.io.user.vue

@@ -1,26 +1,45 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
-import { NORMAN } from '@shell/config/types';
+import { MANAGEMENT, NORMAN } from '@shell/config/types';
 import { NAME } from '@shell/config/product/auth';
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
     AsyncButton,
-    Loading,
     ResourceTable,
     Masthead
   },
+  mixins: [ResourceFetch],
+  props:  {
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
 
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
+  },
   async fetch() {
     const store = this.$store;
-    const resource = this.resource;
 
     await store.dispatch(`rancher/findAll`, { type: NORMAN.USER });
 
-    this.allUsers = await store.dispatch(`management/findAll`, { type: resource });
+    await this.$fetchType(this.resource);
 
     this.canRefreshAccess = await this.$store.dispatch('rancher/request', { url: '/v3/users?limit=0' })
       .then(res => !!res?.actions?.refreshauthprovideraccess);
@@ -28,21 +47,19 @@ export default {
 
   data() {
     const getters = this.$store.getters;
-    const params = { ...this.$route.params };
-
-    const resource = params.resource;
 
-    const schema = getters[`management/schemaFor`](resource);
+    const schema = getters[`management/schemaFor`](this.resource);
 
     return {
       schema,
-      resource,
-
-      // Provided by fetch later
-      rows:             null,
       canRefreshAccess: false,
+    };
+  },
 
-      allUsers: null,
+  $loadingResources() {
+    return {
+      loadResources:     [MANAGEMENT.USER],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
     };
   },
 
@@ -56,7 +73,7 @@ export default {
     },
 
     users() {
-      if ( !this.allUsers ) {
+      if ( !this.rows ) {
         return [];
       }
 
@@ -64,7 +81,7 @@ export default {
       // 1) Only show system users in explorer/users and not in auth/users
       // 2) Supplement user with info to enable/disable the refresh group membership action (this is not persisted on save)
       const params = { ...this.$route.params };
-      const requiredUsers = params.product === NAME ? this.allUsers.filter(a => !a.isSystem) : this.allUsers;
+      const requiredUsers = params.product === NAME ? this.rows.filter(a => !a.isSystem) : this.rows;
 
       requiredUsers.forEach((r) => {
         r.canRefreshAccess = this.canRefreshAccess;
@@ -94,11 +111,13 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else>
+  <div>
     <Masthead
       :schema="schema"
       :resource="resource"
+      :show-incremental-loading-indicator="incrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     >
       <template slot="extraActions">
         <AsyncButton
@@ -113,7 +132,7 @@ export default {
       </template>
     </Masthead>
 
-    <ResourceTable :schema="schema" :rows="users" :group-by="groupBy" />
+    <ResourceTable :schema="schema" :rows="users" :group-by="groupBy" :loading="loading" />
   </div>
 </template>
 

package/list/monitoring.coreos.com.alertmanagerconfig.vue

@@ -1,16 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
 import { MONITORING } from '@shell/config/types';
-
+import ResourceFetch from '@shell/mixins/resource-fetch';
 export default {
   name:       'ListApps',
-  components: {
-    Banner, Loading, ResourceTable
-  },
-
-  props: {
+  components: { Banner, ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -25,27 +22,23 @@ export default {
   async fetch() {
     try {
       await this.$store.dispatch('cluster/findAll', { type: MONITORING.ALERTMANAGERCONFIG });
-      this.rows = await this.$store.dispatch('cluster/findAll', { type: this.resource });
+      await this.$fetchType(this.resource);
     } catch (err) {
       throw new Error(err);
     }
-  },
-
-  data() {
-    return { rows: null };
-  },
+  }
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else-if="rows.length > 0">
+  <div v-if="rows.length || loading">
     <Banner color="info">
       {{ t('monitoring.alertmanagerConfig.description') }}
     </Banner>
     <ResourceTable
       :schema="schema"
       :rows="rows"
+      :loading="loading"
     />
   </div>
 

package/list/namespace.vue

@@ -6,6 +6,10 @@ export default {
   name:       'ListNamespace',
   components: { ResourceTable },
   props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -14,6 +18,10 @@ export default {
       type:     Array,
       required: true,
     },
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: {
@@ -28,7 +36,11 @@ export default {
         return this.rows;
       }
     },
-  }
+  },
+
+  $loadingResources() {
+    return { loadIndeterminate: true };
+  },
 };
 </script>
 
@@ -39,6 +51,7 @@ export default {
     :groupable="false"
     :schema="schema"
     key-field="_key"
+    :loading="loading"
     v-on="$listeners"
   />
 </template>

package/list/node.vue

@@ -1,6 +1,5 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import Tag from '@shell/components/Tag';
 import { Banner } from '@components/Banner';
 import {
@@ -16,18 +15,21 @@ import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
 import { GROUP_RESOURCES, mapPref } from '@shell/store/prefs';
 import { COLUMN_BREAKPOINTS } from '@shell/components/SortableTable/index.vue';
-
+import ResourceFetch from '@shell/mixins/resource-fetch';
 export default {
   name:       'ListNode',
   components: {
-    Loading,
     ResourceTable,
     Tag,
     Banner
   },
-  mixins: [metricPoller],
+  mixins: [metricPoller, ResourceFetch],
 
   props: {
+    resource: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -35,7 +37,7 @@ export default {
   },
 
   async fetch() {
-    const hash = { kubeNodes: this.$store.dispatch('cluster/findAll', { type: NODE }) };
+    const hash = { kubeNodes: this.$fetchType(NODE) };
 
     this.canViewPods = this.$store.getters[`cluster/schemaFor`](POD);
 
@@ -58,16 +60,11 @@ export default {
       this.$store.dispatch('cluster/findAll', { type: POD });
     }
 
-    const res = await allHash(hash);
-
-    this.kubeNodes = res.kubeNodes;
+    await allHash(hash);
   },
 
   data() {
-    return {
-      kubeNodes:   null,
-      canViewPods: false,
-    };
+    return { canViewPods: false };
   },
 
   beforeDestroy() {
@@ -79,7 +76,7 @@ export default {
 
   computed: {
     hasWindowsNodes() {
-      return (this.kubeNodes || []).some(node => node.status.nodeInfo.operatingSystem === 'windows');
+      return (this.rows || []).some(node => node.status.nodeInfo.operatingSystem === 'windows');
     },
     tableGroup: mapPref(GROUP_RESOURCES),
 
@@ -141,8 +138,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else>
+  <div>
     <Banner
       v-if="hasWindowsNodes"
       color="info"
@@ -152,8 +148,9 @@ export default {
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
-      :rows="kubeNodes"
+      :rows="rows"
       :sub-rows="true"
+      :loading="loading"
       v-on="$listeners"
     >
       <template #sub-row="{fullColspan, row}">

package/list/persistentvolume.vue

@@ -1,27 +1,34 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { PVC } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListPersistentVolume',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    schema: {
+      type:     Object,
+      required: true,
+    },
+  },
 
   async fetch() {
     const inStore = this.$store.getters['currentStore']();
     const pvcPromise = this.$store.dispatch(`${ inStore }/findAll`, { type: PVC });
 
-    this.rows = await this.$store.dispatch(`${ inStore }/findAll`, { type: this.$attrs.resource });
+    await this.$fetchType(this.resource);
     await pvcPromise;
-  },
-
-  data() {
-    return { rows: [] };
   }
 };
 </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/persistentvolumeclaim.vue

@@ -1,12 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
 import { STORAGE_CLASS } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListPersistentVolumeClaim',
   components: { ResourceTable },
-
-  props: {
+  mixins:     [ResourceFetch],
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -24,18 +25,14 @@ export default {
     // Fetch storage classes so we can determine if a PVC can be expanded
     this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
 
-    this.rows = await this.$store.dispatch(`${ inStore }/findAll`, { type: this.resource });
-  },
-
-  data() {
-    return { rows: [] };
+    await this.$fetchType(this.resource);
   }
 };
 </script>
 
 <template>
   <ResourceTable
-    :loading="$fetchState.pending"
+    :loading="loading"
     :schema="schema"
     :rows="rows"
   />

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