Updates

src/components/general/admin/hero.tsx

@@ -1,8 +1,10 @@
+import { AppContext } from "@/src/pages/_app";
+import Breadcrumbs from "@/twui/components/elements/Breadcrumbs";
 import H1 from "@/twui/components/layout/H1";
 import Row from "@/twui/components/layout/Row";
 import Span from "@/twui/components/layout/Span";
 import Stack from "@/twui/components/layout/Stack";
-import { ReactNode } from "react";
+import { ReactNode, useContext } from "react";
 
 type Props = {
     title: string | ReactNode;
@@ -11,6 +13,10 @@ type Props = {
 };
 
 export default function AdminHero({ title, ctas, description }: Props) {
+    const { pageProps } = useContext(AppContext);
+
+    console.log("pageProps.pageUrl", pageProps.pageUrl);
+
     return (
         <Row className="w-full grid-cell-content justify-between">
             <Stack className="gap-2">
@@ -18,6 +24,10 @@ export default function AdminHero({ title, ctas, description }: Props) {
                 {description ? (
                     <Span variant="faded">{description}</Span>
                 ) : null}
+                <Breadcrumbs
+                    pageUrl={pageProps.pageUrl || undefined}
+                    skipHome
+                />
             </Stack>
             <Row>{ctas}</Row>
         </Row>

src/components/pages/admin/services/service/(partials)/cluster-server.tsx

@@ -0,0 +1,32 @@
+import Stack from "@/twui/components/layout/Stack";
+import { useContext } from "react";
+import { AppContext } from "@/src/pages/_app";
+import {
+    NormalizedServerObject,
+    ParsedDeploymentServiceConfig,
+} from "@/src/types";
+
+type Props = {
+    service: ParsedDeploymentServiceConfig;
+    server: NormalizedServerObject;
+};
+
+export default function ServiceClusterServer({ service, server }: Props) {
+    const { pageProps } = useContext(AppContext);
+    const { deployment, children_services } = pageProps;
+
+    const all_services = [service, ...(children_services || [])];
+
+    const deployment_name = deployment?.deployment_name;
+    const service_name = service?.service_name;
+
+    const cluster_servers = service.servers;
+
+    return (
+        <Stack className="w-full grid-cell col-span-1">
+            {cluster_servers?.map((server, index) => {
+                return null;
+            })}
+        </Stack>
+    );
+}

src/components/pages/admin/services/service/(partials)/cluster.tsx

@@ -0,0 +1,31 @@
+import Stack from "@/twui/components/layout/Stack";
+import { useContext } from "react";
+import { AppContext } from "@/src/pages/_app";
+import { ParsedDeploymentServiceConfig } from "@/src/types";
+import Row from "@/twui/components/layout/Row";
+
+type Props = {
+    service: ParsedDeploymentServiceConfig;
+};
+
+export default function ServiceCluster({ service }: Props) {
+    const { pageProps } = useContext(AppContext);
+    const { deployment, children_services } = pageProps;
+
+    const all_services = [service, ...(children_services || [])];
+
+    const deployment_name = deployment?.deployment_name;
+    const service_name = service?.service_name;
+
+    const cluster_servers = service.servers;
+
+    return (
+        <Stack className="w-full grid-cell col-span-1">
+            <Row className="grid-cell-content">
+                {cluster_servers?.map((server, index) => {
+                    return <code>{server.private_ip}</code>;
+                })}
+            </Row>
+        </Stack>
+    );
+}

src/components/pages/admin/services/service/(sections)/clusters.tsx

@@ -0,0 +1,20 @@
+import Stack from "@/twui/components/layout/Stack";
+import { useContext } from "react";
+import { AppContext } from "@/src/pages/_app";
+import ServiceCluster from "../(partials)/cluster";
+
+export default function ServiceClusters() {
+    const { pageProps } = useContext(AppContext);
+    const { service, deployment, children_services } = pageProps;
+
+    const all_services = [service, ...(children_services || [])];
+
+    return (
+        <Stack className="w-full nested-grid-frame grid-cols-1 xl:grid-cols-2">
+            {all_services.map((srv, index) => {
+                if (!srv) return null;
+                return <ServiceCluster key={index} service={srv} />;
+            })}
+        </Stack>
+    );
+}

src/components/pages/admin/services/service/index.tsx

@@ -1,9 +1,10 @@
 import Stack from "@/twui/components/layout/Stack";
-import { useContext } from "react";
+import { Fragment, useContext } from "react";
 import { AppContext } from "@/src/pages/_app";
 import twuiSlugToNormalText from "@/twui/components/utils/slug-to-normal-text";
 import Divider from "@/twui/components/layout/Divider";
 import AdminHero from "@/src/components/general/admin/hero";
+import ServiceClusters from "./(sections)/clusters";
 
 export default function Main() {
     const { pageProps } = useContext(AppContext);
@@ -13,7 +14,7 @@ export default function Main() {
     const service_name = service?.service_name;
 
     return (
-        <Stack>
+        <Fragment>
             <AdminHero
                 title={`${twuiSlugToNormalText(service_name)} Service`}
                 description={
@@ -25,6 +26,7 @@ export default function Main() {
                 }
             />
             <Divider />
-        </Stack>
+            <ServiceClusters />
+        </Fragment>
     );
 }

src/layouts/admin/index.tsx

@@ -13,7 +13,7 @@ export default function Layout({ children }: Props) {
         <Main className="w-screen h-screen overflow-hidden p-4 lg:p-10">
             <div className="grid-frame grid-cols-6 w-full h-full grid-rows-[64px_47px] xl:grid-rows-[64px_auto]">
                 <Header />
-                <Stack className="grid-cell col-span-6 xl:col-span-1">
+                <Stack className="grid-cell col-span-6 xl:col-span-1 gap-0">
                     <LinkList
                         links={AdminAsideLinks}
                         className="w-full xl:flex-col"
@@ -22,7 +22,7 @@ export default function Layout({ children }: Props) {
                         }}
                     />
                 </Stack>
-                <Stack className="grid-cell col-span-6 xl:col-span-5">
+                <Stack className="grid-cell col-span-6 xl:col-span-5 gap-0">
                     {children}
                 </Stack>
             </div>

src/styles/globals.css

@@ -42,14 +42,11 @@
 }
 
 .nested-grid-frame .grid-cell {
-    @apply relative z-2;
+    @apply relative z-2 h-full;
 }
 
-.grid-frame.nested-grid-frame .grid-cell {
+.grid-frame > .grid-cell,
-    @apply h-full;
+.nested-grid-frame .grid-cell {
-}
-
-.grid-frame > .grid-cell {
     @apply bg-background-light dark:bg-background-dark;
 }
 
@@ -105,3 +102,11 @@ code {
     @apply bg-slate-100 dark:bg-white/10 px-3 py-1 rounded-default;
     @apply my-1;
 }
+
+.twui-a {
+    @apply border-none;
+}
+
+.twui-breadcrumbs-divider {
+    @apply rotate-12;
+}

src/utils/parse-page-url.ts

@@ -9,13 +9,7 @@ export default function parsePageUrl(url?: string, admin?: boolean) {
               .split("/")
               .filter((item) => item !== "");
 
-    if (admin) {
+    const finalAdminUrl = "/" + finalAdminUrlArray?.join("/") || "";
-        finalAdminUrlArray?.splice(1, 1);
-    }
-
-    const finalAdminUrl = finalAdminUrlArray
-        ? "/" + finalAdminUrlArray?.join("/") || ""
-        : null;
 
     return finalAdminUrl;
 }