@rancher/shell 3.0.1-rc.4 → 3.0.1

package/pages/home.vue

@@ -1,12 +1,13 @@
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapPref, AFTER_LOGIN_ROUTE, READ_WHATS_NEW, HIDE_HOME_PAGE_CARDS } from '@shell/store/prefs';
 import { Banner } from '@components/Banner';
-import BannerGraphic from '@shell/components/BannerGraphic';
-import IndentedPanel from '@shell/components/IndentedPanel';
-import SortableTable from '@shell/components/SortableTable';
+import BannerGraphic from '@shell/components/BannerGraphic.vue';
+import IndentedPanel from '@shell/components/IndentedPanel.vue';
+import PaginatedResourceTable, { FetchPageSecondaryResourcesOpts, FetchSecondaryResourcesOpts } from '@shell/components/PaginatedResourceTable.vue';
 import { BadgeState } from '@components/BadgeState';
-import CommunityLinks from '@shell/components/CommunityLinks';
-import SingleClusterInfo from '@shell/components/SingleClusterInfo';
+import CommunityLinks from '@shell/components/CommunityLinks.vue';
+import SingleClusterInfo from '@shell/components/SingleClusterInfo.vue';
 import { mapGetters, mapState } from 'vuex';
 import { MANAGEMENT, CAPI } from '@shell/config/types';
 import { NAME as MANAGER } from '@shell/config/product/manager';
@@ -18,19 +19,24 @@ import PageHeaderActions from '@shell/mixins/page-actions';
 import { getVendor } from '@shell/config/private-label';
 import { mapFeature, MULTI_CLUSTER } from '@shell/store/features';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
-import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
-import TabTitle from '@shell/components/TabTitle';
+import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilterClusters } from '@shell/utils/cluster';
+import TabTitle from '@shell/components/TabTitle.vue';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
 
 import { RESET_CARDS_ACTION, SET_LOGIN_ACTION } from '@shell/config/page-actions';
+import { STEVE_NAME_COL, STEVE_STATE_COL } from '@shell/config/pagination-table-headers';
+import { PaginationParamFilter, FilterArgs, PaginationFilterField, PaginationArgs } from '@shell/types/store/pagination.types';
+import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
+import { sameContents } from 'utils/array';
 
-export default {
+export default defineComponent({
   name:       'Home',
   layout:     'home',
   components: {
     Banner,
     BannerGraphic,
     IndentedPanel,
-    SortableTable,
+    PaginatedResourceTable,
     BadgeState,
     CommunityLinks,
     SingleClusterInfo,
@@ -39,102 +45,51 @@ export default {
 
   mixins: [PageHeaderActions],
 
-  fetch() {
-    if ( this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER) ) {
-      this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
-    }
-
-    if ( this.$store.getters['management/schemaFor'](MANAGEMENT.CLUSTER) ) {
-      this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
-    }
-
-    if ( this.$store.getters['management/canList'](CAPI.MACHINE) ) {
-      this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
-    }
-
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE) ) {
-      this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
-    }
-
-    // We need to fetch node pools and node templates in order to correctly show the provider for RKE1 clusters
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_POOL) ) {
-      this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL });
-    }
-
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_TEMPLATE) ) {
-      this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
-    }
-  },
-
   data() {
-    const fullVersion = getVersionInfo(this.$store).fullVersion;
-    // Page actions don't change on the Home Page
-    const pageActions = [
-      {
-        labelKey: 'nav.header.setLoginPage',
-        action:   SET_LOGIN_ACTION
-      },
-      { separator: true },
-      {
-        labelKey: 'nav.header.restoreCards',
-        action:   RESET_CARDS_ACTION
-      },
-    ];
-
     return {
       HIDE_HOME_PAGE_CARDS,
-      fullVersion,
-      pageActions,
+      fullVersion: getVersionInfo(this.$store).fullVersion,
+      // Page actions don't change on the Home Page
+      pageActions: [
+        {
+          labelKey: 'nav.header.setLoginPage',
+          action:   SET_LOGIN_ACTION
+        },
+        { separator: true },
+        {
+          labelKey: 'nav.header.restoreCards',
+          action:   RESET_CARDS_ACTION
+        },
+      ],
       vendor: getVendor(),
-    };
-  },
-
-  computed: {
-    ...mapState(['managementReady']),
-    ...mapGetters(['currentCluster', 'defaultClusterId', 'releaseNotesUrl']),
-    mcm: mapFeature(MULTI_CLUSTER),
-
-    provClusters() {
-      return this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
-    },
 
-    // User can go to Cluster Management if they can see the cluster schema
-    canManageClusters() {
-      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+      provClusterSchema: this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
 
-      return !!schema;
-    },
+      canViewMgmtClusters:  !!this.$store.getters['management/schemaFor'](MANAGEMENT.CLUSTER),
+      canViewMachine:       !!this.$store.getters['management/canList'](CAPI.MACHINE),
+      canViewMgmtNodes:     !!this.$store.getters['management/canList'](MANAGEMENT.NODE),
+      canViewMgmtPools:     !!this.$store.getters['management/canList'](MANAGEMENT.NODE_POOL),
+      canViewMgmtTemplates: !!this.$store.getters['management/canList'](MANAGEMENT.NODE_TEMPLATE),
 
-    canCreateCluster() {
-      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
-
-      return !!schema?.collectionMethods.find((x) => x.toLowerCase() === 'post');
-    },
-
-    manageLocation() {
-      return {
+      manageLocation: {
         name:   'c-cluster-product-resource',
         params: {
           product:  MANAGER,
           cluster:  BLANK_CLUSTER,
           resource: CAPI.RANCHER_CLUSTER
         },
-      };
-    },
+      },
 
-    createLocation() {
-      return {
+      createLocation: {
         name:   'c-cluster-product-resource-create',
         params: {
           product:  MANAGER,
           cluster:  BLANK_CLUSTER,
           resource: CAPI.RANCHER_CLUSTER
         },
-      };
-    },
+      },
 
-    importLocation() {
-      return {
+      importLocation: {
         name:   'c-cluster-product-resource-create',
         params: {
           product:  MANAGER,
@@ -142,22 +97,9 @@ export default {
           resource: CAPI.RANCHER_CLUSTER
         },
         query: { [MODE]: _IMPORT }
-      };
-    },
-
-    afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
-    homePageCards:   mapPref(HIDE_HOME_PAGE_CARDS),
-
-    readWhatsNewAlready() {
-      return readReleaseNotes(this.$store);
-    },
-
-    showSetLoginBanner() {
-      return this.homePageCards?.setLoginPage;
-    },
+      },
 
-    clusterHeaders() {
-      return [
+      headers: [
         STATE,
         {
           name:          'name',
@@ -165,7 +107,7 @@ export default {
           value:         'nameDisplay',
           sort:          ['nameSort'],
           canBeVariable: true,
-          getValue:      (row) => row.mgmt?.nameDisplay
+          getValue:      (row: ProvCluster) => row.mgmt?.nameDisplay
         },
         {
           label:     this.t('landing.clusters.provider'),
@@ -185,14 +127,12 @@ export default {
           value: '',
           name:  'cpu',
           sort:  ['status.allocatable.cpu', 'status.available.cpu']
-
         },
         {
           label: this.t('tableHeaders.memory'),
           value: '',
           name:  'memory',
           sort:  ['status.allocatable.memory', 'status.available.memory']
-
         },
         {
           label:        this.t('tableHeaders.pods'),
@@ -206,12 +146,80 @@ export default {
         //   name:  'explorer',
         //   label:  this.t('landing.clusters.explorer')
         // }
-      ];
+      ],
+
+      paginationHeaders: [
+        STEVE_STATE_COL,
+        // https://github.com/rancher/dashboard/issues/12890 BUG - rke1 cluster's prov cluster metadata.name is the mgmt cluster id rather than true name
+        {
+          ...STEVE_NAME_COL,
+          canBeVariable: true,
+          getValue:      (row: ProvCluster) => row.metadata?.name
+        },
+        {
+          label:     this.t('landing.clusters.provider'),
+          subLabel:  this.t('landing.clusters.distro'),
+          value:     'mgmt.status.provider',
+          name:      'Provider',
+          sort:      false,
+          search:    false,
+          formatter: 'ClusterProvider'
+        },
+        {
+          label:    this.t('landing.clusters.kubernetesVersion'),
+          subLabel: this.t('landing.clusters.architecture'),
+          name:     'kubernetesVersion',
+          sort:     false,
+          search:   false,
+        },
+        {
+          label:  this.t('tableHeaders.cpu'),
+          value:  '',
+          name:   'cpu',
+          sort:   false,
+          search: false,
+        },
+        {
+          label:  this.t('tableHeaders.memory'),
+          value:  '',
+          name:   'memory',
+          sort:   false,
+          search: false,
+        },
+        {
+          label:        this.t('tableHeaders.pods'),
+          name:         'pods',
+          value:        '',
+          sort:         false,
+          search:       false,
+          formatter:    'PodsUsage',
+          delayLoading: true
+        },
+      ],
+
+      clusterCount: 0,
+    };
+  },
+
+  computed: {
+    ...mapState(['managementReady']),
+    ...mapGetters(['currentCluster', 'defaultClusterId', 'releaseNotesUrl']),
+    mcm: mapFeature(MULTI_CLUSTER),
+
+    canCreateCluster() {
+      return !!this.provClusterSchema?.collectionMethods.find((x: string) => x.toLowerCase() === 'post');
     },
 
-    kubeClusters() {
-      return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.provClusters || [], this.$store), this.$store);
-    }
+    afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
+    homePageCards:   mapPref(HIDE_HOME_PAGE_CARDS),
+
+    readWhatsNewAlready() {
+      return readReleaseNotes(this.$store);
+    },
+
+    showSetLoginBanner() {
+      return this.homePageCards?.setLoginPage;
+    },
   },
 
   async created() {
@@ -229,11 +237,131 @@ export default {
   },
 
   methods: {
+    /**
+     * Of type FetchSecondaryResources
+     */
+    fetchSecondaryResources(opts: FetchSecondaryResourcesOpts): Promise<any> {
+      if (opts.canPaginate) {
+        return Promise.resolve({});
+      }
+
+      if ( this.canViewMgmtClusters ) {
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+      }
+
+      if ( this.canViewMachine ) {
+        this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
+      }
+
+      if ( this.canViewMgmtNodes ) {
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+      }
+
+      // We need to fetch node pools and node templates in order to correctly show the provider for RKE1 clusters
+      if ( this.canViewMgmtPools ) {
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL });
+      }
+
+      if ( this.canViewMgmtTemplates ) {
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
+      }
+
+      return Promise.resolve({});
+    },
+
+    async fetchPageSecondaryResources({
+      canPaginate, force, page, pagResult
+    }: FetchPageSecondaryResourcesOpts) {
+      if (!canPaginate || !page?.length) {
+        this.clusterCount = 0;
+
+        return;
+      }
+
+      this.clusterCount = pagResult.count;
+
+      if ( this.canViewMgmtClusters ) {
+        const opt: ActionFindPageArgs = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
+              field: 'id',
+              value: r.mgmtClusterId
+            }))),
+          })
+        };
+
+        this.$store.dispatch(`management/findPage`, { type: MANAGEMENT.CLUSTER, opt });
+      }
+
+      if ( this.canViewMachine ) {
+        const opt: ActionFindPageArgs = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
+              field: 'spec.clusterName',
+              value: r.metadata.name
+            }))),
+          })
+        };
+
+        await this.$store.dispatch(`management/findPage`, { type: CAPI.MACHINE, opt });
+      }
+
+      if ( this.canViewMgmtNodes ) {
+        const opt: ActionFindPageArgs = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
+              field: 'id',
+              value: r.mgmtClusterId,
+              exact: false,
+            }))),
+          })
+        };
+
+        this.$store.dispatch(`management/findPage`, { type: MANAGEMENT.NODE, opt });
+      }
+
+      // We need to fetch node pools and node templates in order to correctly show the provider for RKE1 clusters
+      if ( this.canViewMgmtPools && this.canViewMgmtTemplates ) {
+        const nodePoolFilters = PaginationParamFilter.createMultipleFields(page
+          .filter((p: any) => p.status?.clusterName)
+          .map((r: any) => new PaginationFilterField({
+            field: 'spec.clusterName',
+            value: r.status?.clusterName
+          })));
+        const nodePools = await this.$store.dispatch(`management/findPage`, {
+          type: MANAGEMENT.NODE_POOL,
+          opt:  {
+            force,
+            pagination: new FilterArgs({ filters: nodePoolFilters })
+          }
+        });
+
+        const templateOpt = PaginationParamFilter.createMultipleFields(nodePools
+          .filter((np: any) => !!np.nodeTemplateId)
+          .map((np: any) => new PaginationFilterField({
+            field: 'id',
+            value: np.nodeTemplateId,
+            exact: true,
+          })));
+
+        this.$store.dispatch(`management/findPage`, {
+          type: MANAGEMENT.NODE_TEMPLATE,
+          opt:  {
+            force,
+            pagination: new FilterArgs({ filters: templateOpt })
+          }
+        });
+      }
+    },
+
     /**
      * Define actions for each navigation link
      * @param {*} action
      */
-    handlePageAction(action) {
+    handlePageAction(action: any) {
       switch (action.action) {
       case RESET_CARDS_ACTION:
         this.resetCards();
@@ -247,21 +375,22 @@ export default {
       }
     },
 
-    cpuUsed(cluster) {
+    cpuUsed(cluster: any) {
       return parseSi(cluster.status.requested?.cpu);
     },
 
-    cpuAllocatable(cluster) {
+    cpuAllocatable(cluster: any) {
       return parseSi(cluster.status.allocatable?.cpu);
     },
-    memoryAllocatable(cluster) {
+
+    memoryAllocatable(cluster: any) {
       const parsedAllocatable = (parseSi(cluster.status.allocatable?.memory) || 0).toString();
       const format = createMemoryFormat(parsedAllocatable);
 
       return formatSi(parsedAllocatable, format);
     },
 
-    memoryReserved(cluster) {
+    memoryReserved(cluster: any) {
       const memValues = createMemoryValues(cluster?.status?.allocatable?.memory, cluster?.status?.requested?.memory);
 
       return `${ memValues.useful }/${ memValues.total } ${ memValues.units }`;
@@ -294,11 +423,55 @@ export default {
       if (retry === 0 && res?.type === 'error' && res?.status === 500) {
         await this.closeSetLoginBanner(retry + 1);
       }
+    },
+
+    /**
+     * Filter out hidden clusters from list of all clusters
+     */
+    filterRowsLocal(rows: any[]) {
+      return filterHiddenLocalCluster(filterOnlyKubernetesClusters(rows || [], this.$store), this.$store);
+    },
+
+    /**
+     * Filter out hidden clusters via api
+     */
+    filterRowsApi(pagination: PaginationArgs): PaginationArgs {
+      if (!pagination.filters) {
+        pagination.filters = [];
+      }
+
+      const existingFilters = pagination.filters;
+      const requiredFilters = paginationFilterClusters(this.$store, false);
+
+      for (let i = 0; i < requiredFilters.length; i++) {
+        let found = false;
+        const required = requiredFilters[i];
+
+        for (let j = 0; j < existingFilters.length; j++) {
+          const existing = existingFilters[j];
+
+          if (
+            required.fields.length === existing.fields.length &&
+            sameContents(required.fields.map((e) => e.field), existing.fields.map((e) => e.field))
+          ) {
+            Object.assign(existing, required);
+            found = true;
+            break;
+          }
+        }
+
+        if (!found) {
+          pagination.filters.push(required);
+        }
+      }
+
+      return pagination;
     }
   }
-};
+});
 
 </script>
+
 <template>
   <div
     v-if="managementReady"
@@ -369,14 +542,24 @@ export default {
               v-if="mcm"
               class="col span-12"
             >
-              <SortableTable
+              <PaginatedResourceTable
+                v-if="provClusterSchema"
+                :schema="provClusterSchema"
                 :table-actions="false"
                 :row-actions="false"
                 key-field="id"
-                :rows="kubeClusters"
-                :headers="clusterHeaders"
-                :loading="!kubeClusters"
-                :paging="true"
+                :headers="headers"
+                :pagination-headers="paginationHeaders"
+                context="home"
+
+                :local-filter="filterRowsLocal"
+                :api-filter="filterRowsApi"
+
+                :namespaced="false"
+                :groupable="false"
+                manualRefreshButtonSize="sm"
+                :fetchSecondaryResources="fetchSecondaryResources"
+                :fetchPageSecondaryResources="fetchPageSecondaryResources"
               >
                 <template #header-left>
                   <div class="row table-heading">
@@ -384,19 +567,19 @@ export default {
                       {{ t('landing.clusters.title') }}
                     </h2>
                     <BadgeState
-                      v-if="kubeClusters"
-                      :label="kubeClusters.length.toString()"
+                      v-if="clusterCount"
+                      :label="clusterCount.toString()"
                       color="role-tertiary ml-20 mr-20"
                     />
                   </div>
                 </template>
                 <template
-                  v-if="canCreateCluster || canManageClusters"
+                  v-if="canCreateCluster || !!provClusterSchema"
                   #header-middle
                 >
                   <div class="table-heading">
                     <router-link
-                      v-if="canManageClusters"
+                      v-if="!!provClusterSchema"
                       :to="manageLocation"
                       class="btn btn-sm role-secondary"
                       data-testid="cluster-management-manage-button"
@@ -487,7 +670,7 @@ export default {
                     {{ t('landing.clusters.explore') }}
                   </button>
                 </template> -->
-              </SortableTable>
+              </PaginatedResourceTable>
             </div>
             <div
               v-else
@@ -502,6 +685,7 @@ export default {
     </IndentedPanel>
   </div>
 </template>
+
 <style lang='scss' scoped>
   .home-panels {
     display: flex;
@@ -591,6 +775,7 @@ export default {
     }
   }
 </style>
+
 <style lang="scss">
 .home-page {
   .search {

package/plugins/dashboard-store/__tests__/mutations.test.ts

@@ -375,6 +375,8 @@ describe('dashboard-store: mutations', () => {
     it.each([
       ['Add a new pod', mutationHelpers.loadAll.createNewEntry()],
     ])('%s', (_, run) => { // eslint-disable-line jest/no-identical-title
+      run.expected.types[POD].havePage = false;
+
       loadAdd(...run.params);
       const { map: cacheMap, ...cacheState } = run.params[0].types?.[POD] || {};
       const { map: expectedMap, ...expected } = run.expected.types?.[POD];

package/plugins/dashboard-store/actions.js

@@ -146,7 +146,7 @@ export default {
   /**
    *
    * @param {*} ctx
-   * @param { {type: string, opt: ActionFindPageArgs} } opt
+   * @param { {type: string, opt: ActionFindAllArgs} } opt
    */
   async findAll(ctx, { type, opt }) {
     const {
@@ -364,7 +364,7 @@ export default {
   /**
    *
    * @param {*} ctx
-   * @param { {type: string, opt: FindPageOpt} } opt
+   * @param { {type: string, opt: ActionFindPageArgs} } opt
    */
   async findPage(ctx, { type, opt }) {
     const { getters, commit, dispatch } = ctx;
@@ -384,7 +384,7 @@ export default {
     }
 
     // No need to request the resources if we have them already
-    if (!opt.force && getters['havePaginatedPage'](type, opt)) {
+    if (!opt.transient && !opt.force && getters['havePaginatedPage'](type, opt)) {
       return findAllGetter(getters, type, opt);
     }
 
@@ -408,24 +408,31 @@ export default {
       return Promise.reject(e);
     }
 
-    commit('loadPage', {
-      ctx,
+    await dispatch('unwatch', {
       type,
-      data:       out.data,
-      pagination: opt.pagination ? {
-        request: {
-          namespace:  opt.namespaced,
-          pagination: opt.pagination
-        },
-        result: {
-          count:     out.count,
-          pages:     out.pages || Math.ceil(out.count / (opt.pagination.pageSize || Number.MAX_SAFE_INTEGER)),
-          timestamp: new Date().getTime()
-        }
-      } : undefined,
+      all: true,
     });
 
-    const all = findAllGetter(getters, type, opt);
+    const pagination = opt.pagination ? {
+      request: {
+        namespace:  opt.namespaced,
+        pagination: opt.pagination
+      },
+      result: {
+        count:     out.count,
+        pages:     out.pages || Math.ceil(out.count / (opt.pagination.pageSize || Number.MAX_SAFE_INTEGER)),
+        timestamp: new Date().getTime()
+      }
+    } : undefined;
+
+    if (!opt.transient) {
+      commit('loadPage', {
+        ctx,
+        type,
+        data: out.data,
+        pagination,
+      });
+    }
 
     if (opt.hasManualRefresh) {
       dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
@@ -433,7 +440,10 @@ export default {
 
     garbageCollect.gcUpdateLastAccessed(ctx, type);
 
-    return all;
+    return opt.transient ? {
+      data: out.data,
+      pagination
+    } : findAllGetter(getters, type, opt);
   },
 
   async findMatching(ctx, {