@rancher/shell 2.0.2-rc.1 → 2.0.3

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

@@ -1,63 +1,214 @@
 
 <script>
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { _CREATE } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import { Banner } from '@components/Banner';
+
+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: { LabeledInput },
-  props:      {
+  components: {
+    LabeledInput,
+    RadioGroup,
+    Banner
+  },
+  props: {
     mode: {
       type:     String,
       required: true,
     },
 
+    k8sVersion: {
+      type:     String,
+      required: true,
+    },
+
     value: {
       type:     Object,
       required: true,
     },
   },
+  data() {
+    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) {
+      dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
+    }
+
+    return {
+      DATA_DIR_RADIO_OPTIONS,
+      dataConfigRadioValue,
+      k8sDistroSubDir,
+      commonConfig: '',
+    };
+  },
+  watch: {
+    commonConfig(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;
+    isDisabled() {
+      return this.mode === _EDIT;
+    },
+    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: {
+    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 = '';
+        }
+
+        this.value.systemAgent = '';
+        this.value.provisioning = '';
+        this.value.k8sDistro = '';
+
+        this.dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
+        break;
+      }
     }
-  }
+  },
 };
 </script>
 
 <template>
   <div class="row">
     <div class="col span-8">
-      <h3 class="mb-20">
+      <h3>
         {{ t('cluster.directoryConfig.title') }}
       </h3>
-      <LabeledInput
-        v-model="value.systemAgent"
+      <Banner
         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"
+        :closable="false"
+        color="info"
+        label-key="cluster.directoryConfig.banner"
       />
-      <LabeledInput
-        v-model="value.provisioning"
-        class="mb-20"
+      <RadioGroup
+        v-show="!isDisabled"
+        :value="dataConfigRadioValue"
+        class="mb-10"
         :mode="mode"
-        :label="t('cluster.directoryConfig.provisioning.label')"
-        :tooltip="t('cluster.directoryConfig.provisioning.tooltip')"
-        :disabled="disableEditInput"
-        data-testid="rke2-directory-config-provisioning-data-dir"
+        :options="dataConfigRadioOptions"
+        name="directory-config-radio"
+        data-testid="rke2-directory-config-radio-input"
+        @input="handleRadioInput"
       />
       <LabeledInput
-        v-model="value.k8sDistro"
+        v-if="dataConfigRadioValue === DATA_DIR_RADIO_OPTIONS.COMMON"
+        v-model="commonConfig"
         class="mb-20"
         :mode="mode"
-        :label="t('cluster.directoryConfig.k8sDistro.label')"
-        :tooltip="t('cluster.directoryConfig.k8sDistro.tooltip')"
-        :disabled="disableEditInput"
-        data-testid="rke2-directory-config-k8sDistro-data-dir"
+        :label="t('cluster.directoryConfig.common.label')"
+        :tooltip="t('cluster.directoryConfig.common.tooltip')"
+        :disabled="isDisabled"
+        data-testid="rke2-directory-config-common-data-dir"
       />
+      <div v-if="dataConfigRadioValue === DATA_DIR_RADIO_OPTIONS.CUSTOM">
+        <LabeledInput
+          v-model="value.systemAgent"
+          class="mb-20"
+          :mode="mode"
+          :label="t('cluster.directoryConfig.systemAgent.label')"
+          :tooltip="t('cluster.directoryConfig.systemAgent.tooltip')"
+          :disabled="isDisabled"
+          data-testid="rke2-directory-config-systemAgent-data-dir"
+        />
+        <LabeledInput
+          v-model="value.provisioning"
+          class="mb-20"
+          :mode="mode"
+          :label="t('cluster.directoryConfig.provisioning.label')"
+          :tooltip="t('cluster.directoryConfig.provisioning.tooltip')"
+          :disabled="isDisabled"
+          data-testid="rke2-directory-config-provisioning-data-dir"
+        />
+        <LabeledInput
+          v-model="value.k8sDistro"
+          class="mb-20"
+          :mode="mode"
+          :label="t('cluster.directoryConfig.k8sDistro.label')"
+          :tooltip="t('cluster.directoryConfig.k8sDistro.tooltip')"
+          :disabled="isDisabled"
+          data-testid="rke2-directory-config-k8sDistro-data-dir"
+        />
+      </div>
       <div class="mb-40" />
     </div>
   </div>

package/list/provisioning.cattle.io.cluster.vue

@@ -10,10 +10,11 @@ import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/feature
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { BadgeState } from '@components/BadgeState';
+import CloudCredExpired from '@shell/components/formatter/CloudCredExpired';
 
 export default {
   components: {
-    Banner, ResourceTable, Masthead, BadgeState
+    Banner, ResourceTable, Masthead, BadgeState, CloudCredExpired
   },
   mixins: [ResourceFetch],
   props:  {
@@ -41,6 +42,8 @@ export default {
       mgmtClusters:    this.$fetchType(MANAGEMENT.CLUSTER),
     };
 
+    this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+
     if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
       hash.etcdSnapshots = this.$fetchType(SNAPSHOT);
     }
@@ -141,6 +144,29 @@ export default {
       // This will be used when there's clusters from extension based provisioners
       // We should re-visit this for scaling reasons
       return this.filteredRows.some((c) => c.metadata.namespace !== 'fleet-local' && c.metadata.namespace !== 'fleet-default');
+    },
+
+    tokenExpiredData() {
+      const counts = this.rows.reduce((res, provCluster) => {
+        const expireData = provCluster.cloudCredential?.expireData;
+
+        if (expireData?.expiring) {
+          res.expiring++;
+        }
+        if (expireData?.expired) {
+          res.expired++;
+        }
+
+        return res;
+      }, {
+        expiring: 0,
+        expired:  0
+      });
+
+      return {
+        expiring: counts.expiring ? this.t('cluster.cloudCredentials.banners.expiring', { count: counts.expiring }) : '',
+        expired:  counts.expired ? this.t('cluster.cloudCredentials.banners.expired', { count: counts.expired }) : '',
+      };
     }
   },
 
@@ -186,6 +212,17 @@ export default {
       </template>
     </Masthead>
 
+    <Banner
+      v-if="tokenExpiredData.expiring"
+      color="warning"
+      :label="tokenExpiredData.expiring"
+    />
+    <Banner
+      v-if="tokenExpiredData.expired"
+      color="error"
+      :label="tokenExpiredData.expired"
+    />
+
     <ResourceTable
       :schema="schema"
       :rows="filteredRows"
@@ -194,6 +231,7 @@ export default {
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :data-testid="'cluster-list'"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :sub-rows="true"
     >
       <!-- Why are state column and subrow overwritten here? -->
       <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->
@@ -207,19 +245,32 @@ export default {
       </template>
       <template #sub-row="{fullColspan, row, keyField, componentTestid, i, onRowMouseEnter, onRowMouseLeave}">
         <tr
-          v-if="row.stateDescription"
           :key="row[keyField] + '-description'"
           :data-testid="componentTestid + '-' + i + '-row-description'"
           class="state-description sub-row"
           @mouseenter="onRowMouseEnter"
           @mouseleave="onRowMouseLeave"
         >
-          <td>&nbsp;</td>
+          <td v-if="row.cloudCredentialWarning || row.stateDescription">
+&nbsp;
+          </td>
           <td
+            v-if="row.cloudCredentialWarning || row.stateDescription"
             :colspan="fullColspan - 1"
-            :class="{ 'text-error' : row.stateObj.error }"
           >
-            {{ row.stateDescription }}
+            <CloudCredExpired
+              v-if="row.cloudCredentialWarning"
+              :value="row.cloudCredential.expires"
+              :row="row.cloudCredential"
+              :verbose="true"
+              :class="{'mb-10': row.stateDescription}"
+            />
+            <div
+              v-if="row.stateDescription"
+              :class="{ 'text-error' : row.stateObj.error }"
+            >
+              {{ row.stateDescription }}
+            </div>
           </td>
         </tr>
       </template>

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/models/__tests__/management.cattle.io.cluster.test.ts

@@ -7,9 +7,9 @@ jest.mock('@shell/utils/clipboard', () => {
 describe('class MgmtCluster', () => {
   describe('provisioner', () => {
     const testCases = [
-      [{ provider: 'rke', driver: 'imported' }, 'rke'],
-      [{ provider: 'k3s', driver: 'K3S' }, 'k3s'],
-      [{ provider: 'aks', driver: 'AKS' }, 'aks'],
+      [{ provider: 'rke', driver: 'imported' }, 'imported'],
+      [{ provider: 'k3s', driver: 'K3S' }, 'K3S'],
+      [{ provider: 'aks', driver: 'AKS' }, 'AKS'],
       [{}, 'imported'],
     ];
 

package/models/__tests__/provisioning.cattle.io.cluster.test.ts

@@ -1,31 +1,6 @@
 import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
 
 describe('class ProvCluster', () => {
-  const importedClusterInfo = {
-    clusterName: 'test', provisioner: 'imported', mgmt: { spec: { gkeConfig: {} } }, spec: {}
-  };
-  const importedGkeClusterInfo = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { spec: { gkeConfig: { imported: true } } }
-  };
-  const importedAksClusterInfo = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { spec: { aksConfig: { imported: true } } }
-  };
-  const importedEksClusterInfo = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { spec: { eksConfig: { imported: true } } }
-  };
-  const notImportedGkeClusterInfo = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { spec: { gkeConfig: { imported: false } }, rkeConfig: {} }
-  };
-  const importedClusterInfoWithProviderForEmberParam = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { providerForEmberParam: 'import' }
-  };
-  const localClusterInfo = {
-    clusterName: 'test', provisioner: 'imported', mgmt: { isLocal: true, spec: { gkeConfig: {} } }, spec: {}
-  };
-  const doRke2Info = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { isLocal: false, providerForEmberParam: 'import' }, spec: { rkeConfig: {} }
-  };
-
   const gkeClusterWithPrivateEndpoint = {
     clusterName: 'test',
     provisioner: 'GKE',
@@ -76,67 +51,6 @@ describe('class ProvCluster', () => {
     });
   });
 
-  describe('isImported', () => {
-    const testCases = [
-      [importedClusterInfo, true],
-      [importedGkeClusterInfo, true],
-      [importedAksClusterInfo, true],
-      [importedEksClusterInfo, true],
-      [notImportedGkeClusterInfo, false],
-      [importedClusterInfoWithProviderForEmberParam, true],
-      [localClusterInfo, false],
-      [doRke2Info, false],
-      [{}, false],
-    ];
-    const resetMocks = () => {
-      // Clear all mock function calls:
-      jest.clearAllMocks();
-    };
-
-    it.each(testCases)('should return the isImported value properly based on the props data', (clusterData: Object, expected: Boolean) => {
-      const cluster = new ProvCluster({ spec: clusterData.spec });
-
-      jest.spyOn(cluster, 'mgmt', 'get').mockReturnValue(
-        clusterData.mgmt
-      );
-      jest.spyOn(cluster, 'provisioner', 'get').mockReturnValue(
-        clusterData.provisioner
-      );
-
-      expect(cluster.isImported).toBe(expected);
-      resetMocks();
-    }
-    );
-  });
-
-  describe('mgmt', () => {
-    const testCases = [
-      [importedClusterInfo, importedClusterInfo.mgmt],
-      [importedGkeClusterInfo, importedGkeClusterInfo.mgmt],
-      [importedAksClusterInfo, importedAksClusterInfo.mgmt],
-      [importedEksClusterInfo, importedEksClusterInfo.mgmt],
-      [notImportedGkeClusterInfo, notImportedGkeClusterInfo.mgmt],
-      [importedClusterInfoWithProviderForEmberParam, importedClusterInfoWithProviderForEmberParam.mgmt],
-      [localClusterInfo, localClusterInfo.mgmt],
-      [doRke2Info, doRke2Info.mgmt],
-      [{}, null],
-    ];
-
-    const resetMocks = () => {
-      // Clear all mock function calls:
-      jest.clearAllMocks();
-    };
-
-    it.each(testCases)('should return the isImported value properly based on the props data', (clusterData: Object, expected: Object) => {
-      const clusterMock = jest.fn(() => clusterData.mgmt);
-      const ctx = { rootGetters: { 'management/byId': clusterMock } };
-      const cluster = new ProvCluster({ status: { clusterName: clusterData.clusterName } }, ctx);
-
-      expect(cluster.mgmt).toBe(expected);
-      resetMocks();
-    });
-  });
-
   describe('hasError', () => {
     const conditionsWithoutError = [
       {

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;
   }
 }