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

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 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}>
@@ -70,24 +74,272 @@ const AddServices = () => {
</div>
</div>
</div>
<div className={styles.resource}></div>
<div className={styles.additionalDetails}>
<div>
<div className={styles.resource}>
<div className={styles.projectDetailsHeader}>
<p>Resource</p>
</div>
<div className={styles.resourceFields}>
<div>
<div className={styles.header}>
<p>Auto Scaling</p>
<div></div>
<div>
<p>CPU Request (MB)</p>
<input type="text" placeholder="100" />
</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 className={styles.variables}></div>
</div>
</div>
</div>