@rancher/shell 3.0.12-rc.4 → 3.0.12-rc.6

package/components/CruResource.vue

@@ -127,6 +127,12 @@ export default {
       default: () => []
     },
 
+    // Used to be called before going to the next step in the wizard.
+    beforeNext: {
+      type:    Function,
+      default: null
+    },
+
     stepsOptions: {
       type:    Object,
       default: () => ({ editFirstStep: true })
@@ -200,6 +206,7 @@ export default {
       tocContainerHeight:                 0,
       mainLayoutEl:                       null,
       throttledComputeTocContainerHeight: null,
+      nextValidating:                     false,
       /**
        * Initialised on demand (given that it needs to make a request to fetch schema definition)
        */
@@ -488,6 +495,47 @@ export default {
       return slot !== 'default' && typeof this.$slots[slot] === 'function';
     },
 
+    async wizardBeforeGoToStep(fromStep, toStep) {
+      if (!this.beforeNext) {
+        return;
+      }
+
+      const fromIdx = this.steps.findIndex((s) => s.name === fromStep.name);
+      const toIdx = this.steps.findIndex((s) => s.name === toStep.name);
+
+      if (toIdx <= fromIdx) {
+        return;
+      }
+
+      try {
+        await this.beforeNext(fromStep);
+        this.$emit('error', []);
+      } catch (err) {
+        this.$emit('error', exceptionToErrorsArray(err));
+        throw err;
+      }
+    },
+
+    async handleNext(nextFn, activeStep) {
+      if (!this.beforeNext) {
+        nextFn();
+
+        return;
+      }
+
+      this.nextValidating = true;
+
+      try {
+        await this.beforeNext(activeStep);
+        this.$emit('error', []);
+        nextFn();
+      } catch (err) {
+        this.$emit('error', exceptionToErrorsArray(err));
+      } finally {
+        this.nextValidating = false;
+      }
+    },
+
     formatError(err) {
       if ( typeof err === 'string') {
         return err;
@@ -751,6 +799,7 @@ export default {
             :edit-first-step="stepsOptions.editFirstStep"
             :errors="errors"
             :finish-mode="finishMode"
+            :before-go-to-step="wizardBeforeGoToStep"
             class="wizard"
             @error="e=>errors = e"
           >
@@ -834,10 +883,10 @@ export default {
                     name="next"
                   >
                     <button
-                      :disabled="!canNext"
+                      :disabled="!canNext || nextValidating"
                       type="button"
                       class="btn role-primary"
-                      @click="next()"
+                      @click="handleNext(next, activeStep)"
                     >
                       <t k="wizard.next" />
                     </button>

package/components/EtcdInfoBanner.vue

@@ -3,23 +3,13 @@ import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { mapGetters } from 'vuex';
 import { hasLeader, leaderChanges, failedProposals } from '@shell/utils/grafana';
-import { CATALOG } from '@shell/config/types';
+import { fetchMonitoringVersion } from '@shell/utils/monitoring';
 
 export default {
   components: { Banner, Loading },
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
-    let monitoringVersion = '';
-
-    if (this.$store.getters[`${ inStore }/canList`](CATALOG.APP)) {
-      try {
-        const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
-
-        monitoringVersion = res?.currentVersion;
-      } catch (err) {
-
-      }
-    }
+    const monitoringVersion = await fetchMonitoringVersion(this.$store, inStore);
 
     const leader = await hasLeader(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
 

package/components/GrafanaDashboard.vue

@@ -2,7 +2,7 @@
 import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
 import { computeDashboardUrl } from '@shell/utils/grafana';
-import { CATALOG } from '@shell/config/types';
+import { fetchMonitoringVersion } from '@shell/utils/monitoring';
 
 export default {
   components: { Banner, Loading },
@@ -41,13 +41,7 @@ export default {
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
 
-    if (this.$store.getters[`${ inStore }/canList`](CATALOG.APP)) {
-      try {
-        const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
-
-        this.monitoringVersion = res?.currentVersion;
-      } catch (err) {}
-    }
+    this.monitoringVersion = await fetchMonitoringVersion(this.$store, inStore);
   },
   data() {
     return {

package/components/PromptRestore.vue

@@ -7,16 +7,15 @@ import Date from '@shell/components/formatter/Date.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
-import { CAPI, SNAPSHOT } from '@shell/config/types';
+import { CAPI, SNAPSHOT, OPERATION, MANAGEMENT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import ChildHook, { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
 import day from 'dayjs';
 import { sortBy } from '@shell/utils/sort';
-import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import AppModal from '@shell/components/AppModal.vue';
-
+import { createOperationCR } from '@shell/utils/operation-cr';
 export default {
   components: {
     Card,
@@ -66,8 +65,41 @@ export default {
       return !!this.snapshot;
     },
 
-    isRke2() {
-      return !!this.snapshot?.rke2;
+    targetCluster() {
+      if (this.isCluster) {
+        return this.toRestore?.[0] || null;
+      }
+
+      if (this.snapshot?.cluster) {
+        return this.snapshot.cluster;
+      }
+
+      const snapshotClusterName = this.snapshot?.spec?.clusterName || this.snapshot?.clusterName;
+      const snapshotClusterId = this.snapshot?.clusterId || (snapshotClusterName ? `${ this.snapshot?.metadata?.namespace }/${ snapshotClusterName }` : null);
+
+      if (!snapshotClusterId) {
+        return null;
+      }
+
+      return this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, snapshotClusterId);
+    },
+
+    targetMgmtCluster() {
+      if (this.targetCluster?.mgmt) {
+        return this.targetCluster.mgmt;
+      }
+
+      const mgmtClusterId = this.snapshot?.spec?.clusterName;
+
+      if (!mgmtClusterId) {
+        return null;
+      }
+
+      return this.$store.getters['management/byId'](MANAGEMENT.CLUSTER, mgmtClusterId);
+    },
+
+    isImported() {
+      return !!(this.targetCluster?.isImported || this.targetMgmtCluster?.isImported);
     },
 
     clusterSnapshots() {
@@ -77,6 +109,13 @@ export default {
         return [];
       }
     },
+    restoreModeLabels() {
+      return [
+        this.t('promptRestore.restoreMode.onlyEtcd'),
+        this.t('promptRestore.restoreMode.kubernetesVersionAndEtcd'),
+        this.t('promptRestore.restoreMode.clusterConfigKubernetesVersionAndEtcd')
+      ];
+    },
     restoreModeOptions() {
       return ['none', 'kubernetesVersion', 'all'];
     }
@@ -112,7 +151,7 @@ export default {
       const promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
         const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
 
-        return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
+        return snapshots.filter((s) => s?.restoreEnabled && s.clusterName === toRestoreClusterName
         );
       });
 
@@ -143,19 +182,41 @@ export default {
 
     async apply(buttonDone) {
       try {
-        const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
+        const cluster = this.targetCluster;
+        const mgmtCluster = cluster?.mgmt || this.targetMgmtCluster;
 
-        await this.applyHooks(BEFORE_SAVE_HOOKS);
-
-        const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
+        const isImportedWithDayTwoOps = cluster?.isImportedWithDayTwoOps || mgmtCluster?.isDayTwoOpsEnabled;
 
-        set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
-          generation:       now + 1,
-          name:             this.snapshot.name,
-          restoreRKEConfig: this.restoreMode,
-        });
+        await this.applyHooks(BEFORE_SAVE_HOOKS);
 
-        await cluster.save();
+        // For imported clusters with day 2 ops enabled, create an operation CR
+        if (isImportedWithDayTwoOps) {
+          if (!mgmtCluster) {
+            throw new Error(this.t('promptRestore.error.unableToResolveTargetCluster'));
+          }
+          const namespace = mgmtCluster?.id;
+          const safePrefix = mgmtCluster?.id;
+          const spec = {
+            clusterRef: {
+              apiVersion: 'management.cattle.io/v3',
+              kind:       'Cluster',
+              name:       mgmtCluster?.id,
+            },
+            args: { name: this.snapshot?.snapshotFile?.name },
+          };
+
+          createOperationCR(this.$store.dispatch, OPERATION.ETCD_SNAPSHOT_RESTORE, spec, namespace, safePrefix);
+        } else {
+          const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
+
+          set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
+            generation:       now + 1,
+            name:             this.snapshot.name,
+            restoreRKEConfig: this.restoreMode,
+          });
+
+          await cluster.save();
+        }
 
         this.$store.dispatch('growl/success', {
           title:   this.t('promptRestore.notification.title'),
@@ -233,18 +294,25 @@ export default {
                 />
               </p>
             </div>
-            <div class="spacer" />
-            <RadioGroup
-              v-model:value="restoreMode"
-              name="restoreMode"
-              label="Restore Type"
-              :labels="['Only etcd', 'Kubernetes version and etcd', 'Cluster config, Kubernetes version and etcd']"
-              :options="restoreModeOptions"
-            />
+            <div v-if="!isImported">
+              <div class="spacer" />
+              <RadioGroup
+                v-model:value="restoreMode"
+                name="restoreMode"
+                :label="t('promptRestore.restoreMode.label')"
+                :labels="restoreModeLabels"
+                :options="restoreModeOptions"
+              />
+            </div>
           </form>
         </div>
       </template>
-
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
       <template #actions>
         <div class="dialog-actions">
           <button
@@ -259,13 +327,6 @@ export default {
             :disabled="!hasSnapshot"
             @click="apply"
           />
-
-          <Banner
-            v-for="(err, i) in errors"
-            :key="i"
-            color="error"
-            :label="err"
-          />
         </div>
       </template>
     </Card>

package/components/Questions/index.vue

@@ -474,6 +474,7 @@ export default {
             :value="get(value, q.variable)"
             :disabled="disabled"
             :chart-name="chartName"
+            :mode="mode"
             @update:value="update(q.variable, $event)"
           />
         </div>

package/components/Resource/Detail/Masthead/__tests__/index.test.ts

@@ -1,5 +1,7 @@
 import { mount } from '@vue/test-utils';
 import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
 import Cards from '@shell/components/Resource/Detail/Cards.vue';
 
 jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
@@ -19,16 +21,18 @@ describe('component: Masthead/index', () => {
     metadataProps: { items: [] }
   };
 
+  const globalStubs = {
+    stubs: {
+      TitleBar: true,
+      Metadata: true,
+      Cards:    true
+    }
+  };
+
   it('should render the Cards component', () => {
     const wrapper = mount(Masthead, {
       props:  defaultProps,
-      global: {
-        stubs: {
-          TitleBar: true,
-          Metadata: true,
-          Cards:    true
-        }
-      }
+      global: globalStubs
     });
 
     expect(wrapper.findComponent(Cards).exists()).toBe(true);
@@ -37,17 +41,67 @@ describe('component: Masthead/index', () => {
   it('should pass the resource from titleBarProps to Cards', () => {
     const wrapper = mount(Masthead, {
       props:  defaultProps,
-      global: {
-        stubs: {
-          TitleBar: true,
-          Metadata: true,
-          Cards:    true
-        }
-      }
+      global: globalStubs
     });
 
     const cardsComponent = wrapper.findComponent(Cards);
 
     expect(cardsComponent.props('resource')).toStrictEqual(mockResource);
   });
+
+  it('should render TitleBar when titleBarProps is provided', () => {
+    const wrapper = mount(Masthead, {
+      props:  defaultProps,
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(TitleBar).exists()).toBe(true);
+  });
+
+  it('should render Metadata when metadataProps is provided', () => {
+    const wrapper = mount(Masthead, {
+      props:  defaultProps,
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(Metadata).exists()).toBe(true);
+  });
+
+  it('should not render TitleBar when titleBarProps is undefined', () => {
+    const wrapper = mount(Masthead, {
+      props:  { titleBarProps: undefined, metadataProps: { items: [] } },
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(TitleBar).exists()).toBe(false);
+  });
+
+  it('should not render Metadata when metadataProps is undefined', () => {
+    const wrapper = mount(Masthead, {
+      props:  { titleBarProps: defaultProps.titleBarProps, metadataProps: undefined },
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(Metadata).exists()).toBe(false);
+  });
+
+  it('should not render Cards when titleBarProps is undefined', () => {
+    const wrapper = mount(Masthead, {
+      props:  { titleBarProps: undefined, metadataProps: undefined },
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(Cards).exists()).toBe(false);
+  });
+
+  it('should not render any children when both props are undefined', () => {
+    const wrapper = mount(Masthead, {
+      props:  { titleBarProps: undefined, metadataProps: undefined },
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(TitleBar).exists()).toBe(false);
+    expect(wrapper.findComponent(Metadata).exists()).toBe(false);
+    expect(wrapper.findComponent(Cards).exists()).toBe(false);
+  });
 });

package/components/Resource/Detail/Masthead/index.vue

@@ -4,8 +4,8 @@ import Metadata, { MetadataProps } from '@shell/components/Resource/Detail/Metad
 import Cards from '@shell/components/Resource/Detail/Cards.vue';
 
 export interface MastheadProps {
-  titleBarProps: TitleBarProps;
-  metadataProps: MetadataProps;
+  titleBarProps?: TitleBarProps;
+  metadataProps?: MetadataProps;
 }
 </script>
 
@@ -15,7 +15,10 @@ const props = defineProps<MastheadProps>();
 </script>
 <template>
   <div class="masthead">
-    <TitleBar v-bind="props.titleBarProps">
+    <TitleBar
+      v-if="props.titleBarProps"
+      v-bind="props.titleBarProps"
+    >
       <template
         v-if="$slots['additional-actions']"
         #additional-actions
@@ -24,10 +27,12 @@ const props = defineProps<MastheadProps>();
       </template>
     </TitleBar>
     <Metadata
+      v-if="props.metadataProps"
       class="metadata-section"
       v-bind="props.metadataProps"
     />
     <Cards
+      v-if="props.titleBarProps"
       class="cards-section"
       :resource="props.titleBarProps.resource"
     />

package/components/ResourceTable.vue

@@ -746,6 +746,7 @@ export default {
       <ButtonGroup
         v-model:value="group"
         :options="_groupOptions"
+        size="medium"
       />
     </template>
 

package/components/SortableTable/index.vue

@@ -1125,7 +1125,6 @@ export default {
                 v-clean-tooltip="actionTooltip"
                 type="button"
                 variant="primary"
-                size="large"
                 :class="{[bulkActionClass]:true}"
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
@@ -1146,6 +1145,7 @@ export default {
                   :disabled="!selectedRows.length"
                   :hidden-actions="hiddenActions"
                   :action-tooltip="actionTooltip"
+                  size="medium"
                   @click="applyTableAction"
                   @mouseover="setBulkActionOfInterest"
                   @mouseleave="setBulkActionOfInterest"
@@ -1158,10 +1158,11 @@ export default {
                   :disable-button="!selectedRows.length"
                   size="sm"
                 >
-                  <template #button-content>
+                  <template #button-content="{ buttonSize }">
                     <button
                       ref="actionDropDown"
                       class="btn bg-primary mr-0"
+                      :class="buttonSize"
                       :disabled="!selectedRows.length"
                     >
                       <i class="icon icon-gear" />
@@ -1874,7 +1875,7 @@ export default {
   }
 
   .search-box {
-    height: 40px;
+    height: 32px;
     margin-left: 10px;
     min-width: 180px;
   }

package/components/Wizard.vue

@@ -124,6 +124,11 @@ export default {
     errors: {
       type:    Array,
       default: null,
+    },
+
+    beforeGoToStep: {
+      type:    Function,
+      default: null
     }
   },
 
@@ -217,7 +222,7 @@ export default {
   },
 
   methods: {
-    goToStep(number, fromNav) {
+    async goToStep(number, fromNav) {
       if (number < 1) {
         return;
       }
@@ -233,6 +238,14 @@ export default {
         return;
       }
 
+      if (this.beforeGoToStep && fromNav) {
+        try {
+          await this.beforeGoToStep(this.activeStep, selected);
+        } catch {
+          return;
+        }
+      }
+
       this.activeStep = selected;
 
       this.$emit('next', { step: selected });

package/components/__tests__/ButtonGroup.test.ts

@@ -118,4 +118,60 @@ describe('component: ButtonGroup', () => {
     expect(wrapper.emitted('update:value')).toHaveLength(1);
     expect(wrapper.emitted('update:value')![0][0]).toBe('val1');
   });
+
+  it.each([
+    ['small', 'btn-sm'],
+    ['medium', 'btn-md'],
+  ])('should apply the size class to each button when size is %s', (size, sizeClass) => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1'
+      },
+      {
+        label: 'label2',
+        value: 'val2'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      props: {
+        options,
+        value: 'val1',
+        size
+      }
+    });
+
+    const buttons = wrapper.findAll('button');
+
+    expect(buttons).toHaveLength(2);
+    buttons.forEach((button) => {
+      expect(button.classes()).toContain(sizeClass);
+    });
+  });
+
+  it.each([
+    [undefined],
+    ['large'],
+  ])('should not apply a size class when size is %s', (size) => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      props: {
+        options,
+        value: 'val1',
+        ...(size ? { size } : {})
+      }
+    });
+
+    const button = wrapper.find('button');
+
+    expect(button.classes()).not.toContain('btn-sm');
+    expect(button.classes()).not.toContain('btn-md');
+  });
 });