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

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

@@ -66,6 +66,7 @@ export default {
       kubeVersion:                    null,
       activeTab:                      '',
       installing:                     {},
+      installedFromRepo:              {},
       errors:                         {},
       plugins:                        [], // The installed plugins
       helmOps:                        [], // Helm operations
@@ -256,224 +257,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);
     }
   },
@@ -701,6 +529,9 @@ export default {
             this.updatePluginInstallStatus(pluginId, type);
           },
           closed: (res) => {
+            if (res && plugin?.chart?.repoName) {
+              this.installedFromRepo[plugin.name] = plugin.chart.repoName;
+            }
             this.didInstall(res);
           }
         }
@@ -1021,6 +852,196 @@ 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);
+      }
+
+      // fallback to try and prevent https://github.com/rancher/dashboard/issues/17956
+      // which we believe is due to a race condition
+      // we fall back to plugin name which should be present when going through the "installed plugins" (uiplugins) and should be enough to find the correct chart in the majority of cases, as long as there are not multiple charts with the same name across different repos
+      if (!chart) {
+        const fallbackRepoName = this.installedFromRepo?.[pluginCR.name];
+
+        if (fallbackRepoName) {
+          chart = all.find((c) => c.name === pluginCR.name && c.chart?.repoName === fallbackRepoName);
+        }
+      }
+
+      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

@@ -8,11 +8,12 @@ import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import PromptModal from '@shell/components/PromptModal';
+import { RcButton } from '@components/RcButton';
 
 export default {
 
   components: {
-    BrandImage, FixedBanner, GrowlManager, Header, PromptModal
+    BrandImage, FixedBanner, GrowlManager, Header, PromptModal, RcButton
   },
   mixins: [Brand, BrowserTabVisibility],
 
@@ -61,6 +62,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <PromptModal />
     <div
@@ -73,8 +81,10 @@ export default {
       />
 
       <main
+        id="main-content"
         class="main-layout"
         aria-label="Fail whale layout"
+        tabindex="-1"
       >
         <div
           v-if="error"
@@ -100,12 +110,12 @@ export default {
                 {{ displayError }}
               </h2>
               <p class="mt-20">
-                <a
+                <rc-button
+                  size="large"
                   :href="home"
-                  class="btn role-primary"
                 >
                   {{ t('nav.home') }}
-                </a>
+                </rc-button>
               </p>
               <hr
                 class="custom-content"
@@ -113,12 +123,13 @@ export default {
                 role="none"
               >
               <p class="mt-20">
-                <a
-                  class="btn role-secondary"
+                <rc-button
+                  size="large"
+                  variant="secondary"
                   @click="$router.push(previousRoute.fullPath)"
                 >
                   {{ t('nav.failWhale.reload') }}
-                </a>
+                </rc-button>
               </p>
             </div>
           </div>
@@ -200,4 +211,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>