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

package/pages/c/_cluster/uiplugins/index.vue

@@ -5,7 +5,8 @@ import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
 import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 import { allHash } from '@shell/utils/promise';
-import { CATALOG, UI_PLUGIN, MANAGEMENT, ZERO_TIME } from '@shell/config/types';
+import { CATALOG, UI_PLUGIN, MANAGEMENT } from '@shell/config/types';
+import { isMissingDate } from '@shell/utils/time';
 import { SETTING } from '@shell/config/settings';
 import { fetchOrCreateSetting } from '@shell/utils/settings';
 import { getVersionData, isRancherPrime } from '@shell/config/version';
@@ -255,224 +256,51 @@ export default {
     },
 
     available() {
-      let all = this.charts.filter((c) => isUIPlugin(c));
+      let all = this.charts
+        .filter((c) => isUIPlugin(c))
+        .filter((c) => !uiPluginHasAnnotation(c, CATALOG_ANNOTATIONS.HIDDEN, 'true'))
+        .map((chart) => this.mapChartToPluginItem(chart))
+        .filter((c) => c.versions.length > 0);
 
-      // Filter out hidden charts
-      all = all.filter((c) => !uiPluginHasAnnotation(c, CATALOG_ANNOTATIONS.HIDDEN, 'true'));
-
-      all = all.map((chart) => {
-        // Label can be overridden by chart annotation
-        const label = uiPluginAnnotation(chart, UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME) || chart.chartNameDisplay;
-        const item = {
-          name:        chart.chartName,
-          label,
-          description: chart.chartDescription,
-          id:          chart.id,
-          versions:    [],
-          installed:   false,
-          builtin:     false,
-        };
-
-        item.versions = [...chart.versions];
-        item.chart = chart;
-        item.incompatibilityMessage = '';
-
-        // Filter the versions available to install (plugins-api version and current dashboard version)
-        item.installableVersions = item.versions.filter((version) => isSupportedChartVersion({
-          version, rancherVersion: this.rancherVersion, kubeVersion: this.kubeVersion
-        }));
-
-        // add prop to version object if version is compatible with the current dashboard version
-        item.versions = item.versions.map((version) => isSupportedChartVersion({
-          version, rancherVersion: this.rancherVersion, kubeVersion: this.kubeVersion
-        }, true));
-
-        const latestCompatible = item.installableVersions?.[0];
-        const latestNotCompatible = item.versions.find((version) => !version.isVersionCompatible);
-
-        if (latestCompatible) {
-          item.primeOnly = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true';
-          item.experimental = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
-          item.certified = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
-
-          item.displayVersion = latestCompatible.version;
-          item.displayVersionLabel = getPluginChartVersionLabel(latestCompatible);
-          item.icon = latestCompatible.icon;
-          item.created = latestCompatible.created;
-        } else {
-          item.primeOnly = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.PRIME_ONLY, 'true');
-          item.experimental = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true');
-          item.certified = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER);
-
-          item.displayVersion = item.versions?.[0]?.version;
-          item.displayVersionLabel = getPluginChartVersionLabel(item.versions?.[0]);
-          item.icon = chart.icon || latestCompatible?.annotations?.['catalog.cattle.io/ui-icon'];
-          item.created = item.versions?.[0]?.created;
-        }
-
-        // add message of extension card if there's a newer version of the extension, but it's not available to be installed
-        if (latestNotCompatible && item.installableVersions.length && isChartVersionHigher(latestNotCompatible.version, item.installableVersions?.[0].version)) {
-          switch (latestNotCompatible.versionIncompatibilityData?.type) {
-          case EXTENSIONS_INCOMPATIBILITY_TYPES.HOST:
-            item.incompatibilityMessage = this.t(latestNotCompatible.versionIncompatibilityData?.cardMessageKey, {
-              version: latestNotCompatible.version, required: latestNotCompatible.versionIncompatibilityData?.required, mainHost: latestNotCompatible.versionIncompatibilityData?.mainHost
-            }, true);
-            break;
-          default:
-            item.incompatibilityMessage = this.t(latestNotCompatible.versionIncompatibilityData?.cardMessageKey, {
-              version:  latestNotCompatible.version,
-              required: latestNotCompatible.versionIncompatibilityData?.required
-            }, true);
-            break;
-          }
-        }
-
-        if (this.installing[item.id]) {
-          item.installing = this.installing[item.id];
-        }
-
-        return item;
-      });
-
-      // Remove charts with no installable versions
-      all = all.filter((c) => c.versions.length > 0);
-
-      // Check that all of the loaded plugins are represented
       this.uiplugins.forEach((p) => {
-        const chart = all.find((c) => c.name === p.name);
-
-        if (!chart) {
-          // A plugin is loaded, but there is no chart, so add an item so that it shows up
-          const rancher = typeof p.metadata?.rancher === 'object' ? p.metadata.rancher : {};
-
-          const label = rancher.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || p.name;
-          const item = {
-            name:                p.name,
-            label,
-            description:         p.metadata?.description,
-            icon:                p.metadata?.icon,
-            id:                  p.id,
-            versions:            [],
-            displayVersion:      p.metadata?.version,
-            displayVersionLabel: p.metadata?.version || '-',
-            installed:           true,
-            installedVersion:    p.metadata?.version,
-            builtin:             !!p.builtin,
-            primeOnly:           rancher?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true',
-            experimental:        rancher?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
-            certified:           rancher?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER
-          };
-
-          // Built-in plugins can chose to be hidden - used where we implement as extensions
-          // but don't want to shows them individually on the extensions page
-          if (!(item.builtin && rancher[UI_PLUGIN_CHART_ANNOTATIONS.HIDDEN_BUILTIN])) {
+        if (!all.find((c) => c.name === p.name)) {
+          const item = this.buildLoadedPluginItem(p);
+
+          if (item) {
             all.push(item);
           }
         }
       });
 
-      // Go through the CRs for the plugins and wire them into the catalog
-      this.plugins.forEach((p) => {
-        let chart;
-        const app = this.apps.find((a) => a.metadata.name === p.name && a.metadata.namespace === UI_PLUGIN_NAMESPACE);
-        const originalRepoName = app?.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.SOURCE_REPO_NAME] || app?.metadata?.labels?.[CATALOG_ANNOTATIONS.CLUSTER_REPO_NAME];
+      this.plugins.forEach((p) => this.wirePluginCRToChart(p, all));
 
-        // Find the chart from the original repo to avoid picking a wrong chart with the same name
-        if (originalRepoName) {
-          chart = all.find((c) => c.name === p.name && c.chart?.repoName === originalRepoName);
-        }
-
-        // If original repo was removed, don't fall back to another repo's chart (would break Available tab)
-        if (chart) {
-          chart.installed = true;
-          chart.uiplugin = p;
-          chart.installedVersion = p.version;
+      this.mergePluginErrors(all);
 
-          // Can't do this here
-          chart.installing = this.installing[chart.id];
+      // Remove duplicate installed plugins - keep only ones with uiplugin (correct CR data)
+      const installedByName = {};
 
-          // Check for upgrade
-          const latestInstallableVersion = chart.installableVersions?.[0];
-
-          if (latestInstallableVersion && p.version !== (latestInstallableVersion.appVersion ?? latestInstallableVersion.version)) {
-            // Use the currently installed version's metadata to show/hide the experimental and certified labels
-            const installedVersion = (chart.installableVersions || []).find((v) => (v.appVersion ?? v.version) === p.version);
-
-            if (installedVersion) {
-              chart.primeOnly = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true';
-              chart.experimental = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
-              chart.certified = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
-            }
-
-            chart.upgrade = getPluginChartVersionLabel(latestInstallableVersion);
-          }
-        } else {
-          // No chart available - original repo was removed or developer-loaded plugin
-          const appChartMeta = app?.spec?.chart?.metadata;
-          const appAnnotations = appChartMeta?.annotations || {};
-          let originalRepoDisplayName = null;
-
-          if (originalRepoName) {
-            originalRepoDisplayName = this.$store.getters['i18n/withFallback'](`catalog.repo.name."${ originalRepoName }"`, null, originalRepoName);
-          }
-
-          const item = {
-            name:                    p.name,
-            label:                   appAnnotations[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || appChartMeta?.name || p.name,
-            description:             appChartMeta?.description || p.description || '-',
-            icon:                    appChartMeta?.icon || appAnnotations['catalog.cattle.io/ui-icon'],
-            id:                      `${ p.name }-${ p.version }`,
-            versions:                [],
-            displayVersion:          p.version,
-            displayVersionLabel:     p.version || '-',
-            isDeveloper:             p.isDeveloper,
-            installed:               true,
-            installedVersion:        p.version,
-            installing:              false,
-            builtin:                 false,
-            uiplugin:                p,
-            primeOnly:               appAnnotations[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true',
-            experimental:            appAnnotations[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
-            certified:               appAnnotations[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER,
-            originalRepoNameDisplay: originalRepoDisplayName,
-          };
-
-          all.push(item);
+      all.forEach((plugin) => {
+        if (plugin.description && plugin.description.length > MAX_DESCRIPTION_LENGTH) {
+          plugin.description = `${ plugin.description.substr(0, MAX_DESCRIPTION_LENGTH) } ...`;
         }
-      });
 
-      // Merge in the plugin load errors
-      Object.keys(this.uiErrors).forEach((e) => {
-        const chart = all.find((c) => c.name === e);
-
-        if (chart) {
-          const error = this.uiErrors[e];
+        if (plugin.installed) {
+          const existing = installedByName[plugin.name];
 
-          if (error && typeof error === 'string') {
-            chart.installedError = this.t(this.uiErrors[e]);
-          } else {
-            chart.installedError = '';
+          if (!existing || plugin.uiplugin) {
+            installedByName[plugin.name] = plugin;
           }
         }
       });
 
-      // Merge in the plugin load errors from help ops
-      Object.keys(this.errors).forEach((e) => {
-        const chart = all.find((c) => c.id === e);
-
-        if (chart) {
-          chart.helmError = !!this.errors[e];
+      all = all.filter((plugin) => {
+        if (!plugin.installed) {
+          return true;
         }
-      });
 
-      all.forEach((plugin) => {
-        // Clamp the lengths of the descriptions
-        if (plugin.description && plugin.description.length > MAX_DESCRIPTION_LENGTH) {
-          plugin.description = `${ plugin.description.substr(0, MAX_DESCRIPTION_LENGTH) } ...`;
-        }
+        return installedByName[plugin.name] === plugin;
       });
 
-      // Sort by name
       return sortBy(all, 'name', false);
     }
   },
@@ -896,18 +724,12 @@ export default {
         label:       plugin.displayVersionLabel,
       }];
 
-      if (plugin.created) {
-        const hasZeroTime = plugin.created === ZERO_TIME;
-        const lastUpdatedItem = {
+      if (!isMissingDate(plugin.created)) {
+        items.push({
           icon:        'icon-refresh-alt',
           iconTooltip: { key: 'tableHeaders.lastUpdated' },
-          label:       hasZeroTime ? this.t('generic.na') : day(plugin.created).format('MMM D, YYYY')
-        };
-
-        if (hasZeroTime) {
-          lastUpdatedItem.labelTooltip = this.t('catalog.charts.appChartCard.subHeaderItem.missingVersionDate');
-        }
-        items.push(lastUpdatedItem);
+          label:       day(plugin.created).format('MMM D, YYYY')
+        });
       }
 
       if (plugin.installing) {
@@ -989,24 +811,27 @@ export default {
     getStatuses(plugin) {
       const statuses = [];
 
-      const errorTooltip = plugin.installedError || plugin.incompatibilityMessage || (plugin.helmError ? this.t('plugins.helmError') : null);
-      const isDeprecated = plugin?.chart?.deprecated;
+      const errorMsg = plugin.installedError || (plugin.helmError ? this.t('plugins.helmError') : null);
+      const incompatibilityMsg = plugin.incompatibilityMessage;
+      const isDeprecated = uiPluginHasAnnotation(plugin?.chart, CATALOG_ANNOTATIONS.DEPRECATED, 'true');
 
-      if (isDeprecated || errorTooltip) {
-        let tooltip;
+      const tooltipMsgs = [];
 
-        if (isDeprecated && errorTooltip) {
-          tooltip = { text: `${ this.t('generic.deprecated') }. ${ this.t('generic.error') }: ${ errorTooltip }` };
-        } else if (isDeprecated) {
-          tooltip = { key: 'generic.deprecated' };
-        } else { // errorTooltip is present
-          tooltip = { text: `${ this.t('generic.error') }: ${ errorTooltip }` };
-        }
+      if (isDeprecated) {
+        tooltipMsgs.push(this.t('generic.deprecated'));
+      }
+
+      if (errorMsg) {
+        tooltipMsgs.push(errorMsg);
+      } else if (incompatibilityMsg) {
+        tooltipMsgs.push(incompatibilityMsg);
+      }
 
+      if (tooltipMsgs.length) {
         statuses.push({
-          icon:  'icon-alert-alt',
-          color: 'error',
-          tooltip
+          icon:    'icon-alert-alt',
+          color:   'error',
+          tooltip: { text: tooltipMsgs.join('<br/>') }
         });
       }
 
@@ -1023,6 +848,185 @@ export default {
       }
 
       return statuses;
+    },
+
+    extractCertificationFlags(annotations) {
+      return {
+        primeOnly:    annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true',
+        experimental: annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
+        certified:    annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER,
+      };
+    },
+
+    buildIncompatibilityMessage(versionData) {
+      const { versionIncompatibilityData, version } = versionData;
+      const params = {
+        version,
+        required: versionIncompatibilityData?.required,
+      };
+
+      if (versionIncompatibilityData?.type === EXTENSIONS_INCOMPATIBILITY_TYPES.HOST) {
+        params.mainHost = versionIncompatibilityData?.mainHost;
+      }
+
+      return this.t(versionIncompatibilityData?.cardMessageKey, params, true);
+    },
+
+    mapChartToPluginItem(chart) {
+      const label = uiPluginAnnotation(chart, UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME) || chart.chartNameDisplay;
+      const item = {
+        name:                   chart.chartName,
+        label,
+        description:            chart.chartDescription,
+        id:                     chart.id,
+        versions:               [...chart.versions],
+        installed:              false,
+        builtin:                false,
+        chart,
+        incompatibilityMessage: '',
+      };
+
+      item.installableVersions = item.versions.filter((version) => isSupportedChartVersion({
+        version, rancherVersion: this.rancherVersion, kubeVersion: this.kubeVersion
+      }));
+
+      item.versions = item.versions.map((version) => isSupportedChartVersion({
+        version, rancherVersion: this.rancherVersion, kubeVersion: this.kubeVersion
+      }, true));
+
+      const latestCompatible = item.installableVersions?.[0];
+      const latestNotCompatible = item.versions.find((version) => !version.isVersionCompatible);
+
+      if (latestCompatible) {
+        Object.assign(item, {
+          ...this.extractCertificationFlags(latestCompatible?.annotations),
+          displayVersion:      latestCompatible.version,
+          displayVersionLabel: getPluginChartVersionLabel(latestCompatible),
+          icon:                latestCompatible.icon,
+          created:             latestCompatible.created,
+        });
+      } else {
+        Object.assign(item, {
+          primeOnly:           uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.PRIME_ONLY, 'true'),
+          experimental:        uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true'),
+          certified:           uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER),
+          displayVersion:      item.versions?.[0]?.version,
+          displayVersionLabel: getPluginChartVersionLabel(item.versions?.[0]),
+          icon:                chart.icon || latestCompatible?.annotations?.['catalog.cattle.io/ui-icon'],
+          created:             item.versions?.[0]?.created,
+        });
+      }
+
+      if (latestNotCompatible && item.installableVersions.length && isChartVersionHigher(latestNotCompatible.version, item.installableVersions?.[0].version)) {
+        item.incompatibilityMessage = this.buildIncompatibilityMessage(latestNotCompatible);
+      }
+
+      if (this.installing[item.id]) {
+        item.installing = this.installing[item.id];
+      }
+
+      return item;
+    },
+
+    buildLoadedPluginItem(plugin) {
+      const rancher = typeof plugin.metadata?.rancher === 'object' ? plugin.metadata.rancher : {};
+      const label = rancher.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || plugin.name;
+
+      if (plugin.builtin && rancher[UI_PLUGIN_CHART_ANNOTATIONS.HIDDEN_BUILTIN]) {
+        return null;
+      }
+
+      return {
+        name:                plugin.name,
+        label,
+        description:         plugin.metadata?.description,
+        icon:                plugin.metadata?.icon,
+        id:                  plugin.id,
+        versions:            [],
+        displayVersion:      plugin.metadata?.version,
+        displayVersionLabel: plugin.metadata?.version || '-',
+        installed:           true,
+        installedVersion:    plugin.metadata?.version,
+        builtin:             !!plugin.builtin,
+        ...this.extractCertificationFlags(rancher?.annotations),
+      };
+    },
+
+    wirePluginCRToChart(pluginCR, all) {
+      const app = this.apps.find((a) => a.metadata.name === pluginCR.name && a.metadata.namespace === UI_PLUGIN_NAMESPACE);
+      const originalRepoName = app?.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.SOURCE_REPO_NAME] || app?.metadata?.labels?.[CATALOG_ANNOTATIONS.CLUSTER_REPO_NAME];
+
+      let chart;
+
+      if (originalRepoName) {
+        chart = all.find((c) => c.name === pluginCR.name && c.chart?.repoName === originalRepoName);
+      }
+
+      if (chart) {
+        chart.installed = true;
+        chart.uiplugin = pluginCR;
+        chart.installedVersion = pluginCR.version;
+        chart.installing = this.installing[chart.id];
+
+        const latestInstallableVersion = chart.installableVersions?.[0];
+
+        if (latestInstallableVersion && pluginCR.version !== (latestInstallableVersion.appVersion ?? latestInstallableVersion.version)) {
+          const installedVersion = (chart.installableVersions || []).find((v) => (v.appVersion ?? v.version) === pluginCR.version);
+
+          if (installedVersion) {
+            Object.assign(chart, this.extractCertificationFlags(installedVersion?.annotations));
+          }
+
+          chart.upgrade = getPluginChartVersionLabel(latestInstallableVersion);
+        }
+      } else {
+        const appChartMeta = app?.spec?.chart?.metadata;
+        const appAnnotations = appChartMeta?.annotations || {};
+        let originalRepoDisplayName = null;
+
+        if (originalRepoName) {
+          originalRepoDisplayName = this.$store.getters['i18n/withFallback'](`catalog.repo.name."${ originalRepoName }"`, null, originalRepoName);
+        }
+
+        all.push({
+          name:                    pluginCR.name,
+          label:                   appAnnotations[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || appChartMeta?.name || pluginCR.name,
+          description:             appChartMeta?.description || pluginCR.description || '-',
+          icon:                    appChartMeta?.icon || appAnnotations['catalog.cattle.io/ui-icon'],
+          id:                      `${ pluginCR.name }-${ pluginCR.version }`,
+          versions:                [],
+          displayVersion:          pluginCR.version,
+          displayVersionLabel:     pluginCR.version || '-',
+          isDeveloper:             pluginCR.isDeveloper,
+          installed:               true,
+          installedVersion:        pluginCR.version,
+          installing:              false,
+          builtin:                 false,
+          uiplugin:                pluginCR,
+          originalRepoNameDisplay: originalRepoDisplayName,
+          ...this.extractCertificationFlags(appAnnotations),
+        });
+      }
+    },
+
+    mergePluginErrors(all) {
+      Object.keys(this.uiErrors).forEach((errorName) => {
+        const chart = all.find((c) => c.name === errorName);
+
+        if (chart) {
+          const error = this.uiErrors[errorName];
+
+          chart.installedError = (error && typeof error === 'string') ? this.t(error) : '';
+        }
+      });
+
+      Object.keys(this.errors).forEach((errorId) => {
+        const chart = all.find((c) => c.id === errorId);
+
+        if (chart) {
+          chart.helmError = !!this.errors[errorId];
+        }
+      });
     }
   }
 };

package/pages/diagnostic.vue

@@ -1,5 +1,5 @@
 <script>
-import { CAPI, MANAGEMENT } from '@shell/config/types';
+import { MANAGEMENT } from '@shell/config/types';
 import AsyncButton from '@shell/components/AsyncButton';
 import { downloadFile } from '@shell/utils/download';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
@@ -12,28 +12,25 @@ export default {
   components: { AsyncButton },
 
   async fetch() {
-    const provClusters = await this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
-    const readyClusters = provClusters.filter((c) => c.mgmt?.isReady);
-    const clusterForCounts = filterHiddenLocalCluster(filterOnlyKubernetesClusters(readyClusters, this.$store), this.$store);
+    // Diagnostics does not scale with resources (this will be real heavy for rancher's with 1000s of clusters)
+    const mgmtClusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+    const readyMgmtClusters = mgmtClusters.filter((c) => c.isReady);
+    const clusterForCounts = filterHiddenLocalCluster(filterOnlyKubernetesClusters(readyMgmtClusters, this.$store), this.$store);
     const finalCounts = [];
     const promises = [];
     const topFifteenForResponseTime = [];
     const schemaPromises = [];
 
-    clusterForCounts.forEach((cluster, i) => {
-      // Necessary to retrieve the proper display name of the cluster
-      const mgmtCluster = this.$store.getters['management/byId'](MANAGEMENT.CLUSTER, cluster.metadata.name);
-
+    clusterForCounts.forEach((mgmtCluster, i) => {
       finalCounts.push({
-        id:             cluster.id,
-        name:           mgmtCluster?.spec?.displayName || cluster.metadata?.name,
-        namespace:      cluster.metadata?.namespace,
-        capiId:         cluster.mgmt?.id,
+        id:             mgmtCluster.id,
+        name:           mgmtCluster.spec.displayName || mgmtCluster.metadata?.name,
+        namespace:      mgmtCluster.provClusterNamespace,
         counts:         null,
         isTableVisible: !!(i === 0 && clusterForCounts.length === 1)
       });
-      promises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/counts` }));
-      schemaPromises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/schemas?exclude=metadata.managedFields` }));
+      promises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ mgmtCluster.id }/v1/counts` }));
+      schemaPromises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ mgmtCluster.id }/v1/schemas?exclude=metadata.managedFields` }));
     });
 
     const countsPerCluster = await Promise.all(promises);
@@ -62,7 +59,6 @@ export default {
 
         finalCount.forEach((item, i) => {
           finalCount[i].id = finalCounts[index].id;
-          finalCount[i].capiId = finalCounts[index].capiId;
         });
 
         topFifteenForResponseTime.push(finalCount);
@@ -187,7 +183,7 @@ export default {
     setResourceResponseTiming(responseTimes) {
       responseTimes?.forEach((res) => {
         if ( res.outcome === 'success' ) {
-          const cluster = this.finalCounts.find((c) => c.capiId === res.item.capiId);
+          const cluster = this.finalCounts.find((c) => c.id === res.item.id);
           const countIndex = cluster?.counts?.findIndex((c) => c.resource === res.item.resource);
 
           if ( (countIndex && countIndex !== -1) || countIndex === 0 ) {
@@ -218,7 +214,7 @@ export default {
         return cluster.map((item) => {
           const t = Date.now();
 
-          return this.$store.dispatch('management/request', { url: `/k8s/clusters/${ item.capiId }/v1/${ item.resource }` })
+          return this.$store.dispatch('management/request', { url: `/k8s/clusters/${ item.id }/v1/${ item.resource }` })
             .then(() => ({
               outcome: 'success', item, durationMs: Date.now() - t
             }))

package/pages/fail-whale.vue

@@ -61,6 +61,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <PromptModal />
     <div
@@ -73,8 +77,10 @@ export default {
       />
 
       <main
+        id="main-content"
         class="main-layout"
         aria-label="Fail whale layout"
+        tabindex="-1"
       >
         <div
           v-if="error"
@@ -200,4 +206,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>