397 lines
16 KiB
JavaScript
397 lines
16 KiB
JavaScript
"use client";
|
|
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 CustomCheckbox from "@/app/components/checkbox/CheckBox";
|
|
import DeleteIcon from "@/app/components/icons/delete";
|
|
import SelectField from "@/app/components/select/SelectField";
|
|
const AddServices = () => {
|
|
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
|
|
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
|
|
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
|
|
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
|
|
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" },
|
|
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
|
|
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
|
|
];
|
|
return (
|
|
<div className={globalStyle.section}>
|
|
{triggerAddVariable && (
|
|
<AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
|
|
)}
|
|
{triggerAddVolume && (
|
|
<AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
|
|
)}
|
|
{triggeAddConfigMap && (
|
|
<AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
|
|
)}
|
|
<div className={globalStyle.mainContainer}>
|
|
<div className={globalStyle.container}>
|
|
<TopHeader
|
|
buttonText="Save"
|
|
cancelButtonText="Cancel"
|
|
state="view"
|
|
topbarTitle="View Services"
|
|
/>
|
|
<div className={styles.contentContainer}>
|
|
<div className={styles.fieldsContainerCreateNew}>
|
|
<div className={styles.projectDetails}>
|
|
<div className={styles.projectDetailsHeader}>
|
|
<p>Project Details</p>
|
|
</div>
|
|
<div className={styles.fieldsCreateNew}>
|
|
<div>
|
|
<div>
|
|
<p>Name</p>
|
|
<TextField placeHolder="Enter service name" />
|
|
</div>
|
|
<div>
|
|
<p>Version</p>
|
|
<TextField placeHolder="Service version" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p>
|
|
Image <span>(Optional)</span>
|
|
</p>
|
|
<TextField placeHolder="Enter image name" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p>Port</p>
|
|
<TextField placeHolder="Enter port" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p>Ingress</p>
|
|
<SelectField
|
|
label="Select"
|
|
options={[
|
|
{ label: "Option", value: "option" },
|
|
{ label: "Option 1", value: "option 1" },
|
|
{ label: "Option 2", value: "option 2" },
|
|
]}
|
|
/>
|
|
</div>
|
|
<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" />
|
|
</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>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default AddServices;
|