add more validations
This commit is contained in:
Laux Dev
@@ -11,23 +11,44 @@ import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal"
|
||||
import DeleteIcon from "@/app/components/icons/delete";
|
||||
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
|
||||
import SelectField from "@/app/components/select/SelectField";
|
||||
import useServicesForm from "@/app/hooks/useServicesForm";
|
||||
import Alert from "@/app/components/alerts/Alert";
|
||||
const AddServices = () => {
|
||||
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
|
||||
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
|
||||
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
|
||||
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
|
||||
const [disableScaling, setDisableScaling] = useState(true);
|
||||
const [disableReadiness, setDisableReadiness] = useState(true);
|
||||
const [disableLiveness, setDisableLiveness] = useState(true);
|
||||
const [minPods, setMinPods] = useState("");
|
||||
const [maxPods, setMaxPods] = useState("");
|
||||
const [readinessPath, setReadinessPath] = useState("");
|
||||
const [readinessPort, setReadinessPort] = useState("");
|
||||
const [livenessPath, setLivenessPath] = useState("");
|
||||
const [livenessPort, setLivenessPort] = useState("");
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
errors,
|
||||
onSubmit,
|
||||
triggerAlert,
|
||||
disableScaling,
|
||||
disableReadiness,
|
||||
disableLiveness,
|
||||
setDisableScaling,
|
||||
setDisableReadiness,
|
||||
setDisableLiveness,
|
||||
setTriggerAlert,
|
||||
minPods,
|
||||
maxPods,
|
||||
readinessPath,
|
||||
readinessPort,
|
||||
livenessPort,
|
||||
livenessPath,
|
||||
} = useServicesForm();
|
||||
|
||||
return (
|
||||
<div className={globalStyle.section}>
|
||||
{triggerAlert && (
|
||||
<Alert
|
||||
setTriggerAlert={setTriggerAlert}
|
||||
onClick={() => setEditState(true)}
|
||||
title="Add User"
|
||||
/>
|
||||
)}
|
||||
{triggerAddVariable && (
|
||||
<AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
|
||||
)}
|
||||
@@ -47,7 +68,11 @@ const AddServices = () => {
|
||||
requiredButtons={["title", "save"]}
|
||||
/>
|
||||
<div className={styles.contentContainer}>
|
||||
<form className={styles.fieldsContainerCreateNew} id="form">
|
||||
<form
|
||||
className={styles.fieldsContainerCreateNew}
|
||||
id="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className={styles.projectDetails}>
|
||||
<div className={styles.projectDetailsHeader}>
|
||||
<p>Project Details</p>
|
||||
@@ -66,11 +91,19 @@ const AddServices = () => {
|
||||
<div>
|
||||
<div>
|
||||
<p>Name</p>
|
||||
<TextField placeHolder="Enter service name" required />
|
||||
<TextField
|
||||
placeHolder="Enter service name"
|
||||
{...register("serviceName", { required: true })}
|
||||
hasError={!!errors.serviceName}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Version</p>
|
||||
<TextField placeHolder="Service version" required />
|
||||
<TextField
|
||||
placeHolder="Service version"
|
||||
{...register("serviceVersion", { required: true })}
|
||||
hasError={!!errors.serviceVersion}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -78,13 +111,21 @@ const AddServices = () => {
|
||||
<p>
|
||||
Image <span>(Optional)</span>
|
||||
</p>
|
||||
<TextField placeHolder="Enter image name" required />
|
||||
<TextField
|
||||
placeHolder="Enter image name"
|
||||
{...register("imageName", { required: false })}
|
||||
hasError={!!errors.imageName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>Port</p>
|
||||
<TextField placeHolder="Enter port" required />
|
||||
<TextField
|
||||
placeHolder="Enter port"
|
||||
{...register("port", { required: true })}
|
||||
hasError={!!errors.port}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -121,21 +162,37 @@ const AddServices = () => {
|
||||
<div>
|
||||
<div>
|
||||
<p>CPU Request (MB)</p>
|
||||
<TextField placeHolder="250" required />
|
||||
<TextField
|
||||
placeHolder="250"
|
||||
{...register("cpuRequest", { required: true })}
|
||||
hasError={!!errors.cpuRequest}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>CPU Limit (MB)</p>
|
||||
<TextField placeHolder="250" required />
|
||||
<TextField
|
||||
placeHolder="250"
|
||||
{...register("cpuLimit", { required: true })}
|
||||
hasError={!!errors.cpuLimit}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>Memory Request (MB)</p>
|
||||
<TextField placeHolder="250" required />
|
||||
<TextField
|
||||
placeHolder="250"
|
||||
{...register("memoryRequest", { required: true })}
|
||||
hasError={!!errors.memoryRequest}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Memory Limit (MB)</p>
|
||||
<TextField placeHolder="500" required />
|
||||
<TextField
|
||||
placeHolder="500"
|
||||
{...register("memoryLimit", { required: true })}
|
||||
hasError={!!errors.memoryLimit}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,11 +205,7 @@ const AddServices = () => {
|
||||
<p>Auto Scaling</p>
|
||||
<CustomCheckbox
|
||||
id="scalingCheckBox"
|
||||
setChecked={() => {
|
||||
setDisableScaling(!disableScaling);
|
||||
setMinPods("");
|
||||
setMaxPods("");
|
||||
}}
|
||||
setChecked={() => setDisableScaling(!disableScaling)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,19 +218,21 @@ const AddServices = () => {
|
||||
<TextField
|
||||
placeHolder="1"
|
||||
disabled={disableScaling}
|
||||
required={maxPods.trim() !== ""}
|
||||
onChange={(e) => setMinPods(e.target.value)}
|
||||
value={minPods}
|
||||
{...register("minPods", {
|
||||
required: maxPods.trim() === "" ? false : true,
|
||||
})}
|
||||
hasError={!!errors.minPods}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Maximum pods</p>
|
||||
<TextField
|
||||
placeHolder="1"
|
||||
value={maxPods}
|
||||
required={minPods.trim() !== ""}
|
||||
onChange={(e) => setMaxPods(e.target.value)}
|
||||
disabled={disableScaling}
|
||||
{...register("maxPods", {
|
||||
required: minPods.trim() === "" ? false : true,
|
||||
})}
|
||||
hasError={!!errors.maxPods}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -192,11 +247,9 @@ const AddServices = () => {
|
||||
<p>Readiness</p>
|
||||
<CustomCheckbox
|
||||
id="readiNessCheckBox"
|
||||
setChecked={() => {
|
||||
setDisableReadiness(!disableReadiness);
|
||||
setReadinessPath("");
|
||||
setReadinessPort("");
|
||||
}}
|
||||
setChecked={() =>
|
||||
setDisableReadiness(!disableReadiness)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -209,9 +262,11 @@ const AddServices = () => {
|
||||
<TextField
|
||||
placeHolder="Enter Readiness path"
|
||||
disabled={disableReadiness}
|
||||
value={readinessPath}
|
||||
required={readinessPort.trim() !== ""}
|
||||
onChange={(e) => setReadinessPath(e.target.value)}
|
||||
{...register("readinessPath", {
|
||||
required:
|
||||
readinessPort.trim() === "" ? false : true,
|
||||
})}
|
||||
hasError={!!errors.readinessPath}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -219,9 +274,11 @@ const AddServices = () => {
|
||||
<TextField
|
||||
placeHolder="Enter Readiness port"
|
||||
disabled={disableReadiness}
|
||||
value={readinessPort}
|
||||
required={readinessPath.trim() !== ""}
|
||||
onChange={(e) => setReadinessPort(e.target.value)}
|
||||
{...register("readinessPort", {
|
||||
required:
|
||||
readinessPath.trim() === "" ? false : true,
|
||||
})}
|
||||
hasError={!!errors.readinessPort}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -236,12 +293,9 @@ const AddServices = () => {
|
||||
<p>Liveness</p>
|
||||
<CustomCheckbox
|
||||
id="liveNessCheckBox"
|
||||
setChecked={() => {
|
||||
console.log("alsdjhfkjas");
|
||||
setDisableLiveness(!disableLiveness);
|
||||
setLivenessPath("");
|
||||
setLivenessPort("");
|
||||
}}
|
||||
setChecked={() =>
|
||||
setDisableLiveness(!disableLiveness)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -253,9 +307,11 @@ const AddServices = () => {
|
||||
<TextField
|
||||
placeHolder="Enter liveness path"
|
||||
disabled={disableLiveness}
|
||||
value={livenessPath}
|
||||
required={livenessPort.trim() !== ""}
|
||||
onChange={(e) => setLivenessPath(e.target.value)}
|
||||
{...register("livenessPath", {
|
||||
required:
|
||||
livenessPort.trim() === "" ? false : true,
|
||||
})}
|
||||
hasError={!!errors.livenessPath}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -263,9 +319,11 @@ const AddServices = () => {
|
||||
<TextField
|
||||
placeHolder="Enter liveness port"
|
||||
disabled={disableLiveness}
|
||||
value={livenessPort}
|
||||
required={livenessPath.trim() !== ""}
|
||||
onChange={(e) => setLivenessPort(e.target.value)}
|
||||
{...register("livenessPort", {
|
||||
required:
|
||||
livenessPath.trim() === "" ? false : true,
|
||||
})}
|
||||
hasError={!!errors.livenessPort}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user