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

Added projects features

Browse Source
This commit is contained in:
Laux Dev
2026-02-26 11:59:16 +08:00
parent b1a79b90a1
commit 7b99f73a7e
11 changed files with 904 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
frontend/src/app/projects/view/page.jsx Normal file
View File

@@ -0,0 +1,309 @@
import React from "react";
import globalStyle from "../../globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
const AddProject = () => {
const sampleData = [
{
name: "accounting-service",
version: "v1",
health: {
overall: "Healthy",
liveness: "Unreachable",
readiness: "Ready",
},
status: {
deployment: "Healthy",
replicas: "1/1",
},
image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
ingress: "",
ports: "3000:3000, 50054:50054",
},
{
name: "accounting-service",
version: "v1",
health: {
overall: "Healthy",
liveness: "Unreachable",
readiness: "Ready",
},
status: {
deployment: "Healthy",
replicas: "1/1",
},
image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
ingress: "",
ports: "3000:3000, 50054:50054",
},
{
name: "accounting-service",
version: "v1",
health: {
overall: "Healthy",
liveness: "Unreachable",
readiness: "Ready",
},
status: {
deployment: "Healthy",
replicas: "1/1",
},
image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
ingress: "",
ports: "3000:3000, 50054:50054",
},
];
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
buttonText="Add Services"
cancelButtonText="Cancel"
state="view"
topbarTitle="Services"
/>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>Health</th>
<th>Status</th>
<th width="15%">Image</th>
<th>Ingress</th>
<th>Port</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{sampleData.map((services, index) => {
return (
<tr key={index}>
<td>{services.name}</td>
<td style={{ textAlign: "center" }}>
{services.version}
</td>
<td>
<div className={styles.servicesHealth}>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2.32605 1.02451C2.62107 0.974241 2.92361 0.990823 3.21137 1.07303C3.49913 1.15524 3.76477 1.30098 3.98872 1.49951L4.00105 1.51051L4.01238 1.50051C4.22612 1.31294 4.47739 1.17311 4.74944 1.09034C5.02149 1.00756 5.30807 0.983759 5.59005 1.02051L5.67205 1.03251C6.02748 1.09388 6.35971 1.25023 6.63354 1.485C6.90737 1.71977 7.11261 2.02422 7.22753 2.36612C7.34245 2.70802 7.36278 3.07463 7.28635 3.42713C7.20992 3.77963 7.03959 4.10491 6.79338 4.36851L6.73338 4.43017L6.71738 4.44384L4.23405 6.90351C4.17674 6.96023 4.10082 6.99425 4.02034 6.99928C3.93987 7.0043 3.8603 6.97999 3.79638 6.93084L3.76505 6.90351L1.26738 4.42951C1.00279 4.17206 0.814617 3.8464 0.723703 3.4886C0.63279 3.13079 0.642684 2.75481 0.75229 2.40228C0.861896 2.04975 1.06694 1.73444 1.3447 1.49127C1.62247 1.24809 1.96213 1.08654 2.32605 1.02451Z"
fill="#4A9D41"
style={{ fill: "#4A9D41", fillOpacity: 1 }}
/>
</svg>
<p>Overall</p>
</div>
<p>{services.health.overall}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z"
fill="#CAB111"
style={{ fill: "#CAB111", fillOpacity: 1 }}
/>
</svg>
<p>Liveness</p>
</div>
<p>{services.health.liveness}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2 1.33343V6.66676C1.99998 6.72607 2.01579 6.78431 2.04579 6.83547C2.0758 6.88663 2.11891 6.92887 2.17067 6.95781C2.22244 6.98675 2.281 7.00135 2.34029 7.00011C2.39959 6.99888 2.45748 6.98184 2.508 6.95076L6.84133 4.28409C6.88987 4.25427 6.92995 4.21251 6.95775 4.16279C6.98555 4.11307 7.00015 4.05706 7.00015 4.00009C7.00015 3.94313 6.98555 3.88712 6.95775 3.8374C6.92995 3.78768 6.88987 3.74592 6.84133 3.71609L2.508 1.04943C2.45748 1.01835 2.39959 1.00131 2.34029 1.00007C2.281 0.998834 2.22244 1.01344 2.17067 1.04238C2.11891 1.07132 2.0758 1.11355 2.04579 1.16472C2.01579 1.21588 1.99998 1.27412 2 1.33343Z"
fill="#757696"
style={{ fill: "#757696", fillOpacity: 1 }}
/>
</svg>
<p>Readiness</p>
</div>
<p>{services.health.readiness}</p>
</div>
</div>
</td>
<td>
<div className={styles.servicesStatus}>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2.19128 4.12547C2.33573 3.74214 2.51489 3.37964 2.72878 3.03797C2.94266 2.6963 3.18573 2.37269 3.45794 2.06714L2.81628 1.94214C2.70516 1.9199 2.59544 1.92547 2.48711 1.9588C2.37878 1.99214 2.28573 2.04769 2.20794 2.12547L1.07461 3.26714C1.0135 3.32824 0.991276 3.40185 1.00794 3.48797C1.02461 3.57407 1.07183 3.63381 1.14961 3.66714L2.19128 4.12547ZM7.02461 0.808797C6.41906 0.764353 5.84544 0.86852 5.30378 1.1213C4.76211 1.37407 4.27461 1.71714 3.84128 2.15047C3.56349 2.42824 3.31766 2.72407 3.10378 3.03797C2.88989 3.35185 2.71349 3.69214 2.57461 4.0588C2.55239 4.11436 2.54128 4.1699 2.54128 4.22547C2.54128 4.28102 2.56349 4.33102 2.60794 4.37547L3.73294 5.50047C3.77739 5.5449 3.82739 5.56714 3.88294 5.56714C3.93849 5.56714 3.99406 5.55602 4.04961 5.5338C4.41628 5.40047 4.75656 5.22547 5.07044 5.0088C5.38433 4.79214 5.68016 4.54491 5.95794 4.26714C6.39128 3.83381 6.73573 3.34631 6.99128 2.80464C7.24683 2.26297 7.35239 1.68935 7.30794 1.0838C7.30239 1.05046 7.29266 1.01852 7.27878 0.987963C7.26489 0.957408 7.24406 0.928242 7.21628 0.900463C7.18849 0.872687 7.15933 0.851853 7.12878 0.837963C7.09823 0.824075 7.06349 0.814353 7.02461 0.808797ZM4.88294 3.22547C4.77183 3.11435 4.71628 2.97685 4.71628 2.81297C4.71628 2.64907 4.77183 2.51157 4.88294 2.40047C4.99406 2.28935 5.13156 2.2338 5.29544 2.2338C5.45933 2.2338 5.59683 2.28935 5.70794 2.40047C5.81906 2.51157 5.87461 2.64907 5.87461 2.81297C5.87461 2.97685 5.81906 3.11435 5.70794 3.22547C5.59683 3.33657 5.45933 3.39214 5.29544 3.39214C5.13156 3.39214 4.99406 3.33657 4.88294 3.22547ZM3.99128 5.91714L4.44128 6.95881C4.47461 7.04214 4.53573 7.09074 4.62461 7.10464C4.71349 7.11852 4.78849 7.0949 4.84961 7.0338L5.98294 5.90047C6.06073 5.82269 6.11628 5.72964 6.14961 5.6213C6.18294 5.51297 6.18849 5.40324 6.16628 5.29214L6.04961 4.65047C5.74406 4.92269 5.42044 5.16574 5.07878 5.37964C4.73711 5.59352 4.37461 5.77269 3.99128 5.91714ZM1.34961 5.35047C1.54405 5.15602 1.78016 5.0574 2.05794 5.05464C2.33573 5.05186 2.57183 5.14769 2.76628 5.34214C2.96073 5.53657 3.05794 5.77269 3.05794 6.05047C3.05794 6.32824 2.96073 6.56435 2.76628 6.7588C2.49961 7.02547 2.18433 7.1838 1.82044 7.23381C1.45655 7.28381 1.09128 7.3338 0.724609 7.3838C0.774609 7.01714 0.825998 6.65185 0.878776 6.28797C0.931553 5.92407 1.0885 5.61157 1.34961 5.35047Z"
fill="#82EEFF"
style={{ fill: "#82EEFF", fillOpacity: 1 }}
/>
</svg>
<p>Deployment</p>
</div>
<p>{services.status.deployment}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
>
<path
d="M1.40625 3.00358C1.40625 2.68587 1.53246 2.38118 1.75711 2.15653C1.98176 1.93187 2.28646 1.80566 2.60417 1.80566H7.39583C7.71354 1.80566 8.01824 1.93187 8.24289 2.15653C8.46754 2.38118 8.59375 2.68587 8.59375 3.00358V3.80219C8.59375 4.1199 8.46754 4.42459 8.24289 4.64925C8.01824 4.8739 7.71354 5.00011 7.39583 5.00011H2.60417C2.28646 5.00011 1.98176 4.8739 1.75711 4.64925C1.53246 4.42459 1.40625 4.1199 1.40625 3.80219V3.00358Z"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.40625 6.19792C1.40625 5.88021 1.53246 5.57551 1.75711 5.35086C1.98176 5.12621 2.28646 5 2.60417 5H7.39583C7.71354 5 8.01824 5.12621 8.24289 5.35086C8.46754 5.57551 8.59375 5.88021 8.59375 6.19792V6.99653C8.59375 7.31423 8.46754 7.61893 8.24289 7.84358C8.01824 8.06824 7.71354 8.19444 7.39583 8.19444H2.60417C2.28646 8.19444 1.98176 8.06824 1.75711 7.84358C1.53246 7.61893 1.40625 7.31423 1.40625 6.99653V6.19792Z"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.00391 3.40234V3.40599"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.00391 6.59766V6.60131"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.60156 3.40234H6.9974"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.60156 6.59766H6.9974"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>Replicas</p>
</div>
<p>{services.status.replicas}</p>
</div>
</div>
</td>
<td>{services.image}</td>
<td>{services.ingress}</td>
<td>{services.ports}</td>
<td>
<div className={styles.actions}>
<div>
<button className={styles.iconButton}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M8.40234 9.99957C8.40234 10.4232 8.57062 10.8294 8.87016 11.129C9.1697 11.4285 9.57596 11.5968 9.99957 11.5968C10.4232 11.5968 10.8294 11.4285 11.129 11.129C11.4285 10.8294 11.5968 10.4232 11.5968 9.99957C11.5968 9.57596 11.4285 9.1697 11.129 8.87016C10.8294 8.57062 10.4232 8.40234 9.99957 8.40234C9.57596 8.40234 9.1697 8.57062 8.87016 8.87016C8.57062 9.1697 8.40234 9.57596 8.40234 9.99957Z"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.1875 9.99967C15.2708 13.1941 12.875 14.7913 10 14.7913C7.125 14.7913 4.72917 13.1941 2.8125 9.99967C4.72917 6.80523 7.125 5.20801 10 5.20801C12.875 5.20801 15.2708 6.80523 17.1875 9.99967Z"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</div>
<div>
<button className={styles.iconButton}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M3.61133 6.00684H16.3891"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.40234 9.20117V13.9928"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.5977 9.20117V13.9928"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</div>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
};
export default AddProject;

153
frontend/src/app/projects/view/styles.module.css Normal file
View File

@@ -0,0 +1,153 @@
.tableContainer {
height: calc(100vh - 170px);
overflow-y: auto;
position: relative;
width: 100%;
}
.tableContainer table,
.tableContainer table thead {
border-collapse: collapse;
border: none;
width: calc(100% -250px);
}
.tableContainer th {
background: #1c1d2b;
top: 0;
position: sticky;
text-wrap: nowrap;
color: #85869b;
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tableContainer th,
.tableContainer td {
padding: 12px 0px;
padding-left: 24px;
text-align: start;
align-self: stretch;
}
.tableContainer thead tr {
border-bottom: 1px solid #212235;
background: #1c1d2b;
}
.tableContainer tbody td {
color: #eeeffd;
font-family: Inter;
overflow-wrap: anywhere;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tableContainer tbody tr {
border-bottom: 1px solid rgba(129, 135, 255, 0);
cursor: pointer;
}
.tableContainer tbody tr:hover {
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
background: rgba(129, 135, 255, 0.05);
}
.servicesHealth,
.servicesStatus {
display: flex;
align-items: center;
gap: 4px;
align-self: stretch;
}
.servicesHealth > div,
.servicesStatus > div {
display: flex;
padding: 4px 6px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
border-radius: 6px;
border: 1px solid rgba(22, 159, 49, 0.25);
background: rgba(22, 159, 49, 0.05);
color: #179f31;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.servicesHealth > div:nth-child(2) {
border: 1px solid rgba(207, 176, 0, 0.25);
background: rgba(207, 176, 0, 0.05);
color: #cfb000;
}
.servicesHealth > div:nth-child(2) > div {
color: #cfb000;
}
.servicesHealth > div:nth-child(3) {
border: 1px solid rgba(117, 118, 153, 0.25);
background: rgba(117, 118, 153, 0.05);
color: #757696;
}
.servicesHealth > div:nth-child(3) > div {
color: #757696;
}
.servicesHealth > div > div,
.servicesStatus > div > div {
display: flex;
align-items: center;
gap: 4px;
color: #179f31;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.servicesStatus > div:nth-child(1) {
border-radius: 6px;
border: 1px solid rgba(80, 241, 255, 0.25);
background: rgba(80, 241, 255, 0.05);
color: #82eeff;
}
.servicesStatus > div:nth-child(1) > div {
color: #82eeff;
}
.servicesStatus > div:nth-child(2) {
border-radius: 6px;
border: 1px solid rgba(89, 127, 241, 0.25);
background: rgba(89, 127, 241, 0.05);
color: #617ee9;
}
.servicesStatus > div:nth-child(2) > div {
color: #617ee9;
}
.actions {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.iconButton {
display: flex;
padding: 6px;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
aspect-ratio: 1/1;
background-color: rgba(255, 255, 255, 0);
outline: none;
border: 1px solid #959aff00;
cursor: pointer;
border-radius: 50%;
}
.iconButton:hover {
border: 1px solid #959aff;
background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
}
.iconButton:hover path {
stroke: white;
}