@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.9

package/edit/fleet.cattle.io.helmop.vue

@@ -1,10 +1,11 @@
 <script>
 import { clone, set } from '@shell/utils/object';
+import semver from 'semver';
 import jsyaml from 'js-yaml';
 import { saferDump } from '@shell/utils/create-yaml';
 import { mapGetters } from 'vuex';
 import { base64Encode } from '@shell/utils/crypto';
-import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 import { AUTH_TYPE, CONFIG_MAP, NORMAN, SECRET } from '@shell/config/types';
 import { CATALOG, FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
@@ -27,9 +28,10 @@ import { SECRET_TYPES } from '@shell/config/secret';
 import UnitInput from '@shell/components/form/UnitInput';
 import FleetClusterTargets from '@shell/components/fleet/FleetClusterTargets/index.vue';
 import { toSeconds } from '@shell/utils/duration';
-import { DEFAULT_POLLING_INTERVAL, MINIMUM_POLLING_INTERVAL } from '@shell/models/fleet-application';
 import FleetValuesFrom from '@shell/components/fleet/FleetValuesFrom.vue';
 
+const MINIMUM_POLLING_INTERVAL = 15;
+
 const VALUES_STATE = {
   YAML: 'YAML',
   DIFF: 'DIFF'
@@ -77,17 +79,6 @@ export default {
   },
 
   data() {
-    let pollingInterval = toSeconds(this.value.spec.pollingInterval) || this.value.spec.pollingInterval;
-
-    if (!pollingInterval) {
-      if (this.realMode === _CREATE) {
-        pollingInterval = DEFAULT_POLLING_INTERVAL;
-        this.value.spec.pollingInterval = this.durationSeconds(pollingInterval);
-      } else if (this.realMode === _EDIT || this.realMode === _VIEW) {
-        pollingInterval = MINIMUM_POLLING_INTERVAL;
-      }
-    }
-
     const correctDriftEnabled = this.value.spec?.correctDrift?.enabled || false;
 
     const chartValues = saferDump(clone(this.value.spec.helm.values));
@@ -96,7 +87,7 @@ export default {
       VALUES_STATE,
       SOURCE_TYPE,
       allWorkspaces:    [],
-      pollingInterval,
+      pollingInterval:  toSeconds(this.value.spec.pollingInterval) || this.value.spec.pollingInterval,
       sourceTypeInit:   this.value.sourceType,
       sourceType:       this.value.sourceType || SOURCE_TYPE.REPO,
       helmSpecInit:     clone(this.value.spec.helm),
@@ -221,9 +212,25 @@ export default {
       return EDITOR_MODES.EDIT_CODE;
     },
 
-    showPollingIntervalWarning() {
-      return !this.isView && this.value.isPollingEnabled && this.pollingInterval < MINIMUM_POLLING_INTERVAL;
+    isNullOrStaticVersion() {
+      return !this.value.spec.helm.version || semver.valid(this.value.spec.helm.version) !== null;
+    },
+
+    isPollingEnabled() {
+      return !this.isNullOrStaticVersion && !!this.value.spec.pollingInterval;
+    },
+
+    showPollingIntervalMinValueWarning() {
+      return !this.isView && this.isPollingEnabled && this.pollingInterval < MINIMUM_POLLING_INTERVAL;
     },
+
+    enablePollingTooltip() {
+      if (this.isNullOrStaticVersion) {
+        return this.t('fleet.helmOp.polling.pollingInterval.versionTooltip', { version: this.value.spec.helm.version || '' }, true);
+      }
+
+      return null;
+    }
   },
 
   watch: {
@@ -255,22 +262,21 @@ export default {
       this.value.spec.targets = value;
     },
 
-    enablePolling(value) {
+    togglePolling(value) {
       if (value) {
-        delete this.value.spec.disablePolling;
+        this.pollingInterval = this.pollingInterval ?? MINIMUM_POLLING_INTERVAL;
+        this.value.spec.pollingInterval = this.value.spec.pollingInterval ?? this.durationSeconds(MINIMUM_POLLING_INTERVAL);
       } else {
-        this.value.spec.disablePolling = true;
+        delete this.value.spec.pollingInterval;
       }
     },
 
     updatePollingInterval(value) {
-      if (!value) {
-        this.pollingInterval = DEFAULT_POLLING_INTERVAL;
-        this.value.spec.pollingInterval = this.durationSeconds(DEFAULT_POLLING_INTERVAL);
-      } else if (value === MINIMUM_POLLING_INTERVAL) {
-        delete this.value.spec.pollingInterval;
-      } else {
+      if (value) {
         this.value.spec.pollingInterval = this.durationSeconds(value);
+      } else {
+        this.pollingInterval = MINIMUM_POLLING_INTERVAL;
+        this.value.spec.pollingInterval = this.durationSeconds(MINIMUM_POLLING_INTERVAL);
       }
     },
 
@@ -398,22 +404,28 @@ export default {
       case SOURCE_TYPE.REPO:
         this.fvFormRuleSets = [{
           path:  'spec.helm.repo',
-          rules: ['required', 'urlRepository'],
+          rules: ['urlRepository'],
         }, {
           path:  'spec.helm.chart',
           rules: ['required'],
+        }, {
+          path:  'spec.helm.version',
+          rules: ['semanticVersion'],
         }];
         break;
       case SOURCE_TYPE.OCI:
         this.fvFormRuleSets = [{
           path:  'spec.helm.repo',
-          rules: ['required', 'ociRegistry'],
+          rules: ['ociRegistry'],
+        }, {
+          path:  'spec.helm.version',
+          rules: ['semanticVersion'],
         }];
         break;
       case SOURCE_TYPE.TARBALL:
         this.fvFormRuleSets = [{
           path:  'spec.helm.chart',
-          rules: ['required', 'urlRepository'],
+          rules: ['urlRepository'],
         }];
         break;
       }
@@ -535,6 +547,7 @@ export default {
               :mode="mode"
               label-key="fleet.helmOp.source.version.label"
               :placeholder="t('fleet.helmOp.source.version.placeholder', null, true)"
+              :rules="fvGetAndReportPathRules('spec.helm.version')"
             />
           </div>
         </div>
@@ -558,6 +571,7 @@ export default {
               :mode="mode"
               label-key="fleet.helmOp.source.version.label"
               :placeholder="t('fleet.helmOp.source.version.placeholder', null, true)"
+              :rules="fvGetAndReportPathRules('spec.helm.version')"
             />
           </div>
         </div>
@@ -663,6 +677,7 @@ export default {
         v-if="!isView"
         color="info"
         label-key="fleet.helmOp.add.steps.advanced.info"
+        data-testid="helmOp-advanced-info"
       />
 
       <h2 v-t="'fleet.helmOp.auth.title'" />
@@ -713,38 +728,45 @@ export default {
         />
       </div>
 
-      <h2 v-t="'fleet.helmOp.polling.label'" />
-      <div class="row polling">
-        <div class="col span-6">
-          <Checkbox
-            :value="value.isPollingEnabled"
-            type="checkbox"
-            label-key="fleet.helmOp.polling.enable"
-            :mode="mode"
-            @update:value="enablePolling"
-          />
-        </div>
-        <template v-if="value.isPollingEnabled">
-          <div class="col">
-            <Banner
-              v-if="showPollingIntervalWarning"
-              color="warning"
-              label-key="fleet.helmOp.polling.pollingInterval.minimumValuewarning"
-            />
-          </div>
+      <template v-if="sourceType === SOURCE_TYPE.REPO">
+        <h2 v-t="'fleet.helmOp.polling.label'" />
+        <div class="row polling">
           <div class="col span-6">
-            <UnitInput
-              v-model:value="pollingInterval"
-              min="1"
-              :suffix="t('suffix.seconds', { count: pollingInterval })"
-              :label="t('fleet.helmOp.polling.pollingInterval.label')"
+            <Checkbox
+              :value="isPollingEnabled"
+              type="checkbox"
+              label-key="fleet.helmOp.polling.enable"
+              data-testid="helmOp-enablePolling-checkbox"
+              :tooltip="enablePollingTooltip"
               :mode="mode"
-              tooltip-key="fleet.helmOp.polling.pollingInterval.tooltip"
-              @blur.capture="updatePollingInterval(pollingInterval)"
+              :disabled="isNullOrStaticVersion"
+              @update:value="togglePolling"
             />
           </div>
-        </template>
-      </div>
+          <template v-if="isPollingEnabled">
+            <div class="col">
+              <Banner
+                v-if="showPollingIntervalMinValueWarning"
+                color="warning"
+                label-key="fleet.helmOp.polling.pollingInterval.minimumValueWarning"
+                data-testid="helmOp-pollingInterval-minimumValueWarning"
+              />
+            </div>
+            <div class="col span-6">
+              <UnitInput
+                v-model:value="pollingInterval"
+                min="1"
+                data-testid="helmOp-pollingInterval-input"
+                :suffix="t('suffix.seconds', { count: pollingInterval })"
+                :label="t('fleet.helmOp.polling.pollingInterval.label')"
+                :mode="mode"
+                tooltip-key="fleet.helmOp.polling.pollingInterval.tooltip"
+                @blur.capture="updatePollingInterval(pollingInterval)"
+              />
+            </div>
+          </template>
+        </div>
+      </template>
     </template>
   </CruResource>
 </template>

package/edit/logging.banzaicloud.io.output/index.vue

@@ -21,7 +21,7 @@ import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 export default {
   components: {
     Banner, CruResource, Labels, LabeledSelect, NameNsDescription, Tab, Tabbed, YamlEditor, Loading
-  }, //
+  },
 
   mixins: [CreateEditView],
 

package/edit/logging.banzaicloud.io.output/providers/awsElasticsearch.vue

@@ -36,11 +36,11 @@ export default {
     </div>
     <div class="row">
       <div class="col span-6">
-        <LabeledInput
-          v-model:value="value.endpoint.url"
-          :mode="mode"
-          :disabled="disabled"
-          :label="t('logging.awsElasticsearch.url')"
+        <LabeledInput
+          v-model:value="value.endpoint.url"
+          :mode="mode"
+          :disabled="disabled"
+          :label="t('logging.awsElasticsearch.url')"
         />
       </div>
     </div>
@@ -51,7 +51,6 @@ export default {
       </div>
     </div>
     <div class="row mb-10">
-      {{ value.namespace }}
       <div class="col span-6">
         <SecretSelector
           v-model:value="value.endpoint.access_key_id"

package/edit/monitoring.coreos.com.alertmanagerconfig/index.vue

@@ -34,23 +34,24 @@ export default {
 
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
-    const alertmanagerConfigId = this.value.id;
-
-    const { receiverSchema, routeSchema } = await fetchAlertManagerConfigSpecs(this.$store);
+    const { receiverSchema } = await fetchAlertManagerConfigSpecs(this.$store);
 
     this.receiverSchema = receiverSchema;
-    this.routeSchema = routeSchema;
 
-    const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: alertmanagerConfigId });
+    // The edit page is (mis)used as the detail page. When it's in create world none of the below is valid (there's no existing resource)
+    if (!this.isCreate) {
+      const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: this.value.id });
+
+      this.alertmanagerConfigId = this.value.id;
+      this.alertmanagerConfigResource = alertmanagerConfigResource;
 
-    this.alertmanagerConfigId = alertmanagerConfigId;
-    this.alertmanagerConfigResource = alertmanagerConfigResource;
-    this.alertmanagerConfigDetailRoute = alertmanagerConfigResource?._detailLocation;
+      this.alertmanagerConfigDetailRoute = alertmanagerConfigResource._detailLocation;
 
-    const alertmanagerConfigActions = alertmanagerConfigResource.availableActions;
-    const receiverActions = alertmanagerConfigResource.getReceiverActions(alertmanagerConfigActions);
+      const alertmanagerConfigActions = alertmanagerConfigResource.availableActions;
+      const receiverActions = alertmanagerConfigResource.getReceiverActions(alertmanagerConfigActions);
 
-    this.receiverActions = receiverActions;
+      this.receiverActions = receiverActions;
+    }
   },
 
   data() {

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -128,6 +128,16 @@ export default {
     const expectedFields = Object.keys(receiverSchema.resourceFields);
     const suffix = {};
 
+    // Values contains multiple receivers of two types
+    // 1. Known (expected, from schema) shown in their own tabs with explicity forms
+    // 2. unknown (not expected, missing in schema) shown as a yaml blob
+
+    // - expectedFields and suffixYaml are only used if the receiver is of type `custom`
+    // - expectedFields are the known types
+    // - suffixYaml are the unknown types
+    // - usages,
+    //   - for custom, we need to know only the unknown / yaml blog. so suffixYaml is created by extracting all known (expectedFields) from value
+    //   - on edit of custom we then combine the two again and save to value
     Object.keys(this.value).forEach((key) => {
       if (!expectedFields.includes(key)) {
         suffix[key] = this.value[key];
@@ -195,7 +205,7 @@ export default {
       return {
         duplicateName: () => {
           const receiversArray = this.alertmanagerConfigResource.spec.receivers;
-          const receiverNamesArray = receiversArray.map((R) => R.name);
+          const receiverNamesArray = receiversArray?.map((R) => R.name) || [];
           const receiversSet = new Set(receiverNamesArray);
 
           if (receiversArray.length !== receiversSet.size) {

package/edit/networking.k8s.io.ingress/Certificate.vue

@@ -25,17 +25,10 @@ export default {
     }
   },
   data() {
-    const defaultCert = {
-      label: this.t('ingress.certificates.defaultCertLabel'),
-      value: DEFAULT_CERT_VALUE,
-    };
-    const { hosts = [''], secretName = defaultCert.value } = this.value;
-
     return {
-      defaultCert,
-      hosts,
-      secretName,
-      secretVal: this.value.secretName ?? DEFAULT_CERT_VALUE,
+      hosts:      this.value?.hosts ?? [''],
+      secretName: this.value?.secretName === undefined ? DEFAULT_CERT_VALUE : this.value?.secretName,
+      secretVal:  this.value?.secretName ?? DEFAULT_CERT_VALUE,
     };
   },
   watch: {
@@ -47,7 +40,12 @@ export default {
   },
   computed: {
     certsWithDefault() {
-      return [this.defaultCert, ...this.certs.map((c) => ({ label: c, value: c }))];
+      const defaultCert = {
+        label: this.t('ingress.certificates.defaultCertLabel'),
+        value: DEFAULT_CERT_VALUE,
+      };
+
+      return [defaultCert, ...this.certs.map((c) => ({ label: c, value: c }))];
     },
     certificateStatus() {
       const isValueAnOption = !this.secretName || this.certsWithDefault.find((cert) => this.secretName === cert.value);

package/edit/networking.k8s.io.ingress/DefaultBackend.vue

@@ -34,11 +34,16 @@ export default {
     }
   },
   data() {
+    return {
+      serviceName: '',
+      servicePort: '',
+    };
+  },
+  created() {
     const backend = get(this.value.spec, this.value.defaultBackendPath);
-    const serviceName = get(backend, this.value.serviceNamePath) || '';
-    const servicePort = get(backend, this.value.servicePortPath) || '';
 
-    return { serviceName, servicePort };
+    this.serviceName = get(backend, this.value.serviceNamePath) || '';
+    this.servicePort = get(backend, this.value.servicePortPath) || '';
   },
   computed: {
     isView() {

package/edit/networking.k8s.io.ingress/Rule.vue

@@ -32,12 +32,9 @@ export default {
     }
   },
   data() {
-    const { host = '', http = {} } = this.value;
-    const { paths = [{ id: random32(1) }] } = http;
-
     return {
-      host,
-      paths,
+      host:     this.value?.host ?? '',
+      paths:    this.value?.http?.paths ?? [{ id: random32(1) }],
       ruleMode: this.value.asDefault ? 'asDefault' : 'setHost',
     };
   },

package/edit/networking.k8s.io.ingress/RulePath.vue

@@ -34,24 +34,21 @@ export default {
       type: Object,
     }
   },
-  data() {
+  setup() {
     const pathTypes = [
       'Prefix',
       'Exact',
       'ImplementationSpecific'
     ];
 
-    set(this.value, 'backend', this.value.backend || {});
-    set(this.value, 'path', this.value.path || '');
-    set(this.value, 'pathType', this.value.pathType || pathTypes[0]);
-    set(this.value.backend, this.ingress.serviceNamePath, get(this.value.backend, this.ingress.serviceNamePath) || '');
-    set(this.value.backend, this.ingress.servicePortPath, get(this.value.backend, this.ingress.servicePortPath) || '');
-
-    const serviceName = get(this.value.backend, this.ingress.serviceNamePath);
-    const servicePort = get(this.value.backend, this.ingress.servicePortPath);
-
+    return { pathTypes };
+  },
+  data() {
     return {
-      pathTypes, serviceName, servicePort, pathType: this.value.pathType, path: this.value.path
+      serviceName: undefined,
+      servicePort: undefined,
+      pathType:    this.value.pathType,
+      path:        this.value.path,
     };
   },
   computed: {
@@ -77,6 +74,15 @@ export default {
   created() {
     this.queueUpdate = debounce(this.update, 500);
     this.queueUpdatePathTypeAndPath = debounce(this.updatePathTypeAndPath, 500);
+
+    set(this.value, 'backend', this.value.backend || {});
+    set(this.value, 'path', this.value.path || '');
+    set(this.value, 'pathType', this.value.pathType || this.pathTypes[0]);
+    set(this.value.backend, this.ingress.serviceNamePath, get(this.value.backend, this.ingress.serviceNamePath) || '');
+    set(this.value.backend, this.ingress.servicePortPath, get(this.value.backend, this.ingress.servicePortPath) || '');
+
+    this.serviceName = get(this.value.backend, this.ingress.serviceNamePath);
+    this.servicePort = get(this.value.backend, this.ingress.servicePortPath);
   },
   methods: {
     update() {

package/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget.vue

@@ -47,16 +47,6 @@ export default {
     },
   },
   data() {
-    if (!this.value[TARGET_OPTIONS.IP_BLOCK] &&
-      !this.value[TARGET_OPTIONS.POD_SELECTOR] &&
-      !this.value[TARGET_OPTIONS.NAMESPACE_SELECTOR] &&
-      !this.value[TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR]
-    ) {
-      this.$nextTick(() => {
-        this.value[TARGET_OPTIONS.IP_BLOCK] = {};
-      });
-    }
-
     return {
       portOptions:  ['TCP', 'UDP'],
       matchingPods: {
@@ -74,6 +64,17 @@ export default {
       debouncedUpdateMatches: debounce(this.updateMatches, 500)
     };
   },
+  created() {
+    if (!this.value[TARGET_OPTIONS.IP_BLOCK] &&
+      !this.value[TARGET_OPTIONS.POD_SELECTOR] &&
+      !this.value[TARGET_OPTIONS.NAMESPACE_SELECTOR] &&
+      !this.value[TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR]
+    ) {
+      this.$nextTick(() => {
+        this.value[TARGET_OPTIONS.IP_BLOCK] = {};
+      });
+    }
+  },
   computed: {
     /**
      * of type matchExpression aka `KubeLabelSelectorExpression[]`

package/edit/networking.k8s.io.networkpolicy/PolicyRules.vue

@@ -32,12 +32,10 @@ export default {
       default: undefined
     }
   },
-  data() {
+  created() {
     if (!this.value.spec[this.type]) {
       this.value.spec[this.type] = [];
     }
-
-    return {};
   },
   methods: {
     addPolicyRule() {

package/edit/networking.k8s.io.networkpolicy/index.vue

@@ -47,6 +47,23 @@ export default {
   },
 
   data() {
+    return {
+      POD,
+      matchingPods: {
+        matched: 0,
+        matches: [],
+        none:    true,
+        sample:  null,
+        total:   0,
+      },
+      podTableHeaders: this.$store.getters['type-map/headersFor'](
+        this.$store.getters['cluster/schemaFor'](POD)
+      ),
+      inStore: this.$store.getters['currentProduct'].inStore,
+    };
+  },
+
+  created() {
     if ( !this.value.spec ) {
       this.value['spec'] = {
         policyTypes: [],
@@ -56,23 +73,6 @@ export default {
         }
       };
     }
-
-    const matchingPods = {
-      matched: 0,
-      matches: [],
-      none:    true,
-      sample:  null,
-      total:   0,
-    };
-
-    return {
-      POD,
-      matchingPods,
-      podTableHeaders: this.$store.getters['type-map/headersFor'](
-        this.$store.getters['cluster/schemaFor'](POD)
-      ),
-      inStore: this.$store.getters['currentProduct'].inStore,
-    };
   },
 
   computed: {

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

@@ -149,25 +149,20 @@ export default {
     });
 
     // Custom Providers from extensions - initialize each with the store and the i18n service
-    // Wrap in try ... catch, to prevent errors in an extension breaking the page
-    try {
-      const extensionClasses = this.$plugin.listDynamic('provisioner').map((name) => this.$plugin.getDynamic('provisioner', name));
-
-      // We can't pass in this.$store as this leads to a circular-reference that causes Vue to freeze,
-      // so pass in specific services that the provisioner extension may need
-      this.extensions = extensionClasses.map((c) => new c({
-        dispatch: this.$store.dispatch,
-        getters:  this.$store.getters,
-        axios:    this.$store.$axios,
-        $plugin:  this.$store.app.$plugin,
-        t:        (...args) => this.t.apply(this, args),
-        isCreate: this.isCreate,
-        isEdit:   this.isEdit,
-        isView:   this.isView,
-      }));
-    } catch (e) {
-      console.error('Error loading provisioner(s) from extensions', e); // eslint-disable-line no-console
-    }
+    // We can't pass in this.$store as this leads to a circular-reference that causes Vue to freeze,
+    // so pass in specific services that the provisioner extension may need
+    const context = {
+      dispatch:   this.$store.dispatch,
+      getters:    this.$store.getters,
+      axios:      this.$store.$axios,
+      $extension: this.$store.app.$extension,
+      t:          (...args) => this.t.apply(this, args),
+      isCreate:   this.isCreate,
+      isEdit:     this.isEdit,
+      isView:     this.isView,
+    };
+
+    this.extensions = this.$extension.getProviders(context);
   },
 
   data() {