+
Name
diff --git a/frontend/src/app/projects/project-card/styles.module.css b/frontend/src/app/projects/project-card/styles.module.css
index 86042c7..978f817 100644
--- a/frontend/src/app/projects/project-card/styles.module.css
+++ b/frontend/src/app/projects/project-card/styles.module.css
@@ -5,6 +5,7 @@
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
+ cursor: pointer;
}
.cardDetails {
display: flex;
diff --git a/frontend/src/app/projects/view/page.jsx b/frontend/src/app/projects/view/page.jsx
index 5405c0c..c1ed4de 100644
--- a/frontend/src/app/projects/view/page.jsx
+++ b/frontend/src/app/projects/view/page.jsx
@@ -6,10 +6,13 @@ import styles from "./styles.module.css";
import AddServicesModal from "./AddServicesModal/AddServicesModal";
import { useRouter, usePathname } from "next/navigation";
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 [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
const router = useRouter();
-
+ const isMobile = useIsMobile();
const pathName = usePathname();
const sampleData = [
{
@@ -108,254 +111,279 @@ const AddProject = () => {
"services-drop-down",
]}
/>
-
-
-
-
- | Name |
- Version |
- Health |
- Status |
- Image |
- Ingress |
- Port |
- Actions |
-
-
-
- {sampleData.map((services, index) => {
- return (
-
- router.push(`${pathName}/${services.id}`)
- }
- >
- | {services.name} |
-
- {services.version}
- |
-
-
-
+ {isMobile ? (
+
+
+ {sampleData.map((data, key) => (
+ router.push(`${pathName}/${data.id}`)}
+ />
+ ))}
+
+ ) : (
+
+
+
+
+ | Name |
+ Version |
+ Health |
+ Status |
+ Image |
+ Ingress |
+ Port |
+ Actions |
+
+
+
+ {sampleData.map((services, index) => {
+ return (
+
+ router.push(`${pathName}/${services.id}`)
+ }
+ >
+ | {services.name} |
+
+ {services.version}
+ |
+
+
-
- Overall
+
+ {services.health.overall}
- {services.health.overall}
-
-
-
- Liveness
+
+ {services.health.liveness}
- {services.health.liveness}
-
-
-
- Readiness
+
+ {services.health.readiness}
- {services.health.readiness}
-
- |
-
- |
+
+
-
- Deployment
+
+ {services.status.deployment}
- {services.status.deployment}
-
-
-
- Replicas
+
+
+ Replicas
+
+ {services.status.replicas}
- {services.status.replicas}
-
- |
-
-
- {services.image}
- |
- {services.ingress} |
- {services.ports} |
-
-
+ |
+
-
-
+ {services.image}
+ |
+ {services.ingress} |
+ {services.ports} |
+
+
-
- |
-
- );
- })}
-
-
-
+ |
+
+ );
+ })}
+
+
+
+ )}
diff --git a/frontend/src/app/projects/view/service-card/Card.jsx b/frontend/src/app/projects/view/service-card/Card.jsx
new file mode 100644
index 0000000..50a2c72
--- /dev/null
+++ b/frontend/src/app/projects/view/service-card/Card.jsx
@@ -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 (
+
+
+
+
Name
+
{props?.data?.name}
+
+
+
Version
+
{props?.data?.version}
+
+
+
Health
+
+
+
+
{props?.data?.health?.overall}
+
+
+
+
{props?.data?.health?.liveness}
+
+
+
+
+
{props?.data?.health?.readiness}
+
+
+
+
+
Status
+
+
+
+
{props?.data?.status?.deployment}
+
+
+
+
+
+
Replicas
+
+
{props?.data?.status?.replicas}
+
+
+
+
+
Image
+
{props?.data?.image}
+
+
+
+
+
+
+ );
+};
+
+export default Card;
diff --git a/frontend/src/app/projects/view/service-card/styles.module.css b/frontend/src/app/projects/view/service-card/styles.module.css
new file mode 100644
index 0000000..976c19c
--- /dev/null
+++ b/frontend/src/app/projects/view/service-card/styles.module.css
@@ -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;
+}
diff --git a/frontend/src/app/projects/view/styles.module.css b/frontend/src/app/projects/view/styles.module.css
index 97d0388..db6bc8c 100644
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/frontend/src/app/projects/view/styles.module.css
@@ -59,8 +59,10 @@
.servicesStatus {
display: flex;
align-items: start;
+ text-wrap: nowrap;
gap: 4px;
width: 100%;
+ flex-wrap: wrap;
align-self: stretch;
}
.servicesHealth > div,
@@ -185,3 +187,14 @@
.imageText:hover > div {
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;
+}