@rancher/shell 3.0.0-rc.9 → 3.0.0

package/edit/provisioning.cattle.io.cluster/tabs/DirectoryConfig.vue

@@ -1,14 +1,29 @@
 
 <script>
-import { Checkbox } from '@components/Form/Checkbox';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { _CREATE } from '@shell/config/query-params';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+
+export const DATA_DIR_RADIO_OPTIONS = {
+  DEFAULT: 'defaultDataDir',
+  COMMON:  'commonBaseDataDir',
+  CUSTOM:  'customDataDir',
+};
+
+export const DEFAULT_COMMON_BASE_PATH = '/var/lib/rancher';
+
+export const DEFAULT_SUBDIRS = {
+  AGENT:           'agent',
+  PROVISIONING:    'provisioning',
+  K8S_DISTRO_RKE2: 'rke2',
+  K8S_DISTRO_K3S:  'k3s',
+};
 
 export default {
   name:       'DirectoryConfig',
   components: {
-    Checkbox,
     LabeledInput,
+    RadioGroup
   },
   props: {
     mode: {
@@ -16,52 +31,114 @@ export default {
       required: true,
     },
 
+    k8sVersion: {
+      type:     String,
+      required: true,
+    },
+
     value: {
       type:     Object,
       required: true,
     },
   },
   data() {
-    let atLeastOneDirWithAnIdentifier = false;
-    let allDirsWithSameIdentifier = false;
-
-    if (this.value?.systemAgent?.length || this.value?.provisioning?.length || this.value?.k8sDistro?.length) {
-      atLeastOneDirWithAnIdentifier = true;
-      if (this.value?.systemAgent === this.value?.provisioning && this.value?.provisioning === this.value?.k8sDistro &&
-      this.value?.systemAgent === this.value?.k8sDistro) {
-        allDirsWithSameIdentifier = true;
+    let dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.DEFAULT;
+    let k8sDistroSubDir = DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
+
+    if (this.k8sVersion && this.k8sVersion.includes('k3s')) {
+      k8sDistroSubDir = DEFAULT_SUBDIRS.K8S_DISTRO_K3S;
+    }
+
+    if (this.mode !== _CREATE) {
+      if (this.value?.systemAgent?.length || this.value?.provisioning?.length || this.value?.k8sDistro?.length) {
+        dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
       }
     }
 
     return {
-      isSettingCommonConfig: !(atLeastOneDirWithAnIdentifier && !allDirsWithSameIdentifier),
-      commonConfig:          allDirsWithSameIdentifier ? this.value?.systemAgent : '',
+      DATA_DIR_RADIO_OPTIONS,
+      dataConfigRadioValue,
+      k8sDistroSubDir,
+      commonConfig: '',
     };
   },
   watch: {
     commonConfig(neu) {
-      if (neu && neu.length && this.isSettingCommonConfig) {
-        this.value.systemAgent = neu;
-        this.value.provisioning = neu;
-        this.value.k8sDistro = neu;
+      if (neu && neu.length && this.dataConfigRadioValue === DATA_DIR_RADIO_OPTIONS.COMMON) {
+        this.value.systemAgent = `${ neu }/${ DEFAULT_SUBDIRS.AGENT }`;
+        this.value.provisioning = `${ neu }/${ DEFAULT_SUBDIRS.PROVISIONING }`;
+        this.value.k8sDistro = `${ neu }/${ this.k8sDistroSubDir }`;
+      }
+    },
+    k8sVersion: {
+      handler(neu) {
+        if (neu && neu.includes('k3s')) {
+          this.k8sDistroSubDir = DEFAULT_SUBDIRS.K8S_DISTRO_K3S;
+        } else {
+          this.k8sDistroSubDir = DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
+        }
+
+        if (this.value.k8sDistro) {
+          this.value.k8sDistro = `${ neu }/${ this.k8sDistroSubDir }`;
+        }
       }
     }
   },
   computed: {
-    disableEditInput() {
-      return this.mode !== _CREATE;
+    dataConfigRadioOptions() {
+      const defaultDataDirOption = {
+        value: DATA_DIR_RADIO_OPTIONS.DEFAULT,
+        label: this.t('cluster.directoryConfig.radioInput.defaultLabel')
+      };
+      const customDataDirOption = {
+        value: DATA_DIR_RADIO_OPTIONS.CUSTOM,
+        label: this.t('cluster.directoryConfig.radioInput.customLabel')
+      };
+
+      if (this.mode === _CREATE) {
+        return [
+          defaultDataDirOption,
+          { value: DATA_DIR_RADIO_OPTIONS.COMMON, label: this.t('cluster.directoryConfig.radioInput.commonLabel') },
+          customDataDirOption
+        ];
+      } else {
+        return [
+          defaultDataDirOption,
+          customDataDirOption
+        ];
+      }
     }
   },
   methods: {
-    handleCommonConfig(val) {
-      this.isSettingCommonConfig = val;
+    handleRadioInput(val) {
+      switch (val) {
+      case DATA_DIR_RADIO_OPTIONS.DEFAULT:
+        if (this.mode === _CREATE) {
+          this.commonConfig = '';
+        }
+        this.value.systemAgent = '';
+        this.value.provisioning = '';
+        this.value.k8sDistro = '';
+
+        this.dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.DEFAULT;
+        break;
+      case DATA_DIR_RADIO_OPTIONS.COMMON:
+        this.commonConfig = DEFAULT_COMMON_BASE_PATH;
+
+        this.dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.COMMON;
+        break;
+      // default is custom config
+      default:
+        if (this.mode === _CREATE) {
+          this.commonConfig = '';
+        }
 
-      if (val) {
         this.value.systemAgent = '';
         this.value.provisioning = '';
         this.value.k8sDistro = '';
-      } else {
-        this.commonConfig = '';
+
+        this.dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
+        break;
       }
     }
   },
@@ -74,33 +151,31 @@ export default {
       <h3 class="mb-20">
         {{ t('cluster.directoryConfig.title') }}
       </h3>
-      <Checkbox
+      <RadioGroup
+        :value="dataConfigRadioValue"
         class="mb-10"
-        :value="isSettingCommonConfig"
         :mode="mode"
-        :label="t('cluster.directoryConfig.checkboxText')"
-        :disabled="disableEditInput"
-        data-testid="rke2-directory-config-individual-config-checkbox"
-        @update:value="handleCommonConfig"
+        :options="dataConfigRadioOptions"
+        name="directory-config-radio"
+        data-testid="rke2-directory-config-radio-input"
+        @update:value="handleRadioInput"
       />
       <LabeledInput
-        v-if="isSettingCommonConfig"
+        v-if="dataConfigRadioValue === DATA_DIR_RADIO_OPTIONS.COMMON"
         v-model:value="commonConfig"
         class="mb-20"
         :mode="mode"
         :label="t('cluster.directoryConfig.common.label')"
         :tooltip="t('cluster.directoryConfig.common.tooltip')"
-        :disabled="disableEditInput"
         data-testid="rke2-directory-config-common-data-dir"
       />
-      <div v-if="!isSettingCommonConfig">
+      <div v-if="dataConfigRadioValue === DATA_DIR_RADIO_OPTIONS.CUSTOM">
         <LabeledInput
           v-model:value="value.systemAgent"
           class="mb-20"
           :mode="mode"
           :label="t('cluster.directoryConfig.systemAgent.label')"
           :tooltip="t('cluster.directoryConfig.systemAgent.tooltip')"
-          :disabled="disableEditInput"
           data-testid="rke2-directory-config-systemAgent-data-dir"
         />
         <LabeledInput
@@ -109,7 +184,6 @@ export default {
           :mode="mode"
           :label="t('cluster.directoryConfig.provisioning.label')"
           :tooltip="t('cluster.directoryConfig.provisioning.tooltip')"
-          :disabled="disableEditInput"
           data-testid="rke2-directory-config-provisioning-data-dir"
         />
         <LabeledInput
@@ -118,7 +192,6 @@ export default {
           :mode="mode"
           :label="t('cluster.directoryConfig.k8sDistro.label')"
           :tooltip="t('cluster.directoryConfig.k8sDistro.tooltip')"
-          :disabled="disableEditInput"
           data-testid="rke2-directory-config-k8sDistro-data-dir"
         />
       </div>

package/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue

@@ -317,7 +317,7 @@ export default {
             />
           </h3>
           <UnitInput
-            v-model.number="unhealthyNodeTimeoutInteger"
+            v-model:value="unhealthyNodeTimeoutInteger"
             :hide-arrows="true"
             :placeholder="t('containerResourceLimit.cpuPlaceholder')"
             :mode="mode"

package/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue

@@ -154,7 +154,6 @@ export default {
               :mode="mode"
               :data-testid="`registry-auth-host-input-${i}`"
             />
-
             <SelectOrCreateAuthSecret
               v-model:value="row.value.authConfigSecretName"
               :register-before-hook="wrapRegisterBeforeHook"
@@ -168,6 +167,7 @@ export default {
               generate-name="registryconfig-auth-"
               :data-testid="`registry-auth-select-or-create-${i}`"
               :cache-secrets="true"
+              @update:value="update"
             />
           </div>
           <div class="col span-6">

package/edit/workload/mixins/workload.js

@@ -947,7 +947,7 @@ export default {
         nameNumber++;
       }
       const container = {
-        ...defaultContainer,
+        ...structuredClone(defaultContainer),
         name:   `container-${ nameNumber }`,
         active: true
       };

package/mixins/browser-tab-visibility.js

@@ -25,7 +25,7 @@ export default {
   mounted() {
     this.setTabVisibilityListener(true);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.setTabVisibilityListener(false);
   },
 };

package/mixins/chart.js

@@ -291,6 +291,8 @@ export default {
             id:   `${ this.query.appNamespace }/${ this.query.appName }`,
           });
 
+          await this.existing?.fetchValues(true);
+
           this.mode = _EDIT;
         } catch (e) {
           this.mode = _CREATE;
@@ -450,10 +452,12 @@ export default {
               }
             }
             if (existingCRDApp) {
+              await existingCRDApp.fetchValues(true);
+
               // spec.values are any non-default values the user configured
               // the installation form should show these, as well as any default values from the chart
-              const existingValues = clone(existingCRDApp.spec?.values || {});
-              const defaultValues = clone(existingCRDApp.spec?.chart?.values || {});
+              const existingValues = clone(existingCRDApp.values || {});
+              const defaultValues = clone(existingCRDApp.chartValues || {});
 
               crdVersionInfo.existingValues = existingValues;
               crdVersionInfo.allValues = merge(defaultValues, existingValues);

package/mixins/metric-poller.js

@@ -13,7 +13,7 @@ export default {
     this.metricPoller.start();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.metricPoller.stop();
   },
 };

package/mixins/resource-fetch.js

@@ -48,7 +48,7 @@ export default {
     };
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // make sure this only runs once, for the initialized instance
     if (this.init) {
       // clear up the store to make sure we aren't storing anything that might interfere with the next rendered list view

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';
 
@@ -280,28 +280,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

@@ -241,9 +241,9 @@ export default class CloudCredential extends NormanModel {
   }
 
   get expiresForSort() {
-    // Why not just `expires`? Ensures the correct sort order of 'no expiration' --> 'expired' --> 'expiring'
-    // (instead of expired --> expiring --> no expiration)
-    return this.expires || Number.MAX_SAFE_INTEGER;
+    // Why not just `expires`? Ensures the correct sort order of expired --> expiring --> never expires
+    // (instead of 'never expired' --> 'expired' --> 'expiring')
+    return this.expires !== undefined ? this.expires : Number.MAX_SAFE_INTEGER;
   }
 
   get expires() {
@@ -296,7 +296,7 @@ export default class CloudCredential extends NormanModel {
   }
 
   get expiresIn() {
-    if (!this.expires) {
+    if (this.expires === undefined) {
       return null;
     }
 

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

@@ -176,6 +176,10 @@ export default class GitRepo extends SteveModel {
   get repoDisplay() {
     let repo = this.spec.repo;
 
+    if (!repo) {
+      return null;
+    }
+
     repo = repo.replace(/.git$/, '');
     repo = repo.replace(/^https:\/\//, '');
     repo = repo.replace(/\/+$/, '');
@@ -307,20 +311,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/management.cattle.io.project.js

@@ -62,6 +62,10 @@ export default class Project extends HybridModel {
     });
   }
 
+  get description() {
+    return this.spec?.description;
+  }
+
   get doneOverride() {
     return this.listLocation;
   }

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.
@@ -424,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;
       }

package/models/workload.js

@@ -110,7 +110,7 @@ export default class Workload extends WorkloadService {
         spec.template = {
           spec: {
             restartPolicy:  this.type === WORKLOAD_TYPES.JOB ? 'Never' : 'Always',
-            containers:     [{ ...defaultContainer }],
+            containers:     [{ ...structuredClone(defaultContainer) }],
             initContainers: []
           }
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.0-rc.9",
+  "version": "3.0.0",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -74,7 +74,7 @@
     "dagre-d3": "0.6.4",
     "dayjs": "1.8.29",
     "diff2html": "3.4.24",
-    "dompurify": "2.4.5",
+    "dompurify": "2.5.4",
     "element-matches": "^0.1.2",
     "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
@@ -102,7 +102,7 @@
     "js-yaml": "4.1.0",
     "js-yaml-loader": "1.2.2",
     "jsdiff": "1.1.1",
-    "jsonpath-plus": "6.0.1",
+    "jsonpath-plus": "10.0.0",
     "jsrsasign": "10.5.25",
     "jszip": "3.8.0",
     "lodash": "4.17.21",

package/pages/auth/logout.vue

@@ -1,21 +1,19 @@
 <script>
-import { authProvidersInfo } from '@shell/utils/auth';
+import { configType } from '@shell/models/management.cattle.io.authconfig';
 
 export default {
   async fetch() {
-    const authInfo = await authProvidersInfo(this.$store);
+    const publicAuthProviders = await this.$store.dispatch('auth/getAuthProviders');
 
-    if (authInfo.enabled?.length) {
-      const authProvider = authInfo.enabled[0];
+    const samlAuthProvider = publicAuthProviders.find((authProvider) => configType[authProvider.id] === 'saml');
 
-      const {
-        logoutAllSupported, logoutAllEnabled, logoutAllForced, configType
-      } = authProvider;
+    if (!!samlAuthProvider) {
+      const { logoutAllSupported, logoutAllEnabled, logoutAllForced } = samlAuthProvider;
 
-      if (configType === 'saml' && logoutAllSupported && logoutAllEnabled && logoutAllForced) {
+      if (logoutAllSupported && logoutAllEnabled && logoutAllForced) {
         // SAML - force SLO (logout from all apps)
         await this.$store.dispatch('auth/logout', {
-          force: true, slo: true, provider: authProvider
+          force: true, slo: true, provider: samlAuthProvider
         }, { root: true });
       } else {
         // simple logout

package/pages/auth/setup.vue

@@ -496,6 +496,7 @@ export default {
 
       .span-6 {
         padding: 0 60px;
+        margin: 0;
       }
 
       .landscape {
@@ -503,6 +504,7 @@ export default {
         margin: 0;
         object-fit: cover;
         padding: 0;
+        width: 49%;
       }
     }
 
@@ -512,6 +514,7 @@ export default {
       overflow-y: auto;
       position: relative;
       height: 100vh;
+      width: 51%;
 
       & > div:first-of-type {
         flex:3;