@rancher/shell 0.1.3 → 0.1.21

package/list/catalog.cattle.io.clusterrepo.vue

@@ -1,64 +1,24 @@
 <script>
-import { mapGetters } from 'vuex';
 import ResourceTable from '@shell/components/ResourceTable';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import { Banner } from '@components/Banner';
-import { HIDE_DESC, mapPref } from '@shell/store/prefs';
-import { addObject } from '@shell/utils/array';
-
 export default {
   name:       'ListClusterReposApps',
-  components: {
-    Banner,
-    Masthead,
-    ResourceTable
-  },
-
-  props: {
+  components: { ResourceTable },
+  props:      {
     resource: {
       type:     String,
       required: true,
     },
-
     schema: {
       type:     Object,
       required: true,
     },
-
     rows: {
       type:     Array,
       required: true,
     },
-  },
-
-  computed: {
-    ...mapGetters(['currentCluster']),
-    hideDescriptions: mapPref(HIDE_DESC),
-
-    typeDescriptionKey() {
-      // Show a different message to cover support for RKE templates in the local cluster
-      // (no current cluster means catalog requests default to local)
-      const key = !this.currentCluster || this.currentCluster.isLocal ? 'typeDescription."catalog.cattle.io.clusterrepo.local"' : 'typeDescription."catalog.cattle.io.clusterrepo"';
-
-      if ( this.hideDescriptions.includes(this.resource) || this.hideDescriptions.includes('ALL') ) {
-        return false;
-      }
-
-      if ( this.$store.getters['i18n/exists'](key) ) {
-        return key;
-      }
-
-      return false;
-    }
-  },
-
-  methods: {
-    hideTypeDescription() {
-      const neu = this.hideDescriptions.slice();
-
-      addObject(neu, this.resource);
-
-      this.hideDescriptions = neu;
+    loading: {
+      type:     Boolean,
+      required: false,
     },
   }
 };
@@ -66,25 +26,10 @@ export default {
 
 <template>
   <div>
-    <Masthead
-      :schema="schema"
-      :resource="resource"
-    >
-      <template #typeDescription>
-        <Banner
-          v-if="typeDescriptionKey"
-          class="type-banner mb-20 mt-0"
-          color="info"
-          :closable="true"
-          :label-key="typeDescriptionKey"
-          @close="hideTypeDescription"
-        />
-      </template>
-    </Masthead>
-
     <ResourceTable
       :schema="schema"
       :rows="rows"
+      :loading="loading"
     />
   </div>
 </template>

package/list/cis.cattle.io.clusterscan.vue

@@ -1,13 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { get } from '@shell/utils/object';
 import { AGE } from '@shell/config/table-headers';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
-  components: { Loading, ResourceTable },
-
-  props: {
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -20,11 +20,7 @@ export default {
   },
 
   async fetch() {
-    this.rows = await this.$store.dispatch('cluster/findAll', { type: this.resource });
-  },
-
-  data() {
-    return { rows: null };
+    await this.$fetchType(this.resource);
   },
 
   computed: {
@@ -53,12 +49,16 @@ export default {
       } else {
         return headersFromSchema;
       }
-    }
+    },
   },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <ResourceTable v-else :schema="schema" :rows="rows" :headers="headers" />
+  <ResourceTable
+    :schema="schema"
+    :rows="rows"
+    :headers="headers"
+    :loading="loading"
+  />
 </template>

package/list/fleet.cattle.io.bundle.vue

@@ -1,8 +1,8 @@
 <script>
 import { FLEET } from '@shell/config/types';
 import { Banner } from '@components/Banner';
-import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 import {
   AGE,
   STATE,
@@ -12,11 +12,13 @@ import { isHarvesterCluster } from '@shell/utils/cluster';
 
 export default {
   name:       'ListBundle',
-  components: {
-    Banner, Loading, ResourceTable
-  },
-
-  props: {
+  components: { Banner, ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -24,15 +26,12 @@ export default {
   },
 
   async fetch() {
-    this.allBundles = await this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE });
+    await this.$fetchType(FLEET.BUNDLE);
     this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
   },
 
   data() {
-    return {
-      allFleet:   [],
-      allBundles: [],
-    };
+    return { allFleet: [] };
   },
 
   computed: {
@@ -51,7 +50,7 @@ export default {
     bundles() {
       const harvester = this.harvesterClusters;
 
-      return this.allBundles.filter((bundle) => {
+      return this.rows.filter((bundle) => {
         const targets = bundle.spec?.targets || [];
 
         // Filter out any bundle that has one target whose cluster is a harvester cluster
@@ -64,7 +63,7 @@ export default {
     },
 
     hidden() {
-      return this.allBundles.length - this.bundles.length;
+      return this.rows.length - this.bundles.length;
     },
 
     headers() {
@@ -84,25 +83,31 @@ export default {
       return out;
     },
   },
+
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    return {
+      loadResources:     [FLEET.BUNDLE],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
 };
 </script>
 
 <template>
   <div>
-    <Loading v-if="$fetchState.pending" />
-    <div v-else>
-      <Banner v-if="hidden" color="info" :label="t('fleet.bundles.harvester', {count: hidden} )" />
-      <ResourceTable
-        :schema="schema"
-        :headers="headers"
-        :rows="bundles"
-      >
-        <template #cell:deploymentsReady="{row}">
-          <span v-if="row.status.summary.desiredReady != row.status.summary.ready" class="text-warning">
-            {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
-          <span v-else>{{ row.status.summary.desiredReady }}</span>
-        </template>
-      </ResourceTable>
-    </div>
+    <Banner v-if="hidden" color="info" :label="t('fleet.bundles.harvester', {count: hidden} )" />
+    <ResourceTable
+      :schema="schema"
+      :headers="headers"
+      :rows="bundles"
+      :loading="loading"
+    >
+      <template #cell:deploymentsReady="{row}">
+        <span v-if="row.status.summary.desiredReady != row.status.summary.ready" class="text-warning">
+          {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
+        <span v-else>{{ row.status.summary.desiredReady }}</span>
+      </template>
+    </ResourceTable>
   </div>
 </template>

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

@@ -1,17 +1,19 @@
 <script>
 import FleetClusters from '@shell/components/fleet/FleetClusters';
 import { FLEET, MANAGEMENT } from '@shell/config/types';
-import Loading from '@shell/components/Loading';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import { Banner } from '@components/Banner';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListCluster',
-  components: {
-    Banner, FleetClusters, Loading
-  },
-
-  props: {
+  components: { Banner, FleetClusters },
+  mixins:     [ResourceFetch],
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -21,19 +23,16 @@ export default {
   async fetch() {
     await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
     this.allMgmt = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
-    this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
+    await this.$fetchType(FLEET.CLUSTER);
   },
 
   data() {
-    return {
-      allMgmt:  null,
-      allFleet: null,
-    };
+    return { allMgmt: [] };
   },
 
   computed: {
     allClusters() {
-      const out = this.allFleet.slice();
+      const out = this.rows.slice();
 
       const known = {};
 
@@ -50,7 +49,7 @@ export default {
       return out;
     },
 
-    rows() {
+    filteredRows() {
       return this.fleetClusters.filter(c => !isHarvesterCluster(c));
     },
 
@@ -59,21 +58,26 @@ export default {
     },
 
     hiddenHarvesterCount() {
-      return this.fleetClusters.length - this.rows.length;
+      return this.fleetClusters.length - this.filteredRows.length;
     },
   },
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    return {
+      loadResources:     [FLEET.CLUSTER],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
 };
 </script>
 
 <template>
   <div>
-    <Loading v-if="$fetchState.pending" />
-    <div v-else>
-      <Banner v-if="hiddenHarvesterCount" color="info" :label="t('fleet.clusters.harvester', {count: hiddenHarvesterCount} )" />
-      <FleetClusters
-        :rows="rows"
-        :schema="schema"
-      />
-    </div>
+    <Banner v-if="hiddenHarvesterCount" color="info" :label="t('fleet.clusters.harvester', {count: hiddenHarvesterCount} )" />
+    <FleetClusters
+      :rows="filteredRows"
+      :schema="schema"
+      :loading="loading"
+    />
   </div>
 </template>

package/list/fleet.cattle.io.clustergroup.vue

@@ -23,6 +23,11 @@ export default {
       type:     Array,
       required: true,
     },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: {
@@ -57,6 +62,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :loading="loading"
     key-field="_key"
     v-on="$listeners"
   >

package/list/fleet.cattle.io.clusterregistrationtoken.vue

@@ -1,17 +1,19 @@
 <script>
 import { FLEET } from '@shell/config/types';
 import { Banner } from '@components/Banner';
-import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import { isHarvesterCluster } from '@shell/utils/cluster';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListClusterGroup',
-  components: {
-    Banner, Loading, ResourceTable
-  },
-
-  props: {
+  components: { Banner, ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -19,15 +21,12 @@ export default {
   },
 
   async fetch() {
-    this.allTokens = await this.$store.dispatch('management/findAll', { type: FLEET.TOKEN });
+    await this.$fetchType(FLEET.TOKEN);
     this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
   },
 
   data() {
-    return {
-      allFleet:  null,
-      allTokens: null,
-    };
+    return { allFleet: [] };
   },
 
   computed: {
@@ -45,7 +44,7 @@ export default {
     tokens() {
       const harvester = this.harvesterClusters;
 
-      return this.allTokens.filter((token) => {
+      return this.rows.filter((token) => {
         const refs = token.metadata?.ownerReferences || [];
 
         for (const owner of refs) {
@@ -59,23 +58,28 @@ export default {
     },
 
     hidden() {
-      return this.allTokens.length - this.tokens.length;
+      return this.rows.length - this.tokens.length;
     }
-  }
+  },
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    return {
+      loadResources:     [FLEET.TOKEN],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
 };
 </script>
 
 <template>
   <div>
-    <Loading v-if="$fetchState.pending" />
-    <div v-else>
-      <Banner v-if="hidden" color="info" :label="t('fleet.tokens.harvester', {count: hidden} )" />
-      <ResourceTable
-        v-bind="$attrs"
-        :schema="schema"
-        :rows="tokens"
-      >
-      </ResourceTable>
-    </div>
+    <Banner v-if="hidden" color="info" :label="t('fleet.tokens.harvester', {count: hidden} )" />
+    <ResourceTable
+      v-bind="$attrs"
+      :schema="schema"
+      :rows="tokens"
+      :loading="loading"
+    >
+    </ResourceTable>
   </div>
 </template>

package/list/fleet.cattle.io.gitrepo.vue

@@ -1,18 +1,17 @@
 <script>
 import FleetRepos from '@shell/components/fleet/FleetRepos';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import Loading from '@shell/components/Loading';
 import { FLEET } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListGitRepo',
   components: {
-    Loading,
     FleetRepos,
     Masthead,
   },
-
-  props: {
+  mixins:     [ResourceFetch],
+  props:  {
     schema: {
       type:     Object,
       required: true,
@@ -22,6 +21,21 @@ export default {
       type:     String,
       required: true,
     },
+
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   async fetch() {
@@ -30,28 +44,25 @@ export default {
     await store.dispatch('management/findAll', { type: FLEET.CLUSTER });
     await store.dispatch('management/findAll', { type: FLEET.CLUSTER_GROUP });
 
-    const inStore = store.getters['currentStore'](this.resource);
-
-    this.rows = await store.dispatch(`${ inStore }/findAll`, { type: this.resource });
-  },
-
-  data() {
-    return { rows: null };
-  },
+    await this.$fetchType(this.resource);
+  }
 };
 </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"
       :create-button-label="t('fleet.gitRepo.repo.addRepo')"
     />
     <FleetRepos
       :rows="rows"
       :schema="schema"
+      :loading="loading"
     />
   </div>
 </template>

package/list/helm.cattle.io.projecthelmchart.vue

@@ -1,19 +1,40 @@
 <script>
-import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { Banner } from '@components/Banner';
 import { HELM } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
-    Loading, ResourceTable, Masthead, Banner
+    ResourceTable, Masthead, Banner
+  },
+  mixins: [ResourceFetch],
+  props:  {
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
   },
   async fetch() {
     this.projectHelmChartSchema = this.$store.getters['cluster/schemaFor'](HELM.PROJECTHELMCHART);
+    await this.$fetchType(HELM.PROJECTHELMCHART);
 
-    this.projectHelmCharts = await this.$store.dispatch('cluster/findAll', { type: HELM.PROJECTHELMCHART } );
-    this.pending = false;
     this.$store.dispatch('type-map/configureType', { match: HELM.PROJECTHELMCHART, isCreatable: true });
     this.headers = this.$store.getters['type-map/headersFor'](this.projectHelmChartSchema).map((header) => {
       if (header.name === 'name') {
@@ -30,11 +51,8 @@ export default {
   },
   data() {
     return {
-      resource:                  HELM.PROJECTHELMCHART,
-      projectHelmChartSchema:      null,
-      projectHelmCharts:           [],
-      pending:                   true,
-      headers:                null
+      projectHelmChartSchema: null,
+      headers:                null,
     };
   },
   computed: {
@@ -51,35 +69,36 @@ export default {
     <Masthead
       :schema="projectHelmChartSchema"
       :resource="resource"
+      :show-incremental-loading-indicator="incrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
       is-creatable
     />
     <Banner color="info" :label="t('monitoring.projectMonitoring.list.banner')" />
-    <Loading v-if="pending" />
-    <div v-else>
-      <!-- ToDo: figure out how to get this centered in the empty space -->
-      <div v-if="projectHelmCharts.length === 0" class="empty-list">
-        <div class="message">
-          <i class="icon icon-monitoring icon-10x icon-grey"></i>
-          <div class="text-large">
-            {{ t('monitoring.projectMonitoring.list.empty.message') }}
-          </div>
-          <div v-if="canCreateProjectHelmChart" class="text-large">
-            {{ t('monitoring.projectMonitoring.list.empty.canCreate') }}
-          </div>
-          <div v-else class="text-large">
-            {{ t('monitoring.projectMonitoring.list.empty.cannotCreate') }}
-          </div>
+    <!-- ToDo: figure out how to get this centered in the empty space -->
+    <div v-if="rows.length === 0 && !loading" class="empty-list">
+      <div class="message">
+        <i class="icon icon-monitoring icon-10x icon-grey"></i>
+        <div class="text-large">
+          {{ t('monitoring.projectMonitoring.list.empty.message') }}
+        </div>
+        <div v-if="canCreateProjectHelmChart" class="text-large">
+          {{ t('monitoring.projectMonitoring.list.empty.canCreate') }}
+        </div>
+        <div v-else class="text-large">
+          {{ t('monitoring.projectMonitoring.list.empty.cannotCreate') }}
         </div>
       </div>
-      <div v-else>
-        <ResourceTable
-          :rows="projectHelmCharts"
-          :headers="headers"
-          :schema="projectHelmChartSchema"
-          key-field="_key"
-          :groupable="false"
-        />
-      </div>
+    </div>
+    <div v-else>
+      <ResourceTable
+        :rows="rows"
+        :headers="headers"
+        :schema="projectHelmChartSchema"
+        :loading="loading"
+        key-field="_key"
+        :groupable="false"
+      />
     </div>
   </div>
 </template>