Add feature
This commit is contained in:
Laux Dev
323
frontend/src/app/projects/view/[servicesId]/projectDetails.jsx
Normal file
323
frontend/src/app/projects/view/[servicesId]/projectDetails.jsx
Normal file
@@ -0,0 +1,323 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import styles from "./styles.module.css";
|
||||
import TextField from "@/app/components/fields/textfield";
|
||||
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
|
||||
import SelectField from "@/app/components/select/SelectField";
|
||||
import RadioButton from "@/app/components/radio-button/RadioButton";
|
||||
|
||||
const ProjectDetails = ({
|
||||
register,
|
||||
handleSubmit,
|
||||
errors,
|
||||
onSubmit,
|
||||
triggerAlert,
|
||||
disableScaling,
|
||||
disableReadiness,
|
||||
disableLiveness,
|
||||
setDisableScaling,
|
||||
setDisableReadiness,
|
||||
setDisableLiveness,
|
||||
setTriggerAlert,
|
||||
minPods,
|
||||
maxPods,
|
||||
readinessPath,
|
||||
readinessPort,
|
||||
livenessPort,
|
||||
livenessPath,
|
||||
setIsEnableIngress,
|
||||
isEnableIngress,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className={styles.projectDetails}>
|
||||
<div className={styles.projectDetailsHeader}>
|
||||
<p>Project Details</p>
|
||||
</div>
|
||||
<div className={styles.fieldsCreateNew}>
|
||||
<div className={styles.inputGroup}>
|
||||
<div>
|
||||
<p>Name</p>
|
||||
<TextField
|
||||
placeHolder="Enter service name"
|
||||
{...register("serviceName", { required: true })}
|
||||
hasError={!!errors.serviceName}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Version</p>
|
||||
<TextField
|
||||
placeHolder="Service version"
|
||||
{...register("serviceVersion", { required: true })}
|
||||
hasError={!!errors.serviceVersion}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>
|
||||
Image <span>(Optional)</span>
|
||||
</p>
|
||||
<TextField
|
||||
placeHolder="Enter image name"
|
||||
{...register("imageName", { required: false })}
|
||||
hasError={!!errors.imageName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>Port</p>
|
||||
<TextField
|
||||
placeHolder="Enter port"
|
||||
{...register("port", { required: true })}
|
||||
hasError={!!errors.port}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>Ingress</p>
|
||||
<div className={styles.radioButtonContainer}>
|
||||
<div>
|
||||
<RadioButton
|
||||
label="Enable"
|
||||
name="isEnable"
|
||||
value="true"
|
||||
checked={isEnableIngress === true}
|
||||
onChange={(e) =>
|
||||
setIsEnableIngress(e.target.value === "true")
|
||||
}
|
||||
/>
|
||||
<RadioButton
|
||||
label="Disable"
|
||||
name="isEnable"
|
||||
value="false"
|
||||
checked={isEnableIngress === false}
|
||||
onChange={(e) =>
|
||||
setIsEnableIngress(e.target.value === "true")
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isEnableIngress && (
|
||||
<>
|
||||
<div>
|
||||
<div>
|
||||
<p>Sub Domain</p>
|
||||
<TextField
|
||||
placeHolder="Subdomain-"
|
||||
{...register("subDomain", { required: isEnableIngress })}
|
||||
hasError={!!errors.imageName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Sub Domain</p>
|
||||
<TextField
|
||||
placeHolder="Subdomain-"
|
||||
{...register("subDomain", { required: isEnableIngress })}
|
||||
hasError={!!errors.imageName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>
|
||||
Allowed Ips <span>(Optional)</span>
|
||||
</p>
|
||||
<textarea
|
||||
className={styles.textarea}
|
||||
name=""
|
||||
id=""
|
||||
placeholder="Enter allowed IP addresses (comma-separated, e.g., 192.168.1.1, 10.0.0.0/24)"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.resource}>
|
||||
<div className={styles.projectDetailsHeader}>
|
||||
<p>Resource</p>
|
||||
</div>
|
||||
<div className={styles.resourceFields}>
|
||||
<div className={styles.inputGroup}>
|
||||
<div>
|
||||
<p>CPU Request (MB)</p>
|
||||
<TextField
|
||||
placeHolder="250"
|
||||
{...register("cpuRequest", { required: true })}
|
||||
hasError={!!errors.cpuRequest}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>CPU Limit (MB)</p>
|
||||
<TextField
|
||||
placeHolder="250"
|
||||
{...register("cpuLimit", { required: true })}
|
||||
hasError={!!errors.cpuLimit}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.inputGroup}>
|
||||
<div>
|
||||
<p>Memory Request (MB)</p>
|
||||
<TextField
|
||||
placeHolder="250"
|
||||
{...register("memoryRequest", { required: true })}
|
||||
hasError={!!errors.memoryRequest}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Memory Limit (MB)</p>
|
||||
<TextField
|
||||
placeHolder="500"
|
||||
{...register("memoryLimit", { required: true })}
|
||||
hasError={!!errors.memoryLimit}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.additionalDetails}>
|
||||
<div>
|
||||
<div>
|
||||
<div className={styles.additionalDetailsHeader}>
|
||||
<div>
|
||||
<p>Auto Scaling</p>
|
||||
<CustomCheckbox
|
||||
id="scalingCheckBox"
|
||||
setChecked={() => setDisableScaling(!disableScaling)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.additionalDetailsFields}>
|
||||
<div>
|
||||
<div className={styles.inputGroup}>
|
||||
<div>
|
||||
<p>Minimum pods</p>
|
||||
|
||||
<TextField
|
||||
placeHolder="1"
|
||||
disabled={disableScaling}
|
||||
{...register("minPods", {
|
||||
required: maxPods.trim() !== "" && !disableScaling,
|
||||
})}
|
||||
hasError={!!errors.minPods}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Maximum pods</p>
|
||||
<TextField
|
||||
placeHolder="1"
|
||||
disabled={disableScaling}
|
||||
{...register("maxPods", {
|
||||
required: minPods.trim() !== "" && !disableScaling,
|
||||
})}
|
||||
hasError={!!errors.maxPods}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div className={styles.additionalDetailsHeader}>
|
||||
<div>
|
||||
<p>Readiness</p>
|
||||
<CustomCheckbox
|
||||
id="readiNessCheckBox"
|
||||
setChecked={() => setDisableReadiness(!disableReadiness)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.additionalDetailsFields}>
|
||||
<div>
|
||||
<div className={styles.inputGroup}>
|
||||
<div>
|
||||
<p>Readiness Path</p>
|
||||
|
||||
<TextField
|
||||
placeHolder="Enter Readiness path"
|
||||
disabled={disableReadiness}
|
||||
{...register("readinessPath", {
|
||||
required:
|
||||
readinessPort.trim() !== "" && !disableReadiness,
|
||||
})}
|
||||
hasError={!!errors.readinessPath}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Readiness Port</p>
|
||||
<TextField
|
||||
placeHolder="Enter Readiness port"
|
||||
disabled={disableReadiness}
|
||||
{...register("readinessPort", {
|
||||
required:
|
||||
readinessPath.trim() !== "" && !disableReadiness,
|
||||
})}
|
||||
hasError={!!errors.readinessPort}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div className={styles.additionalDetailsHeader}>
|
||||
<div>
|
||||
<p>Liveness</p>
|
||||
<CustomCheckbox
|
||||
id="liveNessCheckBox"
|
||||
setChecked={() => setDisableLiveness(!disableLiveness)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.additionalDetailsFields}>
|
||||
<div>
|
||||
<div className={styles.inputGroup}>
|
||||
<div>
|
||||
<p>Liveness Path</p>
|
||||
<TextField
|
||||
placeHolder="Enter liveness path"
|
||||
disabled={disableLiveness}
|
||||
{...register("livenessPath", {
|
||||
required:
|
||||
livenessPort.trim() !== "" && !disableLiveness,
|
||||
})}
|
||||
hasError={!!errors.livenessPath}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Liveness Port</p>
|
||||
<TextField
|
||||
placeHolder="Enter liveness port"
|
||||
disabled={disableLiveness}
|
||||
{...register("livenessPort", {
|
||||
required:
|
||||
livenessPath.trim() !== "" && !disableLiveness,
|
||||
})}
|
||||
hasError={!!errors.livenessPort}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectDetails;
|
||||
Reference in New Issue
Block a user