@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.3

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

@@ -4,6 +4,8 @@ import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { HARVESTER_CONTAINER } from '@shell/store/features';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 
 export default {
   name:       'ListClusterGroup',
@@ -25,6 +27,16 @@ export default {
   },
 
   async fetch() {
+    try {
+      await checkSchemasForFindAllHash({
+        cluster: {
+          inStoreType: 'management',
+          type:        FLEET.CLUSTER
+        },
+      }, this.$store);
+    } catch (e) {
+    }
+
     await this.$fetchType(this.resource);
     if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
       this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
@@ -35,6 +47,10 @@ export default {
     return { allFleet: [] };
   },
 
+  mounted() {
+    this.areHarvesterHostsVisible = this.$store.getters['features/get'](HARVESTER_CONTAINER);
+  },
+
   computed: {
     harvesterClusters() {
       const harvester = {};
@@ -50,6 +66,10 @@ export default {
     tokens() {
       const harvester = this.harvesterClusters;
 
+      if (this.areHarvesterHostsVisible) {
+        return this.rows;
+      }
+
       return this.rows.filter((token) => {
         const refs = token.metadata?.ownerReferences || [];
 

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

@@ -1,121 +1,210 @@
-<script>
+<script  lang="ts">
 import { Banner } from '@components/Banner';
-import ResourceTable from '@shell/components/ResourceTable';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import { allHash } from '@shell/utils/promise';
-import { CAPI, MANAGEMENT, SNAPSHOT, NORMAN } from '@shell/config/types';
+import Masthead from '@shell/components/ResourceList/Masthead.vue';
+import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
 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';
-import { BadgeState } from '@components/BadgeState';
 import { isAutoscalerFeatureFlagEnabled } from '@shell/utils/autoscaler-utils';
 import { AUTOSCALER_ENABLED } from '@shell/config/table-headers';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
+import { PagTableFetchPageSecondaryResourcesOpts, PagTableFetchSecondaryResourcesOpts, PagTableFetchSecondaryResourcesReturns } from '@shell/types/components/paginatedResourceTable';
+import { FilterArgs, PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import MachineSummaryGraph from '@shell/components/formatter/MachineSummaryGraph.vue';
+import MgmtCluster from '@shell/models/management.cattle.io.cluster';
+import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
+import ManagementClusterUtils from '@shell/list/utils/management.cattle.io.cluster.utils';
+import { STEVE_AUTOSCALER_ENABLED } from '@shell/config/pagination-table-headers';
+import { filterHiddenLocalCluster, filterOnlyKubernetesClusters } from '@shell/utils/cluster';
 
 export default {
   components: {
-    Banner, ResourceTable, Masthead, BadgeState
+    Banner, PaginatedResourceTable, Masthead, MachineSummaryGraph
   },
-  mixins: [ResourceFetch],
-  props:  {
-    loadIndeterminate: {
-      type:    Boolean,
-      default: false
-    },
 
-    incrementalLoadingIndicator: {
-      type:    Boolean,
-      default: false
-    },
+  data() {
+    const mgmtClusterSchema = this.$store.getters['management/schemaFor'](MANAGEMENT.CLUSTER);
+    const headers = this.$store.getters['type-map/headersFor'](mgmtClusterSchema, false);
+    const paginationHeaders = this.$store.getters['type-map/headersFor'](mgmtClusterSchema, true);
 
-    useQueryParamsForSimpleFiltering: {
-      type:    Boolean,
-      default: false
+    if (isAutoscalerFeatureFlagEnabled(this.$store)) {
+      headers.splice(-3, 0, AUTOSCALER_ENABLED);
+      paginationHeaders.splice(-3, 0, STEVE_AUTOSCALER_ENABLED);
     }
-  },
 
-  async fetch() {
-    this.$initializeFetchData(CAPI.RANCHER_CLUSTER);
-    const hash = {
-      rancherClusters: this.$fetchType(CAPI.RANCHER_CLUSTER),
-      normanClusters:  this.$fetchType(NORMAN.CLUSTER, [], 'rancher'),
-      mgmtClusters:    this.$fetchType(MANAGEMENT.CLUSTER),
+    return {
+      headers,
+      paginationHeaders,
+
+      clusterCount: undefined as number | undefined,
+
+      paginationContext: 'cluster-management',
+
+      mgmtClusterSchema,
+      provClusterSchema: this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
     };
+  },
 
-    if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
-      hash.etcdSnapshots = this.$fetchType(SNAPSHOT);
-    }
+  // Forget the types when we leave the page
+  beforeUnmount() {
+    ManagementClusterUtils.forgetSecondaryResources({ context: this.paginationContext }, { $store: this.$store });
+  },
 
-    if ( this.$store.getters['management/canList'](CAPI.MACHINE) ) {
-      hash.capiMachines = this.$fetchType(CAPI.MACHINE);
-    }
+  methods: {
+    /**
+     * SSP disabled, filter all rows via...
+     */
+    filterRowsLocal(rows: MgmtCluster[]) {
+      const filteredRows = ManagementClusterUtils.filterRowsLocal(rows, { $store: this.$store });
 
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE) ) {
-      hash.mgmtNodes = this.$fetchType(MANAGEMENT.NODE);
-    }
+      this.clusterCount = filteredRows.length;
 
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_POOL) ) {
-      hash.mgmtPools = this.$fetchType(MANAGEMENT.NODE_POOL);
-    }
+      return filteredRows;
+    },
 
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_TEMPLATE) ) {
-      hash.mgmtTemplates = this.$fetchType(MANAGEMENT.NODE_TEMPLATE);
-    }
+    /**
+     * SSP enabled, filter all rows via...
+     */
+    filterRowsApi(pagination: PaginationArgs): PaginationArgs {
+      return ManagementClusterUtils.filterRowsApi(pagination, { $store: this.$store });
+    },
 
-    if ( this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT) ) {
-      hash.machineDeployments = this.$fetchType(CAPI.MACHINE_DEPLOYMENT);
-    }
+    /**
+     * Fetch secondary resources on load
+     *
+     * Of type #PagTableFetchSecondaryResources
+     */
+    fetchSecondaryResources(opts: PagTableFetchSecondaryResourcesOpts): PagTableFetchSecondaryResourcesReturns {
+      if (opts.canPaginate) {
+        return Promise.resolve();
+      }
 
-    // Fetch RKE template revisions so we can show when an updated template is available
-    // This request does not need to be blocking
-    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE_REVISION) ) {
-      this.$fetchType(MANAGEMENT.RKE_TEMPLATE_REVISION);
-    }
+      const promises = ManagementClusterUtils.fetchSecondaryResources(opts, { $store: this.$store });
 
-    const res = await allHash(hash);
+      // Additional requests required to support columns in this view (e.g. machines)
 
-    this.mgmtClusters = res.mgmtClusters;
-    this.showRke1DeprecationWarning = this.rows.some((r) => r.isRke1);
-  },
+      if ( this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT)) {
+        this.$store.dispatch(`management/findAll`, { type: CAPI.MACHINE_DEPLOYMENT });
+      }
 
-  data() {
-    return {
-      resource:                   CAPI.RANCHER_CLUSTER,
-      schema:                     this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
-      mgmtClusters:               [],
-      showRke1DeprecationWarning: false
-    };
-  },
+      if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_POOL)) {
+        this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.NODE_POOL });
+      }
+
+      return Promise.all(promises);
+    },
+
+    /**
+     * Fetch secondary resources on page change
+     */
+    async fetchPageSecondaryResources({
+      canPaginate, force, page, pagResult
+    }: PagTableFetchPageSecondaryResourcesOpts) {
+      this.clusterCount = !canPaginate || !page?.length ? 0 : pagResult.count;
+
+      if (!canPaginate || !page?.length) {
+        return;
+      }
+
+      const promises = await ManagementClusterUtils.fetchPageSecondaryResources({
+        canPaginate, force, page, pagResult
+      }, { $store: this.$store });
+
+      // Additional requests required to support columns in this view (e.g. machines)
+
+      if ( this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT)) {
+        const opt: ActionFindPageArgs = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
+              field: 'spec.clusterName',
+              value: r.provClusterName
+            }))),
+          })
+        };
+
+        this.$store.dispatch(`management/findPage`, { type: CAPI.MACHINE_DEPLOYMENT, opt });
+      }
+
+      if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_POOL)) {
+        const nodePoolFilters = PaginationParamFilter.createMultipleFields(page
+          .filter((p: any) => p.id)
+          .map((r: any) => new PaginationFilterField({
+            field: 'spec.clusterName',
+            value: r.id
+          })));
+
+        promises.push(this.$store.dispatch(`management/findPage`, {
+          type: MANAGEMENT.NODE_POOL,
+          opt:  {
+            force,
+            pagination: new FilterArgs({ filters: nodePoolFilters })
+          }
+        }));
+      }
+
+      await Promise.all(promises);
+    },
+
+    /**
+     * Explorer world, listing PCIC, SSP disabled, filter all rows via...
+     */
+    filterProvRowsLocal(rows: ProvCluster[]) {
+      if (!rows.length) {
+        // no rows to filter on, so immediately return no rows
+        return [];
+      }
+
+      let filteredRows = [];
 
-  computed: {
-    filteredRows() {
-      // If Harvester feature is enabled, hide Harvester Clusters
       if (this.harvesterEnabled) {
-        return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.rows, this.$store), this.$store);
+        // If Harvester feature is enabled, hide Harvester Clusters
+        filteredRows = filterHiddenLocalCluster(filterOnlyKubernetesClusters(rows, this.$store), this.$store);
+      } else {
+        // Otherwise, show Harvester clusters - these will be shown with a warning
+        filteredRows = filterOnlyKubernetesClusters(rows, this.$store);
       }
 
-      // Otherwise, show Harvester clusters - these will be shown with a warning
-      return filterHiddenLocalCluster(this.rows, this.$store);
+      this.clusterCount = filteredRows.length;
+
+      return filteredRows;
     },
 
-    hiddenHarvesterCount() {
+    /**
+     * Explorer world, listing PCIC, SSP enabled, filter all rows via...
+     */
+    filterProvRowsApi(pagination: PaginationArgs): PaginationArgs {
+      return this.filterRowsApi(pagination);
+    }
+  },
+
+  computed: {
+    isExplorer() {
       const product = this.$store.getters['currentProduct'];
-      const isExplorer = product?.name === EXPLORER;
 
-      // Don't show Harvester banner message on the cluster management page or if Harvester if not enabled
-      if (!isExplorer || !this.harvesterEnabled) {
+      return product?.name === EXPLORER;
+    },
+
+    hiddenHarvesterCount() {
+      // Don't show Harvester banner message on the cluster management page or if Harvester is not enabled
+      if (!this.isExplorer || !this.harvesterEnabled || this.clusterCount === undefined) {
         return 0;
       }
 
-      return this.rows.length - filterOnlyKubernetesClusters(this.rows, this.$store).length;
+      const allClusters = this.$store.getters['management/count']({ name: CAPI.RANCHER_CLUSTER });
+      // clusterCount is total excluding local (if not counted) and harvester (if not counted)
+      // at this point though (viewing prov clusters in explorer) we must be in the local cluster, so can exclude that exclusion
+      const nonHarvesterClusters = this.clusterCount;
+
+      return allClusters - nonHarvesterClusters;
     },
 
     createLocation() {
-      const options = this.$store.getters[`type-map/optionsFor`](this.resource)?.custom || {};
+      const options = this.$store.getters[`type-map/optionsFor`](CAPI.RANCHER_CLUSTER)?.custom || {};
       const params = {
         product:  this.$store.getters['currentProduct'].name,
-        resource: this.resource
+        resource: CAPI.RANCHER_CLUSTER
       };
       const defaultLocation = {
         name: 'c-cluster-product-resource-create',
@@ -126,10 +215,10 @@ export default {
     },
 
     importLocation() {
-      const options = this.$store.getters[`type-map/optionsFor`](this.resource)?.custom || {};
+      const options = this.$store.getters[`type-map/optionsFor`](CAPI.RANCHER_CLUSTER)?.custom || {};
       const params = {
         product:  this.$store.getters['currentProduct'].name,
-        resource: this.resource
+        resource: CAPI.RANCHER_CLUSTER
       };
       const defaultLocation = {
         name:  'c-cluster-product-resource-create',
@@ -141,130 +230,123 @@ export default {
     },
 
     canImport() {
-      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
-
-      return !!schema?.collectionMethods.find((x) => x.toLowerCase() === 'post');
+      return !!this.provClusterSchema?.collectionMethods.find((x: string) => x.toLowerCase() === 'post');
     },
 
     harvesterEnabled: mapFeature(HARVESTER_FEATURE),
 
-    nonStandardNamespaces() {
-      // Show the namespace grouping option if there's clusters with namespaces other than 'fleet-default' or 'fleet-local'
-      // This will be used when there's clusters from extension based provisioners
-      // We should re-visit this for scaling reasons
-      return this.filteredRows.some((c) => c.metadata.namespace !== 'fleet-local' && c.metadata.namespace !== 'fleet-default');
-    },
+    nonStandardWorkspace() {
+      // Show the workspace grouping option if there's clusters with workspaces other than 'fleet-default' or 'fleet-local'
 
-    headers() {
-      const headers = this.$store.getters['type-map/headersFor'](this.schema);
+      // Note - This _just_ looks at namespaces, which are normally 1-1 with namespaces and also cover cases where clusters aren't in namespaces
+      // The only exception is for v2prov clusters that were moved workspace after enabling `provisioningv2-fleet-workspace-back-population`
+      // If we need to fully support this we can either
+      // 1. always show grouping
+      // 2. use a summary request to determine to show it
+      //    a. on visit to list and vai on (lets keep it simple) make a request to /v1/management.cattle.io.clusters?summary=spec.fleetWorkspaceName (plus whatever new parm to avoid return of `data` field)
+      //    b. check for values other than fleet-local and fleet-default in the response
 
-      if (isAutoscalerFeatureFlagEnabled(this.$store)) {
-        headers.splice(-3, 0, AUTOSCALER_ENABLED);
-      }
+      const counts = this.$store.getters['management/all'](COUNT)?.[0]?.counts || {};
+      const namespaces: { [nsName: string]: { count: number } } = counts[CAPI.RANCHER_CLUSTER]?.namespaces || counts.namespaces || {};
 
-      return headers;
-    }
+      for (const ns in namespaces) {
+        if (ns !== 'fleet-local' && ns !== 'fleet-default' && namespaces[ns].count > 0) {
+          return true;
+        }
+      }
 
+      return false;
+    },
   },
 
-  $loadingResources() {
-    // results are filtered so we wouldn't get the correct count on indicator...
-    return { loadIndeterminate: true };
-  }
-
 };
 </script>
 
 <template>
   <div>
-    <Banner
-      v-if="showRke1DeprecationWarning"
-      color="warning"
-      label-key="cluster.banner.rke1DeprecationMessage"
-    />
-
     <Banner
       v-if="hiddenHarvesterCount"
       color="info"
       :label="t('cluster.harvester.clusterWarning', {count: hiddenHarvesterCount} )"
     />
 
-    <Masthead
-      :schema="schema"
-      :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"
-        #extraActions
+    <template v-if="isExplorer">
+      <PaginatedResourceTable
+        :schema="provClusterSchema"
+
+        :local-filter="filterProvRowsLocal"
+        :api-filter="filterProvRowsApi"
+      />
+    </template>
+    <template v-else>
+      <Masthead
+        :schema="provClusterSchema"
+        :resource="provClusterSchema.id"
+        :create-location="createLocation"
+        component-testid="cluster-manager-list"
       >
-        <router-link
-          :to="importLocation"
-          class="btn role-primary mr-10"
-          data-testid="cluster-manager-list-import"
+        <template
+          v-if="canImport"
+          #extraActions
         >
-          {{ t('cluster.importAction') }}
-        </router-link>
-      </template>
-    </Masthead>
-    <ResourceTable
-      :headers="headers"
-      :table-actions="true"
-      :rows="filteredRows"
-      :namespaced="nonStandardNamespaces"
-      :loading="loading"
-      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-      :data-testid="'cluster-list'"
-      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-    >
-      <!-- Why are state column and subrow overwritten here? -->
-      <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->
-      <!-- updates were getting lost. This isn't performant as normal columns, but the list shouldn't grow -->
-      <!-- big enough for the performance to matter -->
-      <template #cell:state="{row}">
-        <BadgeState
-          :color="row.stateBackground"
-          :label="row.stateDisplay"
-        />
-      </template>
-      <template #cell:summary="{row}">
-        <span v-if="!row.stateParts.length">{{ row.nodes.length }}</span>
-      </template>
-      <template #col:kubernetesVersion="{row}">
-        <td class="col-name">
-          <span>
-            {{ row.kubernetesVersion }}
-          </span>
-          <div
-            v-clean-tooltip="{content: row.architecture.tooltip, placement: 'left'}"
-            class="text-muted"
+          <router-link
+            :to="importLocation"
+            class="btn role-primary mr-10"
+            data-testid="cluster-manager-list-import"
           >
-            {{ row.architecture.label }}
-          </div>
-        </td>
-      </template>
-      <template #cell:explorer="{row}">
-        <router-link
-          v-if="row.canExplore"
-          data-testid="cluster-manager-list-explore-management"
-          class="btn btn-sm role-secondary"
-          :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"
-        >
-          {{ t('cluster.explore') }}
-        </router-link>
-        <button
-          v-else
-          data-testid="cluster-manager-list-explore"
-          :disabled="true"
-          class="btn btn-sm role-secondary"
-        >
-          {{ t('cluster.explore') }}
-        </button>
-      </template>
-    </ResourceTable>
+            {{ t('cluster.importAction') }}
+          </router-link>
+        </template>
+      </Masthead>
+
+      <PaginatedResourceTable
+        :schema="mgmtClusterSchema"
+
+        :headers="headers"
+        :pagination-headers="paginationHeaders"
+        :context="paginationContext"
+
+        :use-query-params-for-simple-filtering="true"
+
+        :local-filter="filterRowsLocal"
+        :api-filter="filterRowsApi"
+
+        :fetch-secondary-resources="fetchSecondaryResources"
+        :fetch-page-secondary-resources="fetchPageSecondaryResources"
+
+        :groupable="nonStandardWorkspace"
+        :namespaced="true"
+
+        :data-testid="'cluster-list'"
+      >
+        <template #cell:summary="{row}">
+          <!-- Replace the MACHINE_SUMMARY columns contents... but only if there's no stateParts -->
+          <span v-if="!row.stateParts.length">{{ row.statusInfo.nodeCount || 0 }}</span>
+          <MachineSummaryGraph
+            v-else
+            :row="row"
+          />
+        </template>
+        <template #cell:explorer="{row}">
+          <!-- Align side nav cluster, home page name link and cluster management cluster explor buttons on canExplore -->
+          <router-link
+            v-if="row.canExplore"
+            data-testid="cluster-manager-list-explore-management"
+            class="btn btn-sm role-secondary"
+            :to="{name: 'c-cluster', params: {cluster: row.id}}"
+          >
+            {{ t('cluster.explore') }}
+          </router-link>
+          <button
+            v-else
+            data-testid="cluster-manager-list-explore"
+            :disabled="true"
+            class="btn btn-sm role-secondary"
+          >
+            {{ t('cluster.explore') }}
+          </button>
+        </template>
+      </PaginatedResourceTable>
+    </template>
   </div>
 </template>