@rancher/shell 0.3.5 → 0.3.6

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

@@ -77,6 +77,26 @@ const ADVANCED = 'advanced';
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
 
+const NETBIOS_TRUNCATION_LENGTH = 15;
+
+/**
+ * Classes to be adopted by the node badges in Machine pools
+ */
+const NODE_TOTAL = {
+  error: {
+    color: 'bg-error',
+    icon:  'icon-x',
+  },
+  warning: {
+    color: 'bg-warning',
+    icon:  'icon-warning',
+  },
+  success: {
+    color: 'bg-success',
+    icon:  'icon-checkmark'
+  }
+};
+
 export default {
   components: {
     ACE,
@@ -286,6 +306,13 @@ export default {
     const lastDefaultPodSecurityPolicyTemplateName = this.value.spec.defaultPodSecurityPolicyTemplateName;
     const previousKubernetesVersion = this.value.spec.kubernetesVersion;
 
+    const truncateLimit = this.value.machinePoolDefaults?.hostnameLengthLimit;
+
+    // Is hostname truncation supported by the backend?
+    const provSchema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+    const specSchemaName = provSchema?.resourceFields?.spec?.type;
+    const specSchema = specSchemaName ? this.$store.getters['management/schemaFor'](specSchemaName) : {};
+
     return {
       loadedOnce:                      false,
       lastIdx:                         0,
@@ -321,6 +348,9 @@ export default {
       cisOverride:           false,
       cisPsaChangeBanner:    false,
       psps:                  null, // List of policies if any
+      truncateHostnames:     truncateLimit === NETBIOS_TRUNCATION_LENGTH,
+      truncateLimit,
+      supportsTruncation:    !!specSchema?.resourceFields?.machinePoolDefaults,
     };
   },
 
@@ -337,6 +367,10 @@ export default {
       return this.value.spec.rkeConfig;
     },
 
+    hostnameTruncationManuallySet() {
+      return this.truncateLimit && this.truncateLimit !== NETBIOS_TRUNCATION_LENGTH;
+    },
+
     /**
      * Check presence of PSPs as template or CLI creation
      */
@@ -703,11 +737,11 @@ export default {
 
       for ( const role of roles ) {
         counts[role] = 0;
-        out.color[role] = 'bg-success';
-        out.icon[role] = 'icon-checkmark';
+        out.color[role] = NODE_TOTAL.success.color;
+        out.icon[role] = NODE_TOTAL.success.icon;
       }
 
-      for ( const row of this.machinePools ) {
+      for ( const row of this.machinePools || [] ) {
         if ( row.remove ) {
           continue;
         }
@@ -729,27 +763,27 @@ export default {
       }
 
       if ( counts.etcd === 0 ) {
-        out.color.etcd = 'bg-error';
-        out.icon.etcd = 'icon-x';
+        out.color.etcd = NODE_TOTAL.error.color;
+        out.icon.etcd = NODE_TOTAL.error.icon;
       } else if ( counts.etcd === 1 || counts.etcd % 2 === 0 || counts.etcd > 7 ) {
-        out.color.etcd = 'bg-warning';
-        out.icon.etcd = 'icon-warning';
+        out.color.etcd = NODE_TOTAL.warning.color;
+        out.icon.etcd = NODE_TOTAL.warning.icon;
       }
 
       if ( counts.controlPlane === 0 ) {
-        out.color.controlPlane = 'bg-error';
-        out.icon.controlPlane = 'icon-x';
+        out.color.controlPlane = NODE_TOTAL.error.color;
+        out.icon.controlPlane = NODE_TOTAL.error.icon;
       } else if ( counts.controlPlane === 1 ) {
-        out.color.controlPlane = 'bg-warning';
-        out.icon.controlPlane = 'icon-warning';
+        out.color.controlPlane = NODE_TOTAL.warning.color;
+        out.icon.controlPlane = NODE_TOTAL.warning.icon;
       }
 
       if ( counts.worker === 0 ) {
-        out.color.worker = 'bg-error';
-        out.icon.worker = 'icon-x';
+        out.color.worker = NODE_TOTAL.error.color;
+        out.icon.worker = NODE_TOTAL.error.icon;
       } else if ( counts.worker === 1 ) {
-        out.color.worker = 'bg-warning';
-        out.icon.worker = 'icon-warning';
+        out.color.worker = NODE_TOTAL.warning.color;
+        out.icon.worker = NODE_TOTAL.warning.icon;
       }
 
       return out;
@@ -1061,6 +1095,21 @@ export default {
     nlToBr,
     set,
 
+    /**
+     * set instanceNameLimit to 15 to all pool machine if truncateHostnames checkbox is clicked
+     */
+    truncateName() {
+      if (this.truncateHostnames) {
+        this.value.machinePoolDefaults = this.value.machinePoolDefaults || {};
+        this.value.machinePoolDefaults.hostnameLengthLimit = 15;
+      } else {
+        delete this.value.machinePoolDefaults.hostnameLengthLimit;
+
+        if (Object.keys(this.value.machinePoolDefaults).length === 0) {
+          delete this.value.machinePoolDefaults;
+        }
+      }
+    },
     /**
      * Define PSP deprecation and restrict use of PSP based on min k8s version and current/edited mode
      */
@@ -1219,7 +1268,6 @@ export default {
         }
 
         await this.syncMachineConfigWithLatest(entry);
-
         // Capitals and such aren't allowed;
         set(entry.pool, 'name', normalizeName(entry.pool.name) || 'pool');
 
@@ -1269,8 +1317,17 @@ export default {
       }
     },
 
+    /**
+     * Ensure that all the existing node roles pool are at least 1 each
+     */
+    hasRequiredNodes() {
+      return this.nodeTotals?.color && Object.values(this.nodeTotals.color).every(color => color !== NODE_TOTAL.error.color);
+    },
+
     validationPassed() {
-      return (this.provider === 'custom' || this.isElementalCluster || !!this.credentialId);
+      const validMachinePools = this.hasMachinePools ? this.hasRequiredNodes() : true;
+
+      return (this.provider === 'custom' || this.isElementalCluster || !!this.credentialId) && validMachinePools;
     },
 
     cancelCredential() {
@@ -2540,8 +2597,29 @@ export default {
                 :label="t('cluster.rke2.address.nodePortRange.label')"
               />
             </div>
+            <div
+              v-if="supportsTruncation"
+              class="col span-6"
+            >
+              <Checkbox
+                v-if="!isView || isView && !hostnameTruncationManuallySet"
+                v-model="truncateHostnames"
+                class="mt-20"
+                :disabled="isEdit || isView || hostnameTruncationManuallySet"
+                :mode="mode"
+                :label="t('cluster.rke2.truncateHostnames')"
+                @input="truncateName"
+              />
+              <Banner
+                v-if="hostnameTruncationManuallySet"
+                color="info"
+              >
+                <div class="text">
+                  {{ t('cluster.machinePool.truncationCluster', { limit: truncateLimit }) }}
+                </div>
+              </Banner>
+            </div>
           </div>
-
           <div
             v-if="serverArgs['tls-san']"
             class="row mb-20"

package/edit/workload/mixins/workload.js

@@ -11,6 +11,7 @@ import {
   SERVICE_ACCOUNT,
   CAPI,
   POD,
+  LIST_WORKLOAD_TYPES,
 } from '@shell/config/types';
 import Tab from '@shell/components/Tabbed/Tab';
 import CreateEditView from '@shell/mixins/create-edit-view';
@@ -490,21 +491,19 @@ export default {
       return this.$store.getters['cluster/schemaFor'](this.type);
     },
 
-    workloadTypes() {
-      return omitBy(WORKLOAD_TYPES, (type) => {
+    // array of id, label, description, initials for type selection step
+    workloadSubTypes() {
+      const workloadTypes = omitBy(LIST_WORKLOAD_TYPES, (type) => {
         return (
           type === WORKLOAD_TYPES.REPLICA_SET ||
           type === WORKLOAD_TYPES.REPLICATION_CONTROLLER
         );
       });
-    },
 
-    // array of id, label, description, initials for type selection step
-    workloadSubTypes() {
       const out = [];
 
-      for (const prop in this.workloadTypes) {
-        const type = this.workloadTypes[prop];
+      for (const prop in workloadTypes) {
+        const type = workloadTypes[prop];
         const subtype = {
           id:          type,
           description: `workload.typeDescriptions.'${ type }'`,

package/edit/workload/storage/Mount.vue

@@ -138,13 +138,13 @@ export default {
 <style lang='scss'>
 .mount-headers, .mount-rows{
   display: grid;
-  grid-template-columns: 35% 35% auto auto;
+  grid-template-columns: 42% 42% 5% auto;
   grid-gap: $column-gutter;
   margin-bottom: 10px;
   align-items: center;
 
-  .remove {
-    text-align: right;
+  .remove BUTTON {
+    padding: 0px;
   }
 }
 

package/initialize/App.js

@@ -0,0 +1,206 @@
+import Vue from 'vue';
+
+import {
+  getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, sanitizeComponent
+} from '../utils/nuxt';
+import NuxtError from '../layouts/error.vue';
+import NuxtLoading from '../components/nav/GlobalLoading.vue';
+
+import '../assets/styles/app.scss';
+
+import blank from '../layouts/blank.vue';
+import defaultLayout from '../layouts/default.vue';
+import home from '../layouts/home.vue';
+import plain from '../layouts/plain.vue';
+import unauthenticated from '../layouts/unauthenticated.vue';
+import standalone from '../layouts/standalone.vue';
+
+const layouts = {
+  _blank: sanitizeComponent(blank), _default: sanitizeComponent(defaultLayout), _home: sanitizeComponent(home), _plain: sanitizeComponent(plain), _unauthenticated: sanitizeComponent(unauthenticated), _standalone: sanitizeComponent(standalone)
+};
+
+export default {
+  render(h) {
+    const loadingEl = h('NuxtLoading', { ref: 'loading' });
+
+    const layoutEl = h(this.layout || 'nuxt');
+    const templateEl = h('div', {
+      domProps: { id: '__layout' },
+      key:      this.layoutName
+    }, [layoutEl]);
+
+    const transitionEl = h('transition', {
+      props: {
+        name: 'layout',
+        mode: 'out-in'
+      },
+      on: {
+        beforeEnter(el) {
+          // Ensure to trigger scroll event after calling scrollBehavior
+          window.$nuxt.$nextTick(() => {
+            window.$nuxt.$emit('triggerScroll');
+          });
+        }
+      }
+    }, [templateEl]);
+
+    return h('div', { domProps: { id: '__nuxt' } }, [
+      loadingEl,
+      // h(NuxtBuildIndicator), // The build indicator doesn't work as is right now and emits an error in the console so I'm leaving it out for now
+      transitionEl
+    ]);
+  },
+
+  data: () => ({
+    isOnline: true,
+
+    layout:     null,
+    layoutName: '',
+
+    nbFetching: 0
+  }),
+
+  beforeCreate() {
+    Vue.util.defineReactive(this, 'nuxt', this.$options.nuxt);
+  },
+  created() {
+    // Add this.$nuxt in child instances
+    this.$root.$options.$nuxt = this;
+
+    if (process.client) {
+      // add to window so we can listen when ready
+      window.$nuxt = this;
+
+      this.refreshOnlineStatus();
+      // Setup the listeners
+      window.addEventListener('online', this.refreshOnlineStatus);
+      window.addEventListener('offline', this.refreshOnlineStatus);
+    }
+    // Add $nuxt.error()
+    this.error = this.nuxt.error;
+    // Add $nuxt.context
+    this.context = this.$options.context;
+  },
+
+  mounted() {
+    this.$loading = this.$refs.loading;
+  },
+
+  watch: { 'nuxt.err': 'errorChanged' },
+
+  computed: {
+    isOffline() {
+      return !this.isOnline;
+    },
+
+    isFetching() {
+      return this.nbFetching > 0;
+    },
+  },
+
+  methods: {
+    refreshOnlineStatus() {
+      if (process.client) {
+        if (typeof window.navigator.onLine === 'undefined') {
+          // If the browser doesn't support connection status reports
+          // assume that we are online because most apps' only react
+          // when they now that the connection has been interrupted
+          this.isOnline = true;
+        } else {
+          this.isOnline = window.navigator.onLine;
+        }
+      }
+    },
+
+    async refresh() {
+      const pages = getMatchedComponentsInstances(this.$route);
+
+      if (!pages.length) {
+        return;
+      }
+      this.$loading.start();
+
+      const promises = pages.map((page) => {
+        const p = [];
+
+        // Old fetch
+        if (page.$options.fetch && page.$options.fetch.length) {
+          p.push(promisify(page.$options.fetch, this.context));
+        }
+        if (page.$fetch) {
+          p.push(page.$fetch());
+        } else {
+          // Get all component instance to call $fetch
+          for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance)) {
+            p.push(component.$fetch());
+          }
+        }
+
+        if (page.$options.asyncData) {
+          p.push(
+            promisify(page.$options.asyncData, this.context)
+              .then((newData) => {
+                for (const key in newData) {
+                  Vue.set(page.$data, key, newData[key]);
+                }
+              })
+          );
+        }
+
+        return Promise.all(p);
+      });
+
+      try {
+        await Promise.all(promises);
+      } catch (error) {
+        this.$loading.fail(error);
+        globalHandleError(error);
+        this.error(error);
+      }
+      this.$loading.finish();
+    },
+    errorChanged() {
+      if (this.nuxt.err) {
+        if (this.$loading) {
+          if (this.$loading.fail) {
+            this.$loading.fail(this.nuxt.err);
+          }
+          if (this.$loading.finish) {
+            this.$loading.finish();
+          }
+        }
+
+        let errorLayout = (NuxtError.options || NuxtError).layout;
+
+        if (typeof errorLayout === 'function') {
+          errorLayout = errorLayout(this.context);
+        }
+
+        this.setLayout(errorLayout);
+      }
+    },
+
+    setLayout(layout) {
+      if (layout && typeof layout !== 'string') {
+        throw new Error('[nuxt] Avoid using non-string value as layout property.');
+      }
+
+      if (!layout || !layouts[`_${ layout }`]) {
+        layout = 'default';
+      }
+      this.layoutName = layout;
+      this.layout = layouts[`_${ layout }`];
+
+      return this.layout;
+    },
+    loadLayout(layout) {
+      if (!layout || !layouts[`_${ layout }`]) {
+        layout = 'default';
+      }
+
+      return Promise.resolve(layouts[`_${ layout }`]);
+    },
+  },
+
+  components: { NuxtLoading }
+};