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

Added features

Browse Source
This commit is contained in:
Laux Dev
2026-02-27 11:05:46 +08:00
parent 7ca948c6ad
commit f13226d379
4 changed files with 642 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/globals.css
View File

@@ -41,3 +41,13 @@ a {
color-scheme: dark; color-scheme: dark;
} }
} }
::-webkit-scrollbar {
width: 8px; /* vertical */
height: 8px; /* horizontal */
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background: #34384c;
}

274
frontend/src/app/projects/view/add-from-scratch/page.jsx
View File

@@ -1,8 +1,12 @@
import React from "react"; "use client";
import React, { useState } from "react";
import globalStyle from "@/app/globalStyle.module.css"; import globalStyle from "@/app/globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader"; import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css";
const AddServices = () => { const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
return ( return (
<div className={globalStyle.section}> <div className={globalStyle.section}>
<div className={globalStyle.mainContainer}> <div className={globalStyle.mainContainer}>
@@ -70,24 +74,272 @@ const AddServices = () => {
</div> </div>
</div> </div>
</div> </div>
<div className={styles.resource}></div> <div className={styles.resource}>
<div className={styles.additionalDetails}> <div className={styles.projectDetailsHeader}>
<div> <p>Resource</p>
</div>
<div className={styles.resourceFields}>
<div> <div>
<div className={styles.header}> <div>
<p>Auto Scaling</p> <p>CPU Request (MB)</p>
<div></div> <input type="text" placeholder="100" />
</div> </div>
<div> <div>
<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></div>
</div> </div>
</div> </div>
<div className={styles.variables}></div>
</div> </div>
</div> </div>
</div> </div>

144
frontend/src/app/projects/view/add-from-scratch/styles.module.css
View File

@@ -8,7 +8,7 @@
display: flex; display: flex;
padding-top: 36px; padding-top: 36px;
flex-direction: column; flex-direction: column;
width: 550px;
align-items: flex-start; align-items: flex-start;
gap: 36px; gap: 36px;
background: #191a24; background: #191a24;
@@ -46,7 +46,22 @@
gap: 16px; gap: 16px;
align-self: stretch; align-self: stretch;
} }
.fieldsCreateNew > div { .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; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -61,7 +76,8 @@
gap: 4px; gap: 4px;
align-self: stretch; align-self: stretch;
} }
.fieldsCreateNew > div > div { .fieldsCreateNew > div > div,
.resourceFields > div > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -69,7 +85,8 @@
gap: 12px; gap: 12px;
flex: 1 0 0; flex: 1 0 0;
} }
.fieldsCreateNew > div > div p { .fieldsCreateNew > div > div p,
.resourceFields > div > div p {
color: #d2d3e1; color: #d2d3e1;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
@@ -77,11 +94,14 @@
line-height: normal; line-height: normal;
letter-spacing: 0.16px; letter-spacing: 0.16px;
} }
.fieldsCreateNew > div > div p > span { .fieldsCreateNew > div > div p > span,
.resourceFields > div > div p > span {
color: #85869b; color: #85869b;
} }
.fieldsCreateNew > div > div input, .fieldsCreateNew > div > div input,
.fieldsCreateNew > div > div select { .fieldsCreateNew > div > div select,
.resourceFields > div > div input,
.resourceFields > div > div select {
display: flex; display: flex;
padding: 12px; padding: 12px;
flex-direction: column; flex-direction: column;
@@ -98,7 +118,8 @@
line-height: normal; line-height: normal;
letter-spacing: 0.16px; letter-spacing: 0.16px;
} }
.fieldsCreateNew > div > div input::placeholder { .fieldsCreateNew > div > div input::placeholder,
.resourceFields > div > div input::placeholder {
color: #85869b; color: #85869b;
} }
.repositoryForm { .repositoryForm {
@@ -118,4 +139,113 @@
font-weight: 400; font-weight: 400;
line-height: normal; line-height: normal;
letter-spacing: 0.16px; letter-spacing: 0.16px;
cursor: pointer;
}
.repositoryForm:hover {
background: rgba(83, 89, 242, 0.1);
}
.additionalDetails {
display: flex;
padding: 0 36px 50px 36px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.additionalDetails > div {
display: flex;
padding: 24px;
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;
}
.additionalDetailsFields input {
display: flex;
padding: 12px;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 10px;
align-self: stretch;
background-color: transparent;
border-radius: 4px;
border: 1px solid #4b4f6d;
color: white;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.additionalDetailsFields input::placeholder {
color: #85869b;
} }

232
frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css Normal file
View File

@@ -0,0 +1,232 @@
.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: 50px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 4px;
background: #1d1e2a;
}
.environmentVariablesContainer {
display: flex;
padding-bottom: 50px;
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: 24px 16px 0 16px;
align-items: flex-start;
align-self: stretch;
}
.emptyVariableList {
display: flex;
padding-bottom: 24px;
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-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}