@rancher/shell 0.4.0 → 0.5.0

package/edit/provisioning.cattle.io.cluster/tabs/networking/index.vue

@@ -0,0 +1,189 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import ArrayList from '@shell/components/form/ArrayList';
+import ACE from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking/ACE';
+
+const NETBIOS_TRUNCATION_LENGTH = 15;
+
+export default {
+  components: {
+    LabeledInput,
+    Banner,
+    Checkbox,
+    ArrayList,
+    ACE
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+    selectedVersion: {
+      type:     Object,
+      required: true,
+    },
+    truncateLimit: {
+      type:     Number,
+      required: false,
+      default:  0
+    }
+  },
+
+  computed: {
+    truncateHostnames() {
+      return this.truncateLimit === NETBIOS_TRUNCATION_LENGTH;
+    },
+    serverConfig() {
+      return this.value.spec.rkeConfig.machineGlobalConfig;
+    },
+    serverArgs() {
+      return this.selectedVersion?.serverArgs || {};
+    },
+
+    showIpv6Warning() {
+      const clusterCIDR = this.serverConfig['cluster-cidr'] || '';
+      const serviceCIDR = this.serverConfig['service-cidr'] || '';
+
+      return clusterCIDR.includes(':') || serviceCIDR.includes(':');
+    },
+    hostnameTruncationManuallySet() {
+      return !!this.truncateLimit && this.truncateLimit !== NETBIOS_TRUNCATION_LENGTH;
+    },
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h3>
+      {{ t('cluster.rke2.address.header') }}
+      <i
+        v-clean-tooltip="t('cluster.rke2.address.tooltip')"
+        class="icon icon-info"
+      />
+    </h3>
+    <Banner
+      v-if="showIpv6Warning"
+      color="warning"
+    >
+      {{ t('cluster.rke2.address.ipv6.warning') }}
+    </Banner>
+    <div class="row mb-20">
+      <div
+        v-if="serverArgs['cluster-cidr']"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-model="serverConfig['cluster-cidr']"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('cluster.rke2.address.clusterCidr.label')"
+        />
+      </div>
+      <div
+        v-if="serverArgs['service-cidr']"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-model="serverConfig['service-cidr']"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('cluster.rke2.address.serviceCidr.label')"
+        />
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        v-if="serverArgs['cluster-dns']"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-model="serverConfig['cluster-dns']"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('cluster.rke2.address.dns.label')"
+        />
+      </div>
+      <div
+        v-if="serverArgs['cluster-domain']"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-model="serverConfig['cluster-domain']"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('cluster.rke2.address.domain.label')"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="serverArgs['service-node-port-range']"
+      class="row mb-20"
+    >
+      <div class="col span-6">
+        <LabeledInput
+          v-model="serverConfig['service-node-port-range']"
+          :mode="mode"
+          :label="t('cluster.rke2.address.nodePortRange.label')"
+        />
+      </div>
+      <div
+        class="col span-6"
+      >
+        <Checkbox
+          v-if="!isView || isView && !hostnameTruncationManuallySet"
+          :value="truncateHostnames"
+          class="mt-20"
+          :disabled="isEdit || isView || hostnameTruncationManuallySet"
+          :mode="mode"
+          :label="t('cluster.rke2.truncateHostnames')"
+          @input="$emit('truncate-hostname', $event)"
+        />
+        <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"
+    >
+      <div class="col span-6">
+        <ArrayList
+          v-model="serverConfig['tls-san']"
+          :protip="false"
+          :mode="mode"
+          :title="t('cluster.rke2.address.tlsSan.label')"
+        />
+      </div>
+    </div>
+
+    <ACE
+      v-model="value"
+      :mode="mode"
+    />
+  </div>
+</template>

package/edit/provisioning.cattle.io.cluster/tabs/registries/index.vue

@@ -0,0 +1,144 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
+import AdvancedSection from '@shell/components/AdvancedSection.vue';
+import RegistryConfigs from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs';
+import RegistryMirrors from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors';
+
+export default {
+  components: {
+    LabeledInput,
+    Banner,
+    Checkbox,
+    SelectOrCreateAuthSecret,
+    AdvancedSection,
+    RegistryConfigs,
+    RegistryMirrors
+  },
+
+  props: {
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    showCustomRegistryInput: {
+      type:     Boolean,
+      required: true,
+    },
+
+    registryHost: {
+      type:     String,
+      required: false,
+      default:  null
+    },
+
+    registrySecret: {
+      type:     String,
+      required: false,
+      default:  null
+    },
+
+    showCustomRegistryAdvancedInput: {
+      type:     Boolean,
+      required: true,
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <h3>{{ t('cluster.privateRegistry.label') }}</h3>
+    </div>
+    <div class="row">
+      <div class="col span-12">
+        <Banner
+          :closable="false"
+          class="cluster-tools-tip"
+          color="info"
+          label-key="cluster.privateRegistry.description"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <Checkbox
+        :value="showCustomRegistryInput"
+        class="mb-20"
+        :label="t('cluster.privateRegistry.label')"
+        @input="$emit('custom-registry-changed', $event)"
+      />
+    </div>
+    <div
+      v-if="showCustomRegistryInput"
+      class="row"
+    >
+      <div class="col span-6">
+        <LabeledInput
+          :value="registryHost"
+          label-key="catalog.chart.registry.custom.inputLabel"
+          placeholder-key="catalog.chart.registry.custom.placeholder"
+          :min-height="30"
+          @input="$emit('registry-host-changed', $event)"
+        />
+        <SelectOrCreateAuthSecret
+          v-model="registrySecret"
+          :register-before-hook="registerBeforeHook"
+          :hook-priority="1"
+          :mode="mode"
+          in-store="management"
+          :allow-ssh="false"
+          :allow-rke="true"
+          :vertical="true"
+          :namespace="value.metadata.namespace"
+          generate-name="registryconfig-auth-"
+          @input="$emit('registry-secret-changed', $event)"
+        />
+      </div>
+    </div>
+    <template>
+      <div
+        v-if="showCustomRegistryInput"
+        class="row"
+      >
+        <AdvancedSection
+          class="col span-12 advanced"
+          :is-open-by-default="showCustomRegistryAdvancedInput"
+          :mode="mode"
+        >
+          <Banner
+            :closable="false"
+            class="cluster-tools-tip"
+            color="info"
+            :label-key="value.isK3s ? 'cluster.privateRegistry.docsLinkK3s' : 'cluster.privateRegistry.docsLinkRke2'"
+          />
+          <RegistryMirrors
+            v-model="value"
+            class="mt-20"
+            :mode="mode"
+          />
+          <RegistryConfigs
+            v-model="value"
+            class="mt-20"
+            :mode="mode"
+            :cluster-register-before-hook="registerBeforeHook"
+            @updateConfigs="$emit('update-configs-changed', $event)"
+          />
+        </AdvancedSection>
+      </div>
+    </template>
+  </div>
+</template>

package/edit/provisioning.cattle.io.cluster/tabs/upgrade/index.vue

@@ -0,0 +1,76 @@
+<script>
+import { get } from '@shell/utils/object';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+import DrainOptions from '@shell/edit/provisioning.cattle.io.cluster/tabs/upgrade/DrainOptions';
+
+export default {
+  components: {
+    LabeledInput,
+    Banner,
+    DrainOptions
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    rkeConfig() {
+      return this.value.spec.rkeConfig;
+    },
+  },
+  methods: { get }
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="get(rkeConfig, 'upgradeStrategy.controlPlaneDrainOptions.deleteEmptyDirData')"
+      color="warning"
+    >
+      {{ t('cluster.rke2.drain.deleteEmptyDir.warning', {}, true) }}
+    </Banner>
+    <div class="row">
+      <div class="col span-6">
+        <h3>{{ t('cluster.rke2.controlPlaneConcurrency.header') }}</h3>
+        <LabeledInput
+          v-model="rkeConfig.upgradeStrategy.controlPlaneConcurrency"
+          :mode="mode"
+          :label="t('cluster.rke2.controlPlaneConcurrency.label')"
+          :tooltip="t('cluster.rke2.controlPlaneConcurrency.toolTip')"
+        />
+        <div class="spacer" />
+        <DrainOptions
+          v-model="rkeConfig.upgradeStrategy.controlPlaneDrainOptions"
+          :mode="mode"
+        />
+      </div>
+      <div class="col span-6">
+        <h3>
+          {{ t('cluster.rke2.workNode.label') }}
+        </h3>
+        <LabeledInput
+          v-model="rkeConfig.upgradeStrategy.workerConcurrency"
+          :mode="mode"
+          :label="t('cluster.rke2.workerConcurrency.label')"
+          :tooltip="t('cluster.rke2.workerConcurrency.toolTip')"
+        />
+        <div class="spacer" />
+        <DrainOptions
+          v-model="rkeConfig.upgradeStrategy.workerDrainOptions"
+          :mode="mode"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/edit/service.vue

@@ -26,6 +26,7 @@ import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { allHash } from '@shell/utils/promise';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
 import { Port } from '@shell/utils/validators/formRules';
+import { _CLONE } from '@shell/config/query-params';
 
 const SESSION_AFFINITY_ACTION_VALUES = {
   NONE:     'None',
@@ -75,6 +76,17 @@ export default {
       }
     }
 
+    // Set clusterIP to an empty string, if it exists and the value is not None when clone a service
+    // Remove clusterIPs if it exists when clone a service
+    if (this.realMode === _CLONE) {
+      if (this.value?.spec?.clusterIP && this.value?.spec?.clusterIP !== 'None') {
+        this.value.spec.clusterIP = '';
+      }
+      if (this.value?.spec?.clusterIPs) {
+        this.$delete(this.value.spec, 'clusterIPs');
+      }
+    }
+
     const matchingPods = {
       matched: 0,
       matches: [],

package/edit/workload/mixins/workload.js

@@ -707,7 +707,7 @@ export default {
       return Promise.all([
         ...toSave.map((svc) => svc.save()),
         ...toRemove.map((svc) => {
-          const ui = svc?.metadata?.annotations[UI_MANAGED];
+          const ui = svc?.metadata?.annotations?.[UI_MANAGED];
 
           if (ui) {
             svc.remove();

package/initialize/App.js

@@ -2,52 +2,34 @@
 
 import Vue from 'vue';
 
-import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError } from '../utils/nuxt';
-import NuxtError from '../layouts/error.vue';
+import {
+  getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, sanitizeComponent
+} from '../utils/nuxt';
+import NuxtError from '../components/templates/error.vue';
 import NuxtLoading from '../components/nav/GlobalLoading.vue';
 
 import '../assets/styles/app.scss';
-import { getLayouts } from './layouts';
-
-const layouts = getLayouts();
 
 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]);
+      key:      this.showErrorPage
+    }, [this.showErrorPage ? h(sanitizeComponent(NuxtError)) : h('router-view')]);
 
     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
+      templateEl
     ]);
   },
 
   data: () => ({
     isOnline: true,
 
-    layout:     null,
-    layoutName: '',
+    showErrorPage: false,
 
     nbFetching: 0
   }),
@@ -59,15 +41,14 @@ export default {
     // 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;
+    // 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);
 
-      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
@@ -92,15 +73,13 @@ export default {
 
   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;
-        }
+      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;
       }
     },
 
@@ -162,36 +141,11 @@ export default {
           }
         }
 
-        let errorLayout = (NuxtError.options || NuxtError).layout;
-
-        if (typeof errorLayout === 'function') {
-          errorLayout = errorLayout(this.context);
-        }
-
-        this.setLayout(errorLayout);
+        this.showErrorPage = true;
+      } else {
+        this.showErrorPage = false;
       }
     },
-
-    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 }