@rancher/shell 3.0.0-rc.6 → 3.0.0-rc.8

package/edit/monitoring.coreos.com.receiver/types/slack.vue

@@ -28,11 +28,7 @@ export default {
     this.value['send_resolved'] = this.value.send_resolved || false;
 
     if (this.mode === _CREATE) {
-      this.$set(
-        this.value,
-        'text',
-        this.value.text || '{{ template "slack.rancher.text" . }}'
-      );
+      this.value.text = this.value.text || '{{ template "slack.rancher.text" . }}';
     }
 
     return {};

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

@@ -86,10 +86,15 @@ export default {
       // These aren't explicitly used, but need to be listening for change events
       mgmtClusters: this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
       provClusters: this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
-
-      catalog: this.$store.dispatch('catalog/load'),
     };
 
+    // No need to fetch charts when editing an RKE1 cluster
+    // The computed property `isRke1` in this file is based on the RKE1/RKE2 toggle, which is not applicable in this case
+    // Instead, we should rely on the value from the model: `this.value.isRke1`
+    if (!this.value.isRke1 || (this.value.isRke1 && this.mode !== 'edit')) {
+      hash['catalog'] = this.$store.dispatch('catalog/load');
+    }
+
     if (this.$store.getters[`management/canList`](MANAGEMENT.NODE_DRIVER)) {
       hash.nodeDrivers = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_DRIVER });
     }

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

@@ -42,6 +42,7 @@ import Tabbed from '@shell/components/Tabbed';
 import { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor';
 import semver from 'semver';
 
+import { CLOUD_CREDENTIAL_OVERRIDE } from '@shell/models/nodedriver';
 import { SETTING } from '@shell/config/settings';
 import { base64Encode } from '@shell/utils/crypto';
 import { CAPI as CAPI_ANNOTATIONS, CLUSTER_BADGE } from '@shell/config/labels-annotations';
@@ -413,11 +414,22 @@ export default {
     },
 
     needCredential() {
-      if (this.provider === 'custom' || this.provider === 'import' || this.isElementalCluster || this.mode === _VIEW || (this.providerConfig?.spec?.builtin === false && this.providerConfig?.spec?.addCloudCredential === false)) {
+      // Check non-provider specific config
+      if (
+        this.provider === 'custom' ||
+        this.provider === 'import' ||
+        this.isElementalCluster || // Elemental cluster can make use of `cloud-credential`: false
+        this.mode === _VIEW
+      ) {
         return false;
       }
 
-      if (this.customCredentialComponentRequired === false) {
+      // Check provider specific config
+      if (this.cloudCredentialsOverride === true || this.cloudCredentialsOverride === false) {
+        return this.cloudCredentialsOverride;
+      }
+
+      if (this.providerConfig?.spec?.builtin === false && this.providerConfig?.spec?.addCloudCredential === false) {
         return false;
       }
 
@@ -425,10 +437,21 @@ export default {
     },
 
     /**
-     * Only for extensions - extension can register a 'false' cloud credential to indicate that a cloud credential is not needed
+     * Override the native way of determining if cloud credentials are required (builtin ++ node driver spec.addCloudCredentials)
+     *
+     * 1) Override via extensions
+     *    - `true` or actual component - return true
+     *    - `false` - return false
+     * 2) Override via hardcoded setting
      */
-    customCredentialComponentRequired() {
-      return this.$plugin.getDynamic('cloud-credential', this.provider);
+    cloudCredentialsOverride() {
+      const cloudCredential = this.$plugin.getDynamic('cloud-credential', this.provider);
+
+      if (cloudCredential === undefined) {
+        return CLOUD_CREDENTIAL_OVERRIDE[this.provider];
+      }
+
+      return !!cloudCredential;
     },
 
     hasMachinePools() {

package/edit/service.vue

@@ -226,11 +226,7 @@ export default {
         this.value.spec.sessionAffinityConfig = { clientIP: { timeoutSeconds: null } };
 
         // set it null and then set it with vue to make reactive.
-        this.$set(
-          this.value.spec.sessionAffinityConfig.clientIP,
-          'timeoutSeconds',
-          SESSION_STICKY_TIME_DEFAULT
-        );
+        this.value.spec.sessionAffinityConfig.clientIP.timeoutSeconds = SESSION_STICKY_TIME_DEFAULT;
       } else if (
         this.value?.spec?.sessionAffinityConfig?.clientIP?.timeoutSeconds
       ) {
@@ -425,7 +421,7 @@ export default {
               :mode="mode"
               :initial-empty-row="true"
               :protip="false"
-              @update:value="(e) => $set(value.spec, 'selector', e)"
+              @update:value="(e) => value.spec.selector = e"
             />
           </div>
         </div>
@@ -448,7 +444,7 @@ export default {
               :tooltip-key="
                 hasClusterIp ? 'servicesPage.ips.clusterIpHelpText' : null
               "
-              @update:value="(e) => $set(value.spec, 'clusterIP', e)"
+              @update:value="(e) => value.spec.clusterIP = e"
             />
           </div>
         </div>
@@ -465,7 +461,7 @@ export default {
               :tooltip-key="
                 hasClusterIp ? 'servicesPage.ips.loadBalancerIp.helpText' : null
               "
-              @update:value="(e) => $set(value.spec, 'loadBalancerIP', e)"
+              @update:value="(e) => value.spec.loadBalancerIP = e"
             />
           </div>
         </div>
@@ -478,7 +474,7 @@ export default {
               :value-placeholder="t('servicesPage.ips.external.placeholder')"
               :mode="mode"
               :protip="false"
-              @update:value="(e) => $set(value.spec, 'externalIPs', e)"
+              @update:value="(e) => value.spec.externalIPs = e"
             />
           </div>
         </div>
@@ -527,12 +523,7 @@ export default {
               :label="t('servicesPage.affinity.timeout.label')"
               :placeholder="t('servicesPage.affinity.timeout.placeholder')"
               @input="
-                (e) =>
-                  $set(
-                    value.spec.sessionAffinityConfig.clientIP,
-                    'timeoutSeconds',
-                    e
-                  )
+                (e) => value.spec.sessionAffinityConfig.clientIP.timeoutSeconds = e
               "
             />
           </div>

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

@@ -10,10 +10,11 @@ import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/feature
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { BadgeState } from '@components/BadgeState';
+import CloudCredExpired from '@shell/components/formatter/CloudCredExpired';
 
 export default {
   components: {
-    Banner, ResourceTable, Masthead, BadgeState
+    Banner, ResourceTable, Masthead, BadgeState, CloudCredExpired
   },
   mixins: [ResourceFetch],
   props:  {
@@ -41,6 +42,8 @@ export default {
       mgmtClusters:    this.$fetchType(MANAGEMENT.CLUSTER),
     };
 
+    this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+
     if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
       hash.etcdSnapshots = this.$fetchType(SNAPSHOT);
     }
@@ -141,17 +144,36 @@ export default {
       // This will be used when there's clusters from extension based provisioners
       // We should re-visit this for scaling reasons
       return this.filteredRows.some((c) => c.metadata.namespace !== 'fleet-local' && c.metadata.namespace !== 'fleet-default');
+    },
+
+    tokenExpiredData() {
+      const counts = this.rows.reduce((res, provCluster) => {
+        const expireData = provCluster.cloudCredential?.expireData;
+
+        if (expireData?.expiring) {
+          res.expiring++;
+        }
+        if (expireData?.expired) {
+          res.expired++;
+        }
+
+        return res;
+      }, {
+        expiring: 0,
+        expired:  0
+      });
+
+      return {
+        expiring: counts.expiring ? this.t('cluster.cloudCredentials.banners.expiring', { count: counts.expiring }) : '',
+        expired:  counts.expired ? this.t('cluster.cloudCredentials.banners.expired', { count: counts.expired }) : '',
+      };
     }
   },
 
   $loadingResources() {
     // results are filtered so we wouldn't get the correct count on indicator...
     return { loadIndeterminate: true };
-  },
-
-  mounted() {
-    window.c = this;
-  },
+  }
 };
 </script>
 
@@ -186,6 +208,17 @@ export default {
       </template>
     </Masthead>
 
+    <Banner
+      v-if="tokenExpiredData.expiring"
+      color="warning"
+      :label="tokenExpiredData.expiring"
+    />
+    <Banner
+      v-if="tokenExpiredData.expired"
+      color="error"
+      :label="tokenExpiredData.expired"
+    />
+
     <ResourceTable
       :schema="schema"
       :rows="filteredRows"
@@ -194,6 +227,7 @@ export default {
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :data-testid="'cluster-list'"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :sub-rows="true"
     >
       <!-- Why are state column and subrow overwritten here? -->
       <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->
@@ -207,19 +241,32 @@ export default {
       </template>
       <template #sub-row="{fullColspan, row, keyField, componentTestid, i, onRowMouseEnter, onRowMouseLeave}">
         <tr
-          v-if="row.stateDescription"
           :key="row[keyField] + '-description'"
           :data-testid="componentTestid + '-' + i + '-row-description'"
           class="state-description sub-row"
           @mouseenter="onRowMouseEnter"
           @mouseleave="onRowMouseLeave"
         >
-          <td>&nbsp;</td>
+          <td v-if="row.cloudCredentialWarning || row.stateDescription">
+&nbsp;
+          </td>
           <td
+            v-if="row.cloudCredentialWarning || row.stateDescription"
             :colspan="fullColspan - 1"
-            :class="{ 'text-error' : row.stateObj.error }"
           >
-            {{ row.stateDescription }}
+            <CloudCredExpired
+              v-if="row.cloudCredentialWarning"
+              :value="row.cloudCredential.expires"
+              :row="row.cloudCredential"
+              :verbose="true"
+              :class="{'mb-10': row.stateDescription}"
+            />
+            <div
+              v-if="row.stateDescription"
+              :class="{ 'text-error' : row.stateObj.error }"
+            >
+              {{ row.stateDescription }}
+            </div>
           </td>
         </tr>
       </template>

package/machine-config/vmwarevsphere.vue

@@ -64,48 +64,26 @@ const networksToVappProperties = (networks) => {
   }
 
   return networks.reduce(networkToVappProperties, [
-    `guestinfo.dns.servers=\${dns:${ networks[0] }}`,
-    `guestinfo.dns.domains=\${searchPath:${ networks[0] }}`
+    `guestinfo.dns.servers=\${dns:${ nameOnly(networks[0]) }}`,
+    `guestinfo.dns.domains=\${searchPath:${ nameOnly(networks[0]) }}`
   ]);
 };
 
 const networkToVappProperties = (props, network, i) => {
   const n = i.toString();
+  const networkName = nameOnly(network);
 
   props.push(
-    `guestinfo.interface.${ n }.ip.0.address=ip:${ network }`,
-    `guestinfo.interface.${ n }.ip.0.netmask=\${netmask:${ network }}`,
-    `guestinfo.interface.${ n }.route.0.gateway=\${gateway:${ network }}`
+    `guestinfo.interface.${ n }.ip.0.address=ip:${ networkName }`,
+    `guestinfo.interface.${ n }.ip.0.netmask=\${netmask:${ networkName }}`,
+    `guestinfo.interface.${ n }.route.0.gateway=\${gateway:${ networkName }}`
   );
 
   return props;
 };
 
-const getInitialVappMode = (c) => {
-  const vappProperty = c.vappProperty || [];
-
-  if (
-    !c.vappIpprotocol &&
-    !c.vappIpallocationpolicy &&
-    !c.vappTransport &&
-    vappProperty.length === 0
-  ) {
-    return VAPP_MODE.DISABLED;
-  }
-
-  const d = getDefaultVappOptions(c.network || []);
-
-  if (
-    c.vappIpprotocol === d.vappIpprotocol &&
-    c.vappIpallocationpolicy === d.vappIpallocationpolicy &&
-    c.vappTransport === d.vappTransport &&
-    vappProperty.length === d.vappProperty.length &&
-    vappProperty.join() === d.vappProperty.join()
-  ) {
-    return VAPP_MODE.AUTO;
-  }
-
-  return VAPP_MODE.MANUAL;
+const nameOnly = (network) => {
+  return network.split('/').pop();
 };
 
 /**
@@ -266,9 +244,10 @@ export default {
       haveAttributes:           null,
       haveTemplates:            null,
       vAppOptions,
-      vappMode:                 getInitialVappMode(this.value),
-      osOptions:                OS_OPTIONS,
-      validationErrors:         {},
+      vappMode:                 VAPP_MODE.DISABLED,
+
+      osOptions:        OS_OPTIONS,
+      validationErrors: {},
     };
   },
 
@@ -288,6 +267,21 @@ export default {
     ...createOptionHelpers('attributeKeys'),
     ...createOptionHelpers('networks'),
 
+    networkNames() {
+      const { network = [] } = this.value;
+
+      return network.reduce((names, id) => {
+        // previously this form used network names instead of ids -- need to account for both possibilities
+        const name = this.networks.find((nw) => nw.value === id || nw.name === id)?.name;
+
+        if (name && !names.includes(name)) {
+          names.push(name);
+        }
+
+        return names;
+      }, []);
+    },
+
     isDisabled() {
       return this.disabled || this.mode === _VIEW;
     },
@@ -390,13 +384,14 @@ export default {
     },
     vappMode(value) {
       if (value === VAPP_MODE.AUTO) {
-        const defaultVappOptions = getDefaultVappOptions(this.value.network || []);
+        const defaultVappOptions = getDefaultVappOptions(this.networkNames || []);
 
         return this.updateVappOptions(defaultVappOptions);
+      } else {
+        this.updateVappOptions(INITIAL_VAPP_OPTIONS);
       }
-
-      this.updateVappOptions(INITIAL_VAPP_OPTIONS);
     },
+
     validationErrors(value) {
       this.$emit('error', value);
     }
@@ -546,12 +541,17 @@ export default {
     async loadNetworks() {
       set(this, 'networksResults', null);
 
-      const options = await this.requestOptions('networks', this.value.datacenter);
-      const content = this.mapPathOptionsToContent(options);
+      const options = await this.requestOptions('networks-extended', this.value.datacenter);
+      const content = options.map((opt) => {
+        return {
+          label: `${ opt.name } (${ opt.moid })`, value: opt.moid, name: opt.name
+        };
+      });
 
       this.resetValueIfNecessary('network', content, options, true);
 
       set(this, 'networksResults', content);
+      this.vappMode = this.getInitialVappMode(this.value);
     },
 
     async loadContentLibraries() {
@@ -724,6 +724,34 @@ export default {
         this.validationErrors = Object.assign({}, this.validationErrors, { [this.poolId]: this.validationErrors[this.poolId].filter((x) => x === key) }) ;
       }
     },
+
+    getInitialVappMode(c) {
+      const vappProperty = c.vappProperty || [];
+
+      if (
+        !c.vappIpprotocol &&
+        !c.vappIpallocationpolicy &&
+        !c.vappTransport &&
+        vappProperty.length === 0
+      ) {
+        return VAPP_MODE.DISABLED;
+      }
+
+      const d = getDefaultVappOptions(this.networkNames || []);
+
+      if (
+        c.vappIpprotocol === d.vappIpprotocol &&
+        c.vappIpallocationpolicy === d.vappIpallocationpolicy &&
+        c.vappTransport === d.vappTransport &&
+        vappProperty.length === d.vappProperty.length &&
+        vappProperty.join() === d.vappProperty.join()
+      ) {
+        return VAPP_MODE.AUTO;
+      }
+
+      return VAPP_MODE.MANUAL;
+    }
+
   }
 };
 </script>
@@ -1132,68 +1160,78 @@ export default {
       </template>
       <template #body>
         <div>
-          <div class="row mb-10">
-            <div class="col span-6">
-              <RadioGroup
-                v-model:value="vappMode"
-                name="restoreMode"
-                :label="t('cluster.machineConfig.vsphere.vAppOptions.restoreType')"
-                :options="vAppOptions"
-                :disabled="isDisabled"
-              />
-            </div>
-          </div>
           <div
-            v-if="showManual"
-            class="row mb-10"
+            v-if="networksLoading"
+            class="row flex-justify-center"
           >
-            <div class="col span-4">
-              <LabeledInput
-                v-model:value="value.vappTransport"
-                :mode="mode"
-                :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"
-              />
-            </div>
-            <div class="col span-4">
-              <LabeledInput
-                v-model:value="value.vappIpprotocol"
-                :mode="mode"
-                :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"
-              />
+            <i
+              class="icon icon-spinner icon-spin"
+            />
+          </div>
+          <template v-else>
+            <div class="row mb-10">
+              <div class="col span-6">
+                <RadioGroup
+                  v-model:value="vappMode"
+                  name="restoreMode"
+                  :label="t('cluster.machineConfig.vsphere.vAppOptions.restoreType')"
+                  :options="vAppOptions"
+                  :disabled="isDisabled"
+                />
+              </div>
             </div>
-            <div class="col span-4">
-              <LabeledInput
-                v-model:value="value.vappIpallocationpolicy"
-                :mode="mode"
-                :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"
-              />
+            <div
+              v-if="showManual"
+              class="row mb-10"
+            >
+              <div class="col span-4">
+                <LabeledInput
+                  v-model:value="value.vappTransport"
+                  :mode="mode"
+                  :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"
+                />
+              </div>
+              <div class="col span-4">
+                <LabeledInput
+                  v-model:value="value.vappIpprotocol"
+                  :mode="mode"
+                  :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"
+                />
+              </div>
+              <div class="col span-4">
+                <LabeledInput
+                  v-model:value="value.vappIpallocationpolicy"
+                  :mode="mode"
+                  :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"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            v-if="showManual"
-            class="row"
-          >
-            <div class="col span-12">
-              <KeyValue
-                v-model:value="vappProperty"
-                :title="t('cluster.machineConfig.vsphere.vAppOptions.properties.label')"
-                :key-placeholder="t('cluster.machineConfig.vsphere.vAppOptions.properties.keyPlaceholder')"
-                :value-placeholder="t('cluster.machineConfig.vsphere.vAppOptions.properties.valuePlaceholder')"
-                :add-label="t('cluster.machineConfig.vsphere.vAppOptions.properties.add')"
-                :read-allowed="false"
-                :disabled="isDisabled"
-              />
+            <div
+              v-if="showManual"
+              class="row"
+            >
+              <div class="col span-12">
+                <KeyValue
+                  v-model:value="vappProperty"
+                  :title="t('cluster.machineConfig.vsphere.vAppOptions.properties.label')"
+                  :key-placeholder="t('cluster.machineConfig.vsphere.vAppOptions.properties.keyPlaceholder')"
+                  :value-placeholder="t('cluster.machineConfig.vsphere.vAppOptions.properties.valuePlaceholder')"
+                  :add-label="t('cluster.machineConfig.vsphere.vAppOptions.properties.add')"
+                  :read-allowed="false"
+                  :disabled="isDisabled"
+                />
+              </div>
             </div>
-          </div>
+          </template>
         </div>
       </template>
     </Card>

package/mixins/create-edit-view/impl.js

@@ -12,6 +12,8 @@ export default {
 
   mixins: [ChildHook],
 
+  emits: ['done'],
+
   data() {
     // Keep label and annotation filters in data so each resource CRUD page can alter individually
     return { errors: [] };

package/mixins/labeled-form-element.ts

@@ -10,6 +10,8 @@ interface LabeledFormElement {
 export default {
   inheritAttrs: false,
 
+  emits: ['update:validation', 'on-focus', 'on-blur'],
+
   props: {
     mode: {
       type:    String,

package/models/catalog.cattle.io.app.js

@@ -55,12 +55,13 @@ export default class CatalogApp extends SteveModel {
     }
 
     const chartName = chart.metadata?.name;
-    const preferRepoType = chart.metadata?.annotations?.[CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE];
-    const preferRepoName = chart.metadata?.annotations?.[CATALOG_ANNOTATIONS.SOURCE_REPO_NAME];
+    const repoName = chart.metadata?.annotations?.[CATALOG_ANNOTATIONS.SOURCE_REPO_NAME] || this.metadata?.labels?.[CATALOG_ANNOTATIONS.CLUSTER_REPO_NAME];
+    const preferRepoType = chart.metadata?.annotations?.[CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE] || 'cluster';
+
     const match = this.$rootGetters['catalog/chart']({
       chartName,
+      repoName,
       preferRepoType,
-      preferRepoName,
       includeHidden
     });