@rancher/shell 0.3.0 → 0.3.1

package/edit/persistentvolume/plugins/rbd.vue

@@ -42,65 +42,65 @@ export default {
   <div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.rbd.user"
-          :mode="mode"
-          :label="t('persistentVolume.rbd.user.label')"
-          :placeholder="t('persistentVolume.rbd.user.placeholder')"
+        <LabeledInput
+          v-model="value.spec.rbd.user"
+          :mode="mode"
+          :label="t('persistentVolume.rbd.user.label')"
+          :placeholder="t('persistentVolume.rbd.user.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.rbd.keyring"
-          :mode="mode"
-          :label="t('persistentVolume.rbd.keyRing.label')"
-          :placeholder="t('persistentVolume.rbd.keyRing.placeholder')"
+        <LabeledInput
+          v-model="value.spec.rbd.keyring"
+          :mode="mode"
+          :label="t('persistentVolume.rbd.keyRing.label')"
+          :placeholder="t('persistentVolume.rbd.keyRing.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.rbd.pool"
-          :mode="mode"
-          :label="t('persistentVolume.rbd.pool.label')"
-          :placeholder="t('persistentVolume.rbd.pool.placeholder')"
+        <LabeledInput
+          v-model="value.spec.rbd.pool"
+          :mode="mode"
+          :label="t('persistentVolume.rbd.pool.label')"
+          :placeholder="t('persistentVolume.rbd.pool.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.rbd.image"
-          :mode="mode"
-          :label="t('persistentVolume.rbd.image.label')"
-          :placeholder="t('persistentVolume.rbd.image.placeholder')"
+        <LabeledInput
+          v-model="value.spec.rbd.image"
+          :mode="mode"
+          :label="t('persistentVolume.rbd.image.label')"
+          :placeholder="t('persistentVolume.rbd.image.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.rbd.secretRef.name"
-          :mode="mode"
-          :label="t('persistentVolume.shared.secretName.label')"
-          :placeholder="t('persistentVolume.shared.secretName.placeholder')"
+        <LabeledInput
+          v-model="value.spec.rbd.secretRef.name"
+          :mode="mode"
+          :label="t('persistentVolume.shared.secretName.label')"
+          :placeholder="t('persistentVolume.shared.secretName.placeholder')"
         />
       </div>
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.rbd.secretRef.namespace"
-          :mode="mode"
-          :label="t('persistentVolume.shared.secretNamespace.label')"
-          :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
+        <LabeledInput
+          v-model="value.spec.rbd.secretRef.namespace"
+          :mode="mode"
+          :label="t('persistentVolume.shared.secretNamespace.label')"
+          :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
         />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.rbd.fsType"
-          :mode="mode"
-          :label="t('persistentVolume.shared.filesystemType.label')"
-          :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
+        <LabeledInput
+          v-model="value.spec.rbd.fsType"
+          :mode="mode"
+          :label="t('persistentVolume.shared.filesystemType.label')"
+          :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
         />
       </div>
       <div class="col span-6">
@@ -116,10 +116,10 @@ export default {
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <ArrayList
-          v-model="value.spec.rbd.monitors"
-          :add-label="t('persistentVolume.shared.monitors.add')"
-          :mode="mode"
+        <ArrayList
+          v-model="value.spec.rbd.monitors"
+          :add-label="t('persistentVolume.shared.monitors.add')"
+          :mode="mode"
         />
       </div>
     </div>

package/edit/persistentvolumeclaim.vue

@@ -77,31 +77,7 @@ export default {
     const defaultTab = this.$route.query[FOCUS] || null;
 
     return {
-      secondaryResourceData: {
-        namespace: this.value?.metadata?.namespace || null,
-        data:      {
-          [PV]: {
-            applyTo: [
-              { var: 'persistentVolumes' },
-              {
-                var:         'persistentVolumeOptions',
-                parsingFunc: (data) => {
-                  return data
-                    .map((s) => {
-                      const status = s.status.phase === 'Available' ? '' : ` (${ s.status.phase })`;
-
-                      return {
-                        label: `${ s.metadata.name }${ status }`,
-                        value: s.metadata.name
-                      };
-                    })
-                    .sort((l, r) => l.label.localeCompare(r.label));
-                }
-              }
-            ]
-          },
-        }
-      },
+      secondaryResourceData:   this.secondaryResourceDataConfig(),
       sourceOptions,
       source:                  this.value.spec.volumeName ? sourceOptions[1].value : sourceOptions[0].value,
       immutableMode:           this.realMode === _CREATE ? _CREATE : _VIEW,
@@ -178,6 +154,33 @@ export default {
     }
   },
   methods: {
+    secondaryResourceDataConfig() {
+      return {
+        namespace: this.value?.metadata?.namespace || null,
+        data:      {
+          [PV]: {
+            applyTo: [
+              { var: 'persistentVolumes' },
+              {
+                var:         'persistentVolumeOptions',
+                parsingFunc: (data) => {
+                  return data
+                    .map((s) => {
+                      const status = s.status.phase === 'Available' ? '' : ` (${ s.status.phase })`;
+
+                      return {
+                        label: `${ s.metadata.name }${ status }`,
+                        value: s.metadata.name
+                      };
+                    })
+                    .sort((l, r) => l.label.localeCompare(r.label));
+                }
+              }
+            ]
+          },
+        }
+      };
+    },
     checkboxSetter(key, value) {
       if (value) {
         this.value.spec.accessModes.push(key);
@@ -230,16 +233,16 @@ export default {
       :namespaced="true"
     />
 
-    <ResourceTabs
-      v-model="value"
-      :mode="mode"
-      :side-tabs="true"
-      :default-tab="defaultTab"
+    <ResourceTabs
+      v-model="value"
+      :mode="mode"
+      :side-tabs="true"
+      :default-tab="defaultTab"
     >
-      <Tab
-        name="volumeclaim"
-        :label="t('persistentVolumeClaim.volumeClaim.label')"
-        :weight="4"
+      <Tab
+        name="volumeclaim"
+        :label="t('persistentVolumeClaim.volumeClaim.label')"
+        :weight="4"
       >
         <div class="row">
           <div class="col span-6">
@@ -254,9 +257,9 @@ export default {
           </div>
           <div class="col span-6">
             <div class="row">
-              <div
-                v-if="source === 'new'"
-                class="col span-12"
+              <div
+                v-if="source === 'new'"
+                class="col span-12"
               >
                 <LabeledSelect
                   v-if="canListStorageClasses"
@@ -273,9 +276,9 @@ export default {
                   :tooltip="t('persistentVolumeClaim.volumeClaim.tooltips.noStorageClass')"
                 />
               </div>
-              <div
-                v-else
-                class="col span-12"
+              <div
+                v-else
+                class="col span-12"
               >
                 <LabeledSelect
                   v-if="canListPersistentVolumes"
@@ -308,17 +311,17 @@ export default {
                   :min="1"
                   :required="true"
                 />
-                <Banner
-                  v-if="isEdit && !value.expandable"
-                  color="info"
-                  class="mt-10"
+                <Banner
+                  v-if="isEdit && !value.expandable"
+                  color="info"
+                  class="mt-10"
                 >
                   {{ t('persistentVolumeClaim.expand.notSupported') }}
                 </Banner>
-                <Banner
-                  v-else-if="isEdit && !value.bound"
-                  color="info"
-                  class="mt-10"
+                <Banner
+                  v-else-if="isEdit && !value.bound"
+                  color="info"
+                  class="mt-10"
                 >
                   {{ t('persistentVolumeClaim.expand.notBound') }}
                 </Banner>
@@ -327,42 +330,42 @@ export default {
           </div>
         </div>
       </Tab>
-      <Tab
-        name="customize"
-        :label="t('persistentVolumeClaim.customize.label')"
-        :weight="3"
+      <Tab
+        name="customize"
+        :label="t('persistentVolumeClaim.customize.label')"
+        :weight="3"
       >
         <div class="access">
           <h3>{{ t('persistentVolumeClaim.accessModes') }}</h3>
           <span class="text-error">*</span>
         </div>
-        <div>
-          <Checkbox
-            v-model="readWriteOnce"
-            :label="t('persistentVolumeClaim.customize.accessModes.readWriteOnce')"
-            :mode="immutableMode"
-          />
+        <div>
+          <Checkbox
+            v-model="readWriteOnce"
+            :label="t('persistentVolumeClaim.customize.accessModes.readWriteOnce')"
+            :mode="immutableMode"
+          />
         </div>
-        <div>
-          <Checkbox
-            v-model="readOnlyMany"
-            :label="t('persistentVolumeClaim.customize.accessModes.readOnlyMany')"
-            :mode="immutableMode"
-          />
+        <div>
+          <Checkbox
+            v-model="readOnlyMany"
+            :label="t('persistentVolumeClaim.customize.accessModes.readOnlyMany')"
+            :mode="immutableMode"
+          />
         </div>
-        <div>
-          <Checkbox
-            v-model="readWriteMany"
-            :label="t('persistentVolumeClaim.customize.accessModes.readWriteMany')"
-            :mode="immutableMode"
-          />
+        <div>
+          <Checkbox
+            v-model="readWriteMany"
+            :label="t('persistentVolumeClaim.customize.accessModes.readWriteMany')"
+            :mode="immutableMode"
+          />
         </div>
       </Tab>
-      <Tab
-        v-if="isView"
-        name="status"
-        :label="t('persistentVolumeClaim.status.label')"
-        :weight="2"
+      <Tab
+        v-if="isView"
+        name="status"
+        :label="t('persistentVolumeClaim.status.label')"
+        :weight="2"
       >
         <StatusTable :resource="value" />
       </Tab>

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

@@ -2,7 +2,6 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import { _EDIT } from '@shell/config/query-params';
-import { importMachineConfig } from '@shell/utils/dynamic-importer';
 import Taints from '@shell/components/form/Taints.vue';
 import KeyValue from '@shell/components/form/KeyValue.vue';
 import AdvancedSection from '@shell/components/AdvancedSection.vue';
@@ -109,13 +108,11 @@ export default {
 
   computed: {
     configComponent() {
-      const haveProviders = this.$store.getters['plugins/machineDrivers'];
-
-      if ( haveProviders.includes(this.provider) ) {
-        return importMachineConfig(this.provider);
+      if (this.$store.getters['type-map/hasCustomMachineConfigComponent'](this.provider)) {
+        return this.$store.getters['type-map/importMachineConfig'](this.provider);
       }
 
-      return importMachineConfig('generic');
+      return this.$store.getters['type-map/importMachineConfig']('generic');
     },
 
     isWindows() {
@@ -155,6 +152,12 @@ export default {
 
         return errors;
       }
+    },
+    // handle emitted matched machine inventories on selector so that machine count
+    // on machine pool can be kept up to date
+    // (only used on Elemental because it comes from "machineinventoryselectortemplate" machine-config)
+    updateMachineCount(val) {
+      this.value.pool.quantity = val || 1;
     }
   }
 };
@@ -208,7 +211,7 @@ export default {
     <hr class="mt-10">
     <component
       :is="configComponent"
-      v-if="value.config"
+      v-if="value.config && configComponent"
       ref="configComponent"
       :cluster="cluster"
       :uuid="uuid"
@@ -219,6 +222,7 @@ export default {
       :pool-index="idx"
       :machine-pools="machinePools"
       @error="e=>errors = e"
+      @updateMachineCount="updateMachineCount"
     />
     <Banner
       v-else-if="value.configMissing"

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

@@ -75,6 +75,10 @@ export default {
     window.z = this;
   },
 
+  // created() {
+  //   set(this.value, 'spec.rkeConfig.registries.configs', {});
+  // },
+
   methods: {
     update() {
       const configs = {};
@@ -91,6 +95,7 @@ export default {
       }
 
       set(this.value, 'spec.rkeConfig.registries.configs', configs);
+      this.$emit('updateConfigs', configs);
     },
 
     wrapRegisterBeforeHook(fn, ...args) {
@@ -118,12 +123,16 @@ export default {
         class="icon icon-info"
       />
     </h3>
+    <p class="mb-20">
+      {{ t('registryConfig.description') }}
+    </p>
     <ArrayListGrouped
       v-model="entries"
       :add-label="t('registryConfig.addLabel')"
       :default-add-value="defaultAddValue"
+      :initial-empty-row="true"
       :mode="mode"
-      @input="update()"
+      @input="update"
     >
       <template #default="{row}">
         <div class="row">

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

@@ -1,9 +1,13 @@
 <script>
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import KeyValue from '@shell/components/form/KeyValue';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { set } from '@shell/utils/object';
 
 export default {
-  components: { KeyValue },
+  components: {
+    ArrayListGrouped, KeyValue, LabeledInput
+  },
 
   props: {
     mode: {
@@ -25,12 +29,29 @@ export default {
       entries.push({
         hostname,
         endpoints: (mirrorMap[hostname].endpoint || []).join(', '),
+        rewrite:   mirrorMap[hostname].rewrite || {},
       });
     }
 
     return { entries };
   },
 
+  created() {
+    if (!this.value.spec.rkeConfig?.registries?.mirrors) {
+      set(this.value, 'spec.rkeConfig.registries.mirrors', {});
+    }
+  },
+
+  computed: {
+    defaultAddValue() {
+      return {
+        hostname:  '',
+        endpoints: '',
+        rewrite:   {}
+      };
+    },
+  },
+
   methods: {
     update(entries) {
       const mirrors = {};
@@ -41,8 +62,10 @@ export default {
         }
 
         mirrors[entry.hostname] = { endpoint: entry.endpoints.split(/\s*,\s*/).map(x => x.trim()) };
+        if (entry.rewrite) {
+          mirrors[entry.hostname].rewrite = entry.rewrite;
+        }
       }
-
       set(this.value, 'spec.rkeConfig.registries.mirrors', mirrors);
     },
   }
@@ -50,29 +73,66 @@ export default {
 </script>
 
 <template>
-  <KeyValue
-    key="labels"
-    :value="entries"
-    :as-map="false"
-    key-label="Registry Hostname"
-    key-name="hostname"
-    key-placeholder="e.g. docker.io or *"
-    value-label="Mirror Endpoints"
-    value-placeholder="e.g. a.registry.com:5000, b.registry.com:5000"
-    value-name="endpoints"
-    :add-label="t('registryMirror.addLabel')"
-    :mode="mode"
-    :read-allowed="false"
-    @input="update"
-  >
-    <template #title>
-      <h3>
-        {{ t('registryMirror.header') }}
-        <i
-          v-tooltip="t('registryMirror.toolTip')"
-          class="icon icon-info"
-        />
-      </h3>
-    </template>
-  </KeyValue>
+  <div>
+    <h3>
+      {{ t('registryMirror.header') }}
+      <i
+        v-tooltip="t('registryMirror.toolTip')"
+        class="icon icon-info"
+      />
+    </h3>
+    <p class="mb-20">
+      {{ t('registryMirror.description') }}
+    </p>
+    <ArrayListGrouped
+      v-model="entries"
+      :add-label="t('registryMirror.addLabel')"
+      :default-add-value="defaultAddValue"
+      :initial-empty-row="true"
+      :mode="mode"
+      @input="update"
+    >
+      <template #default="{row}">
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="row.value.hostname"
+              :label="t('registryMirror.hostnameLabel')"
+              :placeholder="t('registryMirror.hostnamePlaceholder')"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="row.value.endpoints"
+              :label="t('registryMirror.endpointsLabel')"
+              :placeholder="t('registryMirror.endpointsPlaceholder')"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row mt-20">
+          <div class="col span-12">
+            <h3>
+              {{ t('registryMirrorRewrite.header') }}
+              <i
+                v-tooltip="t('registryMirrorRewrite.toolTip')"
+                class="icon icon-info"
+              />
+            </h3>
+            <KeyValue
+              v-model="row.value.rewrite"
+              :mode="mode"
+              :add-label="t('registryMirrorRewrite.addLabel')"
+              :read-allowed="false"
+              :key-label="t('registryMirrorRewrite.keyLabel')"
+              :key-placeholder="t('registryMirrorRewrite.keyPlaceholder')"
+              :value-label="t('registryMirrorRewrite.valueLabel')"
+              :value-placeholder="t('registryMirrorRewrite.valuePlaceholder')"
+            />
+          </div>
+        </div>
+      </template>
+    </ArrayListGrouped>
+  </div>
 </template>

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

@@ -6,7 +6,6 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { Banner } from '@components/Banner';
-import { importCloudCredential } from '@shell/utils/dynamic-importer';
 import { CAPI } from '@shell/config/labels-annotations';
 import { clear } from '@shell/utils/array';
 
@@ -132,13 +131,11 @@ export default {
     },
 
     createComponent() {
-      const haveDrivers = this.$store.getters['plugins/credentialDrivers'];
-
-      if ( haveDrivers.includes(this.driverName) ) {
-        return importCloudCredential(this.driverName);
+      if (this.$store.getters['type-map/hasCustomCloudCredentialComponent'](this.driverName)) {
+        return this.$store.getters['type-map/importCloudCredential'](this.driverName);
       }
 
-      return importCloudCredential('generic');
+      return this.$store.getters['type-map/importCloudCredential']('generic');
     },
 
     validationPassed() {