Add components
This commit is contained in:
Laux Dev
396
frontend/src/app/projects/view/[servicesId]/page.jsx
Normal file
396
frontend/src/app/projects/view/[servicesId]/page.jsx
Normal file
@@ -0,0 +1,396 @@
|
||||
"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;
|
||||
Reference in New Issue
Block a user