diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx index 8ec2b62..8b5097c 100644 --- a/frontend/src/app/agents/page.jsx +++ b/frontend/src/app/agents/page.jsx @@ -119,72 +119,74 @@ const AgentsPage = () => { {org.proxyName} {org.dateCreated} - -
- -
-
- + +
+
+ +
+
+ +
diff --git a/frontend/src/app/agents/styles.module.css b/frontend/src/app/agents/styles.module.css index bbad366..05cab2d 100644 --- a/frontend/src/app/agents/styles.module.css +++ b/frontend/src/app/agents/styles.module.css @@ -10,8 +10,13 @@ .tableContainer { height: calc(100vh - 170px); overflow-y: auto; + position: relative; +} +.tableContainer th { + background-color: #1c1d2b; + top: 0; + position: sticky; } - .tableContainer > table > thead > tr > th, .tableContainer > table > tbody > tr > td { padding: 12px 24px; diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx index 7367589..24b63ae 100644 --- a/frontend/src/app/components/topHeader/TopHeader.jsx +++ b/frontend/src/app/components/topHeader/TopHeader.jsx @@ -1,9 +1,10 @@ "use client"; -import React from "react"; +import React, { useState } from "react"; import styles from "./styles.module.css"; import { usePathname, useRouter } from "next/navigation"; const TopHeader = (props) => { + const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false); const pathName = usePathname(); const router = useRouter(); const handleNavigateToAdd = () => { @@ -12,10 +13,46 @@ const TopHeader = (props) => { return (
+ {pathName.includes("/view") && ( +
router.back()}> + + + + + +
+ )}

{props.topbarTitle}

- {!props.state && ( + {(pathName === "/projects/view" || !props.state) && (
{ ) : ( "" )} - {!props.state && ( + {(pathName === "/projects/view" || !props.state) && (
{ ) : ( "" )} + {/* Projects 3 dots menu */} + {pathName.includes("/projects/view") && ( +
setTriggerDropDownMenu(!triggerDropDownMenu)} + > +
+ + + + + +
+ {triggerDropDownMenu && ( +
+
+
+ + + + + + +

Clone Project

+
+
+
+
+ + + +

Robots

+
+
+
+
+ + + +

Init Key

+
+
+
+
+ + + +

Manage Env. Key

+
+
+
+ )} +
+ )}
); diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css index 7f6b869..73c9e42 100644 --- a/frontend/src/app/components/topHeader/styles.module.css +++ b/frontend/src/app/components/topHeader/styles.module.css @@ -8,9 +8,18 @@ } .title { display: flex; - flex-direction: column; - align-items: flex-start; - gap: 8px; + align-items: center; + gap: 24px; +} +.title > div { + display: flex; + padding: 6px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 100px; + border: 0.5px solid #8187ff; + cursor: pointer; } .title > p { color: #d2d3e1; @@ -92,3 +101,85 @@ border: 1px solid #8e98e7; background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%); } +.menu { + display: flex; + width: 36px; + height: 36px; + gap: 10px; + flex-direction: column; + align-items: flex-end; + aspect-ratio: 1/1; + position: relative; +} +.dotMenu { + display: flex; + padding: 8px; + align-items: center; + gap: 12px; + border-radius: 6px; + border: 1px solid #8187ff; + cursor: pointer; +} + +.dotMenu:hover { + background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%); +} +.dotMenu:hover path { + stroke: white; +} +.dropDown { + display: flex; + width: 200px; + padding: 8px; + flex-direction: column; + align-items: flex-start; + gap: 6px; + z-index: 2; + border-radius: 6px; + background: #2d3144; + box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25); + animation-name: dropDownAnimation; + animation-duration: 200ms; +} +@keyframes dropDownAnimation { + 0% { + opacity: 0; + transform: translateY(-10%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.dropDown > div:hover { + border-radius: 4px; + background: #3c4159; + background: color(display-p3 0.2392 0.2549 0.3412); + color: white; +} +.dropDown > div:hover p { + color: white; +} +.dropDown > div:hover path { + stroke: white; +} +.dropDown > div { + display: flex; + padding: 6px; + align-items: center; + gap: 10px; + align-self: stretch; + border-radius: 4px; +} + +.dropDown > div > div { + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + color: #d2d3e1; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; +} diff --git a/frontend/src/app/credentials/styles.module.css b/frontend/src/app/credentials/styles.module.css index 349bf30..effa132 100644 --- a/frontend/src/app/credentials/styles.module.css +++ b/frontend/src/app/credentials/styles.module.css @@ -10,8 +10,14 @@ .tableContainer { height: calc(100vh - 170px); overflow-y: auto; + position: relative; } +.tableContainer th { + background: #1c1d2b; + top: 0; + position: sticky; +} .tableContainer > table > thead > tr > th, .tableContainer > table > tbody > tr > td { padding: 12px 24px; diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx index 0f3f9d9..97469ca 100644 --- a/frontend/src/app/organization/page.jsx +++ b/frontend/src/app/organization/page.jsx @@ -50,14 +50,6 @@ const OrganizationPage = () => { organizationName: "Project Moonshot Inc.", dateCreated: "2024-10-21 08:01:30.556 +0000 UTC", }, - { - organizationName: "Project Moonshot Inc.", - dateCreated: "2024-10-21 08:01:30.556 +0000 UTC", - }, - { - organizationName: "Project Moonshot Inc.", - dateCreated: "2024-10-21 08:01:30.556 +0000 UTC", - }, ]; return ( diff --git a/frontend/src/app/organization/styles.module.css b/frontend/src/app/organization/styles.module.css index 349bf30..3a0069c 100644 --- a/frontend/src/app/organization/styles.module.css +++ b/frontend/src/app/organization/styles.module.css @@ -10,8 +10,13 @@ .tableContainer { height: calc(100vh - 170px); overflow-y: auto; + position: relative; +} +.tableContainer th { + background: #1c1d2b; + top: 0; + position: sticky; } - .tableContainer > table > thead > tr > th, .tableContainer > table > tbody > tr > td { padding: 12px 24px; diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx index 9efe766..0fa31ec 100644 --- a/frontend/src/app/projects/page.jsx +++ b/frontend/src/app/projects/page.jsx @@ -1,8 +1,11 @@ +"use client"; import React from "react"; import TopHeader from "../components/topHeader/TopHeader"; import globalStyle from "../globalStyle.module.css"; import styles from "./styles.module.css"; +import { useRouter } from "next/navigation"; const ProjectsPage = () => { + const router = useRouter(); const sampleData = [ { name: "DOKS One Cooperative Bank Backend Develop", @@ -181,7 +184,10 @@ const ProjectsPage = () => { {sampleData.map((project, index) => { return ( - + router.push("/projects/view")} + > {project.name} {project.version} @@ -207,72 +213,74 @@ const ProjectsPage = () => { {project.dateCreated} - -
- -
-
- + +
+
+ +
+
+ +
diff --git a/frontend/src/app/projects/styles.module.css b/frontend/src/app/projects/styles.module.css index 2a23484..55253de 100644 --- a/frontend/src/app/projects/styles.module.css +++ b/frontend/src/app/projects/styles.module.css @@ -10,6 +10,12 @@ .tableContainer { height: calc(100vh - 170px); overflow-y: auto; + position: relative; +} +.tableContainer th { + background: #1c1d2b; + top: 0; + position: sticky; } .tableContainer > table > thead > tr > th { @@ -53,9 +59,8 @@ } .actions { display: flex; - justify-content: start; align-items: center; - gap: 12px; + gap: 10px; align-self: stretch; } .iconButton { diff --git a/frontend/src/app/projects/view/page.jsx b/frontend/src/app/projects/view/page.jsx new file mode 100644 index 0000000..a182c49 --- /dev/null +++ b/frontend/src/app/projects/view/page.jsx @@ -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 ( +
+
+
+ +
+ + + + + + + + + + + + + + + {sampleData.map((services, index) => { + return ( + + + + + + + + + + + ); + })} + +
NameVersionHealthStatusImageIngressPortActions
{services.name} + {services.version} + +
+
+
+ + + +

Overall

+
+

{services.health.overall}

+
+
+
+ + + +

Liveness

+
+

{services.health.liveness}

+
+ +
+
+ + + +

Readiness

+
+

{services.health.readiness}

+
+
+ 		+
+
+
+ + + +

Deployment

+
+

{services.status.deployment}

+
+ +
+
+ + + + + + + + +

Replicas

+
+

{services.status.replicas}

+
+
+ 		{services.image}{services.ingress}{services.ports} +
+
+ +
+
+ +
+
+
+
+
+
+
+ ); +}; + +export default AddProject; diff --git a/frontend/src/app/projects/view/styles.module.css b/frontend/src/app/projects/view/styles.module.css new file mode 100644 index 0000000..ab3a65a --- /dev/null +++ b/frontend/src/app/projects/view/styles.module.css @@ -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; +}