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

fixed

Browse Source
This commit is contained in:
Laux Dev
2026-03-17 20:13:43 +08:00
parent a220230d0b
commit d7f65cb1a7
12 changed files with 786 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx Normal file
View File

@@ -0,0 +1,74 @@
import CloseIcon from "@/app/components/icons/close";
import React from "react";
import styles from "./styles.module.css";
const LogsModal = (props) => {
return (
<div className={styles.modalContainer}>
<div className={styles.container}>
<div className={styles.header}>
<div className={styles.statusContainer}>
<div>
<p>Server Logs: gateway-api</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={6}
height={6}
viewBox="0 0 6 6"
fill="none"
>
<circle
cx={3}
cy={3}
r={3}
fill="#98FA8D"
style={{
fill: "#98FA8D",
fillColor: "color(display-p3 0.5952 0.9819 0.5537)",
fillOpacity: 1,
}}
/>
</svg>
<p>Connected</p>
</div>
</div>
</div>
<CloseIcon
className={styles.close}
onClick={() => props?.setTriggerLogsModal?.(false)}
/>
</div>
<div className={styles.logContentContainer}></div>
<div className={styles.footer}>
<div>
<div className={styles.autoScroll}>
<input type="checkbox" />
<p>Auto Scroll</p>
</div>
<div className={styles.linesCount}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={18}
height={18}
viewBox="0 0 18 18"
fill="none"
>
<path
d="M5.25 6L2.25 9L5.25 12M12.75 6L15.75 9L12.75 12M10.5 3L7.5 15"
stroke="white"
style={{ stroke: "white", strokeOpacity: 1 }}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>124 Lines</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default LogsModal;

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

@@ -0,0 +1,152 @@
.modalContainer {
width: 100vw;
height: 100vh;
position: absolute;
z-index: 50;
left: 0;
top: 0;
display: flex;
align-items: center;
padding: 10px;
justify-content: center;
background-color: #0000004d;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: 1200px;
border-radius: 6px;
background: #21232f;
height: 100%;
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.header {
display: flex;
padding: 12px 12px 12px 16px;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.close {
cursor: pointer;
}
.statusContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.statusContainer > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.statusContainer > div > p {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.statusContainer > div > div {
display: flex;
padding: 1px 6px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 100px;
background: rgba(66, 180, 78, 0.1);
}
.statusContainer > div > div > p {
color: #72fd7f;
text-align: center;
font-feature-settings:
"liga" off,
"clig" off;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 183.333% */
}
.logContentContainer {
width: 100%;
background-color: rebeccapurple;
flex: 1;
overflow-y: auto;
}
.footer {
display: flex;
padding: 12px 16px;
align-items: center;
gap: 48px;
align-self: stretch;
}
.footer > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex: 1 0 0;
}
.autoScroll {
display: flex;
align-items: center;
gap: 12px;
}
.autoScroll input[type="checkbox"] {
accent-color: #5980f1;
height: 16px;
width: 16px;
background: white;
}
.autoScroll p {
color: #fff;
/* Base/Medium */
font-family: Inter;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
letter-spacing: 0.08px;
}
.linesCount {
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 6px;
background: rgba(0, 101, 244, 0.1);
}
.linesCount p {
color: #fff;
font-family: Inter;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.07px;
}

6
frontend/src/app/projects/view/[servicesId]/page.jsx
View File

@@ -12,11 +12,13 @@ import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import DeleteIcon from "@/app/components/icons/delete";
import SelectField from "@/app/components/select/SelectField";
import ActionButton from "@/app/components/actionButton/ActionButton";
import LogsModal from "./LogsModal/logsModas";
const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [triggerLogsModal, setTriggerLogsModal] = useState(false);
const sampleData = [
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
@@ -27,6 +29,9 @@ const AddServices = () => {
];
return (
<div className={globalStyle.section}>
{triggerLogsModal && (
<LogsModal setTriggerLogsModal={setTriggerLogsModal} />
)}
{triggerAddVariable && (
<AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
)}
@@ -44,6 +49,7 @@ const AddServices = () => {
state="view"
topbarTitle="View Services"
requiredButtons={["back", "title", "edit", "download"]}
setTriggerLogsModal={setTriggerLogsModal}
/>
<div className={styles.contentContainer}>
<div className={styles.fieldsContainerCreateNew}>