@rancher/shell 0.3.28 → 0.3.29

package/assets/translations/en-us.yaml

@@ -691,6 +691,15 @@ asyncButton:
     successIcon: checkmark
     waiting: ''
     waitingIcon: refresh
+  manual-refresh:
+    action: ''
+    actionIcon: refresh
+    error: ''
+    errorIcon: error
+    success: ''
+    successIcon: checkmark
+    waiting: ''
+    waitingIcon: refresh
   remove:
     action: Remove
     success: Removed
@@ -1525,6 +1534,9 @@ cluster:
         host:
           label: Host
           note: Specific host to create VM on (leave blank for standalone ESXi or for cluster with DRS)
+        gracefulShutdownTimeout:
+          label: Graceful Shutdown Timeout
+          note: The time in seconds to wait before forcing deleting VMs in the infrastructure. Zero means disable graceful shutdown.
       instanceOptions:
         label: Instance Options
         description: Choose the size and OS of the virtual machine
@@ -5858,7 +5870,9 @@ workload:
         exec:  Command run inside the container exits with status 0
     image: Container Image
     imagePullPolicy: Pull Policy
-    imagePullSecrets: Pull Secrets
+    imagePullSecrets:
+      label: Pull Secrets
+      tooltip: Must be of Type `kubernetes.io/dockercfg` or `kubernetes.io/dockerconfigjson`
     init: Init Container
     lifecycleHook:
       postStart:

package/chart/monitoring/grafana/index.vue

@@ -136,7 +136,7 @@ export default {
         newValsOut = {
           accessModes:      null,
           storageClassName: null,
-          size:             null,
+          size:             '10Gi',
           subPath:          null,
           type:             'pvc',
           annotations:      null,
@@ -148,7 +148,7 @@ export default {
         newValsOut = {
           accessModes:      null,
           storageClassName: null,
-          size:             null,
+          size:             '10Gi',
           subPath:          null,
           type:             'statefulset',
           enabled:          true,

package/components/AsyncButton.vue

@@ -273,6 +273,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"
   >
+    <span v-if="mode === 'manual-refresh'">{{ t('action.refresh') }}</span>
     <i
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
@@ -285,3 +286,11 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     />
   </button>
 </template>
+
+<style lang="scss" scoped>
+// refresh mode has icon + text. We need to fix the positioning of the icon and sizing
+.manual-refresh i {
+  margin: 0 0 0 8px !important;
+  font-size: 1rem !important;
+}
+</style>

package/components/SortableTable/THead.vue

@@ -162,15 +162,13 @@ export default {
       const menu = document.querySelector('.table-options-container');
       const elem = document.querySelector('.table-options-btn');
 
-      if (!this.tableColsMenuPosition) {
-        this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
-          overlapX:  true,
-          fudgeX:    26,
-          fudgeY:    -22,
-          positionX: CENTER,
-          positionY: AUTO,
-        });
-      }
+      this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
+        overlapX:  true,
+        fudgeX:    326,
+        fudgeY:    -22,
+        positionX: CENTER,
+        positionY: AUTO,
+      });
 
       // toggle visibility
       this.tableColsOptionsVisibility = !this.tableColsOptionsVisibility;

package/components/SortableTable/index.vue

@@ -1026,9 +1026,8 @@ export default {
           <slot name="header-right" />
           <AsyncButton
             v-if="isTooManyItemsToAutoUpdate"
-            v-clean-tooltip="t('performance.manualRefresh.buttonTooltip')"
             class="manual-refresh"
-            mode="refresh"
+            mode="manual-refresh"
             :current-phase="currentPhase"
             @click="debouncedRefreshTableData"
           />

package/components/fleet/FleetStatus.vue

@@ -1,7 +1,7 @@
 <script>
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
-import { stateSort } from '@shell/plugins/dashboard-store/resource-class';
+import { stateSort, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
 
@@ -50,8 +50,8 @@ export default {
   computed: {
     meta() {
       return {
-        total:      this.values.map((x) => x.value).reduce((a, b) => a + b),
-        readyCount: this.values.filter((x) => x.label === 'Success' || x.label === 'Ready').map((x) => x.value).reduce((a, b) => a + b)
+        total:      this.values.map((x) => x.value).reduce((a, b) => a + b, 0),
+        readyCount: this.values.filter((x) => x.status === STATES_ENUM.SUCCESS || x.status === STATES_ENUM.READY).map((x) => x.value).reduce((a, b) => a + b, 0)
       };
     },
 

package/components/fleet/FleetSummary.vue

@@ -6,47 +6,52 @@ import FleetStatus from '@shell/components/fleet/FleetStatus';
 const getResourceDefaultState = (labelGetter, stateKey) => {
   return {
     ready: {
-      count: 0,
-      color: STATES[STATES_ENUM.READY].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.READY].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label ),
+      status: STATES_ENUM.READY
     },
     info: {
-      count: 0,
-      color: STATES[STATES_ENUM.INFO].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.INFO].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label ),
+      status: STATES_ENUM.INFO
     },
     warning: {
-      count: 0,
-      color: STATES[STATES_ENUM.WARNING].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.WARNING }`, null, STATES[STATES_ENUM.WARNING].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.WARNING].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WARNING }`, null, STATES[STATES_ENUM.WARNING].label ),
+      status: STATES_ENUM.WARNING
     },
     notready: {
-      count: 0,
-      color: STATES[STATES_ENUM.NOT_READY].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.NOT_READY].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label ),
+      status: STATES_ENUM.NOT_READY
     },
     error: {
-      count: 0,
-      color: STATES[STATES_ENUM.ERROR].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label )
-
+      count:  0,
+      color:  STATES[STATES_ENUM.ERROR].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label ),
+      status: STATES_ENUM.ERROR
     },
     errapplied: {
-      count: 0,
-      color: STATES[STATES_ENUM.ERR_APPLIED].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label )
-
+      count:  0,
+      color:  STATES[STATES_ENUM.ERR_APPLIED].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label ),
+      status: STATES_ENUM.ERR_APPLIED,
     },
     waitapplied: {
-      count: 0,
-      color: STATES[STATES_ENUM.WAIT_APPLIED].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label )
-
+      count:  0,
+      color:  STATES[STATES_ENUM.WAIT_APPLIED].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label ),
+      status: STATES_ENUM.WAIT_APPLIED
     },
     unknown: {
-      count: 0,
-      color: STATES[STATES_ENUM.UNKNOWN].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.UNKNOWN }`, null, STATES[STATES_ENUM.UNKNOWN].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.UNKNOWN].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.UNKNOWN }`, null, STATES[STATES_ENUM.UNKNOWN].label ),
+      status: STATES_ENUM.UNKNOWN
     }
   };
 };

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

@@ -782,10 +782,11 @@ export default {
                 </div>
               </div>
               <div
-                v-if="group.ref && poolSummaryInfo[group.ref]"
+                v-if="group.ref"
                 class="right group-header-buttons mr-20"
               >
                 <MachineSummaryGraph
+                  v-if="poolSummaryInfo[group.ref]"
                   :row="poolSummaryInfo[group.ref]"
                   :horizontal="true"
                   class="mr-20"

package/edit/workload/index.vue

@@ -235,7 +235,7 @@ export default {
                   <div class="col span-6">
                     <LabeledSelect
                       v-model="imagePullSecrets"
-                      :label="t('workload.container.imagePullSecrets')"
+                      :label="t('workload.container.imagePullSecrets.label')"
                       :multiple="true"
                       :taggable="true"
                       :options="imagePullNamespacedSecrets"
@@ -243,6 +243,7 @@ export default {
                       option-label="metadata.name"
                       :reduce="service=>service.metadata.name"
                       :create-option="createOption"
+                      :tooltip="t('workload.container.imagePullSecrets.tooltip')"
                     />
                   </div>
                 </div>

package/machine-config/__tests__/vmwarevsphere.test.ts

@@ -0,0 +1,72 @@
+import { mount } from '@vue/test-utils';
+import vmwarevsphere, { DEFAULT_VALUES } from '@shell/machine-config/vmwarevsphere.vue';
+
+describe('component: vmwarevsphere', () => {
+  it('should mount successfully with correct default values', () => {
+    const defaultGetters = { 'i18n/t': jest.fn() };
+    const wrapper = mount(vmwarevsphere, {
+      propsData: {
+        poolId:       'poolId',
+        credentialId: 'credentialId',
+        disabled:     false,
+        mode:         'create',
+        value:        {
+          initted: false,
+          network: [],
+          tag:     []
+        },
+        provider: 'vmwarevsphere'
+      },
+      mocks: {
+        $fetchState: { pending: false },
+        $store:      { getters: defaultGetters },
+      },
+      stubs: { CodeMirror: true }
+    });
+
+    const dataCenterElement = wrapper.find(`[data-testid="datacenter"]`).element;
+    const resourcePoolElement = wrapper.find(`[data-testid="resourcePool"]`).element;
+    const dataStoreElement = wrapper.find(`[data-testid="dataStore"]`).element;
+    const folderElement = wrapper.find(`[data-testid="folder"]`).element;
+    const hostElement = wrapper.find(`[data-testid="host"]`).element;
+    const gracefulShutdownTimeoutElement = wrapper.find(`[data-testid="gracefulShutdownTimeout"]`).element;
+
+    expect(dataCenterElement).toBeDefined();
+    expect(resourcePoolElement).toBeDefined();
+    expect(dataStoreElement).toBeDefined();
+    expect(folderElement).toBeDefined();
+    expect(hostElement).toBeDefined();
+    expect(gracefulShutdownTimeoutElement).toBeDefined();
+
+    const {
+      cpuCount: defaultCpuCount,
+      diskSize: defaultDiskSize,
+      memorySize: defaultMemorySize,
+      hostsystem: defaultHostsystem,
+      cloudConfig: defaultCloudConfig,
+      gracefulShutdownTimeout: defaultGracefulShutdownTimeout,
+      cfgparam: defaultCfgparam,
+      os: defaultOs
+    } = DEFAULT_VALUES;
+
+    const {
+      cpuCount,
+      diskSize,
+      memorySize,
+      hostsystem,
+      cloudConfig,
+      gracefulShutdownTimeout,
+      cfgparam,
+      os
+    } = wrapper.vm.$options.propsData.value;
+
+    expect(cpuCount).toStrictEqual(defaultCpuCount);
+    expect(diskSize).toStrictEqual(defaultDiskSize);
+    expect(memorySize).toStrictEqual(defaultMemorySize);
+    expect(hostsystem).toStrictEqual(defaultHostsystem);
+    expect(cloudConfig).toStrictEqual(defaultCloudConfig);
+    expect(gracefulShutdownTimeout).toStrictEqual(defaultGracefulShutdownTimeout);
+    expect(cfgparam).toStrictEqual(defaultCfgparam);
+    expect(os).toStrictEqual(defaultOs);
+  });
+});

package/machine-config/vmwarevsphere.vue

@@ -39,7 +39,17 @@ const OS_OPTIONS = [
   'linux',
   'windows'
 ];
-const DEFAULT_CFGPARAM = ['disk.enableUUID=TRUE'];
+
+export const DEFAULT_VALUES = {
+  cpuCount:                '2',
+  diskSize:                '20000',
+  memorySize:              '4096',
+  hostsystem:              '',
+  cloudConfig:             '#cloud-config\n\n',
+  gracefulShutdownTimeout: '0',
+  cfgparam:                ['disk.enableUUID=TRUE'],
+  os:                      OS_OPTIONS[0]
+};
 
 const getDefaultVappOptions = (networks) => {
   return {
@@ -217,15 +227,27 @@ export default {
     if (this.mode === _CREATE && !this.value.initted) {
       Object.defineProperty(this.value, 'initted', { value: true, enumerable: false });
 
+      const {
+        cpuCount,
+        diskSize,
+        memorySize,
+        hostsystem,
+        cloudConfig,
+        gracefulShutdownTimeout,
+        cfgparam,
+        os
+      } = DEFAULT_VALUES;
+
       set(this.value, 'creationType', creationMethods[0].value);
-      set(this.value, 'cpuCount', '2');
-      set(this.value, 'diskSize', '20000');
-      set(this.value, 'memorySize', '4096');
-      set(this.value, 'hostsystem', '');
-      set(this.value, 'cloudConfig', '#cloud-config\n\n');
-      set(this.value, 'cfgparam', DEFAULT_CFGPARAM);
+      set(this.value, 'cpuCount', cpuCount);
+      set(this.value, 'diskSize', diskSize);
+      set(this.value, 'memorySize', memorySize);
+      set(this.value, 'hostsystem', hostsystem);
+      set(this.value, 'gracefulShutdownTimeout', gracefulShutdownTimeout);
+      set(this.value, 'cloudConfig', cloudConfig);
+      set(this.value, 'cfgparam', cfgparam);
       set(this.value, 'vappProperty', this.value.vappProperty);
-      set(this.value, 'os', OS_OPTIONS[0]);
+      set(this.value, 'os', os);
       Object.entries(INITIAL_VAPP_OPTIONS).forEach(([key, value]) => {
         set(this.value, key, value);
       });
@@ -326,6 +348,8 @@ export default {
     memorySize: integerString('value.memorySize'),
     diskSize:   integerString('value.diskSize'),
 
+    gracefulShutdownTimeout: integerString('value.gracefulShutdownTimeout'),
+
     showCloudConfigYaml() {
       return this.value.creationType !== 'legacy';
     },
@@ -731,7 +755,10 @@ export default {
         </p>
       </h4>
       <div slot="body">
-        <div class="row">
+        <div
+          class="row"
+          data-testid="datacenter"
+        >
           <div class="col span-6">
             <LabeledSelect
               v-model="value.datacenter"
@@ -742,7 +769,10 @@ export default {
               :disabled="disabled"
             />
           </div>
-          <div class="col span-6">
+          <div
+            class="col span-6"
+            data-testid="resourcePool"
+          >
             <LabeledSelect
               v-model="value.pool"
               :loading="resourcePoolsLoading"
@@ -754,7 +784,10 @@ export default {
           </div>
         </div>
         <div class="row mt-10">
-          <div class="col span-6">
+          <div
+            class="col span-6"
+            data-testid="dataStore"
+          >
             <LabeledSelect
               v-model="value.datastore"
               :loading="dataStoresLoading"
@@ -764,7 +797,10 @@ export default {
               :disabled="disabled"
             />
           </div>
-          <div class="col span-6">
+          <div
+            class="col span-6"
+            data-testid="folder"
+          >
             <LabeledSelect
               v-model="value.folder"
               :loading="foldersLoading"
@@ -776,7 +812,10 @@ export default {
           </div>
         </div>
         <div class="row mt-10">
-          <div class="col span-12">
+          <div
+            class="col span-6"
+            data-testid="host"
+          >
             <LabeledSelect
               v-model="host"
               :loading="hostsLoading"
@@ -789,6 +828,22 @@ export default {
               {{ t('cluster.machineConfig.vsphere.scheduling.host.note') }}
             </p>
           </div>
+          <div
+            class="col span-6"
+            data-testid="gracefulShutdownTimeout"
+          >
+            <UnitInput
+              v-model="gracefulShutdownTimeout"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.scheduling.gracefulShutdownTimeout.label')"
+              :suffix="t('suffix.seconds', { count: gracefulShutdownTimeout})"
+              :disabled="disabled"
+              min="0"
+            />
+            <p class="text-muted mt-5">
+              {{ t('cluster.machineConfig.vsphere.scheduling.gracefulShutdownTimeout.note') }}
+            </p>
+          </div>
         </div>
       </div>
     </Card>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -41,6 +41,7 @@
     "@nuxtjs/eslint-config-typescript": "6.0.1",
     "@nuxtjs/webpack-profile": "0.1.0",
     "@popperjs/core": "2.4.4",
+    "@types/is-url": "1.2.30",
     "@types/node": "16.4.3",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",

package/rancher-components/BadgeState/BadgeState.vue

@@ -60,7 +60,11 @@ export default Vue.extend({
 
 <template>
   <span :class="{'badge-state': true, [bg]: true}">
-    <i v-if="icon" class="icon" :class="{[icon]: true, 'mr-5': !!msg}" />{{ msg }}
+    <i
+      v-if="icon"
+      class="icon"
+      :class="{[icon]: true, 'mr-5': !!msg}"
+    />{{ msg }}
   </span>
 </template>
 

package/rancher-components/Banner/Banner.test.ts

@@ -1,13 +1,63 @@
 import { mount } from '@vue/test-utils';
 import { Banner } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
     const label = 'test';
-    const wrapper = mount(Banner, { propsData: { label } });
+    const wrapper = mount(
+      Banner,
+      {
+        directives: { cleanHtmlDirective },
+        propsData:  { label }
+      });
 
     const element = wrapper.find('span').element;
 
     expect(element.textContent).toBe(label);
   });
+
+  it('should display an icon', () => {
+    const icon = 'my-icon';
+    const wrapper = mount(Banner, { propsData: { icon } });
+
+    const element = wrapper.find(`.${ icon }`).element;
+
+    expect(element.classList).toContain(icon);
+  });
+
+  it('should not display an icon', () => {
+    const wrapper = mount(Banner);
+
+    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+
+    expect(element).not.toBeDefined();
+  });
+
+  it('should emit close event', () => {
+    const wrapper = mount(Banner, { propsData: { closable: true } });
+    const element = wrapper.find(`[data-testid="banner-close"]`).element;
+
+    element.click();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('should add the right color', () => {
+    const color = 'red';
+    const wrapper = mount(Banner, { propsData: { color } });
+
+    const element = wrapper.element;
+
+    expect(element.classList).toContain(color);
+  });
+
+  it('should stack the banner messages', () => {
+    const stacked = true;
+    const wrapper = mount(Banner, { propsData: { stacked } });
+
+    const element = wrapper.find(`[data-testid="banner-content"]`).element;
+
+    expect(element.classList).toContain('stacked');
+  });
 });