@rancher/shell 2.0.2-rc.1 → 2.0.2

package/assets/translations/en-us.yaml

@@ -360,8 +360,8 @@ addClusterMemberDialog:
   title: Add Cluster Member
 
 addonConfigConfirmation:
-  title: Add-On Config Reset
-  body: Changing the Kubernetes Version can reset the Add-On Config values. You should check that the values are as expected before continuing.
+  title: Add-On Reset
+  body: Changing the Kubernetes Version can reset Add-On values. You should check that the values are as expected before continuing.
 
 addProjectMemberDialog:
   title: Add Project Member
@@ -1187,38 +1187,38 @@ cluster:
       <code>Cluster Management > Advanced > JWT Authentication</code>"
   addonChart:
     rancher-vsphere-cpi:
-      label: vSphere CPI
-      configuration: vSphere CPI Configuration
+      label: "Add-on: vSphere CPI"
+      configuration: vSphere CPI
     rancher-vsphere-csi:
-      label: vSphere CSI
-      configuration: vSphere CSI Configuration
+      label: "Add-on: vSphere CSI"
+      configuration: vSphere CSI
     rke2-calico:
-      label: Calico
-      configuration: Calico Configuration
+      label: "Add-on: Calico"
+      configuration: Calico
     rke2-calico-crd:
-      label:  Calico
-      configuration: Calico Configuration
+      label:  "Add-on: Calico"
+      configuration: Calico
     rke2-canal:
-      label: Canal
-      configuration: Canal Configuration
+      label: "Add-on: Canal"
+      configuration: Canal
     rke2-cilium:
-      label: Cilium
-      configuration: Cilium Configuration
+      label: "Add-on: Cilium"
+      configuration: Cilium
     rke2-coredns:
-      label: CoreDNS
-      configuration: CoreDNS Configuration
+      label: "Add-on: CoreDNS"
+      configuration: CoreDNS
     rke2-ingress-nginx:
-      label: NGINX
-      configuration: NGINX Ingress Configuration
+      label: "Add-on: NGINX"
+      configuration: NGINX Ingress
     rke2-kube-proxy:
-      label: Kube Proxy
-      configuration: Kube Proxy Configuration
+      label: "Add-on: Kube Proxy"
+      configuration: Kube Proxy
     rke2-metrics-server:
-      label: Metrics Server
-      configuration: Metrics Server Configuration
+      label: "Add-on: Metrics Server"
+      configuration: Metrics Server
     rke2-multus:
-      label: Multus
-      configuration: Multus Configuration
+      label: "Add-on: Multus"
+      configuration: Multus
   agentEnvVars:
     label: Agent Environment
     detail: Add additional environment variables to the agent container.  This is most commonly useful for configuring a HTTP proxy.
@@ -1234,7 +1234,7 @@ cluster:
       label: Google
     rancher-vsphere:
       label: vSphere
-      note: '<b>Important:</b> Configure the vSphere Cloud Provider and Storage Provider options in the Add-On Config tab.'
+      note: '<b>Important:</b> Configure the vSphere Cloud Provider and Storage Provider options in the Add-on tabs.'
     harvester:
       label: Harvester
   copyConfig: Copy KubeConfig to Clipboard
@@ -1380,8 +1380,10 @@ cluster:
         macAddress: Mac Address
         macFormat: 'Invalid MAC address format.'
       vGpus:
+        warnings:
+          minimumAllocatable: It's highly recommended to select a vGPU with a number of allocatable devices greater than the number of nodes (Machine Count) to avoid "un-schedulable" errors after cluster updates.
         errors:
-          notAllocatable: '"VGPUs" not allocatable. There are not enough [{vGpus}] devices to be allocated to each node in machine pool [{pool}]'
+          notAllocatable: '[{vGpu}] vGPU device is not allocatable; required: {allocated}, allocatable: {allocatable}'
       volume:
         title: Volumes
         volume: Volume
@@ -1745,7 +1747,7 @@ cluster:
       serverOs:
         label: OS
   addOns:
-    dependencyBanner: Add-On Configurations can vary between Kubernetes versions. Changing the Kubernetes version may reset the values below.
+    dependencyBanner: Add-On Configuration can vary between Kubernetes versions. Changing the Kubernetes version may reset the values below.
     additionalManifest:
       title: Additional Manifest
       tooltip: 'Additional Kubernetes Manifest YAML to be applied to the cluster on startup.'
@@ -1809,11 +1811,18 @@ cluster:
         other { {pool_name}: The provided values for {fields} were not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
       }
   rkeTemplateUpgrade: Template revision {name} available for upgrade
+  cloudCredentials:
+    renew: Renew Cloud Credentials
+    expired: Cloud Credential expired, please Renew Cloud Credentials
+    expiring: Cloud Credential will expire on { expires }, please Renew Cloud Credentials
+    banners:
+      expiring: "{count} {count, plural, =1 { Cluster has a Cloud Credential that expires soon} other { Clusters have Cloud Credentials that expire soon}}, please Renew Cloud {count, plural, =1 { Credential} other { Credentials}}"
+      expired: "{count} {count, plural, =1 { Cluster has a Cloud Credential that has expired} other { Clusters have Cloud Credentials that have expired}}, please Renew Cloud {count, plural, =1 { Credential} other { Credentials}}"
 
   architecture:
     label:
-      unknown: Unknown
-      mixed: Mixed
+      unknown: unknown
+      mixed: mixed
 
   availabilityWarnings:
     node: Node {name} is inactive
@@ -5624,7 +5633,6 @@ tableHeaders:
   createdAt: Created At
   customVerbs: Custom Verbs
   description: Description
-  expires: Expires
   cpu: CPU
   currentReplicas: Current Replicas
   date: Date
@@ -5641,6 +5649,7 @@ tableHeaders:
   distinguisherMethod: Distinguisher Method
   effect: Effect
   endpoints: Endpoints
+  expires: Expires
   firstSeen: First Seen
   fleetBundleType: Type
   flow: Flow
@@ -7719,6 +7728,11 @@ volumeClaimTemplate:
 manager:
   cloudCredentials:
     label: Cloud Credentials
+    renew: Renew
+    expired: Expired
+    banners:
+      expiring: "{count} Cloud {count, plural, =1 { Credential expires soon} other { Credentials expire soon}}, please Renew"
+      expired: "{count} Cloud {count, plural, =1 { Credential has expired} other { Credentials have expired}}, please Renew"
   drivers:
     label: Drivers
   rkeTemplates:

package/components/PromptRemove.vue

@@ -105,8 +105,8 @@ export default {
         return null;
       }
 
-      if (this.toRemove[0].doneLocationRemove) {
-        return this.toRemove[0].doneLocationRemove;
+      if (this.toRemove[0].doneOverride) {
+        return this.toRemove[0].doneOverride;
       }
 
       const currentRoute = this.toRemove[0].currentRoute();
@@ -300,7 +300,12 @@ export default {
     },
     done() {
       if ( this.cachedDoneLocation && !isEmpty(this.cachedDoneLocation) ) {
-        this.currentRouter.push(this.cachedDoneLocation);
+        // Only push if the route will change otherwise we'll get a `NavigationDuplicated` exception
+        const resolvedRoute = this.currentRouter.resolve(this.cachedDoneLocation);
+
+        if (resolvedRoute.resolved.fullPath !== this.$route.fullPath) {
+          this.currentRouter.push(this.cachedDoneLocation);
+        }
       }
       this.close();
     },

package/components/ResourceDetail/Masthead.vue

@@ -516,6 +516,7 @@ export default {
             <button
               v-if="isView"
               ref="actions"
+              data-testid="mathead-action-menu"
               aria-haspopup="true"
               type="button"
               class="btn role-multi-action actions"

package/components/fleet/FleetClusters.vue

@@ -42,7 +42,6 @@ export default {
           value:    'status.display.readyBundles',
           sort:     'status.summary.ready',
           search:   false,
-          align:    'center',
         },
         {
           name:     'reposReady',
@@ -50,7 +49,6 @@ export default {
           value:    'status.readyGitRepos',
           sort:     'status.summary.ready',
           search:   false,
-          align:    'center',
         },
         FLEET_SUMMARY,
         {
@@ -62,7 +60,6 @@ export default {
           formatter:     'LiveDate',
           formatterOpts: { addSuffix: true },
           width:         120,
-          align:         'right'
         },
         AGE,
       ];

package/components/formatter/CloudCredExpired.vue

@@ -0,0 +1,69 @@
+<script>
+
+export default {
+  props: {
+    value: {
+      type:     [Number, String],
+      required: true
+    },
+
+    row: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    verbose: {
+      type:    Boolean,
+      default: false,
+    }
+
+  },
+
+  computed: {
+    outputString() {
+      return this.verbose ? this.verboseOutputString : this.row.expiresString;
+    },
+
+    verboseOutputString() {
+      const expireData = this.row?.expireData;
+
+      if (expireData?.expired) {
+        return this.t('cluster.cloudCredentials.expired');
+      } else if (expireData?.expiring) {
+        return this.t('cluster.cloudCredentials.expiring', { expires: this.row.expiresString });
+      }
+
+      return null;
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="outputString"
+    class="cloud-cred-expired"
+    :class="{ 'text-error': row.expireData.expired, 'text-warning': row.expireData.expiring}"
+  >
+    <div class="token-icon mr-5">
+      <i
+        class="icon"
+        :class="{'icon-error': row.expireData.expired, 'icon-warning': row.expireData.expiring}"
+      />
+    </div>
+    {{ outputString }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cloud-cred-expired {
+  display: flex;
+  align-items: center;
+  .token-icon {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/components/formatter/Date.vue

@@ -11,7 +11,7 @@ export default {
     },
 
     value: {
-      type:    [String, Date],
+      type:    [String, Date, Number],
       default: ''
     },
 

package/components/nav/Header.vue

@@ -188,12 +188,16 @@ export default {
       }
     },
     // since the Header is a "persistent component" we need to update it at every route change...
-    $route(nue) {
-      if (nue) {
-        this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
+    $route: {
+      handler(nue) {
+        if (nue) {
+          this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
 
-        this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
-      }
+          this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
+        }
+      },
+      immediate: true,
+      deep:      true,
     }
   },
 

package/components/nav/TopLevelMenu.vue

@@ -76,58 +76,102 @@ export default {
       return this.clusters.length > this.maxClustersToShow;
     },
 
+    /**
+     * Filter mgmt clusters by
+     * 1. Harvester type 1 (filterOnlyKubernetesClusters)
+     * 2. Harvester type 2 (filterHiddenLocalCluster)
+     * 3. There's a matching prov cluster
+     *
+     * Convert remaining clusters to special format
+     */
     clusters() {
-      const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
-      let kubeClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
-      let pClusters = null;
+      if (!this.hasProvCluster) {
+        // We're filtering out mgmt clusters without prov clusters, so if the user can't see any prov clusters at all
+        // exit early
+        return [];
+      }
 
-      if (this.hasProvCluster) {
-        pClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
-        const available = pClusters.reduce((p, c) => {
-          p[c.mgmt] = true;
+      const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
+      const mgmtClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
+      const provClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
+      const provClustersByMgmtId = provClusters.reduce((res, provCluster) => {
+        if (provCluster.mgmt?.id) {
+          res[provCluster.mgmt.id] = provCluster;
+        }
 
-          return p;
-        }, {});
+        return res;
+      }, {});
 
+      return (mgmtClusters || []).reduce((res, mgmtCluster) => {
         // Filter to only show mgmt clusters that exist for the available provisioning clusters
         // Addresses issue where a mgmt cluster can take some time to get cleaned up after the corresponding
         // provisioning cluster has been deleted
-        kubeClusters = kubeClusters.filter((c) => !!available[c]);
-      }
+        if (!provClustersByMgmtId[mgmtCluster.id]) {
+          return res;
+        }
 
-      return kubeClusters?.map((x) => {
-        const pCluster = pClusters?.find((c) => c.mgmt?.id === x.id);
+        const pCluster = provClustersByMgmtId[mgmtCluster.id];
+
+        res.push({
+          id:              mgmtCluster.id,
+          label:           mgmtCluster.nameDisplay,
+          ready:           mgmtCluster.isReady && !pCluster?.hasError,
+          osLogo:          mgmtCluster.providerOsLogo,
+          providerNavLogo: mgmtCluster.providerMenuLogo,
+          badge:           mgmtCluster.badge,
+          isLocal:         mgmtCluster.isLocal,
+          isHarvester:     mgmtCluster.isHarvester,
+          pinned:          mgmtCluster.pinned,
+          description:     pCluster?.description || mgmtCluster.description,
+          pin:             () => mgmtCluster.pin(),
+          unpin:           () => mgmtCluster.unpin(),
+          clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } }
+        });
 
-        return {
-          id:              x.id,
-          label:           x.nameDisplay,
-          ready:           x.isReady && !pCluster?.hasError,
-          osLogo:          x.providerOsLogo,
-          providerNavLogo: x.providerMenuLogo,
-          badge:           x.badge,
-          isLocal:         x.isLocal,
-          isHarvester:     x.isHarvester,
-          pinned:          x.pinned,
-          description:     pCluster?.description || x.description,
-          pin:             () => x.pin(),
-          unpin:           () => x.unpin(),
-          clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: x.id } }
-        };
-      }) || [];
+        return res;
+      }, []);
     },
 
+    /**
+     * Filter clusters by
+     * 1. Not pinned
+     * 2. Includes search term
+     *
+     * Sort remaining clusters
+     *
+     * Reduce number of clusters if too many too show
+     *
+     * Important! This is used to show unpinned clusters OR results of search
+     */
     clustersFiltered() {
       const search = (this.clusterFilter || '').toLowerCase();
-      const out = search ? this.clusters.filter((item) => item.label?.toLowerCase().includes(search)) : this.clusters;
-      const sorted = sortBy(out, ['ready:desc', 'label']);
+      let localCluster = null;
 
-      // put local cluster on top of list always
-      // https://github.com/rancher/dashboard/issues/10975
-      if (sorted.findIndex((c) => c.id === 'local') > 0) {
-        const localCluster = sorted.find((c) => c.id === 'local');
-        const localIndex = sorted.findIndex((c) => c.id === 'local');
+      const filtered = this.clusters.filter((c) => {
+        // If we're searching we don't care if pinned or not
+        if (search) {
+          if (!c.label?.toLowerCase().includes(search)) {
+            return false;
+          }
+        } else if (c.pinned) {
+          // Not searching, not pinned, don't care
+          return false;
+        }
+
+        if (!localCluster && c.id === 'local') {
+          // Local cluster is a special case, we're inserting it at top so don't include in the middle
+          localCluster = c;
+
+          return false;
+        }
 
-        sorted.splice(localIndex, 1);
+        return true;
+      });
+
+      const sorted = sortBy(filtered, ['ready:desc', 'label']);
+
+      // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975
+      if (localCluster) {
         sorted.unshift(localCluster);
       }
 
@@ -141,25 +185,45 @@ export default {
       this.searchActive = false;
 
       if (sorted.length >= this.maxClustersToShow) {
-        const sortedPinOut = sorted.filter((item) => !item.pinned).slice(0, this.maxClustersToShow);
-
-        return sortedPinOut;
-      } else {
-        return sorted.filter((item) => !item.pinned);
+        return sorted.slice(0, this.maxClustersToShow);
       }
+
+      return sorted;
     },
 
+    /**
+     * Filter clusters by
+     * 1. Not pinned
+     * 2. Includes search term
+     *
+     * Sort remaining clusters
+     *
+     * Reduce number of clusters if too many too show
+     *
+     * Important! This is hidden if there's a filter (user searching)
+     */
     pinFiltered() {
-      const out = this.clusters.filter((item) => item.pinned);
-      const sorted = sortBy(out, ['ready:desc', 'label']);
+      let localCluster = null;
+      const filtered = this.clusters.filter((c) => {
+        if (!c.pinned) {
+          // We only care about pinned clusters
+          return false;
+        }
+
+        if (c.id === 'local') {
+          // Special case, we're going to add this at the start so filter out
+          localCluster = c;
+
+          return false;
+        }
+
+        return true;
+      });
 
-      // put local cluster on top of list always
-      // https://github.com/rancher/dashboard/issues/10975
-      if (sorted.findIndex((c) => c.id === 'local') > 0) {
-        const localCluster = sorted.find((c) => c.id === 'local');
-        const localIndex = sorted.findIndex((c) => c.id === 'local');
+      const sorted = sortBy(filtered, ['ready:desc', 'label']);
 
-        sorted.splice(localIndex, 1);
+      // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975
+      if (localCluster) {
         sorted.unshift(localCluster);
       }
 
@@ -167,7 +231,7 @@ export default {
     },
 
     pinnedClustersHeight() {
-      const pinCount = this.clusters.filter((item) => item.pinned).length;
+      const pinCount = this.pinFiltered.length;
       const height = pinCount > 2 ? (pinCount * 43) : 90;
 
       return `min-height: ${ height }px`;