Added new features
This commit is contained in:
Laux Dev
@@ -13,7 +13,7 @@ const TopHeader = (props) => {
|
|||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<div className={styles.title}>
|
<div className={styles.title}>
|
||||||
{pathName.includes("/view") && (
|
{pathName.includes("/view") && props.state === "view" && (
|
||||||
<div onClick={() => router.back()}>
|
<div onClick={() => router.back()}>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@@ -114,7 +114,39 @@ const TopHeader = (props) => {
|
|||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{(pathName === "/projects/view" || !props.state) && (
|
{pathName === "/projects/view" && (
|
||||||
|
<div
|
||||||
|
className={styles.button}
|
||||||
|
onClick={() => props.trigger(!props.triggerState)}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10 4.41016V15.5907"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeOpacity={1}
|
||||||
|
strokeWidth={1.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M4.41016 10H15.5907"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeOpacity={1}
|
||||||
|
strokeWidth={1.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p>{props.buttonText}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!props.state && (
|
||||||
<div className={styles.button} onClick={handleNavigateToAdd}>
|
<div className={styles.button} onClick={handleNavigateToAdd}>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@@ -171,7 +203,7 @@ const TopHeader = (props) => {
|
|||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{/* Projects 3 dots menu */}
|
{/* Projects 3 dots menu */}
|
||||||
{pathName.includes("/projects/view") && (
|
{pathName === "/projects/view" && (
|
||||||
<div
|
<div
|
||||||
className={styles.menu}
|
className={styles.menu}
|
||||||
onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
|
onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
|
||||||
|
|||||||
@@ -21,6 +21,18 @@
|
|||||||
border: 0.5px solid #8187ff;
|
border: 0.5px solid #8187ff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.title > div:hover {
|
||||||
|
border-radius: 100px;
|
||||||
|
border: 0.5px solid #959aff;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(149, 154, 255, 0.25) 0%,
|
||||||
|
rgba(88, 91, 151, 0.25) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.title > div:hover path {
|
||||||
|
stroke: white;
|
||||||
|
}
|
||||||
.title > p {
|
.title > p {
|
||||||
color: #d2d3e1;
|
color: #d2d3e1;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ const inter = Inter({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: "Create Next App",
|
title: "Internal Developer Platform",
|
||||||
description: "Generated by create next app",
|
description: "Generated by create next app",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,150 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import styles from "./styles.module.css";
|
||||||
|
import { useRouter, usePathname } from "next/navigation";
|
||||||
|
|
||||||
|
const AddServicesModal = (props) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const pathName = usePathname();
|
||||||
|
const servicesList = [
|
||||||
|
{
|
||||||
|
title: "Start from Scratch",
|
||||||
|
linkTo: "add-from-scratch",
|
||||||
|
detail:
|
||||||
|
"Create a new service manually by configuring all the settings yourself",
|
||||||
|
icon: (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M9.61111 10.8885L4.5 15.9996L9.61111 21.1107M22.3889 10.8885L27.5 15.9996L22.3889 21.1107M18.5556 5.77734L13.4444 26.2218"
|
||||||
|
stroke="white"
|
||||||
|
strokeOpacity="1"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
isReleased: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Choose Gitea Repository",
|
||||||
|
detail: "Choose a repository from your linked Gitea Account",
|
||||||
|
icon: (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M4.5 18.5556C5.56056 19.3759 7.15394 19.8551 8.97222 19.8333C10.7905 19.8551 12.3839 19.3759 13.4444 18.5556C14.505 17.7352 16.0984 17.2561 17.9167 17.2778C19.7349 17.2561 21.3283 17.7352 22.3889 18.5556M10.8889 4.5C10.4845 4.79027 10.1568 5.17463 9.9342 5.61988C9.71157 6.06512 9.60069 6.55787 9.61111 7.05556C9.60069 7.55324 9.71157 8.04599 9.9342 8.49124C10.1568 8.93648 10.4845 9.32084 10.8889 9.61111M16 4.5C15.5956 4.79027 15.2679 5.17463 15.0453 5.61988C14.8227 6.06512 14.7118 6.55787 14.7222 7.05556C14.7118 7.55324 14.8227 8.04599 15.0453 8.49124C15.2679 8.93648 15.5956 9.32084 16 9.61111M22.0643 22.0388C22.635 22.3007 23.2613 22.4185 23.8881 22.3818C24.5149 22.345 25.1231 22.1548 25.6592 21.8279C26.1953 21.501 26.6429 21.0474 26.9627 20.507C27.2825 19.9666 27.4646 19.356 27.493 18.7287C27.5215 18.1015 27.3954 17.4768 27.1259 16.9097C26.8564 16.3425 26.4517 15.8503 25.9474 15.4762C25.4431 15.1021 24.8546 14.8577 24.2336 14.7643C23.6127 14.6709 22.9784 14.7315 22.3863 14.9407M4.5 13.4444H22.3889V19.8333C22.3889 21.8667 21.5812 23.8167 20.1434 25.2545C18.7056 26.6923 16.7555 27.5 14.7222 27.5H12.1667C10.1333 27.5 8.18329 26.6923 6.74551 25.2545C5.30774 23.8167 4.5 21.8667 4.5 19.8333V13.4444Z"
|
||||||
|
stroke="white"
|
||||||
|
strokeOpacity="1"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
isReleased: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Link GitHub Repository",
|
||||||
|
detail: "Import and deploy a service from your GitHub repository",
|
||||||
|
icon: (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12.1667 24.9448C6.67222 26.7337 6.67222 21.7503 4.5 21.1115M19.8333 27.5003V23.0281C19.8333 21.7503 19.9611 21.2392 19.1944 20.4726C22.7722 20.0892 26.2222 18.6837 26.2222 12.8059C26.2207 11.2789 25.6249 9.81246 24.5611 8.71701C25.06 7.39063 25.0141 5.92076 24.4333 4.62812C24.4333 4.62812 23.0278 4.24479 19.9611 6.28923C17.3637 5.61276 14.6363 5.61276 12.0389 6.28923C8.97222 4.24479 7.56667 4.62812 7.56667 4.62812C6.98589 5.92076 6.93996 7.39063 7.43889 8.71701C6.37508 9.81246 5.77933 11.2789 5.77778 12.8059C5.77778 18.6837 9.22778 20.0892 12.8056 20.4726C12.0389 21.2392 12.0389 22.0059 12.1667 23.0281V27.5003"
|
||||||
|
stroke="white"
|
||||||
|
strokeOpacity="1"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
isReleased: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.modal}>
|
||||||
|
<div className={styles.header}>
|
||||||
|
<div>
|
||||||
|
<p>Create New Services</p>
|
||||||
|
<div>
|
||||||
|
<p>Choose how you want to create your service</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
onClick={() => props.trigger(!props.triggerState)}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="28"
|
||||||
|
height="28"
|
||||||
|
viewBox="0 0 28 28"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20.7077 7.29199L7.29102 20.7087"
|
||||||
|
stroke="white"
|
||||||
|
strokeOpacity="1"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M7.29102 7.29199L20.7077 20.7087"
|
||||||
|
stroke="white"
|
||||||
|
strokeOpacity="1"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className={styles.content}>
|
||||||
|
{servicesList.map((service, key) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${styles.list} ${service.isReleased ? styles.isReleased : styles.isComingSoon}`}
|
||||||
|
key={key}
|
||||||
|
onClick={() => router.push(`${pathName}/${service.linkTo}`)}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className={styles.iconContainer}>{service.icon}</div>
|
||||||
|
<div className={styles.listDetails}>
|
||||||
|
<div>
|
||||||
|
<p>{service.title}</p>
|
||||||
|
{!service.isReleased && (
|
||||||
|
<div>
|
||||||
|
<p>Coming soon</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p>{service.detail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddServicesModal;
|
||||||
@@ -0,0 +1,159 @@
|
|||||||
|
.container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #00000037;
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 24px 24px 32px 24px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 48px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #21232f;
|
||||||
|
animation-name: dropDownAnimation;
|
||||||
|
animation-duration: 200ms;
|
||||||
|
}
|
||||||
|
@keyframes dropDownAnimation {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.header > svg {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
}
|
||||||
|
.header > div > p {
|
||||||
|
color: #d2d3e1;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.24px;
|
||||||
|
}
|
||||||
|
.header > div > div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
align-self: stretch;
|
||||||
|
color: #85869b;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.14px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
width: 545px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
align-self: stretch;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms;
|
||||||
|
}
|
||||||
|
.isComingSoon {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.isReleased:hover {
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #2e3242;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isReleased:hover .iconContainer {
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #959aff;
|
||||||
|
background: linear-gradient(180deg, #959aff 0%, #585b97 100%);
|
||||||
|
}
|
||||||
|
.list > div {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.iconContainer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 0.5px solid #959aff;
|
||||||
|
}
|
||||||
|
.listDetails {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.listDetails > p {
|
||||||
|
color: #85869b;
|
||||||
|
font-size: 13px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.14px;
|
||||||
|
}
|
||||||
|
.listDetails > div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.listDetails > div > p {
|
||||||
|
color: #d2d3e1;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.18px;
|
||||||
|
}
|
||||||
|
.listDetails > div > div {
|
||||||
|
display: flex;
|
||||||
|
padding: 4px 8px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
gap: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #3c4a87;
|
||||||
|
}
|
||||||
|
.listDetails > div > div > p {
|
||||||
|
color: #d2d3e1;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.14px;
|
||||||
|
}
|
||||||
98
frontend/src/app/projects/view/add-from-scratch/page.jsx
Normal file
98
frontend/src/app/projects/view/add-from-scratch/page.jsx
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
import React from "react";
|
||||||
|
import globalStyle from "@/app/globalStyle.module.css";
|
||||||
|
import TopHeader from "@/app/components/topHeader/TopHeader";
|
||||||
|
import styles from "./styles.module.css";
|
||||||
|
const AddServices = () => {
|
||||||
|
return (
|
||||||
|
<div className={globalStyle.section}>
|
||||||
|
<div className={globalStyle.mainContainer}>
|
||||||
|
<div className={globalStyle.container}>
|
||||||
|
<TopHeader
|
||||||
|
buttonText="Save"
|
||||||
|
cancelButtonText="Cancel"
|
||||||
|
state="add"
|
||||||
|
topbarTitle="Create New Services"
|
||||||
|
/>
|
||||||
|
<div className={styles.contentContainer}>
|
||||||
|
<div className={styles.fieldsContainerCreateNew}>
|
||||||
|
<div className={styles.projectDetails}>
|
||||||
|
<div className={styles.projectDetailsHeader}>
|
||||||
|
<p>Project Details</p>
|
||||||
|
</div>
|
||||||
|
<div className={styles.fieldsCreateNew}>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
Repository <span>(Optional)</span>
|
||||||
|
</p>
|
||||||
|
<label className={styles.repositoryForm} htmlFor="#repo">
|
||||||
|
+ Link Repository
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<p>Name</p>
|
||||||
|
<input type="text" placeholder="Enter service name" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Version</p>
|
||||||
|
<input type="text" placeholder="Service version" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
Image <span>(Optional)</span>
|
||||||
|
</p>
|
||||||
|
<input type="text" placeholder="Enter image name" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<p>Port</p>
|
||||||
|
<input type="text" placeholder="Enter port" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<p>Ingress</p>
|
||||||
|
<select name="" id="">
|
||||||
|
<option value="">Select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Ingress</p>
|
||||||
|
<select name="" id="">
|
||||||
|
<option value="">Select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.resource}></div>
|
||||||
|
<div className={styles.additionalDetails}>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div className={styles.header}>
|
||||||
|
<p>Auto Scaling</p>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.variables}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddServices;
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
.contentContainer {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex: 1 0 0;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.fieldsContainerCreateNew {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 36px;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 36px;
|
||||||
|
background: #191a24;
|
||||||
|
height: calc(100vh - 175px);
|
||||||
|
overflow-y: scroll;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.projectDetails {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 36px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.projectDetailsHeader {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 17px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.projectDetailsHeader p {
|
||||||
|
color: #d2d3e1;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
.fieldsCreateNew {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.fieldsCreateNew > div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.fieldsCreateNew > div:nth-child(1) {
|
||||||
|
display: flex;
|
||||||
|
padding: 16px 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.fieldsCreateNew > div > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
}
|
||||||
|
.fieldsCreateNew > div > div p {
|
||||||
|
color: #d2d3e1;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.16px;
|
||||||
|
}
|
||||||
|
.fieldsCreateNew > div > div p > span {
|
||||||
|
color: #85869b;
|
||||||
|
}
|
||||||
|
.fieldsCreateNew > div > div input,
|
||||||
|
.fieldsCreateNew > div > div select {
|
||||||
|
display: flex;
|
||||||
|
padding: 12px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
align-self: stretch;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #4b4f6d;
|
||||||
|
background-color: transparent;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.16px;
|
||||||
|
}
|
||||||
|
.fieldsCreateNew > div > div input::placeholder {
|
||||||
|
color: #85869b;
|
||||||
|
}
|
||||||
|
.repositoryForm {
|
||||||
|
display: flex;
|
||||||
|
padding: 12px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
align-self: stretch;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px dashed #5980f1;
|
||||||
|
color: #5980f1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.16px;
|
||||||
|
}
|
||||||
@@ -1,8 +1,11 @@
|
|||||||
import React from "react";
|
"use client";
|
||||||
|
import React, { useState } from "react";
|
||||||
import globalStyle from "../../globalStyle.module.css";
|
import globalStyle from "../../globalStyle.module.css";
|
||||||
import TopHeader from "@/app/components/topHeader/TopHeader";
|
import TopHeader from "@/app/components/topHeader/TopHeader";
|
||||||
import styles from "./styles.module.css";
|
import styles from "./styles.module.css";
|
||||||
|
import AddServicesModal from "./AddServicesModal/AddServicesModal";
|
||||||
const AddProject = () => {
|
const AddProject = () => {
|
||||||
|
const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
|
||||||
const sampleData = [
|
const sampleData = [
|
||||||
{
|
{
|
||||||
name: "accounting-service",
|
name: "accounting-service",
|
||||||
@@ -52,257 +55,347 @@ const AddProject = () => {
|
|||||||
ingress: "",
|
ingress: "",
|
||||||
ports: "3000:3000, 50054:50054",
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 (
|
return (
|
||||||
<div className={globalStyle.section}>
|
<>
|
||||||
<div className={globalStyle.mainContainer}>
|
{triggerAddServicesModal && (
|
||||||
<div className={globalStyle.container}>
|
<AddServicesModal
|
||||||
<TopHeader
|
trigger={setTriggerAddServicesModal}
|
||||||
buttonText="Add Services"
|
triggerState={triggerAddServicesModal}
|
||||||
cancelButtonText="Cancel"
|
/>
|
||||||
state="view"
|
)}
|
||||||
topbarTitle="Services"
|
<div className={globalStyle.section}>
|
||||||
/>
|
<div className={globalStyle.mainContainer}>
|
||||||
<div className={styles.tableContainer}>
|
<div className={globalStyle.container}>
|
||||||
<table className={styles.table}>
|
<TopHeader
|
||||||
<thead>
|
buttonText="Add Services"
|
||||||
<tr>
|
cancelButtonText="Cancel"
|
||||||
<th>Name</th>
|
state="view"
|
||||||
<th>Version</th>
|
topbarTitle="Services"
|
||||||
<th>Health</th>
|
trigger={setTriggerAddServicesModal}
|
||||||
<th>Status</th>
|
triggerState={triggerAddServicesModal}
|
||||||
<th width="15%">Image</th>
|
/>
|
||||||
<th>Ingress</th>
|
<div className={styles.tableContainer}>
|
||||||
<th>Port</th>
|
<table className={styles.table}>
|
||||||
<th>Actions</th>
|
<thead>
|
||||||
</tr>
|
<tr>
|
||||||
</thead>
|
<th>Name</th>
|
||||||
<tbody>
|
<th>Version</th>
|
||||||
{sampleData.map((services, index) => {
|
<th>Health</th>
|
||||||
return (
|
<th>Status</th>
|
||||||
<tr key={index}>
|
<th width="15%">Image</th>
|
||||||
<td>{services.name}</td>
|
<th>Ingress</th>
|
||||||
<td style={{ textAlign: "center" }}>
|
<th>Port</th>
|
||||||
{services.version}
|
<th>Actions</th>
|
||||||
</td>
|
</tr>
|
||||||
<td>
|
</thead>
|
||||||
<div className={styles.servicesHealth}>
|
<tbody>
|
||||||
<div>
|
{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
|
<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={{ fill: "#4A9D41", fillOpacity: 1 }}
|
||||||
</svg>
|
/>
|
||||||
<p>Overall</p>
|
</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={{ fill: "#CAB111", fillOpacity: 1 }}
|
||||||
</svg>
|
/>
|
||||||
<p>Liveness</p>
|
</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={{ fill: "#757696", fillOpacity: 1 }}
|
||||||
</svg>
|
/>
|
||||||
<p>Readiness</p>
|
</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={{ fill: "#82EEFF", fillOpacity: 1 }}
|
||||||
</svg>
|
/>
|
||||||
<p>Deployment</p>
|
</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>{services.image}</td>
|
||||||
<td>{services.image}</td>
|
<td>{services.ingress}</td>
|
||||||
<td>{services.ingress}</td>
|
<td>{services.ports}</td>
|
||||||
<td>{services.ports}</td>
|
<td>
|
||||||
<td>
|
<div className={styles.actions}>
|
||||||
<div className={styles.actions}>
|
<div>
|
||||||
<div>
|
<button className={styles.iconButton}>
|
||||||
<button className={styles.iconButton}>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
width={20}
|
||||||
width={20}
|
height={20}
|
||||||
height={20}
|
viewBox="0 0 20 20"
|
||||||
viewBox="0 0 20 20"
|
fill="none"
|
||||||
fill="none"
|
>
|
||||||
>
|
<path
|
||||||
<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"
|
||||||
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="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"
|
||||||
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"
|
/>
|
||||||
/>
|
</svg>
|
||||||
</svg>
|
</button>
|
||||||
</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>
|
</div>
|
||||||
<div>
|
</td>
|
||||||
<button className={styles.iconButton}>
|
</tr>
|
||||||
<svg
|
);
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
})}
|
||||||
width={20}
|
</tbody>
|
||||||
height={20}
|
</table>
|
||||||
viewBox="0 0 20 20"
|
</div>
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user