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

progress

Browse Source
This commit is contained in:
Laux Dev
2026-03-16 14:42:04 +08:00
parent dcddc14d7e
commit fbeb3a509a
11 changed files with 572 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/buttons/primarybutton/styles.module.css
View File

@@ -1,6 +1,6 @@
.button { .button {
display: flex; display: flex;
padding: 8px 12px; padding: 8px 10px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 10px; gap: 10px;

5
frontend/src/app/components/mobileSearchBar/styles.module.css
View File

@@ -9,14 +9,14 @@
.searchBarContainer > input { .searchBarContainer > input {
width: 100%; width: 100%;
padding: 11px 12px; padding: 11px 12px;
padding-left: 30px; padding-left: 40px;
background-color: transparent; background-color: transparent;
border: none; border: none;
outline: none; outline: none;
background-color: transparent; background-color: transparent;
color: white; color: white;
font-family: Inter; font-family: Inter;
font-size: 16px; font-size: 18px;
outline: none; outline: none;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@@ -25,4 +25,5 @@
} }
.searchIcon { .searchIcon {
position: absolute; position: absolute;
left: 10;
} }

2
frontend/src/app/components/topHeader/TopHeader.jsx
View File

@@ -71,7 +71,7 @@ const TopHeader = (props) => {
{props?.requiredButtons.includes("add-services") && ( {props?.requiredButtons.includes("add-services") && (
<PrimaryButton <PrimaryButton
icon={<AddIcon />} icon={<AddIcon />}
text={props.buttonText} text={isMobile ? "" : props.buttonText}
onClick={() => props?.trigger(!props?.triggerState)} onClick={() => props?.trigger(!props?.triggerState)}
/> />
)} )}

2
frontend/src/app/globals.css
View File

@@ -55,7 +55,7 @@ a {
} }
@media (max-width: 900px) { @media (max-width: 900px) {
:root { :root {
--table-font-size: 12px; --table-font-size: 9px;
} }
} }
@media (max-width: 500px) { @media (max-width: 500px) {

6
frontend/src/app/projects/page.jsx
View File

@@ -185,7 +185,11 @@ const ProjectsPage = () => {
<div className={styles.cardContainer}> <div className={styles.cardContainer}>
<MobileSearchBar /> <MobileSearchBar />
{sampleData.map((data, key) => ( {sampleData.map((data, key) => (
<Card data={data} key={key} /> <Card
data={data}
key={key}
onClick={() => router.push("/projects/view")}
/>
))} ))}
</div> </div>
) : ( ) : (

2
frontend/src/app/projects/project-card/Card.jsx
View File

@@ -4,7 +4,7 @@ import styles from "./styles.module.css";
const Card = (props) => { const Card = (props) => {
return ( return (
<div className={styles.cardContainer}> <div className={styles.cardContainer} {...props}>
<div className={styles.cardDetails}> <div className={styles.cardDetails}>
<div className={styles.list}> <div className={styles.list}>
<p>Name</p> <p>Name</p>

1
frontend/src/app/projects/project-card/styles.module.css
View File

@@ -5,6 +5,7 @@
gap: 16px; gap: 16px;
align-self: stretch; align-self: stretch;
border-bottom: 1px solid #2c2d3d; border-bottom: 1px solid #2c2d3d;
cursor: pointer;
} }
.cardDetails { .cardDetails {
display: flex; display: flex;

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

@@ -6,10 +6,13 @@ import styles from "./styles.module.css";
import AddServicesModal from "./AddServicesModal/AddServicesModal"; import AddServicesModal from "./AddServicesModal/AddServicesModal";
import { useRouter, usePathname } from "next/navigation"; import { useRouter, usePathname } from "next/navigation";
import CopyIcon from "@/app/components/icons/copy"; import CopyIcon from "@/app/components/icons/copy";
import useIsMobile from "@/app/hooks/useIsMobile";
import Card from "./service-card/Card";
import MobileSearchBar from "@/app/components/mobileSearchBar/MobileSearchBar";
const AddProject = () => { const AddProject = () => {
const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false); const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
const router = useRouter(); const router = useRouter();
const isMobile = useIsMobile();
const pathName = usePathname(); const pathName = usePathname();
const sampleData = [ const sampleData = [
{ {
@@ -108,254 +111,279 @@ const AddProject = () => {
"services-drop-down", "services-drop-down",
]} ]}
/> />
<div className={styles.tableContainer}> {isMobile ? (
<table className={styles.table}> <div className={styles.cardContainer}>
<thead> <MobileSearchBar />
<tr> {sampleData.map((data, key) => (
<th>Name</th> <Card
<th>Version</th> data={data}
<th>Health</th> key={key}
<th>Status</th> onClick={() => router.push(`${pathName}/${data.id}`)}
<th width="10%">Image</th> />
<th>Ingress</th> ))}
<th>Port</th> </div>
<th>Actions</th> ) : (
</tr> <div className={styles.tableContainer}>
</thead> <table className={styles.table}>
<tbody> <thead>
{sampleData.map((services, index) => { <tr>
return ( <th>Name</th>
<tr <th>Version</th>
key={index} <th>Health</th>
onClick={() => <th>Status</th>
router.push(`${pathName}/${services.id}`) <th width="10%">Image</th>
} <th>Ingress</th>
> <th>Port</th>
<td>{services.name}</td> <th>Actions</th>
<td style={{ textAlign: "center" }}> </tr>
{services.version} </thead>
</td> <tbody>
<td> {sampleData.map((services, index) => {
<div className={styles.servicesHealth}> return (
<div> <tr
key={index}
onClick={() =>
router.push(`${pathName}/${services.id}`)
}
>
<td>{services.name}</td>
<td style={{ textAlign: "center" }}>
{services.version}
</td>
<td>
<div className={styles.servicesHealth}>
<div> <div>
<svg <div>
xmlns="http://www.w3.org/2000/svg" <svg
width="8" xmlns="http://www.w3.org/2000/svg"
height="8" width="8"
viewBox="0 0 8 8" height="8"
fill="none" 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" <path
fill="#4A9D41" 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"
style={{ fill: "#4A9D41", fillOpacity: 1 }} fill="#4A9D41"
/> style={{
</svg> fill: "#4A9D41",
<p>Overall</p> fillOpacity: 1,
}}
/>
</svg>
<p>Overall</p>
</div>
<p>{services.health.overall}</p>
</div> </div>
<p>{services.health.overall}</p>
</div>
<div>
<div> <div>
<svg <div>
xmlns="http://www.w3.org/2000/svg" <svg
width="8" xmlns="http://www.w3.org/2000/svg"
height="8" width="8"
viewBox="0 0 8 8" height="8"
fill="none" viewBox="0 0 8 8"
> fill="none"
<path >
d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z" <path
fill="#CAB111" d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z"
style={{ fill: "#CAB111", fillOpacity: 1 }} fill="#CAB111"
/> style={{
</svg> fill: "#CAB111",
<p>Liveness</p> fillOpacity: 1,
}}
/>
</svg>
<p>Liveness</p>
</div>
<p>{services.health.liveness}</p>
</div> </div>
<p>{services.health.liveness}</p>
</div>
<div>
<div> <div>
<svg <div>
xmlns="http://www.w3.org/2000/svg" <svg
width="8" xmlns="http://www.w3.org/2000/svg"
height="8" width="8"
viewBox="0 0 8 8" height="8"
fill="none" 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" <path
fill="#757696" 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"
style={{ fill: "#757696", fillOpacity: 1 }} fill="#757696"
/> style={{
</svg> fill: "#757696",
<p>Readiness</p> fillOpacity: 1,
}}
/>
</svg>
<p>Readiness</p>
</div>
<p>{services.health.readiness}</p>
</div> </div>
<p>{services.health.readiness}</p>
</div> </div>
</div> </td>
</td> <td>
<td> <div className={styles.servicesStatus}>
<div className={styles.servicesStatus}>
<div>
<div> <div>
<svg <div>
xmlns="http://www.w3.org/2000/svg" <svg
width="8" xmlns="http://www.w3.org/2000/svg"
height="8" width="8"
viewBox="0 0 8 8" height="8"
fill="none" 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" <path
fill="#82EEFF" 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"
style={{ fill: "#82EEFF", fillOpacity: 1 }} fill="#82EEFF"
/> style={{
</svg> fill: "#82EEFF",
<p>Deployment</p> fillOpacity: 1,
}}
/>
</svg>
<p>Deployment</p>
</div>
<p>{services.status.deployment}</p>
</div> </div>
<p>{services.status.deployment}</p>
</div>
<div>
<div> <div>
<svg <div>
xmlns="http://www.w3.org/2000/svg" <svg
width="10" xmlns="http://www.w3.org/2000/svg"
height="10" width="10"
viewBox="0 0 10 10" height="10"
fill="none" 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" <path
stroke="#617EE9" 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"
strokeLinecap="round" stroke="#617EE9"
strokeLinejoin="round" 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" <path
stroke="#617EE9" 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"
strokeLinecap="round" stroke="#617EE9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
<path />
d="M3.00391 3.40234V3.40599" <path
stroke="#617EE9" d="M3.00391 3.40234V3.40599"
strokeLinecap="round" stroke="#617EE9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
<path />
d="M3.00391 6.59766V6.60131" <path
stroke="#617EE9" d="M3.00391 6.59766V6.60131"
strokeLinecap="round" stroke="#617EE9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
<path />
d="M4.60156 3.40234H6.9974" <path
stroke="#617EE9" d="M4.60156 3.40234H6.9974"
strokeLinecap="round" stroke="#617EE9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
<path />
d="M4.60156 6.59766H6.9974" <path
stroke="#617EE9" d="M4.60156 6.59766H6.9974"
strokeLinecap="round" stroke="#617EE9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
</svg> />
<p>Replicas</p> </svg>
<p>Replicas</p>
</div>
<p>{services.status.replicas}</p>
</div> </div>
<p>{services.status.replicas}</p>
</div> </div>
</div> </td>
</td> <td className={styles.imageText}>
<td className={styles.imageText}>
<div>
<CopyIcon />
<p>Copy</p>
</div>
<p> {services.image}</p>
</td>
<td>{services.ingress}</td>
<td>{services.ports}</td>
<td>
<div className={styles.actions}>
<div> <div>
<button className={styles.iconButton}> <CopyIcon />
<svg <p>Copy</p>
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>
<div> <p> {services.image}</p>
<button className={styles.iconButton}> </td>
<svg <td>{services.ingress}</td>
xmlns="http://www.w3.org/2000/svg" <td>{services.ports}</td>
width={20} <td>
height={20} <div className={styles.actions}>
viewBox="0 0 20 20" <div>
fill="none" <button className={styles.iconButton}>
> <svg
<path xmlns="http://www.w3.org/2000/svg"
d="M3.61133 6.00684H16.3891" width={20}
stroke="#969AF9" height={20}
strokeLinecap="round" viewBox="0 0 20 20"
strokeLinejoin="round" fill="none"
/> >
<path <path
d="M8.40234 9.20117V13.9928" 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" stroke="#969AF9"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />
<path <path
d="M11.5977 9.20117V13.9928" 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" stroke="#969AF9"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />
<path </svg>
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" </button>
stroke="#969AF9" </div>
strokeLinecap="round" <div>
strokeLinejoin="round" <button className={styles.iconButton}>
/> <svg
<path xmlns="http://www.w3.org/2000/svg"
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" width={20}
stroke="#969AF9" height={20}
strokeLinecap="round" viewBox="0 0 20 20"
strokeLinejoin="round" fill="none"
/> >
</svg> <path
</button> 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> </div>
</div> </td>
</td> </tr>
</tr> );
); })}
})} </tbody>
</tbody> </table>
</table> </div>
</div> )}
</div> </div>
</div> </div>
</div> </div>

170
frontend/src/app/projects/view/service-card/Card.jsx Normal file
View File

@@ -0,0 +1,170 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = (props) => {
return (
<div className={styles.cardContainer} {...props}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>{props?.data?.name}</p>
</div>
<div className={styles.list}>
<p>Version</p>
<p>{props?.data?.version}</p>
</div>
<div className={styles.list}>
<p>Health</p>
<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>{props?.data?.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>{props?.data?.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>{props?.data?.health?.readiness}</p>
</div>
</div>
</div>
<div className={styles.list}>
<p>Status</p>
<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>{props?.data?.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>{props?.data?.status?.replicas}</p>
</div>
</div>
</div>
<div className={styles.list}>
<p>Image</p>
<p>{props?.data?.image}</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

116
frontend/src/app/projects/view/service-card/styles.module.css Normal file
View File

@@ -0,0 +1,116 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
cursor: pointer;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list > p {
color: #85869b;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
overflow-wrap: anywhere;
}
.list > p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 16px;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}
.servicesHealth,
.servicesStatus {
display: flex;
align-items: start;
gap: 4px;
width: 100%;
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;
}

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

@@ -59,8 +59,10 @@
.servicesStatus { .servicesStatus {
display: flex; display: flex;
align-items: start; align-items: start;
text-wrap: nowrap;
gap: 4px; gap: 4px;
width: 100%; width: 100%;
flex-wrap: wrap;
align-self: stretch; align-self: stretch;
} }
.servicesHealth > div, .servicesHealth > div,
@@ -185,3 +187,14 @@
.imageText:hover > div { .imageText:hover > div {
opacity: 1; opacity: 1;
} }
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
}