fix: Validation messages

dsieradzki · Oct 13, 2023 · 7c95915 · 7c95915
1 parent 25e397a
commit 7c95915
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 90 deletions.
diff --git a/web/src-web/src/views/cluster-creator/steps/apps/CreatorHelmAppDialog.tsx b/web/src-web/src/views/cluster-creator/steps/apps/CreatorHelmAppDialog.tsx
@@ -11,12 +11,12 @@ import {InputTextarea} from "primereact/inputtextarea";
 import {ClusterCreatorStoreContext} from "@/views/cluster-creator/context";
 
 
-const schema = Yup.object({
-    releaseName: Yup.string().required().trim(),
-    chartName: Yup.string().required().trim(),
+export const schemaAddHelmApp = Yup.object({
+    releaseName: Yup.string().required("Release name is required").trim(),
+    chartName: Yup.string().required("Chart name is required").trim(),
     chartVersion: Yup.string().trim(),
-    repository: Yup.string().required().trim(),
-    namespace: Yup.string().required().trim(),
+    repository: Yup.string().required("Repository is required").trim(),
+    namespace: Yup.string().required("Namespace is required").trim(),
     values: Yup.string()
 })
 type Props = {
@@ -65,7 +65,7 @@ const CreatorHelmAppDialog = (props: Props) => {
         validateOnMount: true,
         enableReinitialize: true,
         initialValues: initialValues,
-        validationSchema: schema,
+        validationSchema: schemaAddHelmApp,
         onSubmit: async (values) => {
             if (props.selectedAppId) {
                 creatorStore.updateHelmApp(props.selectedAppId, values);

diff --git a/web/src-web/src/views/cluster-creator/steps/cluster/index.tsx b/web/src-web/src/views/cluster-creator/steps/cluster/index.tsx
@@ -48,7 +48,7 @@ const ClusterStep = (props: StepProps, ref: any) => {
     }
     const schema = Yup.object().shape({
         clusterName: Yup.string()
-            .required()
+            .required("Cluster name is required")
             .strict()
             .trim()
             .max(128)
@@ -64,14 +64,14 @@ const ClusterStep = (props: StepProps, ref: any) => {
                 },
                 exclusive: false
             }),
-        nodeUsername: Yup.string().required().strict().trim(),
-        nodePassword: Yup.string().required().strict().trim(),
-        diskSize: Yup.number().required(),
+        nodeUsername: Yup.string().required("Username is required").strict().trim(),
+        nodePassword: Yup.string().required("Password is required").strict().trim(),
+        diskSize: Yup.number().required("Disk size is required"),
         network: Yup.object().shape({
-            bridge: Yup.string().required(),
-            subnetMask: Yup.number().required(),
-            gateway: Yup.string().required().strict().trim(),
-            dns: Yup.string().required().strict().trim(),
+            bridge: Yup.string().required("Bridge is required"),
+            subnetMask: Yup.number().required("Subnet mask is required"),
+            gateway: Yup.string().required("Gateway address is required").strict().trim(),
+            dns: Yup.string().required("DNS address is required").strict().trim(),
         })
     });
 

diff --git a/web/src-web/src/views/cluster-creator/steps/nodes/CreatorNodeDialog.tsx b/web/src-web/src/views/cluster-creator/steps/nodes/CreatorNodeDialog.tsx
@@ -33,20 +33,31 @@ interface NodeFormModel {
     storagePool: string
 }
 
-const schema = Yup.object().shape({
+export const schemaAddNode = Yup.object().shape({
     name: Yup.string()
-        .required()
+        .required("Node name is required")
         .strict()
         .trim()
-        .max(128)
+        .max(128, "Name length must be at most 128 characters")
         .matches(hostnameStart, {message: "Name can start with characters: a-z, A-Z, 0-9"})
         .matches(hostnameMain, {message: "Name can contain characters: a-z, A-Z, 0-9, -"})
         .matches(hostnameEnd, {message: "Name can end with characters: a-z, A-Z, 0-9"}),
-    vmId: Yup.number().min(100).required(),
-    cores: Yup.number().min(1).required(),
-    memory: Yup.number().positive().required(),
-    ipAddress: Yup.string().min(7).required(),
-    storagePool: Yup.string().required()
+    vmId: Yup.number()
+        .min(100, "VM id must be greater than or equal to 100")
+        .max(4294967296, "VM id must be lower or equal to 4 294 967 296")
+        .required("VM id is required"),
+    cores: Yup.number()
+        .min(1, "At least one core is required")
+        .max(4096, "You can allocate maximum 4096 cores")
+        .required("Cores are required"),
+    memory: Yup.number()
+        .positive("Memory size has to be at least 1 MiB")
+        .required("Memory size is required"),
+    ipAddress: Yup.string()
+        .min(7, "IP address has to have at least 7 characters")
+        .required("IP address is required"),
+    storagePool: Yup.string()
+        .required("Storage pool is required")
 })
 const AddNodeDialog = (props: Props) => {
 
@@ -68,7 +79,7 @@ const AddNodeDialog = (props: Props) => {
 
     const formik = useFormik({
         validateOnMount: true,
-        validationSchema: schema,
+        validationSchema: schemaAddNode,
         initialValues: {
             vmId: storedNode.get()?.vmId,
             name: storedNode.get()?.name,

diff --git a/web/src-web/src/views/cluster-creator/steps/settings/index.tsx b/web/src-web/src/views/cluster-creator/steps/settings/index.tsx
@@ -43,10 +43,10 @@ const SettingsStep = (props: StepProps, ref: any) => {
 
 
     const schema = Yup.object().shape({
-        node: Yup.string().required().strict().trim(),
-        osImage: Yup.string().required().strict().trim(),
-        osImageStorage: Yup.string().required().strict().trim(),
-        kubeVersion: Yup.string().required().strict().trim()
+        node: Yup.string().required("Proxmox node is required").strict().trim(),
+        osImage: Yup.string().required("OS image is required").strict().trim(),
+        osImageStorage: Yup.string().required("Storage for OS image is required").strict().trim(),
+        kubeVersion: Yup.string().required("MicroK8S version is required").strict().trim()
     });
     const formik = useFormik<SettingsModel>({
         validateOnMount: true,

diff --git a/web/src-web/src/views/cluster-creator/steps/workloads/CreatorWorkloadsDialog.tsx b/web/src-web/src/views/cluster-creator/steps/workloads/CreatorWorkloadsDialog.tsx
@@ -11,9 +11,9 @@ import {observer} from "mobx-react-lite";
 import {ClusterCreatorStoreContext} from "@/views/cluster-creator/context";
 
 
-const schema = Yup.object({
-    name: Yup.string().required().strict().trim(),
-    content: Yup.string().required()
+export const schemaAddWorkload = Yup.object({
+    name: Yup.string().required("Workload name is required").strict().trim(),
+    content: Yup.string().required("Workload content is required").strict().trim()
 })
 
 type Props = {
@@ -45,7 +45,7 @@ const CreatorWorkloadsDialog = (props: Props) => {
         enableReinitialize: true,
         validateOnMount: true,
         initialValues: initialValues,
-        validationSchema: schema,
+        validationSchema: schemaAddWorkload,
         onSubmit: async (values) => {
             if (props.selectedWorkloadId) {
                 creatorStore.updateCustomK8SResources(props.selectedWorkloadId, values);
@@ -113,12 +113,15 @@ const CreatorWorkloadsDialog = (props: Props) => {
                 </div>
                 <div className="grow flex flex-col min-w-[300px] min-h-[300px]">
                     <div className="mr-1 required">Content:</div>
-                    <InputTextarea className="grow font-monospace"
-                                   readOnly={formik.isSubmitting}
-                                   value={formik.values.content}
-                                   onChange={(e) => {
-                                       formik.setFieldValue("content", e.target.value)
-                                   }}/>
+                    <InputTextarea
+                        name="content"
+                        className="grow font-monospace"
+                        readOnly={formik.isSubmitting}
+                        value={formik.values.content}
+                        onBlur={formik.handleBlur}
+                        onChange={(e) => {
+                            formik.setFieldValue("content", e.target.value);
+                        }}/>
                     <FormError error={formik.errors.content}
                                touched={formik.touched.content}/>
                 </div>

diff --git a/web/src-web/src/views/clusters-management/components/apps/HelmAppDialog.tsx b/web/src-web/src/views/clusters-management/components/apps/HelmAppDialog.tsx
@@ -14,16 +14,9 @@ import FormError from "@/components/FormError";
 import * as Yup from "yup";
 import {InputTextarea} from "primereact/inputtextarea";
 import {AxiosError} from "axios";
+import {schemaAddHelmApp} from "@/views/cluster-creator/steps/apps/CreatorHelmAppDialog";
 
 
-const schema = Yup.object({
-    releaseName: Yup.string().required().trim(),
-    chartName: Yup.string().required().trim(),
-    chartVersion: Yup.string().trim(),
-    repository: Yup.string().required().trim(),
-    namespace: Yup.string().required().trim(),
-    values: Yup.string()
-})
 type Props = {
     onClose: () => void;
     onSubmit: (id: string) => void;
@@ -81,7 +74,7 @@ const HelmAppDialog = (props: Props) => {
         validateOnMount: true,
         enableReinitialize: true,
         initialValues: initialValues,
-        validationSchema: schema,
+        validationSchema: schemaAddHelmApp,
         onSubmit: async (values) => {
             if (!initialValues.id) {
                 const id = await clusterManagementStore.addHelmChart(values)

diff --git a/web/src-web/src/views/clusters-management/components/nodes/AddNodeDialog.tsx b/web/src-web/src/views/clusters-management/components/nodes/AddNodeDialog.tsx
@@ -17,6 +17,7 @@ import StorageDropdownOption from "@/components/StorageDropdownOption";
 import {Button} from "primereact/button";
 import Section from "@/components/Section";
 import {observer} from "mobx-react-lite";
+import {schemaAddNode} from "@/views/cluster-creator/steps/nodes/CreatorNodeDialog";
 
 type Props = {
     setVisible: (s: boolean) => void;
@@ -32,21 +33,6 @@ interface NodeFormModel {
     storagePool: string
 }
 
-const schema = Yup.object().shape({
-    name: Yup.string()
-        .required()
-        .strict()
-        .trim()
-        .max(128)
-        .matches(hostnameStart, {message: "Name can start with characters: a-z, A-Z, 0-9"})
-        .matches(hostnameMain, {message: "Name can contain characters: a-z, A-Z, 0-9, -"})
-        .matches(hostnameEnd, {message: "Name can end with characters: a-z, A-Z, 0-9"}),
-    vmId: Yup.number().min(100).required(),
-    cores: Yup.number().min(1).required(),
-    memory: Yup.number().positive().required(),
-    ipAddress: Yup.string().min(7).required(),
-    storagePool: Yup.string().required()
-})
 const AddNodeDialog = (props: Props) => {
     const [storages, setStorages] = useState<AvailableStorage[]>([])
 
@@ -68,7 +54,7 @@ const AddNodeDialog = (props: Props) => {
         } as ClusterNode);
     const formik = useFormik({
         validateOnMount: true,
-        validationSchema: schema,
+        validationSchema: schemaAddNode,
         initialValues: {
             vmId: generatedNextNode.vmId,
             name: generatedNextNode.name,

diff --git a/web/src-web/src/views/clusters-management/components/nodes/EditNodeDialog.tsx b/web/src-web/src/views/clusters-management/components/nodes/EditNodeDialog.tsx
@@ -1,7 +1,6 @@
 import {Dialog} from "primereact/dialog";
 import React, {useEffect, useState} from "react";
 import * as Yup from "yup";
-import {hostnameEnd, hostnameMain, hostnameStart} from "@/utils/patterns";
 import {AvailableStorage, ClusterStatus} from "@/api/model";
 import {useOnFirstMount} from "@/utils/hooks";
 import {apiCall} from "@/utils/api";
@@ -17,6 +16,8 @@ import {Button} from "primereact/button";
 import Section from "@/components/Section";
 import {observer} from "mobx-react-lite";
 import {computed} from "mobx";
+import {} from "@/views/clusters-management/components/nodes/AddNodeDialog";
+import {schemaAddNode} from "@/views/cluster-creator/steps/nodes/CreatorNodeDialog";
 
 type Props = {
     setVisible: (s: boolean) => void;
@@ -32,21 +33,6 @@ interface NodeFormModel {
     storagePool: string
 }
 
-const schema = Yup.object().shape({
-    name: Yup.string()
-        .required()
-        .strict()
-        .trim()
-        .max(128)
-        .matches(hostnameStart, {message: "Name can start with characters: a-z, A-Z, 0-9"})
-        .matches(hostnameMain, {message: "Name can contain characters: a-z, A-Z, 0-9, -"})
-        .matches(hostnameEnd, {message: "Name can end with characters: a-z, A-Z, 0-9"}),
-    vmId: Yup.number().min(100).required(),
-    cores: Yup.number().min(1).required(),
-    memory: Yup.number().positive().required(),
-    ipAddress: Yup.string().min(7).required(),
-    storagePool: Yup.string().required()
-})
 const EditNodeDialog = (props: Props) => {
     const [storages, setStorages] = useState<AvailableStorage[]>([])
 
@@ -65,7 +51,7 @@ const EditNodeDialog = (props: Props) => {
 
     const formik = useFormik({
         validateOnMount: true,
-        validationSchema: schema,
+        validationSchema: schemaAddNode,
         initialValues: {
             vmId: stored?.vmId,
             name: stored?.name,

diff --git a/web/src-web/src/views/clusters-management/components/nodes/index.tsx b/web/src-web/src/views/clusters-management/components/nodes/index.tsx
@@ -16,7 +16,7 @@ const Nodes = () => {
         await clusterManagementStore.updateClusterKubeStatuses();
     });
 
-    useInterval(async ()=>{
+    useInterval(async () => {
         await clusterManagementStore.updateClusterNodeVmStatuses();
         await clusterManagementStore.updateClusterKubeStatuses();
         await clusterManagementStore.updateNodesIfThereIsAnyLock();
@@ -126,8 +126,11 @@ const Nodes = () => {
             <NodesTable clusterName={clusterManagementStore.cluster.clusterName}
                         nodes={clusterManagementStore.masterNodesWithStatus}
                         selectedNode={selectedNode}
-                        onSelectNode={setSelectedNode}
-            />
+                        onSelectNode={(id) => {
+                            if (!locked) {
+                                setSelectedNode(id);
+                            }
+                        }}/>
 
 
         </Panel>
@@ -145,7 +148,11 @@ const Nodes = () => {
             <NodesTable clusterName={clusterManagementStore.cluster.clusterName}
                         nodes={clusterManagementStore.workerNodesWithStatus}
                         selectedNode={selectedNode}
-                        onSelectNode={setSelectedNode}/>
+                        onSelectNode={(id) => {
+                            if (!locked) {
+                                setSelectedNode(id);
+                            }
+                        }}/>
         </Panel>
     </>;
 }

diff --git a/web/src-web/src/views/clusters-management/components/workloads/WorkloadsDialog.tsx b/web/src-web/src/views/clusters-management/components/workloads/WorkloadsDialog.tsx
@@ -15,13 +15,9 @@ import * as Yup from "yup";
 import {InputTextarea} from "primereact/inputtextarea";
 import {observer} from "mobx-react-lite";
 import {AxiosError} from "axios";
+import {schemaAddWorkload} from "@/views/cluster-creator/steps/workloads/CreatorWorkloadsDialog";
 
 
-const schema = Yup.object({
-    name: Yup.string().required().strict().trim(),
-    content: Yup.string().required()
-})
-
 type Props = {
     onClose: () => void;
     onSubmit: (id: string) => void;
@@ -51,7 +47,7 @@ const WorkloadsDialog = (props: Props) => {
         enableReinitialize: true,
         validateOnMount: true,
         initialValues: initialValues,
-        validationSchema: schema,
+        validationSchema: schemaAddWorkload,
         onSubmit: async (values) => {
             if (initialValues.id) {
                 await clusterManagementStore.updateK8sResources(values);
@@ -174,9 +170,11 @@ const WorkloadsDialog = (props: Props) => {
                 </div>
                 <div className="grow flex flex-col min-w-[300px] min-h-[300px]">
                     <div className="mr-1 required">Content:</div>
-                    <InputTextarea className="grow font-monospace"
+                    <InputTextarea name="content"
+                                   className="grow font-monospace"
                                    readOnly={formik.isSubmitting || anyOperationInProgress}
                                    value={formik.values.content}
+                                   onBlur={formik.handleBlur}
                                    onChange={(e) => {
                                        formik.setFieldValue("content", e.target.value)
                                    }}/>