@rancher/shell 0.3.11 → 0.3.13

package/edit/namespace.vue

@@ -57,7 +57,7 @@ export default {
       project:                 null,
       projects:                null,
       viewMode:                _VIEW,
-      containerResourceLimits: this.value.annotations[CONTAINER_DEFAULT_RESOURCE_LIMIT] || this.getDefaultContainerResourceLimits(projectName),
+      containerResourceLimits: this.value.annotations?.[CONTAINER_DEFAULT_RESOURCE_LIMIT] || this.getDefaultContainerResourceLimits(projectName),
       projectName,
       HARVESTER_TYPES,
       RANCHER_TYPES,
@@ -181,6 +181,7 @@ export default {
       >
         <LabeledSelect
           v-model="projectName"
+          data-testid="name-ns-description-project"
           :label="t('namespace.project.label')"
           :options="projectOpts"
         />

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

@@ -59,6 +59,12 @@ export default {
       type:    Array,
       default: () => []
     },
+
+    // Is the UI busy (e.g. during save)
+    busy: {
+      type:    Boolean,
+      default: false,
+    }
   },
 
   data() {
@@ -117,8 +123,7 @@ export default {
 
     isWindows() {
       return this.value?.config?.os === 'windows';
-    }
-
+    },
   },
 
   watch: {
@@ -133,6 +138,18 @@ export default {
     }
   },
 
+  /**
+   * On creation, ensure that the pool is marked valid - custom machine pools can emit further validation events
+   */
+  created() {
+    this.$emit('validationChanged', true);
+  },
+
+  beforeDestroy() {
+    // Ensure we emit validation event so parent can forget any validation for this Machine Pool when it is removed
+    this.$emit('validationChanged', undefined);
+  },
+
   methods: {
     async test() {
       if ( typeof this.$refs.configComponent?.test === 'function' ) {
@@ -166,6 +183,11 @@ export default {
       if (advancedComponent && !advancedComponent.show) {
         advancedComponent.toggle();
       }
+    },
+
+    // Propagate up validation status for this Machine Pool
+    validationChanged(val) {
+      this.$emit('validationChanged', val);
     }
   }
 };
@@ -188,7 +210,7 @@ export default {
           :mode="mode"
           :label="t('cluster.machinePool.name.label')"
           :required="true"
-          :disabled="!value.config || !!value.config.id"
+          :disabled="!value.config || !!value.config.id || busy"
         />
       </div>
       <div class="col span-4">
@@ -196,6 +218,7 @@ export default {
           v-model.number="value.pool.quantity"
           :mode="mode"
           :label="t('cluster.machinePool.quantity.label')"
+          :disabled="busy"
           type="number"
           min="0"
           :required="true"
@@ -209,18 +232,19 @@ export default {
           v-model="value.pool.etcdRole"
           :mode="mode"
           :label="t('cluster.machinePool.role.etcd')"
-          :disabled="isWindows"
+          :disabled="isWindows || busy"
         />
         <Checkbox
           v-model="value.pool.controlPlaneRole"
           :mode="mode"
           :label="t('cluster.machinePool.role.controlPlane')"
-          :disabled="isWindows"
+          :disabled="isWindows || busy"
         />
         <Checkbox
           v-model="value.pool.workerRole"
           :mode="mode"
           :label="t('cluster.machinePool.role.worker')"
+          :disabled="busy"
         />
       </div>
     </div>
@@ -237,9 +261,11 @@ export default {
       :credential-id="credentialId"
       :pool-index="idx"
       :machine-pools="machinePools"
+      :busy="busy"
       @error="e=>errors = e"
       @updateMachineCount="updateMachineCount"
       @expandAdvanced="expandAdvanced"
+      @validationChanged="validationChanged"
     />
     <Banner
       v-else-if="value.configMissing"
@@ -279,6 +305,7 @@ export default {
             :mode="mode"
             :output-modifier="true"
             :base-unit="t('cluster.machinePool.autoReplace.unit')"
+            :disabled="busy"
             @input="value.pool.unhealthyNodeTimeout = `${unhealthyNodeTimeoutInteger}s`"
           />
         </div>
@@ -290,6 +317,7 @@ export default {
             v-model="value.pool.drainBeforeDelete"
             :mode="mode"
             :label="t('cluster.machinePool.drain.label')"
+            :disabled="busy"
           />
         </div>
       </div>
@@ -297,16 +325,18 @@ export default {
       <KeyValue
         v-model="value.pool.labels"
         :add-label="t('labels.addLabel')"
-        :mode="mode"
+        :disabled="busy"
         :title="t('cluster.machinePool.labels.label')"
         :read-allowed="false"
         :value-can-be-empty="true"
       />
+
       <div class="spacer" />
 
       <Taints
         v-model="value.pool.taints"
         :mode="mode"
+        :disabled="busy"
       />
 
       <portal-target

package/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts

@@ -240,7 +240,7 @@ describe('component: rke2', () => {
       stubs: defaultStubs
     });
 
-    expect(wrapper.vm.validationPassed()).toBe(result);
+    expect((wrapper.vm as any).validationPassed).toBe(result);
   });
 
   it('should allow creation of K3 clusters if pool machines are missing', () => {
@@ -265,6 +265,6 @@ describe('component: rke2', () => {
       stubs: defaultStubs
     });
 
-    expect(wrapper.vm.validationPassed()).toBe(true);
+    expect((wrapper.vm as any).validationPassed).toBe(true);
   });
 });

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -26,6 +26,7 @@ import {
 } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
+
 import { camelToTitle, nlToBr } from '@shell/utils/string';
 import { compare, sortable } from '@shell/utils/version';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
@@ -330,7 +331,7 @@ export default {
       allPSPs:                         null,
       allPSAs:                         [],
       nodeComponent:                   null,
-      credentialId:                    null,
+      credentialId:                    '',
       credential:                      null,
       machinePools:                    null,
       rke2Versions:                    null,
@@ -361,6 +362,8 @@ export default {
       psps:                  null, // List of policies if any
       truncateHostnames:     truncateLimit === NETBIOS_TRUNCATION_LENGTH,
       truncateLimit,
+      busy:                  false,
+      machinePoolValidation: {} // map of validation states for each machine pool
     };
   },
 
@@ -706,9 +709,20 @@ export default {
         return false;
       }
 
+      if (this.customCredentialComponentRequired === false) {
+        return false;
+      }
+
       return true;
     },
 
+    /**
+     * Only for extensions - extension can register a 'false' cloud credential to indicate that a cloud credential is not needed
+     */
+    customCredentialComponentRequired() {
+      return this.$plugin.getDynamic('cloud-credential', this.provider);
+    },
+
     hasMachinePools() {
       if ( this.provider === 'custom' || this.provider === 'import' ) {
         return false;
@@ -1016,6 +1030,17 @@ export default {
         return false;
       }
     },
+
+    validationPassed() {
+      const validRequiredPools = this.hasMachinePools ? this.hasRequiredNodes() : true;
+
+      let base = (this.provider === 'custom' || this.isElementalCluster || !!this.credentialId);
+
+      // and in all of the validation statuses for each machine pool
+      Object.values(this.machinePoolValidation).forEach(v => (base = base && v));
+
+      return validRequiredPools && base;
+    },
   },
 
   watch: {
@@ -1260,11 +1285,10 @@ export default {
 
     async syncMachineConfigWithLatest(machinePool) {
       if (machinePool?.config?.id) {
-        const latestConfig = await this.$store.dispatch('management/find', {
-          type: machinePool.config.type,
-          id:   machinePool.config.id,
-          opt:  { force: true },
-        });
+        // Use management/request instead of management/find to avoid overwriting the current machine pool in the store
+        const _latestConfig = await this.$store.dispatch('management/request', { url: `/v1/${ machinePool.config.type }s/${ machinePool.config.id }` });
+        const latestConfig = await this.$store.dispatch('management/create', _latestConfig);
+
         const clonedCurrentConfig = await this.$store.dispatch('management/clone', { resource: machinePool.config });
         const clonedLatestConfig = await this.$store.dispatch('management/clone', { resource: latestConfig });
 
@@ -1284,6 +1308,7 @@ export default {
         }
 
         await this.syncMachineConfigWithLatest(entry);
+
         // Capitals and such aren't allowed;
         set(entry.pool, 'name', normalizeName(entry.pool.name) || 'pool');
 
@@ -1340,12 +1365,6 @@ export default {
       return this.nodeTotals?.color && Object.values(this.nodeTotals.color).every(color => color !== NODE_TOTAL.error.color);
     },
 
-    validationPassed() {
-      const validMachinePools = this.hasMachinePools ? this.hasRequiredNodes() : true;
-
-      return (this.provider === 'custom' || this.isElementalCluster || !!this.credentialId) && validMachinePools;
-    },
-
     cancelCredential() {
       if ( this.$refs.cruresource ) {
         this.$refs.cruresource.emitOrRoute();
@@ -1398,7 +1417,18 @@ export default {
       });
     },
 
+    // Set busy before save and clear after save
     async saveOverride(btnCb) {
+      this.$set(this, 'busy', true);
+
+      return await this._doSaveOverride((done) => {
+        this.$set(this, 'busy', false);
+
+        return btnCb(done);
+      });
+    },
+
+    async _doSaveOverride(btnCb) {
       if ( this.errors ) {
         clear(this.errors);
       }
@@ -2048,6 +2078,16 @@ export default {
       this.lastDefaultPodSecurityPolicyTemplateName = value;
     },
 
+    /**
+     * Track Machine Pool validation status
+     */
+    machinePoolValidationChanged(id, value) {
+      if (value === undefined) {
+        this.$delete(this.machinePoolValidation, id);
+      } else {
+        this.$set(this.machinePoolValidation, id, value);
+      }
+    }
   },
 };
 </script>
@@ -2063,7 +2103,7 @@ export default {
     v-else
     ref="cruresource"
     :mode="mode"
-    :validation-passed="validationPassed() && fvFormIsValid"
+    :validation-passed="validationPassed && fvFormIsValid"
     :resource="value"
     :errors="errors"
     :cancel-event="true"
@@ -2092,6 +2132,7 @@ export default {
       :provider="provider"
       :cancel="cancelCredential"
       :showing-form="showForm"
+      class="mt-20"
     />
 
     <div
@@ -2166,6 +2207,7 @@ export default {
               :name="obj.id"
               :label="obj.pool.name || '(Not Named)'"
               :show-header="false"
+              :error="!machinePoolValidation[obj.id]"
             >
               <MachinePool
                 ref="pool"
@@ -2176,7 +2218,9 @@ export default {
                 :credential-id="credentialId"
                 :idx="idx"
                 :machine-pools="machinePools"
+                :busy="busy"
                 @error="e=>errors = e"
+                @validationChanged="v=>machinePoolValidationChanged(obj.id, v)"
               />
             </Tab>
           </template>
@@ -2653,6 +2697,7 @@ export default {
               </Banner>
             </div>
           </div>
+
           <div
             v-if="serverArgs['tls-san']"
             class="row mb-20"

package/middleware/authenticated.js

@@ -420,6 +420,7 @@ export default async function({
     if ( e instanceof ClusterNotFoundError ) {
       return redirect(302, '/home');
     } else {
+      // Sets error 500 if lost connection to API
       store.commit('setError', { error: e, locationError: new Error('Auth Middleware') });
 
       return redirect(302, '/fail-whale');

package/models/__tests__/batch.cronjob.test.ts

@@ -0,0 +1,88 @@
+import Cronjob from '@shell/models/batch.cronjob';
+describe('class Cronjob', () => {
+  it('should have no ownerReferences by default', () => {
+    const cronJobData = {
+      id:         'any-id',
+      type:       'batch.job',
+      apiVersion: 'batch/v1',
+      kind:       'Job',
+      metadata:   {
+        name:      'any-name',
+        namespace: 'any-namespace',
+        uid:       'any-uid'
+      },
+      spec: { jobTemplate: {} }
+    };
+    const expectation = {
+      name: 'any-name', namespace: 'any-namespace', uid: 'any-uid'
+    };
+    const cronjob = new Cronjob(cronJobData);
+
+    expect(cronjob.metadata).toStrictEqual(expectation);
+  });
+
+  describe('method runNow', () => {
+    it('should populate job metadata', async() => {
+      const jobData = {
+        id:         'any-id',
+        type:       'batch.job',
+        apiVersion: 'batch/v1',
+        kind:       'Job',
+        metadata:   {
+          name:      'any-name',
+          namespace: 'any-namespace',
+          uid:       'any-uid'
+        },
+        spec: { jobTemplate: {} }
+      };
+      const date = Date.now();
+      const expected = {
+        name:            `${ jobData.metadata.name }-${ date }`,
+        namespace:       jobData.metadata.namespace,
+        ownerReferences: [{
+          apiVersion: 'batch/v1',
+          controller: true,
+          kind:       'Job',
+          name:       jobData.metadata.name,
+          uid:        jobData.metadata.uid
+        }],
+        uid: jobData.metadata.uid
+      };
+      const dispatcher = () => ({
+        ...jobData,
+        save:       jest.fn(),
+        goToDetail: jest.fn()
+      });
+      const cronjob = new Cronjob(jobData, { dispatch: dispatcher });
+
+      jest
+        .useFakeTimers()
+        .setSystemTime(date);
+      jest.spyOn(cronjob, '$dispatch').mockImplementation(dispatcher);
+
+      await cronjob.runNow();
+
+      expect(cronjob.metadata).toStrictEqual(expected);
+    });
+
+    it('should redirect to another page', async() => {
+      const jobData = {
+        metadata: { name: 'any-name' },
+        spec:     { jobTemplate: {} }
+      };
+      const callback = jest.fn();
+      const dispatcher = () => ({
+        ...jobData,
+        save:       jest.fn(),
+        goToDetail: callback
+      });
+      const cronjob = new Cronjob(jobData, { dispatch: dispatcher });
+
+      jest.spyOn(cronjob, '$dispatch').mockImplementation(dispatcher);
+
+      await cronjob.runNow();
+
+      expect(callback).toHaveBeenCalledWith();
+    });
+  });
+});

package/models/cluster/node.js

@@ -209,6 +209,14 @@ export default class ClusterNode extends SteveModel {
     return ((this.ramUsage * 100) / this.ramCapacity).toString();
   }
 
+  get ramReserved() {
+    return parseSi(this.status?.allocatable?.memory);
+  }
+
+  get ramReservedPercentage() {
+    return ((this.ramUsage * 100) / this.ramReserved).toString();
+  }
+
   get podUsage() {
     return calculatePercentage(this.status.allocatable.pods, this.status.capacity.pods);
   }

package/models/management.cattle.io.clusterroletemplatebinding.js

@@ -37,13 +37,17 @@ export default class CRTB extends HybridModel {
     }, { root: true });
   }
 
+  get syncPrincipal() {
+    return this.$rootGetters['rancher/byId'](NORMAN.PRINCIPAL, this.principalId);
+  }
+
   get principalId() {
     // We've either set it ourselves or it's comes from native properties
     return this.principalName || this.userPrincipalName || this.groupPrincipalName;
   }
 
   get nameDisplay() {
-    return this.user?.nameDisplay || this.userName || this.principalId;
+    return this.user?.nameDisplay || this.userName || this.syncPrincipal?.nameDisplay || this.principalId;
   }
 
   get roleDisplay() {

package/models/projectroletemplatebinding.js

@@ -1,4 +1,4 @@
-import { MANAGEMENT } from '@shell/config/types';
+import { MANAGEMENT, NORMAN } from '@shell/config/types';
 import NormanModel from '@shell/plugins/steve/norman-class';
 
 export default class PRTB extends NormanModel {
@@ -24,4 +24,12 @@ export default class PRTB extends NormanModel {
       id:   this.id?.replace(':', '/')
     }, { root: true });
   }
+
+  get syncPrincipal() {
+    return this.$rootGetters['rancher/byId'](NORMAN.PRINCIPAL, this.principalId);
+  }
+
+  get nameDisplay() {
+    return this.syncPrincipal?.nameDisplay || super.nameDisplay;
+  }
 }

package/models/workload.js

@@ -4,7 +4,7 @@ import { WORKLOAD_TYPES, SERVICE, POD } from '@shell/config/types';
 import { get, set } from '@shell/utils/object';
 import day from 'dayjs';
 import { convertSelectorObj, matching, matches } from '@shell/utils/selector';
-import { SEPARATOR } from '@shell/components/DetailTop';
+import { SEPARATOR } from '@shell/config/workload';
 import WorkloadService from '@shell/models/workload.service';
 
 export const defaultContainer = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/__tests__/prefs.test.ts

@@ -0,0 +1,96 @@
+import { shallowMount } from '@vue/test-utils';
+import Preferences from '@shell/pages/prefs.vue';
+
+describe('page: prefs should', () => {
+  it.each([
+    ['Fri, May 5 2023', 0],
+    ['Fri, 5 May 2023', 1],
+    ['5/5/2023 (D/M/YYYY)', 2],
+    ['5/5/2023 (M/D/YYYY)', 3],
+    ['2023-05-05 (YYYY-MM-DD)', 4],
+  ])('format the date optionally with a cue as %p for date 05/05/2023', (expected, index) => {
+    const date = '05/05/2023';
+    const format = ['ddd, MMM D YYYY', 'ddd, D MMM YYYY', 'D/M/YYYY', 'M/D/YYYY', 'YYYY-MM-DD'];
+
+    jest
+      .useFakeTimers()
+      .setSystemTime(new Date(date));
+
+    const wrapper = shallowMount(Preferences, {
+      propsData: { value: 'asd' },
+      computed:  {
+        pm: jest.fn(),
+        am: jest.fn(),
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'prefs/options':        () => format,
+            'prefs/get':            jest.fn(),
+            'management/schemaFor': jest.fn(),
+            isSingleProduct:        jest.fn(),
+            'i18n/t':               jest.fn(),
+          }
+        }
+      },
+      stubs: {
+        BackLink:              { template: '<div />' },
+        ButtonGroup:           { template: '<div />' },
+        LabeledSelect:         { template: '<div />' },
+        Checkbox:              { template: '<div />' },
+        LandingPagePreference: { template: '<div />' },
+        LocaleSelector:        { template: '<div />' },
+      }
+    });
+
+    const options = (wrapper.vm as unknown as any).dateOptions;
+
+    expect(options[index].label).toBe(expected);
+  });
+
+  it.each([
+    ['Mon, May 1 2023', 0],
+    ['Mon, 1 May 2023', 1],
+    ['1/5/2023', 2],
+    ['5/1/2023', 3],
+    ['2023-05-01', 4],
+  ])('format the date %p without cue for date 01/05/2023', (expected, index) => {
+    const date = '05/01/2023';
+    const format = ['ddd, MMM D YYYY', 'ddd, D MMM YYYY', 'D/M/YYYY', 'M/D/YYYY', 'YYYY-MM-DD'];
+
+    jest
+      .useFakeTimers()
+      .setSystemTime(new Date(date));
+
+    const wrapper = shallowMount(Preferences, {
+      propsData: { value: 'asd' },
+      computed:  {
+        pm: jest.fn(),
+        am: jest.fn(),
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'prefs/options':        () => format,
+            'prefs/get':            jest.fn(),
+            'management/schemaFor': jest.fn(),
+            isSingleProduct:        jest.fn(),
+            'i18n/t':               jest.fn(),
+          }
+        }
+      },
+      stubs: {
+        BackLink:              { template: '<div />' },
+        ButtonGroup:           { template: '<div />' },
+        LabeledSelect:         { template: '<div />' },
+        Checkbox:              { template: '<div />' },
+        LandingPagePreference: { template: '<div />' },
+        LocaleSelector:        { template: '<div />' },
+      }
+    });
+
+    const options = (wrapper.vm as unknown as any).dateOptions;
+
+    expect(options[index].label).toBe(expected);
+  });
+});

package/pages/auth/setup.vue

@@ -16,6 +16,7 @@ import { isDevBuild } from '@shell/utils/version';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import Password from '@shell/components/form/Password';
 import { applyProducts } from '@shell/store/type-map';
+import BrandImage from '@shell/components/BrandImage';
 
 const calcIsFirstLogin = (store) => {
   const firstLoginSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
@@ -76,7 +77,7 @@ export default {
   },
 
   components: {
-    AsyncButton, LabeledInput, CopyToClipboard, Checkbox, RadioGroup, Password
+    AsyncButton, LabeledInput, CopyToClipboard, Checkbox, RadioGroup, Password, BrandImage
   },
 
   async asyncData({ route, req, store }) {
@@ -284,7 +285,6 @@ export default {
               v-clean-html="t(isFirstLogin ? 'setup.setPassword' : 'setup.newUserSetPassword', { username }, true)"
               class="text-center mb-20 mt-20 setup-title"
             />
-
             <Password
               v-if="!haveCurrent"
               v-model.trim="current"
@@ -431,8 +431,10 @@ export default {
           </div>
         </div>
       </div>
-
-      <div class="col span-6 landscape" />
+      <BrandImage
+        class="col span-6 landscape"
+        file-name="login-landscape.svg"
+      />
     </div>
   </form>
 </template>
@@ -464,6 +466,13 @@ export default {
       .span-6 {
         padding: 0 60px;
       }
+
+      .landscape {
+        height: 100vh;
+        margin: 0;
+        object-fit: cover;
+        padding: 0;
+      }
     }
 
     .form-col {
@@ -491,14 +500,5 @@ export default {
     p {
       line-height: 20px;
     }
-
-  }
-
-  .landscape {
-    background-image: url('~@shell/assets/images/pl/login-landscape.svg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
-    height: 100vh;
   }
 </style>