@rancher/shell 3.0.0-rc.9 → 3.0.1-rc.1

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/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors.vue

@@ -90,7 +90,7 @@ export default {
       :default-add-value="defaultAddValue"
       :initial-empty-row="true"
       :mode="mode"
-      @input="update"
+      @update:value="update"
     >
       <template #default="{row}">
         <div class="row">

package/edit/workload/mixins/workload.js

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

package/list/harvesterhci.io.management.cluster.vue

@@ -0,0 +1,244 @@
+<script>
+import BrandImage from '@shell/components/BrandImage';
+import TypeDescription from '@shell/components/TypeDescription';
+import ResourceTable from '@shell/components/ResourceTable';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import Loading from '@shell/components/Loading';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
+import { CAPI, HCI, MANAGEMENT } from '@shell/config/types';
+import { isHarvesterCluster } from '@shell/utils/cluster';
+import { allHash } from '@shell/utils/promise';
+
+export default {
+  components: {
+    BrandImage,
+    ResourceTable,
+    Masthead,
+    TypeDescription,
+    Loading
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await allHash({
+      hciClusters:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER }),
+      mgmtClusters: this.$store.dispatch(`${ inStore }/findAll`, { type: MANAGEMENT.CLUSTER })
+    });
+
+    this.hciClusters = hash.hciClusters;
+    this.mgmtClusters = hash.mgmtClusters;
+  },
+
+  data() {
+    const resource = CAPI.RANCHER_CLUSTER;
+
+    return {
+      navigating:   false,
+      VIRTUAL,
+      hciDashboard: HCI.DASHBOARD,
+      resource,
+      hResource:    HCI.CLUSTER,
+      hciClusters:  [],
+      mgmtClusters: []
+    };
+  },
+
+  computed: {
+    realSchema() {
+      return this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+    },
+
+    importLocation() {
+      return {
+        name:   'c-cluster-product-resource-create',
+        params: {
+          product:  this.$store.getters['currentProduct'].name,
+          resource: this.schema.id,
+        },
+      };
+    },
+
+    canCreateCluster() {
+      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+
+      return !!schema?.collectionMethods.find((x) => x.toLowerCase() === 'post');
+    },
+
+    rows() {
+      return this.hciClusters.filter((c) => {
+        const cluster = this.mgmtClusters.find((cluster) => cluster?.metadata?.name === c?.status?.clusterName);
+
+        return isHarvesterCluster(cluster);
+      });
+    },
+
+    typeDisplay() {
+      return this.t(`typeLabel."${ HCI.CLUSTER }"`, { count: this.row?.length || 0 });
+    },
+  },
+
+  methods: {
+    async goToCluster(row) {
+      const timeout = setTimeout(() => {
+        // Don't show loading indicator for quickly fetched plugins
+        this.navigating = row.id;
+      }, 1000);
+
+      try {
+        await row.goToCluster();
+
+        clearTimeout(timeout);
+        this.navigating = false;
+      } catch {
+        // The error handling is carried out within goToCluster, but just in case something happens before the promise chain can catch it...
+        clearTimeout(timeout);
+        this.navigating = false;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="realSchema"
+      :resource="resource"
+      :is-creatable="false"
+      :type-display="typeDisplay"
+    >
+      <template #typeDescription>
+        <TypeDescription :resource="hResource" />
+      </template>
+
+      <template
+        v-if="canCreateCluster"
+        slot="extraActions"
+      >
+        <n-link
+          :to="importLocation"
+          class="btn role-primary"
+        >
+          {{ t('cluster.importAction') }}
+        </n-link>
+      </template>
+    </Masthead>
+
+    <ResourceTable
+      v-if="rows && rows.length"
+      :schema="schema"
+      :rows="rows"
+      :is-creatable="true"
+      :namespaced="false"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    >
+      <template #col:name="{row}">
+        <td>
+          <span class="cluster-link">
+            <a
+              v-if="row.isReady"
+              class="link"
+              :disabled="navigating"
+              @click="goToCluster(row)"
+            >{{ row.nameDisplay }}</a>
+            <span v-else>
+              {{ row.nameDisplay }}
+            </span>
+            <i
+              class="icon icon-spinner icon-spin ml-5"
+              :class="{'navigating': navigating === row.id}"
+            />
+          </span>
+        </td>
+      </template>
+
+      <template #cell:harvester="{row}">
+        <n-link
+          class="btn btn-sm role-primary"
+          :to="row.detailLocation"
+        >
+          {{ t('harvesterManager.manage') }}
+        </n-link>
+      </template>
+    </ResourceTable>
+    <div v-else>
+      <div class="no-clusters">
+        {{ t('harvesterManager.cluster.none') }}
+      </div>
+      <hr class="info-section">
+      <div class="logo">
+        <BrandImage
+          file-name="harvester.png"
+          height="64"
+        />
+      </div>
+      <div class="tagline">
+        <div>{{ t('harvesterManager.cluster.description') }}</div>
+      </div>
+      <div class="tagline sub-tagline">
+        <div v-clean-html="t('harvesterManager.cluster.learnMore', {}, true)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .cluster-link {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      // Use visibility to avoid the columns re-adjusting when the icon is shown
+      visibility: hidden;
+
+      &.navigating {
+        visibility: visible;
+      }
+    }
+
+  }
+  .no-clusters {
+    text-align: center;
+  }
+
+  .info-section {
+    margin-top: 60px;
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+    margin: 60px 0 40px 0;
+  }
+
+  .tagline {
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+
+    > div {
+      font-size: 16px;
+      line-height: 22px;
+      max-width: 80%;
+      text-align: center;
+    }
+  }
+
+ .link {
+    cursor: pointer;
+  }
+
+</style>

package/list/namespace.vue

@@ -1,7 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
+import { NS_SNAPSHOT_QUOTA } from '../config/table-headers';
 import ResourceTable from '@shell/components/ResourceTable';
-
+import { HCI } from '@shell/config/types';
 export default {
   name:       'ListNamespace',
   components: { ResourceTable },
@@ -27,13 +28,23 @@ export default {
       default: false
     }
   },
-  data() {
-    return { asddsa: true };
-  },
 
   computed: {
     ...mapGetters(['currentProduct']),
+    hasHarvesterResourceQuotaSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.RESOURCE_QUOTA);
+    },
+    headers() {
+      const headersFromSchema = this.$store.getters['type-map/headersFor'](this.schema);
 
+      if (this.hasHarvesterResourceQuotaSchema) {
+        headersFromSchema.splice(2, 0, NS_SNAPSHOT_QUOTA);
+      }
+
+      return headersFromSchema;
+    },
     filterRow() {
       if (this.currentProduct.hideSystemResources) {
         return this.rows.filter( (N) => {
@@ -56,6 +67,7 @@ export default {
     v-bind="$attrs"
     :rows="filterRow"
     :groupable="false"
+    :headers="headers"
     :schema="schema"
     key-field="_key"
     :loading="loading"

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

@@ -4,12 +4,34 @@ jest.mock('@shell/utils/clipboard', () => {
   return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
 });
 
+const importedRKE2ClusterInfo = { status: { driver: 'rke2', provider: 'rke2' } };
+
+const provisionedRKE2ClusterInfo = { status: { driver: 'rke2', provider: 'imported' } };
+
+const importedK3sClusterInfo = { status: { driver: 'k3s', provider: 'k3s' } };
+
+const provisionedK3sClusterInfo = { status: { driver: 'k3s', provider: 'imported' } };
+
+const importedAksClusterInfo = { spec: { aksConfig: { imported: true } }, status: { provider: 'aks', driver: 'AKS' } };
+
+const provisionedAksClusterInfo = { spec: { aksConfig: { imported: false } }, status: { provider: 'aks', driver: 'AKS' } };
+
+const importedRKE1ClusterInfo = { status: { provider: 'rke', driver: 'imported' } };
+
+const provisionedRKE1ClusterInfo = { status: { provider: 'rke', driver: 'rancherKubernetesEngine' } };
+
+const localRKE1ClusterInfo = { status: { provider: 'rke', driver: 'imported' } };
+
+const localRKE2ClusterInfo = { status: { provider: 'rke2', driver: 'rke2' } };
+
+const localEKSClusterInfo = { status: { provider: 'eks', driver: 'imported' } };
+
 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'],
     ];
 
@@ -20,4 +42,24 @@ describe('class MgmtCluster', () => {
     }
     );
   });
+
+  describe('isImported', () => {
+    it.each([
+      [importedRKE2ClusterInfo, true],
+      [provisionedRKE2ClusterInfo, false],
+      [importedK3sClusterInfo, true],
+      [provisionedK3sClusterInfo, false],
+      [importedAksClusterInfo, true],
+      [provisionedAksClusterInfo, false],
+      [importedRKE1ClusterInfo, true],
+      [provisionedRKE1ClusterInfo, false],
+      [localRKE1ClusterInfo, true],
+      [localRKE2ClusterInfo, true],
+      [localEKSClusterInfo, true]
+    ])('should return isImported based on props data', (clusterData, expected) => {
+      const cluster = new MgmtCluster(clusterData);
+
+      expect(cluster.isImported).toBe(expected);
+    });
+  });
 });