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

fixed

Browse Source
This commit is contained in:
Laux Dev
2026-03-17 20:13:43 +08:00
parent a220230d0b
commit d7f65cb1a7
12 changed files with 786 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/topHeader/TopHeader.jsx
View File

@@ -171,7 +171,7 @@ const TopHeader = (props) => {
</div>
{triggerDropDownMenu && (
<div className={styles.dropDown}>
<div>
<div onClick={() => props?.setTriggerLogsModal?.(true)}>
<div>
<ViewLogsIcon />
<p>View Logs</p>

1
frontend/src/app/globals.css
View File

@@ -16,6 +16,7 @@ html,
body {
max-width: 100vw;
overflow-x: hidden;
font-size: 16px;
}
body {

4
frontend/src/app/projects/view/AddServicesModal/styles.module.css
View File

@@ -8,11 +8,13 @@
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
background-color: #00000037;
}
.modal {
display: inline-flex;
padding: 24px 24px 32px 24px;
flex-direction: column;
align-items: flex-start;
gap: 48px;
@@ -70,7 +72,7 @@
}
.content {
display: flex;
width: 545px;
flex-direction: column;
align-items: flex-start;
gap: 16px;

74
frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx Normal file
View File

@@ -0,0 +1,74 @@
import CloseIcon from "@/app/components/icons/close";
import React from "react";
import styles from "./styles.module.css";
const LogsModal = (props) => {
return (
<div className={styles.modalContainer}>
<div className={styles.container}>
<div className={styles.header}>
<div className={styles.statusContainer}>
<div>
<p>Server Logs: gateway-api</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={6}
height={6}
viewBox="0 0 6 6"
fill="none"
>
<circle
cx={3}
cy={3}
r={3}
fill="#98FA8D"
style={{
fill: "#98FA8D",
fillColor: "color(display-p3 0.5952 0.9819 0.5537)",
fillOpacity: 1,
}}
/>
</svg>
<p>Connected</p>
</div>
</div>
</div>
<CloseIcon
className={styles.close}
onClick={() => props?.setTriggerLogsModal?.(false)}
/>
</div>
<div className={styles.logContentContainer}></div>
<div className={styles.footer}>
<div>
<div className={styles.autoScroll}>
<input type="checkbox" />
<p>Auto Scroll</p>
</div>
<div className={styles.linesCount}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={18}
height={18}
viewBox="0 0 18 18"
fill="none"
>
<path
d="M5.25 6L2.25 9L5.25 12M12.75 6L15.75 9L12.75 12M10.5 3L7.5 15"
stroke="white"
style={{ stroke: "white", strokeOpacity: 1 }}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>124 Lines</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default LogsModal;

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

@@ -0,0 +1,152 @@
.modalContainer {
width: 100vw;
height: 100vh;
position: absolute;
z-index: 50;
left: 0;
top: 0;
display: flex;
align-items: center;
padding: 10px;
justify-content: center;
background-color: #0000004d;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: 1200px;
border-radius: 6px;
background: #21232f;
height: 100%;
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.header {
display: flex;
padding: 12px 12px 12px 16px;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.close {
cursor: pointer;
}
.statusContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.statusContainer > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.statusContainer > div > p {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.statusContainer > div > div {
display: flex;
padding: 1px 6px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 100px;
background: rgba(66, 180, 78, 0.1);
}
.statusContainer > div > div > p {
color: #72fd7f;
text-align: center;
font-feature-settings:
"liga" off,
"clig" off;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 183.333% */
}
.logContentContainer {
width: 100%;
background-color: rebeccapurple;
flex: 1;
overflow-y: auto;
}
.footer {
display: flex;
padding: 12px 16px;
align-items: center;
gap: 48px;
align-self: stretch;
}
.footer > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex: 1 0 0;
}
.autoScroll {
display: flex;
align-items: center;
gap: 12px;
}
.autoScroll input[type="checkbox"] {
accent-color: #5980f1;
height: 16px;
width: 16px;
background: white;
}
.autoScroll p {
color: #fff;
/* Base/Medium */
font-family: Inter;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
letter-spacing: 0.08px;
}
.linesCount {
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 6px;
background: rgba(0, 101, 244, 0.1);
}
.linesCount p {
color: #fff;
font-family: Inter;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.07px;
}

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

@@ -12,11 +12,13 @@ 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";
const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [triggerLogsModal, setTriggerLogsModal] = useState(false);
const sampleData = [
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
@@ -27,6 +29,9 @@ const AddServices = () => {
];
return (
<div className={globalStyle.section}>
{triggerLogsModal && (
<LogsModal setTriggerLogsModal={setTriggerLogsModal} />
)}
{triggerAddVariable && (
<AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
)}
@@ -44,6 +49,7 @@ const AddServices = () => {
state="view"
topbarTitle="View Services"
requiredButtons={["back", "title", "edit", "download"]}
setTriggerLogsModal={setTriggerLogsModal}
/>
<div className={styles.contentContainer}>
<div className={styles.fieldsContainerCreateNew}>

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

@@ -3,18 +3,14 @@ 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 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 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";
import ProjectDetails from "./projectDetails";
import Settings from "./settings";
const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
@@ -67,457 +63,41 @@ const AddServices = () => {
topbarTitle="Create New Services"
requiredButtons={["title", "save"]}
/>
<div className={styles.contentContainer}>
<form
className={styles.fieldsContainerCreateNew}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<div className={styles.content}>
<div className={styles.heading}>
<div>
<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>
<p>Settings</p>
</div>
</div>
<div>
<div>
<p>Name</p>
<TextField
placeHolder="Enter service name"
{...register("serviceName", { required: true })}
hasError={!!errors.serviceName}
<div className={styles.contentContainer}>
<ProjectDetails
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}
/>
</div>
<div>
<p>Version</p>
<TextField
placeHolder="Service version"
{...register("serviceVersion", { required: true })}
hasError={!!errors.serviceVersion}
<Settings
setTriggerAddConfigMap={setTriggerAddConfigMap}
setTriggerAddVariable={setTriggerAddVariable}
setTriggerAddVolume={setTriggerAddVolume}
/>
</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>
</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>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Auto Scaling</p>
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => setDisableScaling(!disableScaling)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<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>
<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>
<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>
<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>
{/* <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>
</div>
</div>
</div>
</div>

295
frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx Normal file
View File

@@ -0,0 +1,295 @@
"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";
const ProjectDetails = ({
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
disableScaling,
disableReadiness,
disableLiveness,
setDisableScaling,
setDisableReadiness,
setDisableLiveness,
setTriggerAlert,
minPods,
maxPods,
readinessPath,
readinessPort,
livenessPort,
livenessPath,
}) => {
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>
</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>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Auto Scaling</p>
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => setDisableScaling(!disableScaling)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<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>
<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>
<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>
</div>
</form>
);
};
export default ProjectDetails;

170
frontend/src/app/projects/view/add-from-scratch/settings.jsx Normal file
View File

@@ -0,0 +1,170 @@
"use client";
import React, { useState } from "react";
import variableStyles from "./variableStyles.module.css";
const Settings = ({
setTriggerAddVariable,
setTriggerAddVolume,
setTriggerAddConfigMap,
}) => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
return (
<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>
{/* <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;

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

@@ -1,24 +1,68 @@
.content {
display: flex;
padding: 0 16px;
flex-direction: column;
align-items: flex-start;
height: calc(100vh - 170px);
/* ✅ fills remaining space */
min-height: 0;
align-self: stretch;
}
.contentContainer {
display: flex;
align-items: flex-start;
flex: 1 0 0;
flex: 1;
background-color: red;
align-self: stretch;
}
.heading {
display: flex;
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-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.18px;
}
.fieldsContainerCreateNew {
display: flex;
padding-top: 36px;
flex-direction: column;
width: 550px;
align-items: flex-start;
gap: 36px;
background: #191a24;
height: calc(100vh - 175px);
height: 100%;
min-height: 0;
background-color: red;
overflow-y: scroll;
scrollbar-width: none;
}
.projectDetails {
display: flex;
padding: 0 36px;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
gap: 10px;

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

@@ -23,7 +23,7 @@
}
.searchContainer > div {
display: flex;
width: 310px;
width: 100%;
padding: 8px 12px;
align-items: center;
gap: 9px;

2
frontend/src/app/projects/view/styles.module.css
View File

@@ -18,7 +18,7 @@
text-wrap: nowrap;
color: #85869b;
font-family: Inter;
z-index: 5;
z-index: 3;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;