@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.3

package/models/catalog.cattle.io.clusterrepo.js

@@ -2,6 +2,7 @@ import { parse } from '@shell/utils/url';
 import { CATALOG } from '@shell/config/labels-annotations';
 import { insertAt } from '@shell/utils/array';
 import { CATALOG as CATALOG_TYPE } from '@shell/config/types';
+import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 
 import SteveModel from '@shell/plugins/steve/steve-class';
 
@@ -12,18 +13,40 @@ export default class ClusterRepo extends SteveModel {
     }
   }
 
+  get _isClusterRepoDisabled() {
+    return this.spec?.enabled === false;
+  }
+
   get _availableActions() {
     const out = super._availableActions;
 
     insertAt(out, 0, { divider: true });
 
-    insertAt(out, 0, {
-      action:   'refresh',
-      label:    this.t('action.refresh'),
-      icon:     'icon icon-refresh',
-      enabled:  !!this.links.update,
-      bulkable: true,
-    });
+    if (this._isClusterRepoDisabled) {
+      insertAt(out, 1, {
+        action:   'enableClusterRepo',
+        label:    this.t('action.enable'),
+        icon:     'icon icon-play',
+        enabled:  true,
+        bulkable: true,
+      });
+    } else {
+      insertAt(out, 1, {
+        action:   'disableClusterRepo',
+        label:    this.t('action.disable'),
+        icon:     'icon icon-pause',
+        enabled:  true,
+        bulkable: true,
+      });
+
+      insertAt(out, 0, {
+        action:   'refresh',
+        label:    this.t('action.refresh'),
+        icon:     'icon icon-refresh',
+        enabled:  !!this.links.update,
+        bulkable: true,
+      });
+    }
 
     return out;
   }
@@ -39,6 +62,16 @@ export default class ClusterRepo extends SteveModel {
     this.$dispatch('catalog/load', { force: true, reset: true }, { root: true });
   }
 
+  async disableClusterRepo() {
+    this.spec.enabled = false;
+    await this.save();
+  }
+
+  async enableClusterRepo() {
+    this.spec.enabled = true;
+    await this.save();
+  }
+
   get isGit() {
     return !!this.spec?.gitRepo;
   }
@@ -157,6 +190,22 @@ export default class ClusterRepo extends SteveModel {
     } : undefined;
   }
 
+  get stateDisplay() {
+    if (this._isClusterRepoDisabled) {
+      return this.t('generic.disabled');
+    } else {
+      return stateDisplay(this.state);
+    }
+  }
+
+  get stateBackground() {
+    if (this._isClusterRepoDisabled) {
+      return 'badge-disabled';
+    } else {
+      return colorForState(this.state, this.stateObj?.error, this.stateObj?.transitioning).replace('text-', 'bg-');
+    }
+  }
+
   waitForOperation(operationId, timeout, interval = 2000) {
     return this.waitForTestFn(() => {
       if (!this.$getters['schemaFor'](CATALOG_TYPE.OPERATION)) {

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

@@ -6,17 +6,6 @@ import { FLEET } from '@shell/config/types';
 import { convertSelectorObj, matching } from '@shell/utils/selector';
 
 export default class FleetBundle extends SteveModel {
-  get deploymentInfo() {
-    const ready = this.status?.summary?.ready || 0;
-    const total = this.status?.summary?.desiredReady || 0;
-
-    return {
-      ready,
-      unready: total - ready,
-      total
-    };
-  }
-
   get lastUpdateTime() {
     return this.status?.conditions?.[0].lastUpdateTime;
   }

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

@@ -1,5 +1,5 @@
 import { LOCAL_CLUSTER, MANAGEMENT, NORMAN } from '@shell/config/types';
-import { CAPI, FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
+import { CAPI, FLEET as FLEET_LABELS, SYSTEM_LABELS } from '@shell/config/labels-annotations';
 import { _RKE2 } from '@shell/store/prefs';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { escapeHtml } from '@shell/utils/string';
@@ -190,6 +190,22 @@ export default class FleetCluster extends SteveModel {
     }
   }
 
+  get customLabels() {
+    const parsedLabels = [];
+
+    if (this.labels) {
+      for (const k in this.labels) {
+        const [prefix] = k.split('/');
+
+        if (!SYSTEM_LABELS.includes(prefix) && k !== CAPI.PROVIDER) {
+          parsedLabels.push(`${ k }=${ this.labels[k] }`);
+        }
+      }
+    }
+
+    return parsedLabels;
+  }
+
   async saveYaml(yaml) {
     await this._saveYaml(yaml);
 

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

@@ -1,5 +1,6 @@
 import { convert, matching, convertSelectorObj } from '@shell/utils/selector';
 import jsyaml from 'js-yaml';
+import isEmpty from 'lodash/isEmpty';
 import { escapeHtml } from '@shell/utils/string';
 import { FLEET } from '@shell/config/types';
 import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
@@ -7,7 +8,7 @@ import { addObject, addObjects, findBy, insertAt } from '@shell/utils/array';
 import { set } from '@shell/utils/object';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import {
-  colorForState, mapStateToEnum, primaryDisplayStatusFromCount, stateDisplay, stateSort
+  colorForState, mapStateToEnum, primaryDisplayStatusFromCount, stateDisplay, STATES_ENUM, stateSort,
 } from '@shell/plugins/dashboard-store/resource-class';
 import { NAME } from '@shell/config/product/explorer';
 import FleetUtils from '@shell/utils/fleet';
@@ -20,6 +21,26 @@ function quacksLikeAHash(str) {
   return false;
 }
 
+function normalizeStateCounts(data) {
+  if (isEmpty(data)) {
+    return {
+      total:  0,
+      states: {},
+    };
+  }
+  const { desiredReady, ...rest } = data ;
+  const states = Object.entries(rest).reduce((res, [key, value]) => {
+    res[mapStateToEnum(key)] = value;
+
+    return res;
+  }, {});
+
+  return {
+    total: desiredReady,
+    states,
+  };
+}
+
 export default class GitRepo extends SteveModel {
   applyDefaults() {
     const spec = this.spec || {};
@@ -305,18 +326,7 @@ export default class GitRepo extends SteveModel {
   }
 
   get bundles() {
-    const all = this.$getters['all'](FLEET.BUNDLE);
-
-    return all.filter((bundle) => bundle.repoName === this.name &&
-      bundle.namespace === this.namespace &&
-      bundle.namespacedName.startsWith(`${ this.namespace }:${ this.name }`));
-  }
-
-  /**
-   * Bundles with state of active
-   */
-  get bundlesReady() {
-    return this.bundles?.filter((bundle) => bundle.state === 'active');
+    return this.$getters['matching'](FLEET.BUNDLE, { 'fleet.cattle.io/repo-name': this.name }, this.namespace);
   }
 
   get bundleDeployments() {
@@ -325,6 +335,65 @@ export default class GitRepo extends SteveModel {
     return bds.filter((bd) => bd.metadata?.labels?.['fleet.cattle.io/repo-name'] === this.name);
   }
 
+  get allBundlesStatuses() {
+    const bundleDeploymentCountsPerBundle = this.bundleDeployments.reduce((acc, bd) => {
+      const bundleId = FleetUtils.bundleIdFromBundleDeploymentLabels(bd.metadata?.labels);
+      const state = mapStateToEnum(FleetUtils.bundleDeploymentState(bd));
+
+      if (!acc[bundleId]) {
+        acc[bundleId] = {
+          total:  0,
+          states: { [STATES_ENUM.READY]: 0 },
+        };
+      }
+      acc[bundleId].total++;
+
+      if (!acc[bundleId].states[state]) {
+        acc[bundleId].states[state] = 0;
+      }
+      acc[bundleId].states[state]++;
+
+      return acc;
+    }, {});
+    const bundleIds = Object.keys(bundleDeploymentCountsPerBundle);
+
+    return bundleIds.reduce((acc, bundleId) => {
+      const state = primaryDisplayStatusFromCount(bundleDeploymentCountsPerBundle[bundleId].states);
+
+      if (!acc.states[state]) {
+        acc.states[state] = 0;
+      }
+      acc.states[state]++;
+
+      return acc;
+    }, { total: bundleIds.length, states: { [STATES_ENUM.READY]: 0 } } );
+  }
+
+  get allResourceStatuses() {
+    return normalizeStateCounts(this.status?.resourceCounts || {});
+  }
+
+  statusResourceCountsForCluster(clusterId) {
+    if (!this.targetClusters.some((c) => c.id === clusterId)) {
+      return {};
+    }
+
+    return this.bundleDeployments
+      .filter((bd) => FleetUtils.clusterIdFromBundleDeploymentLabels(bd.metadata?.labels) === clusterId)
+      .map((bd) => FleetUtils.resourcesFromBundleDeploymentStatus(bd.status))
+      .flat()
+      .map((r) => r.state)
+      .reduce((prev, state) => {
+        if (!prev[state]) {
+          prev[state] = 0;
+        }
+        prev[state]++;
+        prev.desiredReady++;
+
+        return prev;
+      }, { desiredReady: 0 });
+  }
+
   get resourcesStatuses() {
     const bundleDeployments = this.bundleDeployments || [];
     const clusters = (this.targetClusters || []).reduce((res, c) => {
@@ -357,7 +426,7 @@ export default class GitRepo extends SteveModel {
           name:   `c-cluster-product-resource${ r.namespace ? '-namespace' : '' }-id`,
           params: {
             product:   NAME,
-            cluster:   c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
+            cluster:   c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME], // explorer uses the "management" Cluster name, which differs from the Fleet Cluster name
             resource:  type,
             namespace: r.namespace,
             id:        r.name,
@@ -385,7 +454,6 @@ export default class GitRepo extends SteveModel {
           creationTimestamp: r.createdAt,
 
           // other properties
-          clusterLabel:    c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
           stateBackground: color,
           stateDisplay:    display,
           stateSort:       stateSort(color, display),
@@ -408,42 +476,10 @@ export default class GitRepo extends SteveModel {
     };
   }
 
-  get clusterResourceStatus() {
-    const clusterStatuses = this.resourcesStatuses.reduce((prev, curr) => {
-      const { clusterId, clusterLabel, state } = curr;
-
-      if (!prev[clusterId]) {
-        prev[clusterId] = {
-          clusterLabel,
-          resourceCounts: { [state]: 0, desiredReady: 0 }
-
-        };
-      }
-
-      if (!prev[clusterId].resourceCounts[state]) {
-        prev[clusterId].resourceCounts[state] = 0;
-      }
-
-      prev[clusterId].resourceCounts[state] += 1;
-      prev[clusterId].resourceCounts.desiredReady += 1;
-
-      return prev;
-    }, {});
-
-    const values = Object.keys(clusterStatuses).map((key) => {
-      const { clusterLabel, resourceCounts } = clusterStatuses[key];
-
-      return {
-        clusterId: key,
-        clusterLabel, // FLEET LABEL
-        status:    {
-          displayStatus:  primaryDisplayStatusFromCount(resourceCounts),
-          resourceCounts: { ...resourceCounts }
-        }
-      };
-    });
+  clusterState(clusterId) {
+    const resourceCounts = this.statusResourceCountsForCluster(clusterId);
 
-    return values;
+    return primaryDisplayStatusFromCount(resourceCounts) || STATES_ENUM.ACTIVE;
   }
 
   get clustersList() {

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

@@ -5,7 +5,7 @@ import SteveModel from '@shell/plugins/steve/steve-class';
 import { findBy } from '@shell/utils/array';
 import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
-import { ucFirst } from '@shell/utils/string';
+import { escapeHtml, ucFirst } from '@shell/utils/string';
 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';
@@ -178,7 +178,15 @@ export default class ProvCluster extends SteveModel {
       });
     }
 
-    return actions.concat(out);
+    const all = actions.concat(out);
+
+    // If we have a helper that wants to modify the available actions, let it do it
+    if (this.customProvisionerHelper?.availableActions) {
+      // Provider can either modify the provided list or return one of its own
+      return this.customProvisionerHelper?.availableActions(this, all) || all;
+    }
+
+    return all;
   }
 
   get normanCluster() {
@@ -401,6 +409,11 @@ export default class ProvCluster extends SteveModel {
   }
 
   get provisionerDisplay() {
+    // Allow a model extension to override the display of the provisioner
+    if (this.customProvisionerHelper?.provisionerDisplay) {
+      return this.customProvisionerHelper?.provisionerDisplay(this);
+    }
+
     let provisioner = (this.provisioner || '').toLowerCase();
 
     // RKE provisioner can actually do K3s too...
@@ -496,6 +509,10 @@ export default class ProvCluster extends SteveModel {
   }
 
   get machineProviderDisplay() {
+    if (this.customProvisionerHelper?.machineProviderDisplay) {
+      return this.customProvisionerHelper?.machineProviderDisplay(this);
+    }
+
     if ( this.isImported ) {
       return null;
     }
@@ -954,6 +971,34 @@ export default class ProvCluster extends SteveModel {
     if ( res?._status === 204 ) {
       await this.$dispatch('ws.resource.remove', { data: this });
     }
+
+    // If this cluster has a custom provisioner, allow it to do custom deletion
+    if (this.customProvisionerHelper?.postDelete) {
+      return this.customProvisionerHelper?.postDelete(this);
+    }
+  }
+
+  /**
+   * Get the custom provisioner helper for this model
+   */
+  get customProvisionerHelper() {
+    // Find the first model extension that says it can be used for this model
+    return this.modelExtensions.find((modelExt) => modelExt.useFor ? modelExt.useFor(this) : false);
+  }
+
+  get groupByParent() {
+    // Customer helper can report if the cluster has a parent cluster
+    return this.customProvisionerHelper?.parentCluster?.(this);
+  }
+
+  get groupByLabel() {
+    const name = this.groupByParent;
+
+    if (name) {
+      return this.$rootGetters['i18n/t']('resourceTable.groupLabel.cluster', { name: escapeHtml(name) });
+    } else {
+      return this.$rootGetters['i18n/t']('resourceTable.groupLabel.notInACluster');
+    }
   }
 
   get hasError() {

package/models/service.js

@@ -138,6 +138,7 @@ export default class extends SteveModel {
 
   async fetchPods() {
     if (this.podRelationship) {
+      // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
       await this.$dispatch('cluster/findMatching', {
         type:      POD,
         selector:  this.podRelationship.selector,

package/models/workload.js

@@ -554,6 +554,7 @@ export default class Workload extends WorkloadService {
     if (podRelationship) {
       const pods = this.$getters['podsByNamespace'](this.metadata.namespace);
 
+      // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
       return pods.filter((obj) => {
         return matches(obj, podRelationship.selector);
       });
@@ -594,6 +595,23 @@ export default class Workload extends WorkloadService {
     return (get(this, 'metadata.relationships') || []).filter((relationship) => relationship.toType === WORKLOAD_TYPES.JOB);
   }
 
+  /**
+   * Ensure the store has all matching jobs
+   */
+  async matchingJobs() {
+    if (this.type !== WORKLOAD_TYPES.CRON_JOB) {
+      return undefined;
+    }
+
+    // This will be 1 request per relationship, though there's not likely to be many per cron job
+    return Promise.all(this.jobRelationships.map((obj) => {
+      return this.$dispatch('find', { type: WORKLOAD_TYPES.JOB, id: obj.toId });
+    }));
+  }
+
+  /**
+   * Expects all required pods are fetched upfront
+   */
   get jobs() {
     if (this.type !== WORKLOAD_TYPES.CRON_JOB) {
       return undefined;
@@ -643,12 +661,12 @@ export default class Workload extends WorkloadService {
   }
 
   async matchingPods() {
+    // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
     const all = await this.$dispatch('findAll', { type: POD });
     const allInNamespace = all.filter((pod) => pod.metadata.namespace === this.metadata.namespace);
 
     const selector = convertSelectorObj(this.spec.selector);
 
-    // See https://github.com/rancher/dashboard/issues/10417, all pods bad, need to replace local selector somehow
     return matching(allInNamespace, selector);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.2-rc.2",
+  "version": "3.0.2-rc.3",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
     "@aws-sdk/client-eks": "3.1.0",
     "@aws-sdk/client-iam": "3.658.1",
     "@aws-sdk/client-kms": "3.8.1",
-    "@babel/plugin-proposal-optional-chaining": "7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "7.14.5",
     "@babel/preset-typescript": "7.16.7",
@@ -64,7 +64,7 @@
     "cookie": "0.7.0",
     "core-js": "3.40.0",
     "cron-validator": "1.3.1",
-    "cronstrue": "2.50.0",
+    "cronstrue": "2.53.0",
     "cross-env": "7.0.3",
     "css-loader": "6.7.3",
     "csv-loader": "3.0.3",
@@ -91,6 +91,7 @@
     "express": "4.17.1",
     "file-saver": "2.0.2",
     "floating-vue": "5.2.2",
+    "focus-trap": "7.6.2",
     "frontmatter-markdown-loader": "3.7.0",
     "identicon.js": "2.3.3",
     "intl-messageformat": "7.8.4",
@@ -120,7 +121,7 @@
     "set-cookie-parser": "2.4.6",
     "shell-quote": "1.7.3",
     "sinon": "8.1.1",
-    "start-server-and-test": "1.13.1",
+    "start-server-and-test": "2.0.10",
     "style-loader": "1.2.1",
     "ts-node": "8.10.2",
     "typescript": "5.6.3",

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

@@ -455,6 +455,8 @@ export default {
           class="input-sm"
           :placeholder="t('catalog.charts.search')"
           data-testid="charts-filter-input"
+          :aria-label="t('catalog.charts.search')"
+          role="textbox"
         >
 
         <button
@@ -463,6 +465,8 @@ export default {
           @shortkey="focusSearch()"
         />
         <AsyncButton
+          role="button"
+          :aria-label="t('catalog.charts.refresh')"
           class="refresh-btn"
           mode="refresh"
           size="sm"

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

@@ -24,18 +24,23 @@ export default {
 </script>
 
 <template>
-  <div class="config-badge">
+  <div
+    class="config-badge"
+  >
     <div>
-      <a
+      <button
         class="badge-install btn btn-sm role-secondary"
         data-testid="add-custom-cluster-badge"
+        role="button"
+        tabindex="0"
         @click="customBadgeDialog"
+        @keyup.space="customBadgeDialog"
       >
         <i
           v-clean-tooltip="tooltip"
           class="icon icon-brush-icon"
         />
-      </a>
+      </button>
     </div>
   </div>
 </template>
@@ -55,10 +60,6 @@ export default {
     > I {
       line-height: inherit;
     }
-
-    &:focus {
-      outline: 0;
-    }
   }
 
 </style>

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

@@ -641,12 +641,14 @@ export default {
       <div data-testid="clusterProvider__label">
         <label>{{ t('glance.provider') }}: </label>
         <span v-if="isHarvesterCluster">
-          <a
+          <button
+            class="btn role-link harvester-cluster-link"
             role="button"
+            :aria-label="displayProvider"
             @click="goToHarvesterCluster"
           >
             {{ displayProvider }}
-          </a>
+          </button>
         </span>
         <span v-else>
           {{ displayProvider }}
@@ -682,6 +684,8 @@ export default {
         <router-link
           :to="{name: 'c-cluster-explorer-tools'}"
           class="cluster-tools-link"
+          role="link"
+          :aria-label="t('nav.clusterTools')"
         >
           <span>{{ t('nav.clusterTools') }}</span>
         </router-link>
@@ -871,6 +875,13 @@ export default {
   grid-row-gap: 20px;
 }
 
+.harvester-cluster-link {
+  line-height: inherit;
+  min-height: inherit;
+  padding: 0;
+  vertical-align: bottom;
+}
+
 @media only screen and (max-width: map-get($breakpoints, "--viewport-9")) {
   .extension-card-container {
     grid-template-columns: 1fr !important;
@@ -935,10 +946,6 @@ export default {
     line-height: inherit;
     margin-right: 4px;
   }
-
-  &:focus {
-    outline: 0;
-  }
 }
 
 .cert-table-link {

package/pages/c/_cluster/fleet/GitRepoGraphConfig.js

@@ -77,7 +77,7 @@ export const gitRepoGraphConfig = {
           id:                    bd.id,
           matchingId:            bd.id,
           type:                  bd.type,
-          clusterId:             cluster ? cluster.id : undefined,
+          clusterLabel:          cluster ? cluster.namespacedName : undefined,
           clusterDetailLocation: cluster ? cluster.detailLocation : undefined,
           state:                 bd.state,
           stateLabel:            bd.stateDisplay,
@@ -210,7 +210,7 @@ export const gitRepoGraphConfig = {
         type:     'title-link',
         labelKey: 'fleet.fdc.id',
         valueObj: {
-          id:             data.id,
+          label:          data.id,
           detailLocation: data.detailLocation
         }
       }
@@ -221,7 +221,7 @@ export const gitRepoGraphConfig = {
         type:     'title-link',
         labelKey: 'fleet.fdc.cluster',
         valueObj: {
-          id:             data.clusterId,
+          label:          data.clusterLabel,
           detailLocation: data.clusterDetailLocation
         }
       });