Updates

src/components/pages/admin/index.tsx

@@ -1,10 +1,11 @@
 import Stack from "@/twui/components/layout/Stack";
 import AdminSummary from "./(sections)/summary";
 import AdminHero from "../../general/admin/hero";
-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 DeploymentServices from "./services/(sections)/services";
 
 export default function Main() {
     const { pageProps } = useContext(AppContext);
@@ -13,7 +14,7 @@ export default function Main() {
     const deployment_name = deployment?.deployment_name;
 
     return (
-        <Stack>
+        <Fragment>
             <AdminHero
                 title={`${twuiSlugToNormalText(deployment_name)} Deplyoment Dashboard`}
                 description={
@@ -27,6 +28,8 @@ export default function Main() {
             />
             <Divider />
             <AdminSummary />
-        </Stack>
+            <Divider />
+            <DeploymentServices />
+        </Fragment>
     );
 }

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

@@ -3,12 +3,14 @@ import { useContext } from "react";
 import { AppContext } from "@/src/pages/_app";
 import { ParsedDeploymentServiceConfig } from "@/src/types";
 import Row from "@/twui/components/layout/Row";
+import H2 from "@/twui/components/layout/H2";
 
 type Props = {
     service: ParsedDeploymentServiceConfig;
+    cluster_index: number;
 };
 
-export default function ServiceCluster({ service }: Props) {
+export default function ServiceCluster({ service, cluster_index }: Props) {
     const { pageProps } = useContext(AppContext);
     const { deployment, children_services } = pageProps;
 
@@ -21,11 +23,14 @@ export default function ServiceCluster({ service }: Props) {
 
     return (
         <Stack className="w-full grid-cell col-span-1">
-            <Row className="grid-cell-content">
+            <Stack className="grid-cell-content">
-                {cluster_servers?.map((server, index) => {
+                <H2>Cluster #{cluster_index}</H2>
-                    return <code>{server.private_ip}</code>;
+                <Row className="">
-                })}
+                    {cluster_servers?.map((server, index) => {
-            </Row>
+                        return <code>{server.private_ip}</code>;
+                    })}
+                </Row>
+            </Stack>
         </Stack>
     );
 }

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

@@ -13,7 +13,13 @@ export default function ServiceClusters() {
         <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} />;
+                return (
+                    <ServiceCluster
+                        key={index}
+                        service={srv}
+                        cluster_index={index + 1}
+                    />
+                );
             })}
         </Stack>
     );

src/layouts/admin/index.tsx

@@ -10,7 +10,10 @@ type Props = PropsWithChildren & {};
 
 export default function Layout({ children }: Props) {
     return (
-        <Main className="w-screen h-screen overflow-hidden p-4 lg:p-10">
+        <Main
+            className="w-screen h-screen overflow-hidden p-4 lg:p-10"
+            id="admin-main"
+        >
             <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 gap-0">

src/styles/globals.css

@@ -95,10 +95,6 @@
     @apply font-semibold;
 }
 
-.admin-h1 {
-    @apply text-3xl;
-}
-
 code {
     @apply bg-slate-100 dark:bg-white/10 px-3 py-1 rounded-default;
     @apply my-1;
@@ -111,3 +107,11 @@ code {
 .twui-breadcrumbs-divider {
     @apply rotate-12;
 }
+
+#admin-main h1 {
+    @apply text-3xl font-semibold;
+}
+
+#admin-main h2 {
+    @apply text-xl font-semibold;
+}