@rancher/shell 3.0.1-rc.4 → 3.0.1

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/provisioning.cattle.io.cluster.js

@@ -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.4",
+  "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",
@@ -160,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": {

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/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);
     });
   });
 

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

@@ -125,6 +125,13 @@ export default {
       ROLES,
     ];
 
+    const clusterServiceIcons = {
+      [STATES_ENUM.IN_PROGRESS]: 'icon-spinner icon-spin',
+      [STATES_ENUM.HEALTHY]:     'icon-checkmark',
+      [STATES_ENUM.WARNING]:     'icon-warning',
+      [STATES_ENUM.UNHEALTHY]:   'icon-warning',
+    };
+
     return {
       nodeHeaders,
       constraints:        [],
@@ -148,6 +155,7 @@ export default {
       clusterCounts,
       selectedTab:        'cluster-events',
       extensionCards:     getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
+      clusterServiceIcons,
     };
   },
 
@@ -283,52 +291,51 @@ export default {
     clusterServices() {
       const services = [];
 
-      CLUSTER_COMPONENTS.forEach((cs) => {
+      CLUSTER_COMPONENTS.forEach((name) => {
+        const component = this.getComponentStatus(name);
+
         services.push({
-          name:     cs,
-          status:   this.getComponentStatus(cs),
-          labelKey: `clusterIndexPage.sections.componentStatus.${ cs }`,
+          name,
+          status:   component.state,
+          labelKey: `clusterIndexPage.sections.componentStatus.component.${ name }.label`,
+          icon:     this.clusterServiceIcons[component.state],
+          tooltip:  component.tooltip,
+          goTo:     () => null,
         });
       });
 
       if (this.cattleAgentNamespace) {
         services.push({
           name:     'cattle',
-          status:   this.cattleStatus,
-          labelKey: 'clusterIndexPage.sections.componentStatus.cattle',
+          status:   this.cattleAgent.state,
+          labelKey: 'clusterIndexPage.sections.componentStatus.component.cattle.label',
+          icon:     this.clusterServiceIcons[this.cattleAgent.state],
+          tooltip:  this.cattleAgent.tooltip,
+          goTo:     () => this.goToClusterService(this.cattleAgent),
         });
       }
 
       if (this.fleetAgentNamespace) {
         services.push({
           name:     'fleet',
-          status:   this.fleetStatus,
-          labelKey: 'clusterIndexPage.sections.componentStatus.fleet',
+          status:   this.fleetAgent.state,
+          labelKey: 'clusterIndexPage.sections.componentStatus.component.fleet.label',
+          icon:     this.clusterServiceIcons[this.fleetAgent.state],
+          tooltip:  this.fleetAgent.tooltip,
+          goTo:     () => this.goToClusterService(this.fleetAgent),
         });
       }
 
       return services;
     },
 
-    cattleStatus() {
-      const resource = this.cattleDeployment;
-
-      if (resource === 'loading') {
-        return STATES_ENUM.IN_PROGRESS;
-      }
-
-      if (!resource || this.disconnected || resource.status.conditions?.find((c) => c.status !== 'True') || resource.metadata.state?.error) {
-        return STATES_ENUM.UNHEALTHY;
-      }
-
-      if (resource.spec.replicas !== resource.status.readyReplicas || resource.status.unavailableReplicas > 0) {
-        return STATES_ENUM.WARNING;
-      }
+    cattleAgent() {
+      const resources = [this.cattleDeployment];
 
-      return STATES_ENUM.HEALTHY;
+      return this.getAgentStatus(resources, { checkDisconnected: true });
     },
 
-    fleetStatus() {
+    fleetAgent() {
       const resources = this.currentCluster.isLocal ? [
         /**
          * 'fleetStatefulSet' could take a while to be created by rancher.
@@ -339,23 +346,7 @@ export default {
         this.fleetStatefulSet
       ];
 
-      if (resources.find((r) => r === 'loading')) {
-        return STATES_ENUM.IN_PROGRESS;
-      }
-
-      for (const resource of resources) {
-        if (!resource || resource.status.conditions?.find((c) => c.status !== 'True') || resource.metadata.state?.error) {
-          return STATES_ENUM.UNHEALTHY;
-        }
-      }
-
-      for (const resource of resources) {
-        if (resource.spec.replicas !== resource.status.readyReplicas || resource.status.unavailableReplicas > 0) {
-          return STATES_ENUM.WARNING;
-        }
-      }
-
-      return STATES_ENUM.HEALTHY;
+      return this.getAgentStatus(resources);
     },
 
     totalCountGaugeInput() {
@@ -532,25 +523,61 @@ export default {
       }
     },
 
+    getAgentStatus(resources, opt = { checkDisconnected: false }) {
+      if (resources.find((resource) => resource === 'loading')) {
+        return { state: STATES_ENUM.IN_PROGRESS };
+      }
+
+      for (const resource of resources) {
+        if (
+          !resource ||
+          (opt.checkDisconnected && this.disconnected) || // cattle
+          resource.status.conditions?.find((c) => c.status !== 'True') ||
+          resource.metadata.state?.error
+        ) {
+          return {
+            resource,
+            tooltip: resource?.stateDescription || this.t(`clusterIndexPage.sections.componentStatus.tooltip.disconnected`),
+            state:   STATES_ENUM.UNHEALTHY,
+          };
+        }
+      }
+
+      for (const resource of resources) {
+        if (resource.spec.replicas !== resource.status.readyReplicas || resource.status.unavailableReplicas > 0) {
+          return {
+            resource,
+            tooltip: resource?.stateDescription || this.t(`clusterIndexPage.sections.componentStatus.tooltip.unavailableReplicas`),
+            state:   STATES_ENUM.WARNING,
+          };
+        }
+      }
+
+      return { state: STATES_ENUM.HEALTHY };
+    },
+
     getComponentStatus(field) {
       const matching = (this.currentCluster?.status?.componentStatuses || []).filter((s) => s.name.startsWith(field));
 
       // If there's no matching component status, it's "healthy"
       if ( !matching.length ) {
-        return STATES_ENUM.HEALTHY;
+        return { state: STATES_ENUM.HEALTHY };
       }
 
-      const count = matching.reduce((acc, status) => {
-        const conditions = status.conditions.find((c) => c.status !== 'True');
+      const errorConditions = matching.reduce((acc, status) => {
+        const condition = status.conditions.find((c) => c.status !== 'True');
 
-        return !conditions ? acc : acc + 1;
-      }, 0);
+        return !condition ? acc : [...acc, condition];
+      }, []);
 
-      if (count > 0) {
-        return STATES_ENUM.UNHEALTHY;
+      if (errorConditions.length > 0) {
+        return {
+          tooltip: errorConditions[0].message,
+          state:   STATES_ENUM.UNHEALTHY
+        };
       }
 
-      return STATES_ENUM.HEALTHY;
+      return { state: STATES_ENUM.HEALTHY };
     },
 
     showActions() {
@@ -578,6 +605,23 @@ export default {
         await provCluster.goToHarvesterCluster();
       } catch {
       }
+    },
+
+    goToClusterService(agent) {
+      if (!agent.resource || agent.state === STATES_ENUM.HEALTHY) {
+        return;
+      }
+
+      this.$router.push({
+        name:   'c-cluster-product-resource-namespace-id',
+        params: {
+          cluster:   this.currentCluster.id,
+          product:   'explorer',
+          resource:  agent.resource.type,
+          namespace: agent.resource.metadata.namespace,
+          id:        agent.resource.metadata.name,
+        }
+      });
     }
   },
 };
@@ -722,21 +766,15 @@ export default {
       <div
         v-for="(service, i) in clusterServices"
         :key="i"
+        v-clean-tooltip="service.tooltip"
         class="k8s-service-status"
         :class="{[service.status]: true }"
         :data-testid="`k8s-service-${ service.name }`"
+        @click="service.goTo"
       >
         <i
-          v-if="service.status === STATES_ENUM.IN_PROGRESS"
-          class="icon icon-spinner icon-spin"
-        />
-        <i
-          v-else-if="service.status === STATES_ENUM.HEALTHY"
-          class="icon icon-checkmark"
-        />
-        <i
-          v-else
-          class="icon icon-warning"
+          class="icon"
+          :class="service.icon"
         />
         <div class="label">
           {{ t(service.labelKey) }}
@@ -948,6 +986,7 @@ export default {
 
   &.unhealthy {
     border-color: var(--error-border);
+    cursor: pointer;
 
     > I {
       color: var(--error)
@@ -955,6 +994,8 @@ export default {
   }
 
   &.warning {
+    cursor: pointer;
+
     > I {
       color: var(--warning)
     }