@rancher/shell 2.0.2-rc.1 → 2.0.3

package/models/cloudcredential.js

@@ -1,11 +1,65 @@
-import { CAPI } from '@shell/config/labels-annotations';
+import { CAPI, CLOUD_CREDENTIALS } from '@shell/config/labels-annotations';
 import { fullFields, prefixFields, simplify, suffixFields } from '@shell/store/plugins';
 import { isEmpty, set } from '@shell/utils/object';
-import { SECRET } from '@shell/config/types';
+import { MANAGEMENT, SECRET } from '@shell/config/types';
 import { escapeHtml } from '@shell/utils/string';
 import NormanModel from '@shell/plugins/steve/norman-class';
+import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+import day from 'dayjs';
+
+const harvesterProvider = 'harvester';
+
+const renew = {
+  [harvesterProvider]: {
+    renew: ({ cloudCredential, $ctx }) => {
+      return renew[harvesterProvider].renewBulk(
+        { cloudCredentials: [cloudCredential], $ctx }
+      );
+    },
+    renewBulk: async({ cloudCredentials, $ctx }) => {
+      // A harvester cloud credential (at the moment) is a kubeconfig complete with expiring token
+      // So to renew we just need to generate a new kubeconfig and save it to the cc (similar to shell/cloud-credential/harvester.vue)
+      await Promise.all(cloudCredentials.map(async(cc) => {
+        try {
+          if (!cc.harvestercredentialConfig?.clusterId) {
+            throw new Error(`credential has no matching harvester cluster`);
+          }
+          const mgmtCluster = $ctx.rootGetters['management/byId'](MANAGEMENT.CLUSTER, cc.harvestercredentialConfig.clusterId);
+
+          if (!mgmtCluster) {
+            throw new Error(`cannot find harvester cluster`);
+          }
+
+          const kubeconfigContent = await mgmtCluster.generateKubeConfig();
+
+          cc.setData('kubeconfigContent', kubeconfigContent);
+
+          await cc.save();
+        } catch (error) {
+          console.error(`Unable to refresh harvester cloud credential '${ cc.id }'`, error); // eslint-disable-line no-console
+        }
+      }));
+    }
+  }
+};
 
 export default class CloudCredential extends NormanModel {
+  get _availableActions() {
+    const out = super._availableActions;
+
+    out.splice(0, 0, { divider: true });
+    out.splice(0, 0, {
+      action:     'renew',
+      enabled:    this.canRenew,
+      bulkable:   this.canBulkRenew,
+      bulkAction: 'renewBulk',
+      icon:       'icon icon-fw icon-refresh',
+      label:      this.t('manager.cloudCredentials.renew'),
+    });
+
+    return out;
+  }
+
   get hasSensitiveData() {
     return true;
   }
@@ -177,4 +231,107 @@ export default class CloudCredential extends NormanModel {
   get doneRoute() {
     return 'c-cluster-manager-secret';
   }
+
+  get canRenew() {
+    return !!renew[this.provider]?.renew && this.expires !== undefined && this.canUpdate;
+  }
+
+  get canBulkRenew() {
+    return !!renew[this.provider]?.renewBulk;
+  }
+
+  get expiresForSort() {
+    // Why not just `expires`?
+    // Ensures the correct sort order:
+    // 'expired' --> 'expiring soon' --> 'never expires'
+    return this.expires !== undefined ? this.expires : Number.MAX_SAFE_INTEGER;
+  }
+
+  get expires() {
+    const expires = this.annotations[CLOUD_CREDENTIALS.EXPIRATION];
+
+    if (typeof expires === 'string') {
+      return parseInt(expires);
+    } else if (typeof expires === 'number') {
+      return expires;
+    }
+
+    return undefined; // Weird things happen if this isn't a number
+  }
+
+  get expireData() {
+    if (typeof this.expiresIn !== 'number') {
+      return null;
+    }
+
+    const sevenDays = 1000 * 60 * 60 * 24 * 7;
+
+    if (this.expiresIn === 0) {
+      return {
+        expired:  true,
+        expiring: false,
+      };
+    } else if (this.expiresIn < sevenDays) {
+      return {
+        expired:  false,
+        expiring: true,
+      };
+    }
+
+    return null;
+  }
+
+  get expiresString() {
+    if (this.expires === undefined) {
+      return '';
+    }
+
+    if (this.expireData.expired) {
+      return this.t('manager.cloudCredentials.expired');
+    }
+
+    const dateFormat = escapeHtml( this.$rootGetters['prefs/get'](DATE_FORMAT));
+    const timeFormat = escapeHtml( this.$rootGetters['prefs/get'](TIME_FORMAT));
+
+    return day(this.expires).format(`${ dateFormat } ${ timeFormat }`);
+  }
+
+  get expiresIn() {
+    if (this.expires === undefined) {
+      return null;
+    }
+
+    const timeThen = this.expires;
+    const timeNow = Date.now();
+
+    const expiresIn = timeThen - timeNow;
+
+    return expiresIn < 0 ? 0 : expiresIn;
+  }
+
+  renew() {
+    const renewFn = renew[this.provider]?.renew;
+
+    if (!renewFn) {
+      console.error('No fn renew function for ', this.provider); // eslint-disable-line no-console
+    }
+
+    return renewFn({
+      cloudCredential: this,
+      $ctx:            this.$ctx
+    });
+  }
+
+  async renewBulk(cloudCredentials = []) {
+    const renewBulkFn = renew[this.provider]?.renewBulk;
+
+    if (!renewBulkFn) {
+      console.error('No fn renew bulk function for ', this.provider); // eslint-disable-line no-console
+    }
+
+    return renewBulkFn({
+      cloudCredentials,
+      $ctx: this.$ctx
+    });
+  }
 }

package/models/fleet.cattle.io.bundle.js

@@ -30,7 +30,9 @@ export default class FleetBundle extends SteveModel {
   }
 
   get repoName() {
-    return this.metadata.labels['fleet.cattle.io/repo-name'];
+    const labels = this.metadata?.labels || {};
+
+    return labels['fleet.cattle.io/repo-name'];
   }
 
   get targetClusters() {

package/models/fleet.cattle.io.gitrepo.js

@@ -1,16 +1,17 @@
 import Vue from 'vue';
 import { convert, matching, convertSelectorObj } from '@shell/utils/selector';
 import jsyaml from 'js-yaml';
-import { escapeHtml, randomStr } from '@shell/utils/string';
+import { escapeHtml } from '@shell/utils/string';
 import { FLEET } from '@shell/config/types';
 import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { addObject, addObjects, findBy, insertAt } from '@shell/utils/array';
 import { set } from '@shell/utils/object';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import {
-  STATES_ENUM, colorForState, mapStateToEnum, primaryDisplayStatusFromCount, stateDisplay, stateSort
+  colorForState, mapStateToEnum, primaryDisplayStatusFromCount, stateDisplay, stateSort
 } from '@shell/plugins/dashboard-store/resource-class';
 import { NAME } from '@shell/config/product/explorer';
+import FleetUtils from '@shell/utils/fleet';
 
 function quacksLikeAHash(str) {
   if (str.match(/^[a-f0-9]{40,}$/i)) {
@@ -308,20 +309,11 @@ export default class GitRepo extends SteveModel {
       bundle.namespacedName.startsWith(`${ this.namespace }:${ this.name }`));
   }
 
+  /**
+   * Bundles with state of active
+   */
   get bundlesReady() {
-    if (this.bundles && this.bundles.length) {
-      return this.bundles.filter((bundle) => bundle.state === 'active');
-    }
-
-    return 0;
-  }
-
-  get targetClustersReady() {
-    if (this.targetClusters && this.targetClusters.length) {
-      return this.targetClusters.filter((cluster) => cluster.state === 'active');
-    }
-
-    return 0;
+    return this.bundles?.filter((bundle) => bundle.state === 'active');
   }
 
   get bundleDeployments() {
@@ -331,35 +323,29 @@ export default class GitRepo extends SteveModel {
   }
 
   get resourcesStatuses() {
-    const clusters = this.targetClusters || [];
-    const resources = this.status?.resources || [];
-    const conditions = this.status?.conditions || [];
+    const bundleDeployments = this.bundleDeployments || [];
+    const clusters = (this.targetClusters || []).reduce((res, c) => {
+      res[c.id] = c;
 
-    const out = [];
+      return res;
+    }, {});
 
-    for (const c of clusters) {
-      const clusterBundleDeploymentResources = this.bundleDeployments
-        .find((bd) => bd.metadata?.labels?.[FLEET_ANNOTATIONS.CLUSTER] === c.metadata.name)
-        ?.status?.resources || [];
+    const out = [];
 
-      resources.forEach((r, i) => {
-        let namespacedName = r.name;
+    for (const bd of bundleDeployments) {
+      const clusterId = FleetUtils.clusterIdFromBundleDeploymentLabels(bd.metadata?.labels);
+      const c = clusters[clusterId];
 
-        if (r.namespace) {
-          namespacedName = `${ r.namespace }:${ r.name }`;
-        }
+      if (!c) {
+        continue;
+      }
 
-        let state = r.state;
-        const perEntry = r.perClusterState?.find((x) => x.clusterId === c.id);
-        const tooMany = r.perClusterState?.length >= 10 || false;
+      const resources = FleetUtils.resourcesFromBundleDeploymentStatus(bd.status);
 
-        if (perEntry) {
-          state = perEntry.state;
-        } else if (tooMany) {
-          state = STATES_ENUM.UNKNOWN;
-        } else {
-          state = STATES_ENUM.READY;
-        }
+      resources.forEach((r) => {
+        const id = FleetUtils.resourceId(r);
+        const type = FleetUtils.resourceType(r);
+        const state = r.state;
 
         const color = colorForState(state).replace('text-', 'bg-');
         const display = stateDisplay(state);
@@ -369,33 +355,38 @@ export default class GitRepo extends SteveModel {
           params: {
             product:   NAME,
             cluster:   c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
-            resource:  r.type,
+            resource:  type,
             namespace: r.namespace,
             id:        r.name,
           }
         };
 
+        const key = `${ c.id }-${ type }-${ r.namespace }-${ r.name }`;
+
         out.push({
-          key:                    `${ r.id }-${ c.id }-${ r.type }-${ r.namespace }-${ r.name }`,
-          tableKey:               `${ r.id }-${ c.id }-${ r.type }-${ r.namespace }-${ r.name }-${ randomStr(8) }`,
-          kind:                   r.kind,
-          apiVersion:             r.apiVersion,
-          type:                   r.type,
-          id:                     r.id,
-          namespace:              r.namespace,
-          name:                   r.name,
-          clusterId:              c.id,
-          clusterLabel:           c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
-          clusterName:            c.nameDisplay,
-          state:                  mapStateToEnum(state),
-          stateBackground:        color,
-          stateDisplay:           display,
-          stateSort:              stateSort(color, display),
-          namespacedName,
+          key,
+          tableKey: key,
+
+          // Needed?
+          id,
+          type,
+          clusterId: c.id,
+
+          // columns, see FleetResources.vue
+          state:             mapStateToEnum(state),
+          clusterName:       c.nameDisplay,
+          apiVersion:        r.apiVersion,
+          kind:              r.kind,
+          name:              r.name,
+          namespace:         r.namespace,
+          creationTimestamp: r.createdAt,
+
+          // other properties
+          clusterLabel:    c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
+          stateBackground: color,
+          stateDisplay:    display,
+          stateSort:       stateSort(color, display),
           detailLocation,
-          conditions:             conditions[i],
-          bundleDeploymentStatus: clusterBundleDeploymentResources?.[i],
-          creationTimestamp:      clusterBundleDeploymentResources?.[i]?.createdAt
         });
       });
     }
@@ -416,9 +407,7 @@ export default class GitRepo extends SteveModel {
 
   get clusterResourceStatus() {
     const clusterStatuses = this.resourcesStatuses.reduce((prev, curr) => {
-      const { clusterId, clusterLabel } = curr;
-
-      const state = curr.state;
+      const { clusterId, clusterLabel, state } = curr;
 
       if (!prev[clusterId]) {
         prev[clusterId] = {

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

@@ -16,6 +16,8 @@ import { KONTAINER_TO_DRIVER } from './management.cattle.io.kontainerdriver';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
 import { copyTextToClipboard } from '@shell/utils/clipboard';
 
+const DEFAULT_BADGE_COLOR = '#707070';
+
 // See translation file cluster.providers for list of providers
 // If the logo is not named with the provider name, add an override here
 const PROVIDER_LOGO_OVERRIDE = {};
@@ -88,10 +90,6 @@ export default class MgmtCluster extends SteveModel {
   }
 
   get provisioner() {
-    if (this.status?.provider ) {
-      return this.status.provider;
-    }
-
     // For imported K3s clusters, this.status.driver is 'k3s.'
     return this.status?.driver ? this.status.driver : 'imported';
   }
@@ -115,7 +113,8 @@ export default class MgmtCluster extends SteveModel {
   get providerForEmberParam() {
     // Ember wants one word called provider to tell what component to show, but has much indirect mapping to figure out what it is.
     let provider;
-    // Provisioner is the "<something>Config" in the model
+
+    //  provisioner is status.driver
     const provisioner = KONTAINER_TO_DRIVER[(this.provisioner || '').toLowerCase()] || this.provisioner;
 
     if ( provisioner === 'rancherKubernetesEngine' ) {
@@ -306,13 +305,22 @@ export default class MgmtCluster extends SteveModel {
       return undefined;
     }
 
-    const color = this.metadata?.annotations[CLUSTER_BADGE.COLOR] || '#7f7f7f';
+    let color = this.metadata?.annotations[CLUSTER_BADGE.COLOR] || DEFAULT_BADGE_COLOR;
     const iconText = this.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || '';
+    let foregroundColor;
+
+    try {
+      foregroundColor = textColor(parseColor(color.trim())); // Remove any whitespace
+    } catch (_e) {
+      // If we could not parse the badge color, use the defaults
+      color = DEFAULT_BADGE_COLOR;
+      foregroundColor = textColor(parseColor(color));
+    }
 
     return {
       text:      comment || undefined,
       color,
-      textColor: textColor(parseColor(color)),
+      textColor: foregroundColor,
       iconText:  iconText.substr(0, 3)
     };
   }

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

@@ -10,7 +10,6 @@ import { compare } from '@shell/utils/version';
 import { AS, MODE, _VIEW, _YAML } from '@shell/config/query-params';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { CAPI as CAPI_ANNOTATIONS, NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
-import capitalize from 'lodash/capitalize';
 
 /**
  * Class representing Cluster resource.
@@ -166,6 +165,19 @@ export default class ProvCluster extends SteveModel {
         enabled: canSaveRKETemplate,
       }, { divider: true }];
 
+    // Harvester Cluster 1:1 Harvester Cloud Cred
+    if (this.cloudCredential?.canRenew || this.cloudCredential?.canBulkRenew) {
+      out.splice(0, 0, { divider: true });
+      out.splice(0, 0, {
+        action:     'renew',
+        enabled:    this.cloudCredential?.canRenew,
+        bulkable:   this.cloudCredential?.canBulkRenew,
+        bulkAction: 'renewBulk',
+        icon:       'icon icon-fw icon-refresh',
+        label:      this.$rootGetters['i18n/t']('cluster.cloudCredentials.renew'),
+      });
+    }
+
     return actions.concat(out);
   }
 
@@ -270,19 +282,29 @@ export default class ProvCluster extends SteveModel {
   }
 
   get isImported() {
-    // As of Rancher v2.6.7, this returns false for imported K3s clusters,
-    // in which this.provisioner is `k3s`.
+    if (this.isLocal) {
+      return false;
+    }
 
-    const isImportedProvisioner = this.provisioner === 'imported';
-    const isImportedSpecialCases = this.mgmt?.providerForEmberParam === 'import' ||
-      // when imported cluster is GKE
-      !!this.mgmt?.spec?.gkeConfig?.imported ||
-      // or AKS
-      !!this.mgmt?.spec?.aksConfig?.imported ||
-      // or EKS
-      !!this.mgmt?.spec?.eksConfig?.imported;
+    // imported rke2 and k3s have status.driver === rke2 and k3s respectively
+    // Provisioned rke2 and k3s have status.driver === imported
+    if (this.mgmt?.status?.provider === 'k3s' || this.mgmt?.status?.provider === 'rke2') {
+      return this.mgmt?.status?.driver === this.mgmt?.status?.provider;
+    }
+
+    // imported KEv2
+    // we can't rely on this.provisioner to determine imported-ness for these clusters, as it will return 'aks' 'eks' 'gke' for both provisioned and imported clusters
+    const kontainerConfigs = ['aksConfig', 'eksConfig', 'gkeConfig'];
+
+    const isImportedKontainer = kontainerConfigs.filter((key) => {
+      return this.mgmt?.spec?.[key]?.imported === true;
+    }).length;
+
+    if (isImportedKontainer) {
+      return true;
+    }
 
-    return !this.isLocal && (isImportedProvisioner || (!this.isRke2 && !this.mgmt?.machineProvider && isImportedSpecialCases));
+    return this.provisioner === 'imported';
   }
 
   get isCustom() {
@@ -318,7 +340,8 @@ export default class ProvCluster extends SteveModel {
   }
 
   get isRke1() {
-    return !!this.mgmt?.spec?.rancherKubernetesEngineConfig || this.labels['provider.cattle.io'] === 'rke';
+    // rancherKubernetesEngineConfig is not defined on imported RKE1 clusters
+    return !!this.mgmt?.spec?.rancherKubernetesEngineConfig || this.mgmt?.labels['provider.cattle.io'] === 'rke';
   }
 
   get isHarvester() {
@@ -395,6 +418,8 @@ export default class ProvCluster extends SteveModel {
       provisioner = 'k3s';
     } else if ( this.isImportedRke2 ) {
       provisioner = 'rke2';
+    } else if ((this.isImported || this.isLocal) && this.isRke1) {
+      provisioner = 'rke';
     }
 
     return this.$rootGetters['i18n/withFallback'](`cluster.provider."${ provisioner }"`, null, ucFirst(provisioner));
@@ -411,7 +436,7 @@ export default class ProvCluster extends SteveModel {
       if (!node.metadata?.state?.transitioning) {
         const architecture = node.status?.nodeLabels?.[NODE_ARCHITECTURE];
 
-        const key = architecture ? capitalize(architecture) : this.t('cluster.architecture.label.unknown');
+        const key = architecture || this.t('cluster.architecture.label.unknown');
 
         obj[key] = (obj[key] || 0) + 1;
       }
@@ -885,7 +910,8 @@ export default class ProvCluster extends SteveModel {
   get agentConfig() {
     // The one we want is the first one with no selector.
     // If there are multiple with no selector, that will fall under the unsupported message below.
-    return this.spec.rkeConfig.machineSelectorConfig.find((x) => !x.machineLabelSelector)?.config;
+    return this.spec.rkeConfig?.machineSelectorConfig
+      ?.find((x) => !x.machineLabelSelector)?.config || { };
   }
 
   get cloudProvider() {
@@ -990,4 +1016,25 @@ export default class ProvCluster extends SteveModel {
   get description() {
     return super.description || this.mgmt?.description;
   }
+
+  renew() {
+    return this.cloudCredential?.renew();
+  }
+
+  renewBulk(clusters = []) {
+    // In theory we don't need to filter by cloudCred, but do so for safety
+    const cloudCredentials = clusters.filter((c) => c.cloudCredential).map((c) => c.cloudCredential);
+
+    return this.cloudCredential?.renewBulk(cloudCredentials);
+  }
+
+  get cloudCredential() {
+    return this.$rootGetters['rancher/all'](NORMAN.CLOUD_CREDENTIAL).find((cc) => cc.id === this.spec.cloudCredentialSecretName);
+  }
+
+  get cloudCredentialWarning() {
+    const expireData = this.cloudCredential?.expireData;
+
+    return expireData?.expired || expireData?.expiring;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "2.0.2-rc.1",
+  "version": "2.0.3",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/c/_cluster/apps/charts/install.vue

@@ -302,8 +302,9 @@ export default {
         */
         userValues = diff(this.loadedVersionValues, this.chartValues);
       } else if ( this.existing ) {
+        await this.existing.fetchValues(); // In theory this has already been called, but do again to be safe
         /* For an already installed app, use the values from the previous install. */
-        userValues = clone(this.existing.spec?.values || {});
+        userValues = clone(this.existing.values || {});
       } else {
         /* For an new app, start empty. */
         userValues = {};

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

@@ -163,7 +163,7 @@ describe('page: cluster dashboard', () => {
       ['created', 'glance.created', []],
       ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { [NODE_ARCHITECTURE]: 'intel' } }]],
       ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { } }]],
-      ['architecture', 'Amd64', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }]],
+      ['architecture', 'amd64', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }]],
       ['architecture', 'unknown', [{ labels: { } }]],
       ['architecture', '—', [{ metadata: { state: { transitioning: true } } }]],
     ])('should show %p label %p', (label, text, nodes) => {

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

@@ -47,7 +47,6 @@ import Certificates from '@shell/components/Certificates';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import TabTitle from '@shell/components/TabTitle';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
-import capitalize from 'lodash/capitalize';
 import paginationUtils from '@shell/utils/pagination-utils';
 
 export const RESOURCES = [NAMESPACE, INGRESS, PV, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.STATEFUL_SET, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.DAEMON_SET, SERVICE];
@@ -216,7 +215,7 @@ export default {
         if (!node.metadata?.state?.transitioning) {
           const architecture = node.labels?.[NODE_ARCHITECTURE];
 
-          const key = architecture ? capitalize(architecture) : this.t('cluster.architecture.label.unknown');
+          const key = architecture || this.t('cluster.architecture.label.unknown');
 
           obj[key] = (obj[key] || 0) + 1;
         }

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

@@ -12,6 +12,7 @@ import { WORKSPACE_ANNOTATION } from '@shell/config/labels-annotations';
 import { filterBy } from '@shell/utils/array';
 import FleetNoWorkspaces from '@shell/components/fleet/FleetNoWorkspaces.vue';
 import { NAME } from '@shell/config/product/fleet';
+import { xOfy } from '@shell/utils/string';
 
 export default {
   name:       'FleetDashboard',
@@ -39,6 +40,7 @@ export default {
       allBundles: {
         inStoreType: 'management',
         type:        FLEET.BUNDLE,
+        opt:         { excludeFields: ['metadata.managedFields', 'spec.resources'] },
       },
       gitRepos: {
         inStoreType: 'management',
@@ -175,7 +177,12 @@ export default {
       }
 
       if (area === 'clusters') {
-        group = row.targetClusters;
+        if (row.clusterInfo?.ready === row.clusterInfo?.total && row.clusterInfo?.ready) {
+          return {
+            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
+            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
+          };
+        }
       } else if (area === 'bundles') {
         group = row.bundles;
       } else if (area === 'resources') {
@@ -223,7 +230,7 @@ export default {
       }
 
       if (area === 'clusters') {
-        group = row.targetClusters;
+        group = '';
       } else if (area === 'bundles') {
         group = row.bundles;
       } else if (area === 'resources') {
@@ -262,11 +269,11 @@ export default {
       }
 
       if (area === 'clusters') {
-        value = `${ row.targetClustersReady?.length || '0' }/${ row.targetClusters?.length || '?' }`;
+        return `${ row.clusterInfo.ready }/${ row.clusterInfo.total }`;
       } else if (area === 'bundles') {
-        value = `${ row.bundlesReady?.length || '0' }/${ row.bundles?.length || '?' }`;
+        value = xOfy(row.bundlesReady?.length, row.bundles?.length);
       } else if (area === 'resources') {
-        value = `${ row.status?.resourceCounts?.ready || '0' }/${ row.status?.resourceCounts?.desiredReady || '?' }`;
+        value = xOfy(row.status?.resourceCounts?.ready, row.status?.resourceCounts?.desiredReady);
       }
 
       return value;