@rancher/shell 2.0.2-rc.1 → 2.0.2

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

@@ -4,7 +4,7 @@ import {
 import { CATALOG as CATALOG_ANNOTATIONS, FLEET } from '@shell/config/labels-annotations';
 import { compare, isPrerelease, sortable } from '@shell/utils/version';
 import { filterBy } from '@shell/utils/array';
-import { CATALOG, MANAGEMENT, NORMAN } from '@shell/config/types';
+import { CATALOG, MANAGEMENT, NORMAN, SECRET } from '@shell/config/types';
 import { SHOW_PRE_RELEASE } from '@shell/store/prefs';
 import { set } from '@shell/utils/object';
 
@@ -279,28 +279,115 @@ export default class CatalogApp extends SteveModel {
     };
   }
 
-  get deployedAsLegacy() {
-    return async() => {
-      if (this.spec?.values?.global) {
-        const { clusterName, projectName } = this.spec.values.global;
-
-        if (clusterName && projectName) {
-          try {
-            const legacyApp = await this.$dispatch('rancher/find', {
-              type: NORMAN.APP,
-              id:   `${ projectName }:${ this.metadata?.name }`,
-              opt:  { url: `/v3/project/${ clusterName }:${ projectName }/apps/${ projectName }:${ this.metadata?.name }` }
-            }, { root: true });
-
-            if (legacyApp) {
-              return legacyApp;
-            }
-          } catch (e) {}
-        }
+  async deployedAsLegacy() {
+    await this.fetchValues();
+
+    if (this.values?.global) {
+      const { clusterName, projectName } = this.values.global;
+
+      if (clusterName && projectName) {
+        try {
+          const legacyApp = await this.$dispatch('rancher/find', {
+            type: NORMAN.APP,
+            id:   `${ projectName }:${ this.metadata?.name }`,
+            opt:  { url: `/v3/project/${ clusterName }:${ projectName }/apps/${ projectName }:${ this.metadata?.name }` }
+          }, { root: true });
+
+          if (legacyApp) {
+            return legacyApp;
+          }
+        } catch (e) {}
       }
+    }
 
-      return false;
-    };
+    return false;
+  }
+
+  /**
+   * User and Chart values live in a helm secret, so fetch it (with special param)
+   */
+  async fetchValues(force = false) {
+    if (!this.secretId) {
+      // If there's no secret id this isn't ever going to work, no need to carry on
+      return;
+    }
+
+    const haveValues = !!this._values && !!this._chartValues;
+
+    if (haveValues && !force) {
+      // If we already have the required values and we're not forced to re-fetch, no need to carry on
+      return;
+    }
+
+    try {
+      await this.$dispatch('find', {
+        type: SECRET,
+        id:   this.secretId,
+        opt:  {
+          force:  force || (!!this._secret && !haveValues), // force if explicitly requested or there's ean existing secret without the required values we have a secret without the values in (Secret has been fetched another way)
+          watch:  false, // Cannot watch with custom params (they are dropped on calls made when resyncing over socket)
+          params: { includeHelmData: true }
+        }
+      });
+    } catch (e) {
+      console.error(`Cannot find values for ${ this.id } (unable to fetch)`, e); // eslint-disable-line no-console
+    }
+  }
+
+  get secretId() {
+    const metadata = this.metadata;
+    const secretReference = metadata.ownerReferences?.find((ow) => ow.kind.toLowerCase() === SECRET);
+
+    const secretId = secretReference?.name;
+    const secretNamespace = metadata.namespace;
+
+    if (!secretNamespace || !secretId) {
+      console.warn(`Cannot find values for ${ this.id } (cannot find related secret namespace or id)`); // eslint-disable-line no-console
+
+      return null;
+    }
+
+    return `${ secretNamespace }/${ secretId }`;
+  }
+
+  get _secret() {
+    return this.secretId ? this.$getters['byId'](SECRET, this.secretId) : null;
+  }
+
+  _validateSecret(noun) {
+    if (this._secret === undefined) {
+      throw new Error(`Cannot find ${ noun } for  ${ this.id } (chart secret has not been fetched via app \`fetchValues\`)`);
+    }
+
+    if (this._secret === null) {
+      throw new Error(`Cannot find ${ noun } for ${ this.id } (chart secret cannot or has failed to fetch) `);
+    }
+  }
+
+  /**
+   * The user's helm values
+   */
+  get values() {
+    this._validateSecret('values');
+
+    return this._values;
+  }
+
+  get _values() {
+    return this._secret?.data?.release?.config;
+  }
+
+  /**
+   * The Charts default helm values
+   */
+  get chartValues() {
+    this._validateSecret('chartValues');
+
+    return this._chartValues;
+  }
+
+  get _chartValues() {
+    return this._secret?.data?.release?.chart?.values;
   }
 }
 

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.gitrepo.js

@@ -308,20 +308,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() {

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 = {};
@@ -306,13 +308,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);
   }
 
@@ -411,7 +423,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 +897,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 +1003,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.2",
   "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',
@@ -175,7 +176,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 +229,7 @@ export default {
       }
 
       if (area === 'clusters') {
-        group = row.targetClusters;
+        group = '';
       } else if (area === 'bundles') {
         group = row.bundles;
       } else if (area === 'resources') {
@@ -262,11 +268,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;

package/pages/c/_cluster/manager/cloudCredential/index.vue

@@ -9,21 +9,31 @@ import {
   ID_UNLINKED,
   NAME_UNLINKED,
 } from '@shell/config/table-headers';
+import { allHash } from 'utils/promise';
+import { Banner } from '@components/Banner';
 
 export default {
   components: {
     Loading,
     ResourceTable,
     Masthead,
+    Banner
   },
 
   async fetch() {
+    const promises = {};
+
     if (this.$store.getters['management/schemaFor'](SECRET) && !this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       // Having secrets allows showing the public portion of more types but not all users can see them.
-      await this.$store.dispatch('management/findAll', { type: SECRET });
+      promises.secrets = this.$store.dispatch('management/findAll', { type: SECRET });
     }
+    promises.allCredentials = this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+
+    const hash = await allHash(promises);
 
-    this.allCredentials = await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+    this.allCredentials = hash.allCredentials;
+    // This can be optimized in future to to a quick fetch for those with annotation `"provisioning.cattle.io/driver": "harvester"`
+    this.hasHarvester = !!this.allCredentials.find((cc) => !!cc.harvestercredentialConfig);
   },
 
   data() {
@@ -40,7 +50,7 @@ export default {
     },
 
     headers() {
-      return [
+      const headers = [
         ID_UNLINKED,
         NAME_UNLINKED,
         {
@@ -52,8 +62,21 @@ export default {
           formatter: 'CloudCredPublicData',
         },
         DESCRIPTION,
-        AGE_NORMAN,
       ];
+
+      if (this.hasHarvester) {
+        headers.push({
+          name:      'expiresDate',
+          labelKey:  'tableHeaders.expires',
+          value:     'expires',
+          sort:      'expiresForSort',
+          formatter: 'CloudCredExpired',
+        });
+      }
+
+      headers.push(AGE_NORMAN);
+
+      return headers;
     },
 
     createLocation() {
@@ -65,6 +88,29 @@ export default {
         },
       };
     },
+
+    expiredData() {
+      const counts = this.allCredentials.reduce((res, cc) => {
+        const expireData = cc.expireData;
+
+        if (expireData?.expiring) {
+          res.expiring++;
+        }
+        if (expireData?.expired) {
+          res.expired++;
+        }
+
+        return res;
+      }, {
+        expiring: 0,
+        expired:  0
+      });
+
+      return {
+        expiring: counts.expiring ? this.t('manager.cloudCredentials.banners.expiring', { count: counts.expiring }) : '',
+        expired:  counts.expired ? this.t('manager.cloudCredentials.banners.expired', { count: counts.expired }) : '',
+      };
+    }
   },
 
 };
@@ -79,6 +125,18 @@ export default {
       :create-location="createLocation"
       :type-display="t('manager.cloudCredentials.label')"
     />
+    <Banner
+      v-if="expiredData.expiring"
+      data-testid="cert-expiring-banner"
+      color="warning"
+      :label="expiredData.expiring"
+    />
+    <Banner
+      v-if="expiredData.expired"
+      color="error"
+      :label="expiredData.expired"
+    />
+
     <ResourceTable
       :schema="schema"
       :rows="rows"
@@ -92,3 +150,9 @@ export default {
     </ResourceTable>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.banner {
+  margin: 0 0 10px 0
+}
+</style>