351 lines
13 KiB
JavaScript
351 lines
13 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";
|
|
const AddServices = () => {
|
|
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
|
|
|
|
return (
|
|
<div className={globalStyle.section}>
|
|
<div className={globalStyle.mainContainer}>
|
|
<div className={globalStyle.container}>
|
|
<TopHeader
|
|
buttonText="Save"
|
|
cancelButtonText="Cancel"
|
|
state="add"
|
|
topbarTitle="Create New 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>
|
|
Repository <span>(Optional)</span>
|
|
</p>
|
|
<label className={styles.repositoryForm} htmlFor="#repo">
|
|
+ Link Repository
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p>Name</p>
|
|
<input type="text" placeholder="Enter service name" />
|
|
</div>
|
|
<div>
|
|
<p>Version</p>
|
|
<input type="text" placeholder="Service version" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p>
|
|
Image <span>(Optional)</span>
|
|
</p>
|
|
<input type="text" placeholder="Enter image name" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p>Port</p>
|
|
<input type="text" placeholder="Enter port" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p>Ingress</p>
|
|
<select name="" id="">
|
|
<option value="">Select</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<p>Ingress</p>
|
|
<select name="" id="">
|
|
<option value="">Select</option>
|
|
</select>
|
|
</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>
|
|
<input type="text" placeholder="100" />
|
|
</div>
|
|
<div>
|
|
<p>CPU Limit (MB)</p>
|
|
<input type="text" placeholder="250" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p>Memory Request (MB)</p>
|
|
<input type="text" placeholder="250" />
|
|
</div>
|
|
<div>
|
|
<p>Memory Limit (MB)</p>
|
|
<input type="text" placeholder="500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.additionalDetails}>
|
|
<div>
|
|
<div>
|
|
<div className={styles.additionalDetailsHeader}>
|
|
<div>
|
|
<p>Auto Scaling</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.additionalDetailsFields}>
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<p>Name</p>
|
|
<input
|
|
type="text"
|
|
placeholder="Enter service name"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p>Version</p>
|
|
<input type="text" placeholder="Service version" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<div className={styles.additionalDetailsHeader}>
|
|
<div>
|
|
<p>Readiness</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.additionalDetailsFields}>
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<p>Readiness Path</p>
|
|
<input
|
|
type="text"
|
|
placeholder="Enter Readiness path"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p>Readiness Port</p>
|
|
<input
|
|
type="text"
|
|
placeholder="Enter Readiness port"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<div className={styles.additionalDetailsHeader}>
|
|
<div>
|
|
<p>Liveness</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.additionalDetailsFields}>
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<p>Liveness Path</p>
|
|
<input
|
|
type="text"
|
|
placeholder="Enter liveness path"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p>Liveness Port</p>
|
|
<input
|
|
type="text"
|
|
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>
|
|
<p>Environment Variables</p>
|
|
</div>
|
|
<div>
|
|
<p>Volumes</p>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</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;
|