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

Added feature

Browse Source
This commit is contained in:
Laux Dev
2026-03-04 16:26:53 +08:00
parent ed3fee5b81
commit eb37c2f6f8
8 changed files with 131 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/components/checkbox/CheckBox.jsx
View File

@@ -6,7 +6,7 @@ import CloseIcon from "../icons/close";
import CheckedIcon from "../icons/switchIcons/checked";
import UnCheckedIcon from "../icons/switchIcons/unchecked";
const CustomCheckbox = ({ checked, onChange, id }) => {
const CustomCheckbox = ({ checked, setChecked, id, ...props }) => {
const [isChecked, setIsChecked] = useState(false);
return (
<>
@@ -17,8 +17,9 @@ const CustomCheckbox = ({ checked, onChange, id }) => {
checked={checked}
onChange={() => {
setIsChecked(!isChecked);
onChange;
setChecked();
}}
{...props}
/>
<label htmlFor={id} className={styles.switch}>

10
frontend/src/app/components/fields/styles.module.css
View File

@@ -45,3 +45,13 @@
font-weight: 400;
line-height: normal;
}
.input:disabled {
background: rgba(75, 79, 109, 0.15);
border: 1px solid #616583;
color: #85869b;
cursor: not-allowed;
pointer-events: none;
user-select: none;
}

27
frontend/src/app/components/icons/copy.jsx Normal file
View File

@@ -0,0 +1,27 @@
const CopyIcon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
{...props}
>
<path
d="M5.44531 4.16645C5.44531 3.82756 5.57994 3.50255 5.81957 3.26292C6.05919 3.02329 6.3842 2.88867 6.72309 2.88867H11.8342C12.1731 2.88867 12.4981 3.02329 12.7377 3.26292C12.9774 3.50255 13.112 3.82756 13.112 4.16645V9.27756C13.112 9.61645 12.9774 9.94146 12.7377 10.1811C12.4981 10.4207 12.1731 10.5553 11.8342 10.5553H6.72309C6.3842 10.5553 6.05919 10.4207 5.81957 10.1811C5.57994 9.94146 5.44531 9.61645 5.44531 9.27756V4.16645Z"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.5553 10.5554V11.8332C10.5553 12.1721 10.4207 12.4971 10.1811 12.7368C9.94146 12.9764 9.61645 13.111 9.27756 13.111H4.16645C3.82756 13.111 3.50255 12.9764 3.26292 12.7368C3.02329 12.4971 2.88867 12.1721 2.88867 11.8332V6.72211C2.88867 6.38323 3.02329 6.05822 3.26292 5.81859C3.50255 5.57896 3.82756 5.44434 4.16645 5.44434H5.44423"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
export default CopyIcon;

5
frontend/src/app/organization/add/page.jsx
View File

@@ -31,7 +31,8 @@ const AddCredentials = () => {
alt="badge image"
/>
</div>
<div className={styles.addIconContainer}>
<input type="file" id="file" hidden accept="image/*" />
<label className={styles.addIconContainer} for="file">
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
@@ -54,7 +55,7 @@ const AddCredentials = () => {
strokeLinejoin="round"
/>
</svg>
</div>
</label>
</div>
</div>
<div className={styles.labels}>

7
frontend/src/app/organization/add/styles.module.css
View File

@@ -89,6 +89,13 @@
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
border-radius: 100px;
background: #696b95;
transition: all 0.1;
cursor: pointer;
}
.addIconContainer:hover {
border-radius: 100px;
border: 1px solid #959aff;
background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
}
.labels {
display: flex;

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

@@ -16,6 +16,9 @@ const AddServices = () => {
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [disableScaling, setDisableScaling] = useState(true);
const [disableReadiness, setDisableReadiness] = useState(true);
const [disableLiveness, setDisableLiveness] = useState(true);
return (
<div className={globalStyle.section}>
{triggerAddVariable && (
@@ -136,7 +139,10 @@ const AddServices = () => {
<div className={styles.additionalDetailsHeader}>
<div>
<p>Auto Scaling</p>
<CustomCheckbox id="scalingCheckBox" />
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => setDisableScaling(!disableScaling)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
@@ -145,11 +151,17 @@ const AddServices = () => {
<div>
<p>Minimum pods</p>
<TextField placeHolder="1" />
<TextField
placeHolder="1"
disabled={disableScaling}
/>
</div>
<div>
<p>Maximum pods</p>
<TextField placeHolder="1" />
<TextField
placeHolder="1"
disabled={disableScaling}
/>
</div>
</div>
</div>
@@ -161,7 +173,12 @@ const AddServices = () => {
<div className={styles.additionalDetailsHeader}>
<div>
<p>Readiness</p>
<CustomCheckbox id="readiNessCheckBox" />
<CustomCheckbox
id="readiNessCheckBox"
setChecked={() =>
setDisableReadiness(!disableReadiness)
}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
@@ -170,11 +187,17 @@ const AddServices = () => {
<div>
<p>Readiness Path</p>
<TextField placeHolder="Enter Readiness path" />
<TextField
placeHolder="Enter Readiness path"
disabled={disableReadiness}
/>
</div>
<div>
<p>Readiness Port</p>
<TextField placeHolder="Enter Readiness port" />
<TextField
placeHolder="Enter Readiness port"
disabled={disableReadiness}
/>
</div>
</div>
</div>
@@ -186,7 +209,13 @@ const AddServices = () => {
<div className={styles.additionalDetailsHeader}>
<div>
<p>Liveness</p>
<CustomCheckbox id="liveNessCheckBox" />
<CustomCheckbox
id="liveNessCheckBox"
setChecked={() => {
console.log("alsdjhfkjas");
setDisableLiveness(!disableLiveness);
}}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
@@ -194,12 +223,18 @@ const AddServices = () => {
<div>
<div>
<p>Liveness Path</p>
<TextField placeHolder="Enter liveness path" />
<TextField
placeHolder="Enter liveness path"
disabled={disableLiveness}
/>
</div>
<div>
<p>Liveness Port</p>
<TextField placeHolder="Enter liveness port" />
<TextField
placeHolder="Enter liveness port"
disabled={disableLiveness}
/>
</div>
</div>
</div>

9
frontend/src/app/projects/view/page.jsx
View File

@@ -5,6 +5,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import AddServicesModal from "./AddServicesModal/AddServicesModal";
import { useRouter, usePathname } from "next/navigation";
import CopyIcon from "@/app/components/icons/copy";
const AddProject = () => {
const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
const router = useRouter();
@@ -270,7 +271,13 @@ const AddProject = () => {
</div>
</div>
</td>
<td>{services.image}</td>
<td className={styles.imageText}>
<div>
<CopyIcon />
<p>Copy</p>
</div>
<p> {services.image}</p>
</td>
<td>{services.ingress}</td>
<td>{services.ports}</td>
<td>

29
frontend/src/app/projects/view/styles.module.css
View File

@@ -151,3 +151,32 @@
.iconButton:hover path {
stroke: white;
}
.imageText {
transition: all 0.15s;
position: relative;
}
.tableContainer > .imageText {
padding: 0px;
}
.imageText > div {
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
gap: 4px;
position: absolute;
right: 50%;
top: 50%;
transform: translateX(50%) translateY(-50%);
border-radius: 100px;
background: #fff;
box-shadow: 0 0 10px 0 #000;
color: black;
opacity: 0;
}
.imageText > p {
height: 100%;
}
.imageText:hover > div {
opacity: 1;
}