fixed
This commit is contained in:
Laux Dev
@@ -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,456 +63,40 @@ 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}>
|
||||
<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>
|
||||
</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 className={styles.content}>
|
||||
<div className={styles.heading}>
|
||||
<div>
|
||||
<p>Project Details</p>
|
||||
<p>Settings</p>
|
||||
</div>
|
||||
</div>
|
||||
<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}
|
||||
/>
|
||||
<Settings
|
||||
setTriggerAddConfigMap={setTriggerAddConfigMap}
|
||||
setTriggerAddVariable={setTriggerAddVariable}
|
||||
setTriggerAddVolume={setTriggerAddVolume}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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
170
frontend/src/app/projects/view/add-from-scratch/settings.jsx
Normal 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;
|
||||
@@ -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;
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
}
|
||||
.searchContainer > div {
|
||||
display: flex;
|
||||
width: 310px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
|
||||
Reference in New Issue
Block a user