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

10
frontend/src/app/components/checkbox/styles.module.css
View File

@@ -1,7 +1,7 @@
.switch {
display: flex;
width: 53px;
height: 33px;
width: 50px;
height: 30px;
align-items: center;
background-color: white;
cursor: pointer;
@@ -16,8 +16,8 @@
display: none;
}
.knob {
width: 25px;
height: 25px;
width: 22px;
height: 22px;
background-color: #6d6d6d;
border-radius: 50%;
display: flex;
@@ -32,7 +32,7 @@
}
.check:checked + .switch .knob {
transform: translateX(78%);
transform: translateX(90%);
background-color: white;
}

3
frontend/src/app/components/icons/check.jsx
View File

@@ -11,8 +11,9 @@ const CheckIcon = (props) => {
{...props}
>
<path
d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
d="M14.625 6.14583V16.9375L10 13.8542L5.375 16.9375V6.14583C5.375 5.32808 5.69985 4.54382 6.27809 3.96559C6.85632 3.38735 7.64058 3.0625 8.45833 3.0625H11.5417C12.3594 3.0625 13.1437 3.38735 13.7219 3.96559C14.3001 4.54382 14.625 5.32808 14.625 6.14583Z"
stroke="white"
strokeOpacity={1}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"

15
frontend/src/app/components/radio-button/RadioButton.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import styles from "./styles.module.css";
const RadioButton = (props) => {
return (
<div className={styles.container}>
<label className={styles.radio}>
<input type="radio" {...props} />
<span className={styles.custom}></span>
<span className={styles.labelText}>{props?.label}</span>
</label>
</div>
);
};
export default RadioButton;

44
frontend/src/app/components/radio-button/styles.module.css Normal file
View File

@@ -0,0 +1,44 @@
.radioButtonsContainer > div > div > div {
display: flex;
padding: 12px 4px;
align-items: center;
gap: 12px;
}
.radio {
display: flex;
align-items: center;
cursor: pointer;
gap: 8px;
}
.radio input {
display: none;
}
.radio .custom {
width: 20px;
height: 20px;
border: 2px solid #4b4f6d;
border-radius: 50%;
position: relative;
background-color: #fff;
}
.radio .custom::after {
content: "";
width: 10px;
height: 10px;
background: #5980f1;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.radio input:checked + .custom::after {
transform: translate(-50%, -50%) scale(1);
}
.radio input:not(:checked) + .custom + span,
.radio input:not(:checked) + .custom + * {
color: #85869b;
}

4
frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
View File

@@ -115,10 +115,10 @@
gap: 12px;
}
.autoScroll input[type="checkbox"] {
accent-color: #5980f1;
accent-color: #4271ff;
height: 16px;
width: 16px;
background: white;
background-color: transparent;
}
.autoScroll p {

416
frontend/src/app/projects/view/[servicesId]/page.jsx
View File

@@ -4,21 +4,44 @@ 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 TextField from "@/app/components/fields/textfield";
import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import DeleteIcon from "@/app/components/icons/delete";
import SelectField from "@/app/components/select/SelectField";
import ActionButton from "@/app/components/actionButton/ActionButton";
import LogsModal from "./LogsModal/logsModas";
import ProjectDetails from "./projectDetails";
import Settings from "./settings";
import useServicesForm from "@/app/hooks/useServicesForm";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [isProjectDetails, setIsProjectDetails] = useState(true);
const [triggerLogsModal, setTriggerLogsModal] = useState(false);
const [isEnableIngress, setIsEnableIngress] = useState(false);
const isMobile = useIsMobile();
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
disableScaling,
disableReadiness,
disableLiveness,
setDisableScaling,
setDisableReadiness,
setDisableLiveness,
setTriggerAlert,
minPods,
maxPods,
readinessPath,
readinessPort,
livenessPort,
livenessPath,
} = useServicesForm();
const sampleData = [
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
@@ -38,7 +61,7 @@ const AddServices = () => {
{triggerAddVolume && (
<AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
)}
{triggeAddConfigMap && (
{triggerAddConfigMap && (
<AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
)}
<div className={globalStyle.mainContainer}>
@@ -51,352 +74,57 @@ const AddServices = () => {
requiredButtons={["back", "title", "edit", "download"]}
setTriggerLogsModal={setTriggerLogsModal}
/>
<div className={styles.contentContainer}>
<div className={styles.fieldsContainerCreateNew}>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.fieldsCreateNew}>
<div className={styles.content}>
<div className={styles.heading}>
<div>
<div>
<p>Name</p>
<TextField placeHolder="Enter service name" />
</div>
<div>
<p>Version</p>
<TextField placeHolder="Service version" />
</div>
</div>
<div>
<div>
<p>
Image <span>(Optional)</span>
<p
className={`${isProjectDetails ? styles.active : null}`}
onClick={() => setIsProjectDetails(true)}
>
Project Details
</p>
<p
className={`${!isProjectDetails ? styles.active : null}`}
onClick={() => setIsProjectDetails(false)}
>
Settings
</p>
<TextField placeHolder="Enter image name" />
</div>
</div>
<div>
<div>
<p>Port</p>
<TextField placeHolder="Enter 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 className={styles.contentContainer}>
<ProjectDetails
className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
register={register}
handleSubmit={handleSubmit}
errors={errors}
onSubmit={onSubmit}
triggerAlert={triggerAlert}
disableScaling={disableScaling}
disableReadiness={disableReadiness}
disableLiveness={disableLiveness}
setDisableScaling={setDisableScaling}
setDisableReadiness={setDisableReadiness}
setDisableLiveness={setDisableLiveness}
setTriggerAlert={setTriggerAlert}
minPods={minPods}
maxPods={maxPods}
readinessPath={readinessPath}
readinessPort={readinessPort}
livenessPort={livenessPort}
livenessPath={livenessPath}
setIsEnableIngress={setIsEnableIngress}
isEnableIngress={isEnableIngress}
/>
</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" },
]}
<Settings
className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
setTriggerAddConfigMap={setTriggerAddConfigMap}
setTriggerAddVariable={setTriggerAddVariable}
setTriggerAddVolume={setTriggerAddVolume}
/>
</div>
</div>
</div>
</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" />
</div>
<div>
<p>CPU Limit (MB)</p>
<TextField placeHolder="250" />
</div>
</div>
<div>
<div>
<p>Memory Request (MB)</p>
<TextField placeHolder="250" />
</div>
<div>
<p>Memory Limit (MB)</p>
<TextField placeHolder="500" />
</div>
</div>
</div>
</div>
<div className={styles.additionalDetails}>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Auto Scaling</p>
<CustomCheckbox id="scalingCheckBox" />
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Minimum pods</p>
<TextField placeHolder="1" />
</div>
<div>
<p>Maximum pods</p>
<TextField placeHolder="1" />
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Readiness</p>
<CustomCheckbox id="readiNessCheckBox" />
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Readiness Path</p>
<TextField placeHolder="Enter Readiness path" />
</div>
<div>
<p>Readiness Port</p>
<TextField placeHolder="Enter Readiness port" />
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Liveness</p>
<CustomCheckbox id="liveNessCheckBox" />
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Liveness Path</p>
<TextField placeHolder="Enter liveness path" />
</div>
<div>
<p>Liveness Port</p>
<TextField placeHolder="Enter liveness port" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={variableStyles.variables}>
<div className={variableStyles.variablesHeader}>
<div>
<div className={variableStyles.searchContainer}>
<div className={variableStyles.searchInputGroup}>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<g clipPath="url(#clip0)">
<path
d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.7051 18.7061L14.0176 14.0186"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
<input type="text" placeholder="Search" />
</div>
</div>
<div className={variableStyles.variablesHeaderDropDown}>
<div
className={variableStyles.variableHeaderDropdownButton}
onClick={() =>
setTriggerVariableDropDown(!triggerVariableDropDown)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{triggerVariableDropDown && (
<div className={variableStyles.dropDownContainer}>
<div
onClick={() => {
setTriggerAddVariable(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Environment Variables</p>
</div>
<div
onClick={() => {
setTriggerAddVolume(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Volumes</p>
</div>
<div
onClick={() => {
setTriggerAddConfigMap(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Config Maps</p>
</div>
</div>
)}
</div>
</div>
</div>
<div className={variableStyles.variablesContentContainer}>
<div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Environment Variables</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Key</p>
<p>Value</p>
</div>
</div>
<div className={variableStyles.variableList}>
{/* <div className={variableStyles.emptyVariableList}>
<div>
<p>No Environment Variables added</p>
</div>
</div> */}
{sampleData.map((data, key) => {
return (
<div className={variableStyles.variable} key={key}>
<p>{data.key}</p>
<p>{data.value}</p>
<ActionButton icon={<DeleteIcon />} />
</div>
);
})}
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Volumes</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Name</p>
<p>Path</p>
<p>Size/Type</p>
<p>Access Mode</p>
<p>Storage Class</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No volume added</p>
</div>
</div>
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Config maps</p>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No config map added</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};

323
frontend/src/app/projects/view/[servicesId]/projectDetails.jsx Normal file
View 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;

171
frontend/src/app/projects/view/[servicesId]/settings.jsx Normal file
View File

@@ -0,0 +1,171 @@
"use client";
import React, { useState } from "react";
import variableStyles from "./variableStyles.module.css";
const Settings = ({
setTriggerAddVariable,
setTriggerAddVolume,
setTriggerAddConfigMap,
...props
}) => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
return (
<div {...props}>
<div className={variableStyles.variablesHeader}>
<div>
<div className={variableStyles.searchContainer}>
<div className={variableStyles.searchInputGroup}>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<g clipPath="url(#clip0)">
<path
d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.7051 18.7061L14.0176 14.0186"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
<input type="text" placeholder="Search" />
</div>
</div>
<div className={variableStyles.variablesHeaderDropDown}>
<div
className={variableStyles.variableHeaderDropdownButton}
onClick={() =>
setTriggerVariableDropDown(!triggerVariableDropDown)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{triggerVariableDropDown && (
<div className={variableStyles.dropDownContainer}>
<div
onClick={() => {
setTriggerAddVariable(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Environment Variables</p>
</div>
<div
onClick={() => {
setTriggerAddVolume(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Volumes</p>
</div>
<div
onClick={() => {
setTriggerAddConfigMap(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Config Maps</p>
</div>
</div>
)}
</div>
</div>
</div>
<div className={variableStyles.variablesContentContainer}>
<div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Environment Variables</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Key</p>
<p>Value</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No Environment Variables added</p>
</div>
</div>
{/* <div className={variableStyles.variable}>
<p>REQUEST_SERVICE_GRPC</p>
<p>request-service:50053</p>
<DeleteIcon />
</div> */}
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Volumes</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Name</p>
<p>Path</p>
<p>Size/Type</p>
<p>Access Mode</p>
<p>Storage Class</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No volume added</p>
</div>
</div>
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Config maps</p>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No config map added</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Settings;

155
frontend/src/app/projects/view/[servicesId]/styles.module.css
View File

@@ -1,24 +1,119 @@
.content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
min-height: 0;
align-self: stretch;
}
.contentContainer {
display: flex;
align-items: flex-start;
flex: 1 0 0;
height: calc(100vh - 240px);
flex: 1;
align-self: stretch;
}
.heading {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0 16px;
align-self: stretch;
background: #191a24;
}
.heading > div {
display: flex;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.heading p {
display: flex;
padding: 24px 4px 16px 4px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
color: #85869b;
font-family: Inter;
font-size: 18px;
font-weight: 400;
}
.heading .active {
border-bottom: 1px solid #959aff;
color: #959aff;
}
.fieldsContainerCreateNew {
display: flex;
padding-top: 36px;
flex-direction: column;
width: 550px;
align-items: flex-start;
gap: 36px;
background: #191a24;
height: calc(100vh - 175px);
height: calc(100vh - 170px);
min-height: 0;
flex: 1;
overflow-y: scroll;
scrollbar-width: none;
}
.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;
}
.projectDetails {
display: flex;
padding: 0 36px;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
@@ -48,7 +143,7 @@
}
.resource {
display: flex;
padding: 0 36px;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
@@ -65,7 +160,7 @@
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
gap: 8px;
align-self: stretch;
}
@@ -92,25 +187,6 @@
color: #85869b;
}
.fieldsCreateNew > div > div select,
.resourceFields > div > div select {
display: flex;
padding: 12px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
background-color: transparent;
color: white;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.repositoryForm {
display: flex;
padding: 12px;
@@ -217,3 +293,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%;
}
}

23
frontend/src/app/projects/view/[servicesId]/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 {
@@ -23,7 +22,7 @@
}
.searchContainer > div {
display: flex;
width: 310px;
width: 100%;
padding: 8px 12px;
align-items: center;
gap: 9px;
@@ -103,6 +102,13 @@
align-self: stretch;
text-wrap: nowrap;
width: 100%;
border-radius: 4px;
color: #acb0ff;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.dropDownContainer > div:hover {
background: #3c4159;
@@ -251,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);
}
}

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}

93
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,14 +25,12 @@ const ProjectDetails = ({
readinessPort,
livenessPort,
livenessPath,
setIsEnableIngress,
isEnableIngress,
...props
}) => {
return (
<form
className={styles.fieldsContainerCreateNew}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div>
<form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
@@ -47,7 +46,7 @@ const ProjectDetails = ({
</label>
</div>
</div>
<div>
<div className={styles.inputGroup}>
<div>
<p>Name</p>
<TextField
@@ -90,17 +89,70 @@ const ProjectDetails = ({
<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 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>
<p>Ingress</p>
<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={[
@@ -118,7 +170,7 @@ const ProjectDetails = ({
<p>Resource</p>
</div>
<div className={styles.resourceFields}>
<div>
<div className={styles.inputGroup}>
<div>
<p>CPU Request (MB)</p>
<TextField
@@ -136,7 +188,7 @@ const ProjectDetails = ({
/>
</div>
</div>
<div>
<div className={styles.inputGroup}>
<div>
<p>Memory Request (MB)</p>
<TextField
@@ -170,7 +222,7 @@ const ProjectDetails = ({
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div className={styles.inputGroup}>
<div>
<p>Minimum pods</p>
@@ -212,7 +264,7 @@ const ProjectDetails = ({
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div className={styles.inputGroup}>
<div>
<p>Readiness Path</p>
@@ -256,7 +308,7 @@ const ProjectDetails = ({
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div className={styles.inputGroup}>
<div>
<p>Liveness Path</p>
<TextField
@@ -287,7 +339,6 @@ const ProjectDetails = ({
</div>
</div>
</div>
</div>
</form>
);
};

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);
}
}

43
frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx
View File

@@ -4,7 +4,10 @@ import CloseIcon from "@/app/components/icons/close";
import TextField from "@/app/components/fields/textfield";
import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
import SelectField from "@/app/components/select/SelectField";
import RadioButton from "@/app/components/radio-button/RadioButton";
const AddConfigMapModal = (props) => {
const [typeOption, setTypeOption] = useState("raw");
return (
<div className={styles.container}>
<div className={styles.modal}>
@@ -33,21 +36,20 @@ const AddConfigMapModal = (props) => {
<div>
<p>Type</p>
<div>
{" "}
<div>
<label className={styles.radio}>
<input type="radio" name="typeOption" />
<span className={styles.custom}></span>
Raw
</label>
</div>
<div>
<label className={styles.radio}>
<input type="radio" name="typeOption" />
<span className={styles.custom}></span>
Credential
</label>
</div>
<RadioButton
name="typeOption"
value="raw"
checked={typeOption === "raw"}
onChange={(e) => setTypeOption(e.target.value)}
label="Raw"
/>
<RadioButton
name="typeOption"
value="credential"
checked={typeOption === "credential"}
onChange={(e) => setTypeOption(e.target.value)}
label="Credential"
/>
</div>
</div>
</div>
@@ -57,11 +59,22 @@ const AddConfigMapModal = (props) => {
<p>Value</p>
</div>
{typeOption === "raw" ? (
<textarea
name=""
id=""
placeholder="Enter a description"
></textarea>
) : (
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
)}
</div>
</div>
</div>

37
frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
View File

@@ -7,13 +7,14 @@
z-index: 10;
display: flex;
align-items: center;
padding: 5px;
justify-content: center;
background-color: #00000037;
}
.modal {
display: flex;
width: 593px;
max-width: 593px;
width: 100%;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
@@ -174,28 +175,7 @@
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput 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;
outline: none;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea:focus {
border-radius: 6px;
border: 1px solid #959aff;
@@ -286,3 +266,12 @@
gap: 16px;
align-self: stretch;
}
@media (max-width: 768px) {
.horizontalInput > div {
flex-direction: column;
gap: 10px;
}
.horizontalInput > div > div {
width: 100%;
}
}

4
frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
View File

@@ -102,11 +102,11 @@ const AddVariableModal = (props) => {
<div className={styles.horizontalInput}>
<div>
<div>
<p>Protocol</p>
<p>Username</p>
<TextField placeHolder="MongoDB" />
</div>
<div>
<p>Service</p>
<p>Password</p>
<TextField placeHolder="Select a service" />
</div>
</div>

17
frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
View File

@@ -4,6 +4,7 @@
position: absolute;
top: 0;
left: 0;
padding: 5px;
z-index: 10;
display: flex;
align-items: center;
@@ -12,8 +13,8 @@
}
.modal {
display: flex;
width: 593px;
height: 566px;
max-width: 593px;
width: 100%;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
@@ -189,14 +190,11 @@
}
.authenticationContainer {
display: flex;
padding: 12px 12px 32px 12px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-radius: 6px;
background: #272b3a;
}
.authenticationContainer > p {
color: #85869b;
@@ -213,3 +211,12 @@
gap: 16px;
align-self: stretch;
}
@media (max-width: 768px) {
.horizontalInput > div {
flex-direction: column;
gap: 10px;
}
.horizontalInput > div > div {
width: 100%;
}
}

13
frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
View File

@@ -12,8 +12,8 @@
}
.modal {
display: flex;
width: 593px;
max-width: 593px;
width: 100%;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
@@ -200,3 +200,12 @@
gap: 16px;
align-self: stretch;
}
@media (max-width: 768px) {
.horizontalInput > div {
flex-direction: column;
gap: 10px;
}
.horizontalInput > div > div {
width: 100%;
}
}