@rancher/shell 3.0.1-rc.3 → 3.0.1

package/list/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue

@@ -19,13 +19,17 @@ export default {
       required: true,
     },
   },
+  emits: ['error'],
 
   async fetch() {
     const inStore = this.$store.getters['currentStore']();
 
+    try {
     // Fetch storage classes so we can determine if a PVC can be expanded
-    this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
-
+      await this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
+    } catch (e) {
+      this.$emit('error', e?.data || e);
+    }
     await this.$fetchType(this.resource);
   }
 };

package/list/node.vue

@@ -21,6 +21,7 @@ import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
 
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { mapGetters } from 'vuex';
+import { FetchPageSecondaryResourcesOpts } from 'components/PaginatedResourceTable.vue';
 
 export default defineComponent({
   name:       'ListNode',
@@ -36,10 +37,12 @@ export default defineComponent({
       type:     String,
       required: true,
     },
+
     schema: {
       type:     Object,
       required: true,
     },
+
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
@@ -209,8 +212,8 @@ export default defineComponent({
      *
      * So when we have a page.... use those entries as filters when fetching the other resources
      */
-    async fetchPageSecondaryResources(force = false) {
-      if (!this.rows?.length) {
+    async fetchPageSecondaryResources({ canPaginate, force, page }: FetchPageSecondaryResourcesOpts) {
+      if (!page?.length) {
         return;
       }
 
@@ -220,7 +223,7 @@ export default defineComponent({
         const opt: ActionFindPageArgs = {
           force,
           pagination: new FilterArgs({
-            filters: PaginationParamFilter.createMultipleFields(this.rows.map((r: any) => new PaginationFilterField({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
               field: 'status.nodeName',
               value: r.id
             }))),
@@ -242,7 +245,7 @@ export default defineComponent({
             namespaced: namespace,
             pagination: new FilterArgs({
               filters: PaginationParamFilter.createMultipleFields(
-                this.rows.reduce((res: PaginationFilterField[], r: any ) => {
+                page.reduce((res: PaginationFilterField[], r: any ) => {
                   const name = r.metadata?.annotations?.[CAPI_ANNOTATIONS.MACHINE_NAME];
 
                   if (name) {
@@ -268,7 +271,7 @@ export default defineComponent({
           force,
           pagination: new FilterArgs({
             filters: PaginationParamFilter.createMultipleFields(
-              this.rows.map((r: any) => new PaginationFilterField({
+              page.map((r: any) => new PaginationFilterField({
                 field: 'spec.nodeName',
                 value: r.id,
               }))

package/mixins/resource-fetch-api-pagination.js

@@ -13,6 +13,21 @@ import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
  */
 export default {
 
+  props: {
+    namespaced: {
+      type:    Boolean,
+      default: null, // Automatic from schema
+    },
+
+    /**
+     * Where in the ui this mixin is used. For instance the home page cluster list would be `home`
+     */
+    context: {
+      type:    String,
+      default: null,
+    },
+  },
+
   data() {
     return {
       forceUpdateLiveAndDelayed: 0,
@@ -68,7 +83,7 @@ export default {
     },
 
     namespaceFilterChanged(neu) {
-      if (!this.canPaginate || !this.schema?.attributes?.namespaced) {
+      if (!this.canPaginate || !this.isNamespaced) {
         return;
       }
 
@@ -166,7 +181,16 @@ export default {
         return;
       }
 
-      return this.resource && this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`]?.(this.resource.id || this.resource);
+      if (!this.resource) {
+        return false;
+      }
+
+      const args = {
+        id:      this.resource.id || this.resource,
+        context: this.context,
+      };
+
+      return this.resource && this.$store.getters[`${ this.inStore }/paginationEnabled`]?.(args);
     },
 
     paginationResult() {
@@ -182,7 +206,7 @@ export default {
         return;
       }
 
-      return this.$store.getters[`${ this.currentProduct?.inStore }/havePage`](this.resource);
+      return this.$store.getters[`${ this.inStore }/havePage`](this.resource);
     },
 
     /**
@@ -197,6 +221,15 @@ export default {
       */
     showDynamicRancherNamespaces() {
       return this.$store.getters['prefs/get'](ALL_NAMESPACES);
+    },
+
+    isNamespaced() {
+      if (this.namespaced !== null) { // null is the default value
+        // This is an override, but only if it's set
+        return !!this.namespaced;
+      }
+
+      return this.schema?.attributes?.namespaced;
     }
   },
 
@@ -221,7 +254,7 @@ export default {
     namespaceFilters: {
       immediate: true,
       async handler(neu, old) {
-        if (!this.canPaginate || !this.schema?.attributes?.namespaced) {
+        if (!this.canPaginate || !this.isNamespaced) {
           return;
         }
 
@@ -298,7 +331,9 @@ export default {
         return;
       }
 
-      await this.fetchPageSecondaryResources();
+      await this.fetchPageSecondaryResources({
+        canPaginate: this.canPaginate, force: false, page: this.rows, pagResult: this.paginationResult
+      });
     }
   },
 };

package/mixins/resource-fetch.js

@@ -31,11 +31,18 @@ export default {
       perfConfig = DEFAULT_PERF_SETTING;
     }
 
+    // Normally owner components supply `resource` and `inStore` as part of their data, however these are needed here before parent data runs
+    // So set up both here
+    const params = { ...this.$route.params };
+    const resource = params.resource || this.schema?.id; // Resource can either be on a page showing single list, or a page of a resource showing a list of another resource
+    const inStore = this.$store.getters['currentStore'](resource);
+
     return {
+      inStore,
       perfConfig,
       init:                       false,
       multipleResources:          [],
-      loadResources:              [this.resource],
+      loadResources:              [resource],
       // manual refresh vars
       hasManualRefresh:           false,
       watch:                      true,
@@ -60,17 +67,47 @@ export default {
     }
   },
 
+  props: {
+    /**
+     * Add additional filtering to the rows
+     *
+     * Should only be used when we have all results, otherwise we're filtering a page which already has been filtered...
+     */
+    localFilter: {
+      type:    Function,
+      default: null,
+    },
+
+    /**
+     * Add additional filtering to the pagination api request
+     */
+    apiFilter: {
+      type:    Function,
+      default: null,
+    },
+  },
+
   computed: {
     ...mapGetters({ refreshFlag: 'resource-fetch/refreshFlag' }),
+
     rows() {
       const currResource = this.fetchedResourceType.find((item) => item.type === this.resource);
 
       if (currResource) {
-        return this.$store.getters[`${ currResource.currStore }/all`](this.resource);
-      } else {
-        return [];
+        const rows = this.$store.getters[`${ currResource.currStore }/all`](this.resource);
+
+        if (this.canPaginate) {
+          if (this.havePaginated) {
+            return rows;
+          }
+        } else {
+          return this.localFilter ? this.localFilter(rows) : rows;
+        }
       }
+
+      return [];
     },
+
     loading() {
       if (this.canPaginate) {
         return this.paginating;
@@ -86,7 +123,9 @@ export default {
       if (this.init && neu) {
         await this.$fetch();
         if (this.canPaginate && this.fetchPageSecondaryResources) {
-          this.fetchPageSecondaryResources(true);
+          this.fetchPageSecondaryResources({
+            canPaginate: this.canPaginate, force: true, page: this.rows, pagResult: this.paginationResult
+          });
         }
       }
     }
@@ -140,6 +179,10 @@ export default {
           force:            this.paginating !== null // Fix for manual refresh (before ripped out).
         };
 
+        if (this.apiFilter) {
+          opt.paginating = this.apiFilter(opt.pagination);
+        }
+
         this['paginating'] = true;
 
         const that = this;

package/models/management.cattle.io.nodepool.js

@@ -4,11 +4,12 @@ import HybridModel from '@shell/plugins/steve/hybrid-class';
 import { notOnlyOfRole } from '@shell/models/cluster.x-k8s.io.machine';
 
 export default class MgmtNodePool extends HybridModel {
-  get nodeTemplate() {
-    const id = (this.spec?.nodeTemplateName || '').replace(/:/, '/');
-    const template = this.$getters['byId'](MANAGEMENT.NODE_TEMPLATE, id);
+  get nodeTemplateId() {
+    return (this.spec?.nodeTemplateName || '').replace(/:/, '/');
+  }
 
-    return template;
+  get nodeTemplate() {
+    return this.$getters['byId'](MANAGEMENT.NODE_TEMPLATE, this.nodeTemplateId);
   }
 
   get provider() {

package/models/nodedriver.js

@@ -18,7 +18,7 @@ export default class NodeDriver extends Driver {
         icon:       'icon icon-play',
         bulkable:   true,
         bulkAction: 'activateBulk',
-        enabled:    !!this.actions.activate && this.state === 'inactive',
+        enabled:    !!this.actions?.activate && this.state === 'inactive',
       },
       {
         action:     'deactivate',
@@ -26,7 +26,7 @@ export default class NodeDriver extends Driver {
         icon:       'icon icon-pause',
         bulkable:   true,
         bulkAction: 'deactivateBulk',
-        enabled:    !!this.actions.deactivate && this.state === 'active',
+        enabled:    !!this.actions?.deactivate && this.state === 'active',
         weight:     -1,
       },
       { divider: true },

package/models/provisioning.cattle.io.cluster.js

@@ -245,7 +245,7 @@ export default class ProvCluster extends SteveModel {
   }
 
   get canDelete() {
-    return super.canDelete && this.stateObj.name !== 'removing';
+    return super.canDelete && this.stateObj?.name !== 'removing';
   }
 
   get canEditYaml() {
@@ -349,19 +349,11 @@ export default class ProvCluster extends SteveModel {
   }
 
   get mgmtClusterId() {
-    return this.mgmt?.id || this.id?.replace(`${ this.metadata.namespace }/`, '');
+    return this.status?.clusterName;
   }
 
   get mgmt() {
-    const name = this.status?.clusterName;
-
-    if ( !name ) {
-      return null;
-    }
-
-    const out = this.$rootGetters['management/byId'](MANAGEMENT.CLUSTER, name);
-
-    return out;
+    return this.$rootGetters['management/byId'](MANAGEMENT.CLUSTER, this.mgmtClusterId);
   }
 
   get isReady() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.1-rc.3",
+  "version": "3.0.1",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -39,7 +39,7 @@
     "@popperjs/core": "2.4.4",
     "@rancher/icons": "2.0.29",
     "@types/is-url": "1.2.30",
-    "@types/node": "16.4.3",
+    "@types/node": "20.10.8",
     "@types/semver": "^7.5.8",
     "@typescript-eslint/eslint-plugin": "~5.4.0",
     "@typescript-eslint/parser": "~5.4.0",
@@ -60,7 +60,7 @@
     "color": "4.2.3",
     "codemirror": ">=5.64.0 <6",
     "codemirror-editor-vue3": "2.7.1",
-    "cookie": "0.5.0",
+    "cookie": "0.7.0",
     "cookie-universal": "2.2.2",
     "core-js": "3.25.3",
     "cron-validator": "1.3.1",
@@ -104,7 +104,7 @@
     "js-yaml": "4.1.0",
     "js-yaml-loader": "1.2.2",
     "jsdiff": "1.1.1",
-    "jsonpath-plus": "10.0.0",
+    "jsonpath-plus": "10.0.7",
     "jsrsasign": "10.5.25",
     "jszip": "3.8.0",
     "lodash": "4.17.21",
@@ -123,7 +123,7 @@
     "start-server-and-test": "1.13.1",
     "style-loader": "1.2.1",
     "ts-node": "8.10.2",
-    "typescript": "4.5.5",
+    "typescript": "5.6.3",
     "ufo": "0.7.11",
     "unfetch": "4.2.0",
     "url-parse": "1.5.10",
@@ -131,7 +131,6 @@
     "vue-router": "4.4.3",
     "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.7.16",
-    "vue-template-compiler": "2.7.16",
     "vue3-resize": "0.2.0",
     "vue3-virtual-scroll-list": "0.2.1",
     "vuedraggable": "4.1.0",
@@ -161,7 +160,7 @@
     "roarr": "7.0.4",
     "semver": "7.5.4",
     "@types/lodash": "4.17.5",
-    "@types/node": "~20.10.0",
+    "@types/node": "20.10.8",
     "@vue/cli-service/html-webpack-plugin": "^5.0.0"
   },
   "nyc": {
@@ -170,4 +169,4 @@
       ".vue"
     ]
   }
-}
+}

package/pages/about.vue

@@ -108,6 +108,9 @@ export default {
         :to="{ name: 'diagnostic' }"
         class="btn role-primary"
         data-testid="about__diagnostics_button"
+        role="button"
+        :aria-label="t('about.diagnostic.title')"
+        @keyup.space="$router.push({ name: 'diagnostic' })"
       >
         {{ t('about.diagnostic.title') }}
       </router-link>
@@ -126,6 +129,8 @@ export default {
             href="https://github.com/rancher/rancher"
             target="_blank"
             rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`about.versions.rancher`) })"
           >
             {{ t("about.versions.rancher") }}
           </a>
@@ -137,6 +142,8 @@ export default {
             href="https://github.com/rancher/dashboard"
             target="_blank"
             rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`generic.dashboard`)})"
           >
             {{ t("generic.dashboard") }}
           </a>
@@ -148,6 +155,8 @@ export default {
             href="https://github.com/rancher/cli"
             target="_blank"
             rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`about.versions.cli`) })"
           >
             {{ appName }} {{ t("about.versions.cli") }}
           </a>
@@ -159,6 +168,8 @@ export default {
             href="https://github.com/rancher/helm"
             target="_blank"
             rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`about.versions.helm`) })"
           >
             {{ t("about.versions.helm") }}
           </a>
@@ -170,6 +181,8 @@ export default {
             href="https://github.com/rancher/machine"
             target="_blank"
             rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`about.versions.machine`) })"
           >
             {{ t("about.versions.machine") }}
           </a>
@@ -178,9 +191,12 @@ export default {
     </table>
     <p class="pt-20">
       <a
+        class="release-notes-link"
         :href="releaseNotesUrl"
         target="_blank"
         rel="nofollow noopener noreferrer"
+        role="link"
+        :aria-label="t('about.versions.releaseNotes')"
       >
         {{ t('about.versions.releaseNotes') }}
       </a>
@@ -202,8 +218,12 @@ export default {
           <td>
             <a
               v-if="d.imageList"
+              tabindex="0"
               :data-testid="`image_list_download_link__${d.label}`"
+              role="link"
+              :aria-label="t('about.versions.downloadImages', { listName: t(d.label) })"
               @click="d.imageList"
+              @keyup.enter="d.imageList"
             >
               {{ t('asyncButton.download.action') }}
             </a>
@@ -230,6 +250,8 @@ export default {
             <a
               v-if="d.cliLink"
               :href="d.cliLink"
+              role="link"
+              :aria-label="t('about.versions.downloadCli', { os: t(d.label) })"
             >{{ d.cliFile }}</a>
           </td>
         </tr>

package/pages/auth/setup.vue

@@ -11,7 +11,6 @@ import { getVendor, getProduct, setVendor } from '@shell/config/private-label';
 import { RadioGroup } from '@components/Form/Radio';
 import { setSetting } from '@shell/utils/settings';
 import { SETTING } from '@shell/config/settings';
-import { isDevBuild } from '@shell/utils/version';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import Password from '@shell/components/form/Password';
 import { applyProducts } from '@shell/store/type-map';
@@ -66,7 +65,6 @@ export default {
       v3User:             null,
       serverUrl:          null,
       mcmEnabled:         null,
-      telemetry:          null,
       eula:               false,
       principals:         null,
       errors:             []
@@ -101,16 +99,7 @@ export default {
   },
 
   async fetch() {
-    const telemetrySetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.TELEMETRY);
     const serverUrlSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
-    const rancherVersionSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.VERSION_RANCHER);
-    let telemetry = true;
-
-    if (telemetrySetting?.value && telemetrySetting.value !== 'prompt') {
-      telemetry = telemetrySetting.value !== 'out';
-    } else if (!rancherVersionSetting?.value || isDevBuild(rancherVersionSetting?.value)) {
-      telemetry = false;
-    }
 
     let plSetting;
 
@@ -163,7 +152,6 @@ export default {
     this['v3User'] = v3User;
     this['serverUrl'] = serverUrl;
     this['mcmEnabled'] = mcmEnabled;
-    this['telemetry'] = telemetry;
     this['principals'] = principals;
   },
 
@@ -244,7 +232,6 @@ export default {
 
         if (this.isFirstLogin) {
           promises.push( setSetting(this.$store, SETTING.EULA_AGREED, (new Date()).toISOString()) );
-          promises.push( setSetting(this.$store, SETTING.TELEMETRY, this.telemetry ? 'in' : 'out') );
 
           if ( this.mcmEnabled && this.serverUrl ) {
             promises.push( setSetting(this.$store, SETTING.SERVER_URL, this.serverUrl) );
@@ -406,20 +393,6 @@ export default {
               </div>
             </template>
 
-            <div class="checkbox mt-40">
-              <Checkbox
-                id="checkbox-telemetry"
-                v-model:value="telemetry"
-              >
-                <template #label>
-                  <t
-                    k="setup.telemetry"
-                    :raw="true"
-                    :name="productName"
-                  />
-                </template>
-              </Checkbox>
-            </div>
             <div class="checkbox pt-10 eula">
               <Checkbox
                 id="checkbox-eula"
@@ -461,6 +434,9 @@ export default {
             </h4>
           </div>
         </div>
+        <div>
+          &nbsp;
+        </div>
       </div>
       <BrandImage
         class="col span-6 landscape"
@@ -517,11 +493,14 @@ export default {
       width: 51%;
 
       & > div:first-of-type {
-        flex:3;
+        flex: 3;
       }
       & > div:nth-of-type(2) {
         flex: 9;
       }
+      & > div:nth-of-type(3) {
+        flex: 2;
+      }
     }
 
     .setup-title {

package/pages/c/_cluster/explorer/__tests__/index.test.ts

@@ -99,7 +99,7 @@ describe('page: cluster dashboard', () => {
       [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
     ]]
   ])('%p cluster - %p agent health box :', (_, agentId, isLocal, agentResources, statuses) => {
-    it.each(statuses)('should  NOT show %p status due to missing canList permissions', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
+    it.each(statuses)('should NOT show %p status due to missing canList permissions', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
       const options = clone(mountOptions);
 
       options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
@@ -138,41 +138,48 @@ describe('page: cluster dashboard', () => {
 
   describe.each([
     ['local', 'fleet', true, ['fleetDeployment', 'fleetStatefulSet'], [
-      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
-      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', false, true, false, false, [{ status: 'True' }], 1, 0],
     ]],
     ['downstream RKE2', 'fleet', false, ['fleetStatefulSet'], [
-      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
-      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', false, true, false, false, [{ status: 'True' }], 1, 0],
     ]],
     ['downstream RKE2', 'cattle', false, ['cattleDeployment'], [
-      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
-      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
-      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', false, true, false, false, [{ status: 'True' }], 1, 0],
     ]]
   ])('%p cluster - %p agent health box ::', (_, agentId, isLocal, agentResources, statuses) => {
-    it.each(statuses)('should show %p status', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
+    it.each(statuses)('should show %p status', async(status, iconClass, clickable, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
+      let agentRoute = null;
+
       const options = clone(mountOptions);
 
       options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
 
-      // let's pass the canList now
       options.global.mocks.$store.getters['cluster/canList'] = (type: string) => !!(type === WORKLOAD_TYPES.DEPLOYMENT) || !!(type === WORKLOAD_TYPES.STATEFUL_SET);
 
+      options.global.mocks.$router = {
+        push: (route: any) => {
+          agentRoute = route;
+        }
+      };
+
       const resources = agentResources.reduce((acc, r) => {
         const agent = {
           metadata: { state: { error } },
@@ -204,7 +211,12 @@ describe('page: cluster dashboard', () => {
 
       expect(box.element).toBeDefined();
       expect(box.element.classList).toContain(status);
+      expect(!!(box.element as any).$_popper).toBe(clickable);
       expect(icon.element.classList).toContain(iconClass);
+
+      await box.trigger('click');
+
+      expect(!!agentRoute).toBe(clickable);
     });
   });