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

Compare commits

base: Laux:7c0d7011aee7fdd55f9f3a805d2114118d4dee3f
Branches Tags
Laux:main Laux:DEVELOPMENT
..
compare: Laux:f84894b6d76e63b48176bd156265d3847fab8f70
Branches Tags
Laux:DEVELOPMENT Laux:main

2 Commits
7c0d7011ae ... f84894b6d7

Author SHA1 Message Date
Laux Dev
f84894b6d7 Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT 2026-03-18 16:19:01 +08:00
Laux Dev
6fd78aa92f Add feature 2026-03-18 16:18:55 +08:00
20 changed files with 1268 additions and 684 deletions
Expand all files Collapse all files

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

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

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

@@ -11,8 +11,9 @@ const CheckIcon = (props) => {
{...props} {...props}
> >
<path <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" stroke="white"
strokeOpacity={1}
strokeWidth={1.5} strokeWidth={1.5}
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="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; gap: 12px;
} }
.autoScroll input[type="checkbox"] { .autoScroll input[type="checkbox"] {
accent-color: #5980f1; accent-color: #4271ff;
height: 16px; height: 16px;
width: 16px; width: 16px;
background: white; background-color: transparent;
} }
.autoScroll p { .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 TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css"; import variableStyles from "./variableStyles.module.css";
import TextField from "@/app/components/fields/textfield";
import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal"; import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal"; import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal"; 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 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 AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false); const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = 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 [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 = [ const sampleData = [
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{ 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 && ( {triggerAddVolume && (
<AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} /> <AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
)} )}
{triggeAddConfigMap && ( {triggerAddConfigMap && (
<AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} /> <AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
)} )}
<div className={globalStyle.mainContainer}> <div className={globalStyle.mainContainer}>
@@ -51,352 +74,57 @@ const AddServices = () => {
requiredButtons={["back", "title", "edit", "download"]} requiredButtons={["back", "title", "edit", "download"]}
setTriggerLogsModal={setTriggerLogsModal} setTriggerLogsModal={setTriggerLogsModal}
/> />
<div className={styles.contentContainer}> <div className={styles.content}>
<div className={styles.fieldsContainerCreateNew}> <div className={styles.heading}>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.fieldsCreateNew}>
<div> <div>
<div> <p
<p>Name</p> className={`${isProjectDetails ? styles.active : null}`}
<TextField placeHolder="Enter service name" /> onClick={() => setIsProjectDetails(true)}
</div> >
<div> Project Details
<p>Version</p> </p>
<TextField placeHolder="Service version" /> <p
</div> className={`${!isProjectDetails ? styles.active : null}`}
</div> onClick={() => setIsProjectDetails(false)}
<div> >
<div> Settings
<p>
Image <span>(Optional)</span>
</p> </p>
<TextField placeHolder="Enter image name" />
</div> </div>
</div> </div>
<div> <div className={styles.contentContainer}>
<div> <ProjectDetails
<p>Port</p> className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
<TextField placeHolder="Enter port" /> register={register}
</div> handleSubmit={handleSubmit}
</div> errors={errors}
<div> onSubmit={onSubmit}
<div> triggerAlert={triggerAlert}
<p>Ingress</p> disableScaling={disableScaling}
<SelectField disableReadiness={disableReadiness}
label="Select" disableLiveness={disableLiveness}
options={[ setDisableScaling={setDisableScaling}
{ label: "Option", value: "option" }, setDisableReadiness={setDisableReadiness}
{ label: "Option 1", value: "option 1" }, setDisableLiveness={setDisableLiveness}
{ label: "Option 2", value: "option 2" }, setTriggerAlert={setTriggerAlert}
]} minPods={minPods}
maxPods={maxPods}
readinessPath={readinessPath}
readinessPort={readinessPort}
livenessPort={livenessPort}
livenessPath={livenessPath}
setIsEnableIngress={setIsEnableIngress}
isEnableIngress={isEnableIngress}
/> />
</div> <Settings
<div> className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
<p>Ingress</p> setTriggerAddConfigMap={setTriggerAddConfigMap}
<SelectField setTriggerAddVariable={setTriggerAddVariable}
label="Select" setTriggerAddVolume={setTriggerAddVolume}
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/> />
</div> </div>
</div> </div>
</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> </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 { .contentContainer {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex: 1 0 0; height: calc(100vh - 240px);
flex: 1;
align-self: stretch; 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 { .fieldsContainerCreateNew {
display: flex; display: flex;
padding-top: 36px; padding-top: 36px;
flex-direction: column; flex-direction: column;
width: 550px;
align-items: flex-start; align-items: flex-start;
gap: 36px; gap: 36px;
background: #191a24; background: #191a24;
height: calc(100vh - 175px); height: calc(100vh - 170px);
min-height: 0;
flex: 1;
overflow-y: scroll; overflow-y: scroll;
scrollbar-width: none; 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 { .projectDetails {
display: flex; display: flex;
padding: 0 36px; padding: 0 20px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
@@ -48,7 +143,7 @@
} }
.resource { .resource {
display: flex; display: flex;
padding: 0 36px; padding: 0 20px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
align-self: stretch; align-self: stretch;
@@ -65,7 +160,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
align-self: stretch; align-self: stretch;
} }
@@ -92,25 +187,6 @@
color: #85869b; 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 { .repositoryForm {
display: flex; display: flex;
padding: 12px; padding: 12px;
@@ -217,3 +293,32 @@
line-height: normal; line-height: normal;
letter-spacing: 0.16px; 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; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
flex: 1 0 0; flex: 1;
align-self: stretch; align-self: stretch;
background: #161720; background: #161720;
} }
.variablesHeader { .variablesHeader {
@@ -23,7 +22,7 @@
} }
.searchContainer > div { .searchContainer > div {
display: flex; display: flex;
width: 310px; width: 100%;
padding: 8px 12px; padding: 8px 12px;
align-items: center; align-items: center;
gap: 9px; gap: 9px;
@@ -103,6 +102,13 @@
align-self: stretch; align-self: stretch;
text-wrap: nowrap; text-wrap: nowrap;
width: 100%; 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 { .dropDownContainer > div:hover {
background: #3c4159; background: #3c4159;
@@ -251,3 +257,14 @@
font-weight: 500; font-weight: 500;
line-height: normal; 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 globalStyle from "@/app/globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader"; import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css";
import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal"; import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal"; import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal"; import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
@@ -10,10 +11,14 @@ import useServicesForm from "@/app/hooks/useServicesForm";
import Alert from "@/app/components/alerts/Alert"; import Alert from "@/app/components/alerts/Alert";
import ProjectDetails from "./projectDetails"; import ProjectDetails from "./projectDetails";
import Settings from "./settings"; import Settings from "./settings";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddServices = () => { const AddServices = () => {
const [triggerAddVariable, setTriggerAddVariable] = useState(false); const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false); const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false); const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [isProjectDetails, setIsProjectDetails] = useState(true);
const [isEnableIngress, setIsEnableIngress] = useState(false);
const isMobile = useIsMobile();
const { const {
register, register,
@@ -66,12 +71,23 @@ const AddServices = () => {
<div className={styles.content}> <div className={styles.content}>
<div className={styles.heading}> <div className={styles.heading}>
<div> <div>
<p>Project Details</p> <p
<p>Settings</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> </div>
<div className={styles.contentContainer}> <div className={styles.contentContainer}>
<ProjectDetails <ProjectDetails
className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
register={register} register={register}
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
errors={errors} errors={errors}
@@ -90,8 +106,11 @@ const AddServices = () => {
readinessPort={readinessPort} readinessPort={readinessPort}
livenessPort={livenessPort} livenessPort={livenessPort}
livenessPath={livenessPath} livenessPath={livenessPath}
setIsEnableIngress={setIsEnableIngress}
isEnableIngress={isEnableIngress}
/> />
<Settings <Settings
className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
setTriggerAddConfigMap={setTriggerAddConfigMap} setTriggerAddConfigMap={setTriggerAddConfigMap}
setTriggerAddVariable={setTriggerAddVariable} setTriggerAddVariable={setTriggerAddVariable}
setTriggerAddVolume={setTriggerAddVolume} 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 TextField from "@/app/components/fields/textfield";
import CustomCheckbox from "@/app/components/checkbox/CheckBox"; import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import SelectField from "@/app/components/select/SelectField"; import SelectField from "@/app/components/select/SelectField";
import RadioButton from "@/app/components/radio-button/RadioButton";
const ProjectDetails = ({ const ProjectDetails = ({
register, register,
@@ -24,14 +25,12 @@ const ProjectDetails = ({
readinessPort, readinessPort,
livenessPort, livenessPort,
livenessPath, livenessPath,
setIsEnableIngress,
isEnableIngress,
...props
}) => { }) => {
return ( return (
<form <form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
className={styles.fieldsContainerCreateNew}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div>
<div className={styles.projectDetails}> <div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}> <div className={styles.projectDetailsHeader}>
<p>Project Details</p> <p>Project Details</p>
@@ -47,7 +46,7 @@ const ProjectDetails = ({
</label> </label>
</div> </div>
</div> </div>
<div> <div className={styles.inputGroup}>
<div> <div>
<p>Name</p> <p>Name</p>
<TextField <TextField
@@ -90,17 +89,70 @@ const ProjectDetails = ({
<div> <div>
<div> <div>
<p>Ingress</p> <p>Ingress</p>
<SelectField <div className={styles.radioButtonContainer}>
label="Select" <div>
options={[ <RadioButton
{ label: "Option", value: "option" }, label="Enable"
{ label: "Option 1", value: "option 1" }, name="isEnable"
{ label: "Option 2", value: "option 2" }, 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>
</div>
{isEnableIngress && (
<>
<div> <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 <SelectField
label="Select" label="Select"
options={[ options={[
@@ -118,7 +170,7 @@ const ProjectDetails = ({
<p>Resource</p> <p>Resource</p>
</div> </div>
<div className={styles.resourceFields}> <div className={styles.resourceFields}>
<div> <div className={styles.inputGroup}>
<div> <div>
<p>CPU Request (MB)</p> <p>CPU Request (MB)</p>
<TextField <TextField
@@ -136,7 +188,7 @@ const ProjectDetails = ({
/> />
</div> </div>
</div> </div>
<div> <div className={styles.inputGroup}>
<div> <div>
<p>Memory Request (MB)</p> <p>Memory Request (MB)</p>
<TextField <TextField
@@ -170,7 +222,7 @@ const ProjectDetails = ({
</div> </div>
<div className={styles.additionalDetailsFields}> <div className={styles.additionalDetailsFields}>
<div> <div>
<div> <div className={styles.inputGroup}>
<div> <div>
<p>Minimum pods</p> <p>Minimum pods</p>
@@ -212,7 +264,7 @@ const ProjectDetails = ({
</div> </div>
<div className={styles.additionalDetailsFields}> <div className={styles.additionalDetailsFields}>
<div> <div>
<div> <div className={styles.inputGroup}>
<div> <div>
<p>Readiness Path</p> <p>Readiness Path</p>
@@ -256,7 +308,7 @@ const ProjectDetails = ({
</div> </div>
<div className={styles.additionalDetailsFields}> <div className={styles.additionalDetailsFields}>
<div> <div>
<div> <div className={styles.inputGroup}>
<div> <div>
<p>Liveness Path</p> <p>Liveness Path</p>
<TextField <TextField
@@ -287,7 +339,6 @@ const ProjectDetails = ({
</div> </div>
</div> </div>
</div> </div>
</div>
</form> </form>
); );
}; };

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

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

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

@@ -1,23 +1,24 @@
.content { .content {
display: flex; display: flex;
padding: 0 16px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
height: calc(100vh - 170px); gap: 32px;
/* ✅ fills remaining space */
min-height: 0; min-height: 0;
align-self: stretch; align-self: stretch;
} }
.contentContainer { .contentContainer {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
height: calc(100vh - 240px);
flex: 1; flex: 1;
background-color: red;
align-self: stretch; align-self: stretch;
} }
.heading { .heading {
display: flex; display: none;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 16px; gap: 16px;
@@ -41,10 +42,12 @@
color: #85869b; color: #85869b;
font-family: Inter; font-family: Inter;
font-size: 18px; font-size: 18px;
font-style: normal;
font-weight: 400; font-weight: 400;
line-height: normal; }
letter-spacing: 0.18px; .heading .active {
border-bottom: 1px solid #959aff;
color: #959aff;
} }
.fieldsContainerCreateNew { .fieldsContainerCreateNew {
display: flex; display: flex;
@@ -53,9 +56,9 @@
align-items: flex-start; align-items: flex-start;
gap: 36px; gap: 36px;
background: #191a24; background: #191a24;
height: 100%; height: calc(100vh - 170px);
min-height: 0; min-height: 0;
background-color: red; flex: 1;
overflow-y: scroll; overflow-y: scroll;
scrollbar-width: none; scrollbar-width: none;
} }
@@ -90,9 +93,58 @@
gap: 16px; gap: 16px;
align-self: stretch; 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 { .resource {
display: flex; display: flex;
padding: 0 36px; padding: 0 20px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
align-self: stretch; align-self: stretch;
@@ -126,7 +178,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 16px;
flex: 1 0 0; flex: 1 0 0;
} }
.fieldsCreateNew > div > div p, .fieldsCreateNew > div > div p,
@@ -249,3 +301,32 @@
line-height: normal; line-height: normal;
letter-spacing: 0.16px; 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; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
flex: 1 0 0; flex: 1;
align-self: stretch; align-self: stretch;
background: #161720; background: #161720;
} }
.variablesHeader { .variablesHeader {
@@ -258,3 +257,14 @@
font-weight: 500; font-weight: 500;
line-height: normal; 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 TextField from "@/app/components/fields/textfield";
import AddIcon from "@/app/components/icons/add"; import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton"; 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 AddConfigMapModal = (props) => {
const [typeOption, setTypeOption] = useState("raw");
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.modal}> <div className={styles.modal}>
@@ -33,21 +36,20 @@ const AddConfigMapModal = (props) => {
<div> <div>
<p>Type</p> <p>Type</p>
<div> <div>
{" "} <RadioButton
<div> name="typeOption"
<label className={styles.radio}> value="raw"
<input type="radio" name="typeOption" /> checked={typeOption === "raw"}
<span className={styles.custom}></span> onChange={(e) => setTypeOption(e.target.value)}
Raw label="Raw"
</label> />
</div> <RadioButton
<div> name="typeOption"
<label className={styles.radio}> value="credential"
<input type="radio" name="typeOption" /> checked={typeOption === "credential"}
<span className={styles.custom}></span> onChange={(e) => setTypeOption(e.target.value)}
Credential label="Credential"
</label> />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -57,11 +59,22 @@ const AddConfigMapModal = (props) => {
<p>Value</p> <p>Value</p>
</div> </div>
{typeOption === "raw" ? (
<textarea <textarea
name="" name=""
id="" id=""
placeholder="Enter a description" placeholder="Enter a description"
></textarea> ></textarea>
) : (
<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> </div>

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

@@ -7,13 +7,14 @@
z-index: 10; z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px;
justify-content: center; justify-content: center;
background-color: #00000037; background-color: #00000037;
} }
.modal { .modal {
display: flex; display: flex;
width: 593px; max-width: 593px;
width: 100%;
padding: 16px 16px 24px 16px; padding: 16px 16px 24px 16px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@@ -174,28 +175,7 @@
line-height: normal; line-height: normal;
letter-spacing: 0.16px; 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 { .verticalInput textarea:focus {
border-radius: 6px; border-radius: 6px;
border: 1px solid #959aff; border: 1px solid #959aff;
@@ -286,3 +266,12 @@
gap: 16px; gap: 16px;
align-self: stretch; 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 className={styles.horizontalInput}>
<div> <div>
<div> <div>
<p>Protocol</p> <p>Username</p>
<TextField placeHolder="MongoDB" /> <TextField placeHolder="MongoDB" />
</div> </div>
<div> <div>
<p>Service</p> <p>Password</p>
<TextField placeHolder="Select a service" /> <TextField placeHolder="Select a service" />
</div> </div>
</div> </div>

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

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