Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add feature

Browse Source
This commit is contained in:
Laux Dev
2026-03-18 16:18:55 +08:00
parent d7f65cb1a7
commit 6fd78aa92f
20 changed files with 1268 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/app/projects/view/add-from-scratch/page.jsx
View File

@@ -3,6 +3,7 @@ import React, { useState } from "react";
import globalStyle from "@/app/globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css";
import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
@@ -10,10 +11,14 @@ import useServicesForm from "@/app/hooks/useServicesForm";
import Alert from "@/app/components/alerts/Alert";
import ProjectDetails from "./projectDetails";
import Settings from "./settings";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddServices = () => {
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [isProjectDetails, setIsProjectDetails] = useState(true);
const [isEnableIngress, setIsEnableIngress] = useState(false);
const isMobile = useIsMobile();
const {
register,
@@ -66,12 +71,23 @@ const AddServices = () => {
<div className={styles.content}>
<div className={styles.heading}>
<div>
<p>Project Details</p>
<p>Settings</p>
<p
className={`${isProjectDetails ? styles.active : null}`}
onClick={() => setIsProjectDetails(true)}
>
Project Details
</p>
<p
className={`${!isProjectDetails ? styles.active : null}`}
onClick={() => setIsProjectDetails(false)}
>
Settings
</p>
</div>
</div>
<div className={styles.contentContainer}>
<ProjectDetails
className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
register={register}
handleSubmit={handleSubmit}
errors={errors}
@@ -90,8 +106,11 @@ const AddServices = () => {
readinessPort={readinessPort}
livenessPort={livenessPort}
livenessPath={livenessPath}
setIsEnableIngress={setIsEnableIngress}
isEnableIngress={isEnableIngress}
/>
<Settings
className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
setTriggerAddConfigMap={setTriggerAddConfigMap}
setTriggerAddVariable={setTriggerAddVariable}
setTriggerAddVolume={setTriggerAddVolume}

511
frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx
View File

@@ -4,6 +4,7 @@ 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,
@@ -24,263 +25,313 @@ const ProjectDetails = ({
readinessPort,
livenessPort,
livenessPath,
setIsEnableIngress,
isEnableIngress,
...props
}) => {
return (
<form
className={styles.fieldsContainerCreateNew}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.fieldsCreateNew}>
<div>
<div>
<p>
Repository <span>(Optional)</span>
</p>
<label className={styles.repositoryForm} htmlFor="#repo">
+ Link Repository
</label>
</div>
</div>
<div>
<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>
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
</div>
<div>
<p>Ingress</p>
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
</div>
</div>
</div>
<form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.resource}>
<div className={styles.projectDetailsHeader}>
<p>Resource</p>
</div>
<div className={styles.resourceFields}>
<div>
<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>
<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 className={styles.fieldsCreateNew}>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<p>
Repository <span>(Optional)</span>
</p>
<label className={styles.repositoryForm} htmlFor="#repo">
+ Link Repository
</label>
</div>
</div>
<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>
<p>Auto Scaling</p>
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => setDisableScaling(!disableScaling)}
<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 className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Minimum pods</p>
</div>
</div>
<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>
{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>
<p>Type</p>
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
</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>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Readiness</p>
<CustomCheckbox
id="readiNessCheckBox"
setChecked={() => setDisableReadiness(!disableReadiness)}
/>
</div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Readiness</p>
<CustomCheckbox
id="readiNessCheckBox"
setChecked={() => setDisableReadiness(!disableReadiness)}
/>
</div>
<div className={styles.additionalDetailsFields}>
<div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div className={styles.inputGroup}>
<div>
<div>
<p>Readiness Path</p>
<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>
<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>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Liveness</p>
<CustomCheckbox
id="liveNessCheckBox"
setChecked={() => setDisableLiveness(!disableLiveness)}
/>
</div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Liveness</p>
<CustomCheckbox
id="liveNessCheckBox"
setChecked={() => setDisableLiveness(!disableLiveness)}
/>
</div>
<div className={styles.additionalDetailsFields}>
<div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div className={styles.inputGroup}>
<div>
<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>
<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>

3
frontend/src/app/projects/view/add-from-scratch/settings.jsx
View File

@@ -5,11 +5,12 @@ const Settings = ({
setTriggerAddVariable,
setTriggerAddVolume,
setTriggerAddConfigMap,
...props
}) => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
return (
<div className={variableStyles.variables}>
<div {...props}>
<div className={variableStyles.variablesHeader}>
<div>
<div className={variableStyles.searchContainer}>

105
frontend/src/app/projects/view/add-from-scratch/styles.module.css
View File

@@ -1,23 +1,24 @@
.content {
display: flex;
padding: 0 16px;
flex-direction: column;
align-items: flex-start;
height: calc(100vh - 170px);
/* ✅ fills remaining space */
gap: 32px;
min-height: 0;
align-self: stretch;
}
.contentContainer {
display: flex;
align-items: flex-start;
height: calc(100vh - 240px);
flex: 1;
background-color: red;
align-self: stretch;
}
.heading {
display: flex;
display: none;
flex-direction: column;
align-items: flex-start;
gap: 16px;
@@ -41,10 +42,12 @@
color: #85869b;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.18px;
}
.heading .active {
border-bottom: 1px solid #959aff;
color: #959aff;
}
.fieldsContainerCreateNew {
display: flex;
@@ -53,9 +56,9 @@
align-items: flex-start;
gap: 36px;
background: #191a24;
height: 100%;
height: calc(100vh - 170px);
min-height: 0;
background-color: red;
flex: 1;
overflow-y: scroll;
scrollbar-width: none;
}
@@ -90,9 +93,58 @@
gap: 16px;
align-self: stretch;
}
.radioButtonContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.radioButtonContainer > div {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 20px 0;
}
.textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-family: inter;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
outline: none;
}
.textarea:focus {
border-radius: 6px;
border: 1px solid #959aff;
background: rgba(75, 79, 109, 0.25);
}
.textarea:focus::placeholder {
color: #4b4f6d;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.resource {
display: flex;
padding: 0 36px;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
@@ -126,7 +178,7 @@
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
gap: 16px;
flex: 1 0 0;
}
.fieldsCreateNew > div > div p,
@@ -249,3 +301,32 @@
line-height: normal;
letter-spacing: 0.16px;
}
.noDisplay {
display: none;
}
.hasDisplay {
display: flex;
}
@media (max-width: 768px) {
.heading {
display: flex;
}
.fieldsContainerCreateNew {
height: calc(100vh - 262px);
}
.content {
padding: 0;
}
.fieldsCreateNew .inputGroup,
.additionalDetailsFields > div .inputGroup,
.resourceFields .inputGroup {
display: flex;
flex-direction: column;
gap: 16px;
}
.fieldsCreateNew .inputGroup div,
.additionalDetailsFields > div .inputGroup div,
.resourceFields .inputGroup div {
width: 100%;
}
}

14
frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
View File

@@ -2,9 +2,8 @@
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
flex: 1;
align-self: stretch;
background: #161720;
}
.variablesHeader {
@@ -258,3 +257,14 @@
font-weight: 500;
line-height: normal;
}
.noDisplay {
display: none;
}
.hasDisplay {
display: flex;
}
@media (max-width: 768px) {
.variablesContentContainer > div {
height: calc(100vh - 342px);
}
}