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

Add feature

Browse Source
This commit is contained in:
Laux Dev
2026-03-18 16:18:55 +08:00
parent d7f65cb1a7
commit 6fd78aa92f
20 changed files with 1268 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
frontend/src/app/projects/view/[servicesId]/settings.jsx Normal file
View File

@@ -0,0 +1,171 @@
"use client";
import React, { useState } from "react";
import variableStyles from "./variableStyles.module.css";
const Settings = ({
setTriggerAddVariable,
setTriggerAddVolume,
setTriggerAddConfigMap,
...props
}) => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
return (
<div {...props}>
<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>
{/* <div className={variableStyles.variable}>
<p>REQUEST_SERVICE_GRPC</p>
<p>request-service:50053</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>
);
};
export default Settings;