@rancher/shell 0.1.0 → 0.1.1

package/edit/service.vue

@@ -4,10 +4,11 @@ import isEmpty from 'lodash/isEmpty';
 import throttle from 'lodash/throttle';
 import ArrayList from '@shell/components/form/ArrayList';
 import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
 import KeyValue from '@shell/components/form/KeyValue';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import ServicePorts from '@shell/components/form/ServicePorts';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
@@ -15,7 +16,7 @@ import UnitInput from '@shell/components/form/UnitInput';
 import { DEFAULT_SERVICE_TYPES, HEADLESS, CLUSTERIP } from '@shell/models/service';
 import { ucFirst } from '@shell/utils/string';
 import CruResource from '@shell/components/CruResource';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Labels from '@shell/components/form/Labels';
 import HarvesterServiceAddOnConfig from '@shell/components/HarvesterServiceAddOnConfig';
 import { clone } from '@shell/utils/object';
@@ -24,6 +25,7 @@ import { matching } from '@shell/utils/selector';
 import { NAME as HARVESTER } from '@shell/config/product/harvester';
 import { allHash } from '@shell/utils/promise';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
+import { Port } from '@shell/utils/validators/formRules';
 
 const SESSION_AFFINITY_ACTION_VALUES = {
   NONE:     'None',
@@ -57,7 +59,7 @@ export default {
     HarvesterServiceAddOnConfig,
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   fetch() {
     return this.loadPods();
@@ -92,12 +94,26 @@ export default {
       sessionAffinityActionOptions: Object.values(
         SESSION_AFFINITY_ACTION_VALUES
       ),
+      fvFormRuleSets:            [],
+      fvReportedValidationPaths: ['spec']
     };
   },
 
   computed: {
     ...mapGetters(['currentCluster']),
 
+    tabErrors() {
+      const tabErrors = {};
+
+      if (this.serviceType === 'ExternalName') {
+        tabErrors.externalName = this.fvGetPathErrors(['spec.externalName'])?.length > 0;
+      } else {
+        tabErrors.servicePorts = this.fvGetPathErrors(['spec.ports'])?.length > 0;
+      }
+
+      return tabErrors;
+    },
+
     showSelectorWarning() {
       const selector = this.value.spec?.selector;
 
@@ -199,6 +215,17 @@ export default {
         delete this.value.spec.sessionAffinityConfig.clientIP.timeoutSeconds;
       }
     },
+    'value.spec.type'(val) {
+      if (val === 'ExternalName') {
+        this.fvFormRuleSets = [{
+          path:           'spec.externalName',
+          rules:          ['required', 'externalName'],
+          translationKey: 'servicesPage.externalName.input.label'
+        }];
+      } else {
+        this.fvFormRuleSets = [{ path: 'spec.ports', rules: ['servicePort'] }];
+      }
+    }
   },
 
   created() {
@@ -266,11 +293,12 @@ export default {
 
     targetPortsStrOrInt(targetPorts = []) {
       const neu = clone(targetPorts);
-      const isNumeric = /^\\d+$/;
 
       neu.forEach((port, idx) => {
-        if (port?.targetPort && isNumeric.test(port.targetPort)) {
-          port.targetPort = parseInt(port.targetPort, 10);
+        const targetPort = new Port(port?.targetPort);
+
+        if (targetPort.isInt) {
+          port.targetPort = targetPort.int;
         }
       });
 
@@ -295,15 +323,20 @@ export default {
     :resource="value"
     :selected-subtype="serviceType"
     :subtypes="defaultServiceTypes"
-    :validation-passed="true"
-    :errors="errors"
+    :validation-passed="fvFormIsValid"
+    :errors="fvUnreportedValidationErrors"
     :apply-hooks="applyHooks"
     @error="(e) => (errors = e)"
     @finish="save"
     @cancel="done"
     @select-type="(st) => (serviceType = st)"
   >
-    <NameNsDescription v-if="!isView" :value="value" :mode="mode" />
+    <NameNsDescription
+      v-if="!isView"
+      :value="value"
+      :mode="mode"
+      :rules="{ name: fvGetAndReportPathRules('metadata.name'), namespace: [], description: [] }"
+    />
 
     <Tabbed :side-tabs="true">
       <Tab
@@ -311,6 +344,7 @@ export default {
         name="define-external-name"
         :label="t('servicesPage.externalName.define')"
         :tooltip="t('servicesPage.externalName.helpText')"
+        :error="tabErrors.externalName"
       >
         <div class="row mt-10">
           <div class="col span-6">
@@ -322,8 +356,8 @@ export default {
               :mode="mode"
               :label="t('servicesPage.externalName.input.label')"
               :placeholder="t('servicesPage.externalName.placeholder')"
-              :required="true"
               type="text"
+              :rules="fvGetAndReportPathRules('spec.externalName')"
             />
           </div>
         </div>
@@ -333,12 +367,14 @@ export default {
         name="define-service-ports"
         :label="t('servicesPage.ips.define')"
         :weight="10"
+        :error="tabErrors.servicePorts"
       >
         <ServicePorts
           v-model="value.spec.ports"
           class="col span-12"
           :mode="mode"
           :spec-type="serviceType"
+          :rules="fvGetAndReportPathRules('spec.ports')"
           @input="updateServicePorts"
         />
       </Tab>

package/edit/serviceaccount.vue

@@ -5,7 +5,7 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Labels from '@shell/components/form/Labels';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import { SECRET } from '@shell/config/types';
 import { TYPES as SECRET_TYPES } from '@shell/models/secret';
 import LabeledSelect from '@shell/components/form/LabeledSelect';

package/edit/storage.k8s.io.storageclass/index.vue

@@ -5,7 +5,7 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import ArrayList from '@shell/components/form/ArrayList';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import { PROVISIONER_OPTIONS } from '@shell/models/storage.k8s.io.storageclass';

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/aws-ebs.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 import UnitInput from '@shell/components/form/UnitInput';
 import { _CREATE } from '@shell/config/query-params';
 
@@ -24,6 +24,10 @@ export default {
         label: this.t('storageClass.aws-ebs.volumeType.gp2'),
         value: 'gp2'
       },
+      {
+        label: this.t('storageClass.aws-ebs.volumeType.gp3'),
+        value: 'gp3'
+      },
       {
         label: this.t('storageClass.aws-ebs.volumeType.io1'),
         value: 'io1'
@@ -110,7 +114,7 @@ export default {
           :options="volumeTypeOptions"
         />
         <UnitInput
-          v-if="value.parameters.type === 'io1'"
+          v-if="value.parameters.type === 'io1' || value.parameters.type === 'gp3'"
           v-model="iopsPerGB"
           class="mt-10"
           :label="t('storageClass.aws-ebs.volumeType.provisionedIops.label')"

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/azure-disk.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { _CREATE } from '@shell/config/query-params';
 

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/azure-file.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/cinder.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 
 export default {
   components: { LabeledInput, RadioGroup },

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/gce-pd.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 import { _CREATE } from '@shell/config/query-params';
 
 export default {

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/glusterfs.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/portworx-volume.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/quobyte.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/rbd.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/scaleio.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/storageos.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/vsphere-volume.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { _CREATE } from '@shell/config/query-params';
 

package/edit/token.vue

@@ -3,12 +3,12 @@ import { mapGetters } from 'vuex';
 import day from 'dayjs';
 import sortBy from 'lodash/sortBy';
 import { MANAGEMENT, NORMAN } from '@shell/config/types';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import DetailText from '@shell/components/DetailText';
 import Footer from '@shell/components/form/Footer';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import Select from '@shell/components/form/Select';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { diffFrom } from '@shell/utils/time';

package/edit/ui.cattle.io.navlink.vue

@@ -4,8 +4,8 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import { SERVICE } from '@shell/config/types';
 import { PROTOCOLS } from '@shell/config/schema';
 import CruResource from '@shell/components/CruResource';
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 import FileImageSelector from '@shell/components/form/FileImageSelector';
 import NameNsDescription, { normalizeName } from '@shell/components/form/NameNsDescription';
 import Tab from '@shell/components/Tabbed/Tab';

package/edit/workload/Job.vue

@@ -1,8 +1,8 @@
 <script>
 import { WORKLOAD_TYPES } from '@shell/config/types';
 import UnitInput from '@shell/components/form/UnitInput';
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -30,31 +30,67 @@ export default {
 
   data() {
     const {
-      failedJobsHistoryLimit, successfulJobsHistoryLimit, suspend = false, schedule,
+      failedJobsHistoryLimit,
+      successfulJobsHistoryLimit,
+      suspend = false,
+      schedule,
     } = this.value;
 
     if (this.type === WORKLOAD_TYPES.CRON_JOB) {
+      // Initialize both value specs if empty
       if (!this.value.jobTemplate) {
         this.$set(this.value, 'jobTemplate', { spec: {} });
       }
-      const { concurrencyPolicy = 'Allow', startingDeadlineSeconds } = this.value;
+      if (!this.value.jobTemplate.spec.template) {
+        this.$set(this.value.jobTemplate.spec, 'template', { spec: {} });
+      }
+      const {
+        concurrencyPolicy = 'Allow',
+        startingDeadlineSeconds
+      } = this.value;
       const {
-        completions, parallelism, backoffLimit, activeDeadlineSeconds,
+        completions,
+        parallelism,
+        backoffLimit,
+        activeDeadlineSeconds,
         template:{ spec: { terminationGracePeriodSeconds } }
-
       } = this.value.jobTemplate.spec;
 
       return {
-        completions, parallelism, backoffLimit, activeDeadlineSeconds, failedJobsHistoryLimit, successfulJobsHistoryLimit, suspend, schedule, concurrencyPolicy, startingDeadlineSeconds, terminationGracePeriodSeconds
+        completions,
+        parallelism,
+        backoffLimit,
+        activeDeadlineSeconds,
+        failedJobsHistoryLimit,
+        successfulJobsHistoryLimit,
+        suspend,
+        schedule,
+        concurrencyPolicy,
+        startingDeadlineSeconds,
+        terminationGracePeriodSeconds
       };
     } else {
+      if (!this.value.template) {
+        this.$set(this.value, 'template', { spec: {} });
+      }
       const {
-        completions, parallelism, backoffLimit, activeDeadlineSeconds,
+        completions,
+        parallelism,
+        backoffLimit,
+        activeDeadlineSeconds,
         template:{ spec: { terminationGracePeriodSeconds } }
       } = this.value;
 
       return {
-        completions, parallelism, backoffLimit, activeDeadlineSeconds, failedJobsHistoryLimit, successfulJobsHistoryLimit, suspend, schedule, terminationGracePeriodSeconds
+        completions,
+        parallelism,
+        backoffLimit,
+        activeDeadlineSeconds,
+        failedJobsHistoryLimit,
+        successfulJobsHistoryLimit,
+        suspend,
+        schedule,
+        terminationGracePeriodSeconds
       };
     }
   },
@@ -112,79 +148,116 @@ export default {
 </script>
 
 <template>
-  <form @input="update">
+  <form>
     <div class="row mb-20">
-      <div class="col span-6">
+      <div
+        data-testid="input-job-completions"
+        class="col span-6"
+      >
         <UnitInput
           v-model="completions"
           :mode="mode"
           :suffix="t('suffix.times', {count: completions})"
           label-key="workload.job.completions.label"
           tooltip-key="workload.job.completions.tip"
+          @input="update"
         />
       </div>
-      <div class="col span-6">
+      <div
+        data-testid="input-job-parallelism"
+        class="col span-6"
+      >
         <UnitInput
           v-model="parallelism"
           :mode="mode"
           :suffix="t('suffix.times', {count: parallelism})"
           label-key="workload.job.parallelism.label"
           tooltip-key="workload.job.parallelism.tip"
+          @input="update"
         />
       </div>
     </div>
     <div class="row mb-20">
-      <div class="col span-6">
+      <div
+        data-testid="input-job-backoffLimit"
+        class="col span-6"
+      >
         <UnitInput
           v-model="backoffLimit"
           :mode="mode"
           :suffix="t('suffix.times', {count: backoffLimit})"
           label-key="workload.job.backoffLimit.label"
           tooltip-key="workload.job.backoffLimit.tip"
+          @input="update"
         />
       </div>
-      <div class="col span-6">
+      <div
+        data-testid="input-job-activeDeadlineSeconds"
+        class="col span-6"
+      >
         <UnitInput
           v-model="activeDeadlineSeconds"
           :mode="mode"
           :suffix="t('suffix.seconds', {count: activeDeadlineSeconds})"
           label-key="workload.job.activeDeadlineSeconds.label"
           tooltip-key="workload.job.activeDeadlineSeconds.tip"
+          @input="update"
         />
       </div>
     </div>
 
     <template v-if="isCronJob">
       <div class="row  mb-20">
-        <div class="col span-6">
+        <div
+          data-testid="input-job-successful"
+          class="col span-6"
+        >
           <LabeledInput
             v-model.number="successfulJobsHistoryLimit"
             :mode="mode"
             label-key="workload.job.successfulJobsHistoryLimit.label"
             tooltip-key="workload.job.successfulJobsHistoryLimit.tip"
+            @input="update"
           />
         </div>
-        <div class="col span-6">
+        <div
+          data-testid="input-job-failed"
+          class="col span-6"
+        >
           <LabeledInput
             v-model.number="failedJobsHistoryLimit"
             :mode="mode"
             label-key="workload.job.failedJobsHistoryLimit.label"
             tooltip-key="workload.job.failedJobsHistoryLimit.tip"
+            @input="update"
           />
         </div>
       </div>
       <div class="row mb-20">
-        <div class="col span-6">
+        <div
+          data-testid="input-job-startingDeadlineSeconds"
+          class="col span-6"
+        >
           <UnitInput
             v-model="startingDeadlineSeconds"
             :mode="mode"
             :suffix="t('suffix.seconds', {count: startingDeadlineSeconds})"
             label-key="workload.job.startingDeadlineSeconds.label"
             tooltip-key="workload.job.startingDeadlineSeconds.tip"
+            @input="update"
           />
         </div>
-        <div class="col span-6">
-          <UnitInput v-model="terminationGracePeriodSeconds" :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'" :label="t('workload.upgrading.activeDeadlineSeconds.label')" :mode="mode">
+        <div
+          data-testid="input-job-termination"
+          class="col span-6"
+        >
+          <UnitInput
+            v-model="terminationGracePeriodSeconds"
+            :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'"
+            :label="t('workload.upgrading.activeDeadlineSeconds.label')"
+            :mode="mode"
+            @input="update"
+          >
             <template #label>
               <label class="has-tooltip" :style="{'color':'var(--input-label)'}">
                 {{ t('workload.upgrading.terminationGracePeriodSeconds.label') }}
@@ -195,7 +268,11 @@ export default {
         </div>
       </div>
       <div class="row">
-        <div class="col span-6">
+        <div
+          data-testid="input-job-concurrencyPolicy"
+
+          class="col span-6"
+        >
           <RadioGroup
             v-model="concurrencyPolicy"
             :mode="mode"
@@ -206,7 +283,10 @@ export default {
             @input="update"
           />
         </div>
-        <div class="col span-6">
+        <div
+          data-testid="input-job-suspend"
+          class="col span-6"
+        >
           <RadioGroup
             v-model="suspend"
             :mode="mode"
@@ -220,8 +300,16 @@ export default {
       </div>
     </template>
     <div v-else class="row">
-      <div class="col span-6">
-        <UnitInput v-model="terminationGracePeriodSeconds" :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'" :label="t('workload.upgrading.activeDeadlineSeconds.label')" :mode="mode">
+      <div
+        data-testid="input-job-termination"
+        class="col span-6"
+      >
+        <UnitInput
+          v-model="terminationGracePeriodSeconds"
+          :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'"
+          :label="t('workload.upgrading.activeDeadlineSeconds.label')"
+          :mode="mode"
+        >
           <template #label>
             <label class="has-tooltip" :style="{'color':'var(--input-label)'}">
               {{ t('workload.upgrading.terminationGracePeriodSeconds.label') }}