@rancher/shell 0.1.3 → 0.1.21

package/list/logging.banzaicloud.io.clusterflow.vue

@@ -1,13 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { LOGGING } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListApps',
-  components: { Loading, ResourceTable },
-
-  props: {
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -21,16 +21,11 @@ export default {
 
   async fetch() {
     await this.$store.dispatch('cluster/findAll', { type: LOGGING.CLUSTER_OUTPUT });
-    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-if="rows" :schema="schema" :rows="rows" />
+  <ResourceTable :schema="schema" :rows="rows" :loading="loading" />
 </template>

package/list/logging.banzaicloud.io.flow.vue

@@ -1,13 +1,12 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { LOGGING } from '@shell/config/types';
-
+import ResourceFetch from '@shell/mixins/resource-fetch';
 export default {
   name:       'ListApps',
-  components: { Loading, ResourceTable },
-
-  props: {
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -24,18 +23,12 @@ export default {
       await this.$store.dispatch('cluster/findAll', { type: LOGGING.OUTPUT });
       await this.$store.dispatch('cluster/findAll', { type: LOGGING.CLUSTER_OUTPUT });
     } catch (e) {}
-    const rows = await this.$store.dispatch('cluster/findAll', { type: LOGGING.FLOW });
 
-    this.rows = rows;
-  },
-
-  data() {
-    return { rows: [] };
-  },
+    await this.$fetchType(LOGGING.FLOW);
+  }
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <ResourceTable v-else :schema="schema" :rows="rows" />
+  <ResourceTable :schema="schema" :rows="rows" :loading="loading" />
 </template>

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

@@ -1,31 +1,42 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { MANAGEMENT } from '@shell/config/types';
 import { filterOnlyKubernetesClusters } from '@shell/utils/cluster';
-
+import ResourceFetch from '@shell/mixins/resource-fetch';
 export default {
   name:       'ListMgmtClusters',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
 
-  async fetch() {
-    await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.$attrs.resource });
+  props: {
+    resource: {
+      type:     String,
+      required: true,
+    },
+    schema: {
+      type:     Object,
+      required: true,
+    },
   },
 
+  async fetch() {
+    await this.$fetchType(this.resource);
+  },
   computed: {
-    inStore() {
-      return this.$store.getters['currentProduct'].inStore;
-    },
-    rows() {
-      const all = this.$store.getters[`${ this.inStore }/all`](MANAGEMENT.CLUSTER);
-
-      return filterOnlyKubernetesClusters(all);
+    filteredRows() {
+      return filterOnlyKubernetesClusters(this.rows);
     }
-  }
+  },
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    return {
+      loadResources:     [MANAGEMENT.CLUSTER],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
 };
 </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="filteredRows" :headers="$attrs.headers" :group-by="$attrs.groupBy" :loading="loading" />
 </template>

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.setting.vue

@@ -4,13 +4,13 @@ import { MANAGEMENT } from '@shell/config/types';
 import { ALLOWED_SETTINGS } from '@shell/config/settings';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
-import { DEV } from '@shell/store/prefs';
+import { VIEW_IN_API } from '@shell/store/prefs';
 
 export default {
   components: { Banner, Loading },
 
   async fetch() {
-    const isDev = this.$store.getters['prefs/get'](DEV);
+    const viewInApi = this.$store.getters['prefs/get'](VIEW_IN_API);
     const rows = await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.SETTING });
     const t = this.$store.getters['i18n/t'];
     // Map settings from array to object keyed by id
@@ -51,7 +51,7 @@ export default {
       }
       // There are only 2 actions that can be enabled - Edit Setting or View in API
       // If neither is available for this setting then we hide the action menu button
-      s.hasActions = (!s.readOnly || isDev) && setting.availableActions?.length;
+      s.hasActions = (!s.readOnly || viewInApi) && setting.availableActions?.length;
       settings.push(s);
     }
 

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