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

Add components

Browse Source
This commit is contained in:
Laux Dev
2026-03-02 15:33:21 +08:00
parent f16b78834c
commit 1023990822
20 changed files with 1234 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

396
frontend/src/app/projects/view/[servicesId]/page.jsx Normal file
View 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;

219
frontend/src/app/projects/view/[servicesId]/styles.module.css Normal file
View File

@@ -0,0 +1,219 @@
.contentContainer {
display: flex;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.fieldsContainerCreateNew {
display: flex;
padding-top: 36px;
flex-direction: column;
width: 550px;
align-items: flex-start;
gap: 36px;
background: #191a24;
height: calc(100vh - 175px);
overflow-y: scroll;
scrollbar-width: none;
}
.projectDetails {
display: flex;
padding: 0 36px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.projectDetailsHeader {
display: flex;
padding-bottom: 24px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.projectDetailsHeader p {
color: #d2d3e1;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.2px;
}
.fieldsCreateNew {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.resource {
display: flex;
padding: 0 36px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.resourceFields {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.fieldsCreateNew > div,
.resourceFields > div {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
}
.fieldsCreateNew > div > div,
.resourceFields > div > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.fieldsCreateNew > div > div p,
.resourceFields > div > div p {
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.fieldsCreateNew > div > div p > span,
.resourceFields > div > div p > span {
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 {
display: flex;
padding: 12px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px dashed #5980f1;
color: #5980f1;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
cursor: pointer;
}
.repositoryForm:hover {
background: rgba(83, 89, 242, 0.1);
}
.additionalDetails {
display: flex;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.additionalDetails > div {
display: flex;
padding: 20px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 6px;
background: #1d1e2a;
}
.additionalDetails > div > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.additionalDetailsHeader {
display: flex;
padding-bottom: 24px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.additionalDetailsHeader div {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
}
.additionalDetailsHeader p {
color: #d2d3e1;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.2px;
}
.additionalDetailsFields {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
align-self: stretch;
}
.additionalDetailsFields > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.additionalDetailsFields > div > div {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
align-self: stretch;
}
.additionalDetailsFields > div > div > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1;
}
.additionalDetailsFields p {
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}

253
frontend/src/app/projects/view/[servicesId]/variableStyles.module.css Normal file
View File

@@ -0,0 +1,253 @@
.variables {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
background: #161720;
}
.variablesHeader {
display: flex;
padding: 8px 14px 8px 8px;
align-items: center;
gap: 10px;
align-self: stretch;
background: #161720;
}
.variablesHeader > div {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
}
.searchContainer > div {
display: flex;
width: 310px;
padding: 8px 12px;
align-items: center;
gap: 9px;
}
.searchInputGroup {
display: flex;
align-items: center;
gap: 9px;
}
.searchInputGroup input {
color: white;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.09px;
outline: none;
background-color: transparent;
border: none;
}
.searchInputGroup input::placeholder {
color: #85869b;
}
.variablesHeaderDropDown {
display: flex;
width: 40px;
height: 40px;
flex-direction: column;
align-items: flex-end;
position: relative;
gap: 6px;
}
.variableHeaderDropdownButton {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 6px;
cursor: pointer;
background: #5359f2;
border: 1px solid #5358f200;
}
.variableHeaderDropdownButton:hover {
border-radius: 6px;
border: 1px solid #5359f2;
background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
}
.dropDownContainer {
display: flex;
padding: 8px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
border-radius: 6px;
background: #2d3144;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.dropDownContainer > div {
display: flex;
padding: 8px 12px;
align-items: center;
gap: 10px;
align-self: stretch;
text-wrap: nowrap;
width: 100%;
}
.dropDownContainer > div:hover {
background: #3c4159;
}
.dropDownContainer > div > div {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
color: #acb0ff;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.variablesContentContainer {
display: flex;
padding: 8px;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.variablesContentContainer > div {
display: flex;
padding-bottom: 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
height: calc(100vh - 242px);
overflow: auto;
flex: 1 0 0;
}
.variablesContent {
display: flex;
padding-bottom: auto;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 4px;
background: #1d1e2a;
}
.variable {
display: flex;
padding: 8px 0;
align-items: center;
align-self: stretch;
border-bottom: 0.5px solid #2e3042;
width: 100%;
}
.variable p {
display: flex;
align-items: center;
flex: 1 0 0;
align-self: stretch;
color: #d2d3e1;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.15px;
}
.environmentVariablesContainer {
display: flex;
min-height: 200px;
padding-bottom: auto;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.environmentVariablesHeader {
display: flex;
padding: 12px 16px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.environmentVariablesHeader p {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
color: #fff;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.envVariablesHeader {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.envVariablesHeader > div {
display: flex;
padding: 12px 16px;
align-items: flex-start;
align-self: stretch;
border-bottom: 1px solid #2c2e3f;
}
.envVariablesHeader > div p {
display: flex;
align-items: flex-start;
flex: 1 0 0;
color: #85869b;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.variableList {
display: flex;
padding: 0 16px 16px 16px;
flex-direction: column;
align-items: center;
align-self: stretch;
}
.emptyVariableList {
display: flex;
padding: 24px 16px 0 16px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
flex: 1 0 0;
}
.emptyVariableList > div {
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
}
.emptyVariableList > div > div {
display: flex;
justify-content: center;
align-items: flex-start;
flex: 1 0 0;
color: #85869b;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}