@rancher/shell 0.5.2 → 1.2.0

package/machine-config/vmwarevsphere.vue

@@ -16,6 +16,7 @@ import { integerString, keyValueStrings } from '@shell/utils/computed';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 
 export const SENTINEL = '__SENTINEL__';
+const NULLABLE_EMPTY_FIELDS = ['contentLibrary', 'folder', 'hostsystem'];
 const VAPP_MODE = {
   DISABLED: 'disabled',
   AUTO:     'auto',
@@ -168,7 +169,11 @@ export default {
     },
     disabled: {
       type:    Boolean,
-      default: false
+      default: false,
+    },
+    poolCreateMode: {
+      type:     Boolean,
+      required: true,
     },
   },
 
@@ -223,7 +228,7 @@ export default {
       },
     ];
 
-    if (this.mode === _CREATE && !this.value.initted) {
+    if ((this.mode === _CREATE || this.poolCreateMode) && !this.value.initted) {
       Object.defineProperty(this.value, 'initted', { value: true, enumerable: false });
 
       const {
@@ -296,10 +301,6 @@ export default {
     ...createOptionHelpers('attributeKeys'),
     ...createOptionHelpers('networks'),
 
-    isDisabled() {
-      return this.disabled || this.mode === _VIEW;
-    },
-
     showTemplate() {
       return this.value.creationType === 'template';
     },
@@ -444,13 +445,13 @@ export default {
       const valueInContent = content.find((c) => c.value === this.value.datacenter );
 
       if (!valueInContent) {
-        if (this.mode === _CREATE) {
+        if (this.mode === _CREATE || this.poolCreateMode) {
           set(this.value, 'datacenter', options[0]);
           set(this.value, 'cloneFrom', undefined);
           set(this.value, 'useDataStoreCluster', false);
         }
 
-        if ([_EDIT, _VIEW].includes(this.mode)) {
+        if ([_EDIT, _VIEW].includes(this.mode) && !this.poolCreateMode) {
           this.manageErrors(errorActions.CREATE, 'datacenter');
         }
       } else {
@@ -650,15 +651,19 @@ export default {
       };
 
       if (!isValueInContent()) {
-        if (this.mode === _CREATE) {
-          const value = isArray ? [] : content[0]?.value;
-
-          if (value !== SENTINEL) {
-            set(this.value, key, value);
-          }
+        const value = isArray ? [] : content[0]?.value;
+        const isNullOrEmpty = NULLABLE_EMPTY_FIELDS.includes(key) && (this.value[key] === null || this.value[key] === '');
+        const shouldHandleError =
+          [_EDIT, _VIEW].includes(this.mode) && // error messages should only be displayed in Edit or View mode
+          !this.poolCreateMode && // almost identical to Create mode
+          !isNullOrEmpty && // null and empty string are valid values for some fields e.g. contentLibrary, folder and hostsystem
+          !isArray; // this flag is used for network and tag fields, and should not display error for them
+
+        if ((this.mode === _CREATE || this.poolCreateMode) && value !== SENTINEL) {
+          set(this.value, key, value);
         }
 
-        if ([_EDIT, _VIEW].includes(this.mode)) {
+        if (shouldHandleError) {
           this.manageErrors(errorActions.CREATE, key);
         }
       } else {
@@ -775,7 +780,7 @@ export default {
               :mode="mode"
               :options="dataCenters"
               :label="t('cluster.machineConfig.vsphere.scheduling.dataCenter')"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :tooltip="value.datacenter"
             />
           </div>
@@ -789,7 +794,7 @@ export default {
               :mode="mode"
               :options="resourcePools"
               :label="t('cluster.machineConfig.vsphere.scheduling.resourcePool')"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :tooltip="value.pool"
             />
           </div>
@@ -805,7 +810,7 @@ export default {
               :mode="mode"
               :options="dataStores"
               :label="t('cluster.machineConfig.vsphere.scheduling.dataStore')"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :tooltip="value.datastore"
             />
           </div>
@@ -819,7 +824,7 @@ export default {
               :mode="mode"
               :options="folders"
               :label="t('cluster.machineConfig.vsphere.scheduling.folder')"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :tooltip="value.folder"
             />
           </div>
@@ -835,7 +840,7 @@ export default {
               :mode="mode"
               :options="hosts"
               :label="t('cluster.machineConfig.vsphere.scheduling.host.label')"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :tooltip="host"
             />
             <p class="text-muted mt-5">
@@ -851,7 +856,7 @@ export default {
               :mode="mode"
               :label="t('cluster.machineConfig.vsphere.scheduling.gracefulShutdownTimeout.label')"
               :suffix="t('suffix.seconds', { count: gracefulShutdownTimeout})"
-              :disabled="isDisabled"
+              :disabled="disabled"
               min="0"
             />
             <p class="text-muted mt-5">
@@ -883,7 +888,7 @@ export default {
               :mode="mode"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.cpus')"
               :suffix="t('suffix.cores')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
           <div class="col span-6">
@@ -892,7 +897,7 @@ export default {
               :mode="mode"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.memory')"
               :suffix="t('suffix.mib')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
         </div>
@@ -903,7 +908,7 @@ export default {
               :mode="mode"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.disk')"
               :suffix="t('suffix.mib')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
           <div class="col span-6">
@@ -912,7 +917,7 @@ export default {
               :mode="mode"
               :options="osOptions"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.os')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
         </div>
@@ -926,7 +931,7 @@ export default {
               :mode="mode"
               :options="creationMethods"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.creationMethod')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
           <div
@@ -939,7 +944,7 @@ export default {
               :mode="mode"
               :options="templates"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.template.label')"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :status="templateStatus"
               :tooltip="templateTooltip"
             />
@@ -954,7 +959,7 @@ export default {
               :mode="mode"
               :options="contentLibraries"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.contentLibrary')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
           <div
@@ -968,7 +973,7 @@ export default {
               :options="libraryTemplates"
               :searchable="true"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.libraryTemplate')"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :tooltip="value.cloneFrom"
             />
           </div>
@@ -982,7 +987,7 @@ export default {
               :mode="mode"
               :options="virtualMachines"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.virtualMachine')"
-              :disabled="isDisabled"
+              :disabled="disabled"
               :tooltip="value.cloneFrom"
             />
           </div>
@@ -995,7 +1000,7 @@ export default {
               :mode="mode"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.osIsoUrl.label')"
               :placeholder="t('cluster.machineConfig.vsphere.instanceOptions.osIsoUrl.placeholder')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
         </div>
@@ -1009,7 +1014,7 @@ export default {
               :mode="mode"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.cloudInit.label')"
               :placeholder="t('cluster.machineConfig.vsphere.instanceOptions.cloudInit.placeholder')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
             <p class="text-muted mt-5">
               {{ t('cluster.machineConfig.vsphere.instanceOptions.cloudInit.note') }}
@@ -1026,7 +1031,7 @@ export default {
               ref="yaml-additional"
               v-model="value.cloudConfig"
               :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-              :disabled="isDisabled"
+              :disabled="disabled"
               initial-yaml-values="# Additional Manifest YAML"
               class="yaml-editor"
             />
@@ -1042,7 +1047,7 @@ export default {
               :options="networks"
               :array-list-props="{ addLabel: t('cluster.machineConfig.vsphere.networks.add') }"
               :loading="networksLoading"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
         </div>
@@ -1057,7 +1062,7 @@ export default {
               :key-placeholder="t('cluster.machineConfig.vsphere.guestinfo.keyPlaceholder')"
               :value-placeholder="t('cluster.machineConfig.vsphere.guestinfo.valuePlaceholder')"
               :read-allowed="false"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
         </div>
@@ -1084,7 +1089,7 @@ export default {
           :options="tags"
           :array-list-props="{ addLabel: t('cluster.machineConfig.vsphere.tags.addTag') }"
           :loading="tagsLoading"
-          :disabled="isDisabled"
+          :disabled="disabled"
         />
       </div>
     </Card>
@@ -1113,7 +1118,7 @@ export default {
           :loading="attributeKeysLoading"
           :key-taggable="false"
           :key-option-unique="true"
-          :disabled="isDisabled"
+          :disabled="disabled"
         />
       </div>
     </Card>
@@ -1139,7 +1144,7 @@ export default {
               name="restoreMode"
               :label="t('cluster.machineConfig.vsphere.vAppOptions.restoreType')"
               :options="vAppOptions"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
         </div>
@@ -1154,7 +1159,7 @@ export default {
               :label="t('cluster.machineConfig.vsphere.vAppOptions.transport.label')"
               :tooltip="t('cluster.machineConfig.vsphere.vAppOptions.transport.tooltip')"
               :placeholder="t('cluster.machineConfig.vsphere.vAppOptions.transport.placeholder')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
           <div class="col span-4">
@@ -1164,7 +1169,7 @@ export default {
               :label="t('cluster.machineConfig.vsphere.vAppOptions.protocol.label')"
               :tooltip="t('cluster.machineConfig.vsphere.vAppOptions.protocol.tooltip')"
               :placeholder="t('cluster.machineConfig.vsphere.vAppOptions.protocol.placeholder')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
           <div class="col span-4">
@@ -1174,7 +1179,7 @@ export default {
               :label="t('cluster.machineConfig.vsphere.vAppOptions.allocation.label')"
               :tooltip="t('cluster.machineConfig.vsphere.vAppOptions.allocation.tooltip')"
               :placeholder="t('cluster.machineConfig.vsphere.vAppOptions.allocation.placeholder')"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
         </div>
@@ -1190,7 +1195,7 @@ export default {
               :value-placeholder="t('cluster.machineConfig.vsphere.vAppOptions.properties.valuePlaceholder')"
               :add-label="t('cluster.machineConfig.vsphere.vAppOptions.properties.add')"
               :read-allowed="false"
-              :disabled="isDisabled"
+              :disabled="disabled"
             />
           </div>
         </div>

package/middleware/authenticated.js

@@ -8,7 +8,7 @@ import { MANAGEMENT, NORMAN, DEFAULT_WORKSPACE } from '@shell/config/types';
 import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
 import { applyProducts } from '@shell/store/type-map';
 import { findBy } from '@shell/utils/array';
-import { ClusterNotFoundError, RedirectToError } from '@shell/utils/error';
+import { ClusterNotFoundError } from '@shell/utils/error';
 import { get } from '@shell/utils/object';
 import { setFavIcon, haveSetFavIcon } from '@shell/utils/favicon';
 import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
@@ -305,6 +305,9 @@ export default async function({
             notLoggedIn();
           } else {
             store.commit('setError', { error: e, locationError: new Error('Auth Middleware') });
+            if ( process.server ) {
+              redirect(302, '/fail-whale');
+            }
           }
 
           return;
@@ -315,12 +318,14 @@ export default async function({
     store.dispatch('gcStartIntervals');
   }
 
-  const backTo = window.localStorage.getItem(BACK_TO);
+  if (!process.server) {
+    const backTo = window.localStorage.getItem(BACK_TO);
 
-  if (backTo) {
-    window.localStorage.removeItem(BACK_TO);
+    if (backTo) {
+      window.localStorage.removeItem(BACK_TO);
 
-    window.location.href = backTo;
+      window.location.href = backTo;
+    }
   }
 
   // GC should be notified of route change before any find/get request is made that might be used for that page
@@ -361,12 +366,14 @@ export default async function({
       return redirected();
     }
 
-    store.app.router.afterEach((to, from) => {
-      // Clear state used to record if back button was used for navigation
-      setTimeout(() => {
-        window._popStateDetected = false;
-      }, 1);
-    });
+    if (process.client) {
+      store.app.router.afterEach((to, from) => {
+        // Clear state used to record if back button was used for navigation
+        setTimeout(() => {
+          window._popStateDetected = false;
+        }, 1);
+      });
+    }
   }
 
   try {
@@ -495,10 +502,8 @@ export default async function({
       }
     }
   } catch (e) {
-    if ( e.name === ClusterNotFoundError.name ) {
+    if ( e instanceof ClusterNotFoundError ) {
       return redirect(302, '/home');
-    } if ( e.name === RedirectToError.name ) {
-      return redirect(302, e.url);
     } else {
       // Sets error 500 if lost connection to API
       store.commit('setError', { error: e, locationError: new Error(store.getters['i18n/t']('nav.failWhale.authMiddleware')) });

package/mixins/auth-config.js

@@ -42,8 +42,13 @@ export default {
     },
 
     serverUrl() {
-      // Client-side rendered: use the current window location
-      return window.location.origin;
+      if (process.client) {
+        // Client-side rendered: use the current window location
+        return window.location.origin;
+      }
+
+      // Server-side rendered
+      return this.serverSetting || '';
     },
 
     baseUrl() {

package/mixins/brand.js

@@ -1,10 +1,10 @@
 import { mapGetters } from 'vuex';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
+import { getVendor } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
 import { findBy } from '@shell/utils/array';
 import { createCssVars } from '@shell/utils/color';
 import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
-import { setTitle } from '@shell/config/private-label';
 
 const cspAdaptorApp = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
 
@@ -116,7 +116,6 @@ export default {
       if (this.linkColor) {
         this.setCustomColor(this.linkColor, 'link');
       }
-      this.setBodyClass();
     },
 
     cspAdapter(neu) {
@@ -143,15 +142,7 @@ export default {
           }
         }
       }
-    },
-    brand() {
-      this.setBodyClass();
     }
-
-  },
-  mounted() {
-    this.setBodyClass();
-    setTitle();
   },
   methods: {
     setCustomColor(color, name = 'primary') {
@@ -168,26 +159,47 @@ export default {
       for (const prop in vars) {
         document.body.style.removeProperty(prop);
       }
-    },
-    setBodyClass() {
-      const body = document.getElementsByTagName('body')[0];
-      const cssClass = `overflow-hidden dashboard-body`;
-      let bodyClass = `theme-${ this.theme } ${ cssClass }`;
-
-      if ( this.brand ) {
-        try {
-          const brandMeta = require(`~shell/assets/brand/${ this.brand }/metadata.json`);
-
-          if (brandMeta?.hasStylesheet === 'true') {
-            bodyClass = `${ cssClass } ${ this.brand } theme-${ this.theme }`;
-          } else {
-            bodyClass = `theme-${ this.theme } overflow-hidden dashboard-body`;
-            this.$store.dispatch('prefs/setBrandStyle', this.theme === 'dark');
-          }
-        } catch {}
+    }
+  },
+  head() {
+    let cssClass = `overflow-hidden dashboard-body`;
+    const out = {
+      bodyAttrs: { class: `theme-${ this.theme } ${ cssClass }` },
+      title:     getVendor(),
+    };
+
+    if (getVendor() === 'Harvester') {
+      const ico = require(`~shell/assets/images/pl/harvester.png`);
+
+      out.title = 'Harvester';
+      out.link = [{
+        hid:  'icon',
+        rel:  'icon',
+        type: 'image/x-icon',
+        href: ico
+      }];
+    }
+
+    let brandMeta;
+
+    if ( this.brand ) {
+      try {
+        brandMeta = require(`~shell/assets/brand/${ this.brand }/metadata.json`);
+      } catch {
+        return out;
       }
-      body.className = bodyClass;
     }
-  }
+
+    if (brandMeta?.hasStylesheet === 'true') {
+      cssClass = `${ cssClass } ${ this.brand } theme-${ this.theme }`;
+    } else {
+      cssClass = `theme-${ this.theme } overflow-hidden dashboard-body`;
+      this.$store.dispatch('prefs/setBrandStyle', this.theme === 'dark');
+    }
+
+    out.bodyAttrs.class = cssClass;
+
+    return out;
+  },
 
 };

package/mixins/fetch.server.js

@@ -0,0 +1,73 @@
+import Vue from 'vue';
+import {
+  hasFetch, normalizeError, addLifecycleHook, purifyData, createGetCounter
+} from '../../utils/nuxt';
+
+async function serverPrefetch() {
+  if (!this._fetchOnServer) {
+    return;
+  }
+
+  // Call and await on $fetch
+  try {
+    await this.$options.fetch.call(this);
+  } catch (err) {
+    if (process.dev) {
+      console.error('Error in fetch():', err); // eslint-disable-line no-console
+    }
+    this.$fetchState.error = normalizeError(err);
+  }
+  this.$fetchState.pending = false;
+
+  // Define an ssrKey for hydration
+  this._fetchKey = this._fetchKey || this.$ssrContext.fetchCounters['']++;
+
+  // Add data-fetch-key on parent element of Component
+  const attrs = this.$vnode.data.attrs = this.$vnode.data.attrs || {};
+
+  attrs['data-fetch-key'] = this._fetchKey;
+
+  // Add to ssrContext for window.__NUXT__.fetch
+
+  if (this.$ssrContext.nuxt.fetch[this._fetchKey] !== undefined) {
+    console.warn(`Duplicate fetch key detected (${ this._fetchKey }). This may lead to unexpected results.`); // eslint-disable-line no-console
+  }
+
+  this.$ssrContext.nuxt.fetch[this._fetchKey] =
+    this.$fetchState.error ? { _error: this.$fetchState.error } : purifyData(this._data);
+}
+
+export default {
+  created() {
+    if (!hasFetch(this)) {
+      return;
+    }
+
+    if (typeof this.$options.fetchOnServer === 'function') {
+      this._fetchOnServer = this.$options.fetchOnServer.call(this) !== false;
+    } else {
+      this._fetchOnServer = this.$options.fetchOnServer !== false;
+    }
+
+    const defaultKey = this.$options._scopeId || this.$options.name || '';
+    const getCounter = createGetCounter(this.$ssrContext.fetchCounters, defaultKey);
+
+    if (typeof this.$options.fetchKey === 'function') {
+      this._fetchKey = this.$options.fetchKey.call(this, getCounter);
+    } else {
+      const key = typeof this.$options.fetchKey === 'string' ? this.$options.fetchKey : defaultKey;
+
+      this._fetchKey = key ? `${ key }:${ getCounter(key) }` : String(getCounter(key));
+    }
+
+    // Added for remove vue undefined warning while ssr
+    this.$fetch = () => {}; // issue #8043
+    Vue.util.defineReactive(this, '$fetchState', {
+      pending:   true,
+      error:     null,
+      timestamp: Date.now()
+    });
+
+    addLifecycleHook(this, 'serverPrefetch', serverPrefetch);
+  }
+};

package/mixins/labeled-form-element.ts

@@ -82,11 +82,6 @@ export default Vue.extend({
       type:      Array,
       // we only want functions in the rules array
       validator: (rules: any) => rules.every((rule: any) => ['function'].includes(typeof rule))
-    },
-
-    requireDirty: {
-      default: true,
-      type:    Boolean
     }
   },
 
@@ -146,7 +141,7 @@ export default Vue.extend({
           ruleMessages.push(message);
         }
       }
-      if (ruleMessages.length > 0 && (this.blurred || this.focused || !this.requireDirty)) {
+      if (ruleMessages.length > 0 && (this.blurred || this.focused)) {
         return ruleMessages.join(', ');
       } else {
         return undefined;