From aeff7c6ff0e1fee3625cffa920e9ce2f90902d97 Mon Sep 17 00:00:00 2001
From: Archben <devops@tben.me>
Date: Tue, 10 Mar 2026 13:42:50 +0000
Subject: [PATCH] Updates

---
 .../cluster-server-log-selector.tsx           | 88 ++++++++++++-------
 .../service/(partials)/cluster-server.tsx     | 24 +++--
 .../services/service/(partials)/cluster.tsx   | 17 +++-
 .../services/service/(sections)/clusters.tsx  | 68 ++++++++------
 src/styles/globals.css                        |  7 +-
 5 files changed, 137 insertions(+), 67 deletions(-)

diff --git a/src/components/pages/admin/services/service/(partials)/cluster-server-log-selector.tsx b/src/components/pages/admin/services/service/(partials)/cluster-server-log-selector.tsx
index 5df04cf..300051f 100644
--- a/src/components/pages/admin/services/service/(partials)/cluster-server-log-selector.tsx
+++ b/src/components/pages/admin/services/service/(partials)/cluster-server-log-selector.tsx
@@ -13,8 +13,13 @@ import {
     ParsedDeploymentServiceConfig,
 } from "@/src/types";
 import Select, { TWUISelectOptionObject } from "@/twui/components/form/Select";
-import Input from "@/twui/components/form/Input";
 import AceEditor from "@/twui/components/editors/AceEditor";
+import Row from "@/twui/components/layout/Row";
+import Button from "@/twui/components/layout/Button";
+import Modal from "@/twui/components/elements/Modal";
+import H3 from "@/twui/components/layout/H3";
+import Span from "@/twui/components/layout/Span";
+import useStatus from "@/twui/components/hooks/useStatus";
 
 type Props = {
     service: ParsedDeploymentServiceConfig;
@@ -36,42 +41,63 @@ export default function ServiceClusterServerLogSelector({
     const [log, setLog] = useState(log_strings?.[0]);
     const [isCustomLog, setIsCustomLog] = useState(false);
 
+    const { open, setOpen } = useStatus();
+
     const customLogRef = useRef("");
 
-    useEffect(() => {
-        externalSetLog(log);
-    }, [log]);
 
     return (
-        <Stack className="w-full gap-2">
-            <Select
-                options={[
-                    ...(log_strings?.map(
-                        (l) =>
-                            ({ value: l, title: l }) as TWUISelectOptionObject,
-                    ) || []),
-                    {
-                        value: "custom",
-                        title: "--Custom--",
-                    },
-                ]}
-                changeHandler={(v) => {
-                    if (v == "custom") {
-                        setIsCustomLog(true);
-                    } else {
-                        setIsCustomLog(false);
-                        setLog(v);
-                    }
-                }}
-            />
-            {isCustomLog ? (
-                <AceEditor
-                    placeholder="Enter custom command"
-                    onChange={(v) => {
-                        customLogRef.current = v;
+        <Stack className="w-full gap-2 p-4">
+            <Row className="flex-nowrap">
+                <Select
+                    options={[
+                        ...(log_strings?.map(
+                            (l) =>
+                                ({
+                                    value: l,
+                                    title: l,
+                                }) as TWUISelectOptionObject,
+                        ) || []),
+                    ]}
+                    changeHandler={(v) => {
+                        if (v == "custom") {
+                            setIsCustomLog(true);
+                        } else {
+                            setIsCustomLog(false);
+                            setLog(v);
+                        }
                     }}
                 />
-            ) : null}
+                <Modal
+                    target={
+                        <Button title="Enter custom command" size="small">
+                            Custom
+                        </Button>
+                    }
+                    setOpen={setOpen}
+                    open={open}
+                >
+                    <Stack>
+                        <Stack className="gap-1">
+                            <H3 className="admin-h3">Enter a custom Command</H3>
+                            <Span variant="faded">
+                                Enter a command to run a custom log
+                            </Span>
+                        </Stack>
+                        <AceEditor
+                            placeholder="Enter custom command"
+                            onChange={(v) => {
+                                customLogRef.current = v;
+                            }}
+                        />
+                        <Button title="Set Custom Command" onClick={()=>{
+
+                        }}>
+                            Set Custom Command
+                        </Button>
+                    </Stack>
+                </Modal>
+            </Row>
         </Stack>
     );
 }
diff --git a/src/components/pages/admin/services/service/(partials)/cluster-server.tsx b/src/components/pages/admin/services/service/(partials)/cluster-server.tsx
index 4c6ff95..dfc1439 100644
--- a/src/components/pages/admin/services/service/(partials)/cluster-server.tsx
+++ b/src/components/pages/admin/services/service/(partials)/cluster-server.tsx
@@ -1,5 +1,5 @@
 import Stack from "@/twui/components/layout/Stack";
-import { useContext, useRef, useState } from "react";
+import { ComponentProps, useContext, useRef, useState } from "react";
 import { AppContext } from "@/src/pages/_app";
 import {
     NormalizedServerObject,
@@ -13,13 +13,19 @@ import ServiceClusterServerViews from "./cluster-server-views";
 import Row from "@/twui/components/layout/Row";
 import Button from "@/twui/components/layout/Button";
 import ServiceClusterServerLogSelector from "./cluster-server-log-selector";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
     service: ParsedDeploymentServiceConfig;
     server: NormalizedServerObject;
+    wrapperProps?: ComponentProps<typeof Stack>;
 };
 
-export default function ServiceClusterServer({ service, server }: Props) {
+export default function ServiceClusterServer({
+    service,
+    server,
+    wrapperProps,
+}: Props) {
     const { pageProps } = useContext(AppContext);
 
     const elementRef = useRef<HTMLDivElement>(undefined);
@@ -31,12 +37,16 @@ export default function ServiceClusterServer({ service, server }: Props) {
     const [log, setLog] = useState<string>();
 
     return (
-        <Stack className="gap-0">
-            <Row className="w-full justify-between">
-                {/* <Row>
-                    <code>{server.private_ip}</code>
-                </Row> */}
+        <Stack
+            {...wrapperProps}
+            className={twMerge("gap-0", wrapperProps?.className)}
+        >
+            <Row className="w-full justify-between p-4 -mb-6">
                 <Row>
+                    <code>{server.private_ip}</code>
+                </Row>
+
+                <Row className="">
                     {ServerTerminalTargets.map((targ, index) => {
                         const is_active = targ.name == target;
 
diff --git a/src/components/pages/admin/services/service/(partials)/cluster.tsx b/src/components/pages/admin/services/service/(partials)/cluster.tsx
index 8e129a9..9949770 100644
--- a/src/components/pages/admin/services/service/(partials)/cluster.tsx
+++ b/src/components/pages/admin/services/service/(partials)/cluster.tsx
@@ -25,7 +25,20 @@ export default function ServiceCluster({ service }: Props) {
 
     return (
         <Stack className="w-full grid-cell col-span-1 gap-0">
-            <Row className="p-4">
+            <Row className="nested-grid-frame xl:grid-cols-2">
+                {cluster_servers?.map((server, index) => {
+                    return (
+                        <ServiceClusterServer
+                            server={server}
+                            service={service}
+                            key={index}
+                            wrapperProps={{ className: "grid-cell" }}
+                        />
+                    );
+                })}
+            </Row>
+
+            {/* <Row className="p-4">
                 {cluster_servers?.map((server, index) => {
                     const is_active =
                         server?.private_ip == targetServer?.private_ip;
@@ -55,7 +68,7 @@ export default function ServiceCluster({ service }: Props) {
 
             {targetServer ? (
                 <ServiceClusterServer server={targetServer} service={service} />
-            ) : undefined}
+            ) : undefined} */}
         </Stack>
     );
 }
diff --git a/src/components/pages/admin/services/service/(sections)/clusters.tsx b/src/components/pages/admin/services/service/(sections)/clusters.tsx
index 21081a2..03cdde3 100644
--- a/src/components/pages/admin/services/service/(sections)/clusters.tsx
+++ b/src/components/pages/admin/services/service/(sections)/clusters.tsx
@@ -11,6 +11,7 @@ import Row from "@/twui/components/layout/Row";
 import { twMerge } from "tailwind-merge";
 import Select from "@/twui/components/form/Select";
 import ServiceClusterServer from "../(partials)/cluster-server";
+import H2 from "@/twui/components/layout/H2";
 
 export default function ServiceClusters() {
     const { pageProps } = useContext(AppContext);
@@ -36,24 +37,32 @@ export default function ServiceClusters() {
         <Stack className="w-full nested-grid-frame grid-cols-1">
             <Stack className="grid-cell gap-0">
                 <Row className="p-4 flex-nowrap">
-                    <Select
-                        options={all_services.map((srv) => ({
-                            value: srv?.service_name!,
-                            title: `Cluster #${clusterIndex}`,
-                        }))}
-                        wrapperWrapperProps={{
-                            className: `max-w-[250px]`,
-                        }}
-                        changeHandler={(v) => {
-                            setTargetCluster(
-                                all_services.find(
-                                    (s) => s?.service_name == v,
-                                ) || undefined,
-                            );
-                        }}
-                    />
+                    <Row className="w-full justify-between">
+                        <Row>
+                            <H2>Cluster #{clusterIndex}</H2>
+                        </Row>
+                        <Row>
+                            <Select
+                                options={all_services.map((srv) => ({
+                                    value: srv?.service_name!,
+                                    title: `Cluster #${clusterIndex}`,
+                                }))}
+                                wrapperWrapperProps={{
+                                    className: `max-w-[250px]`,
+                                }}
+                                changeHandler={(v) => {
+                                    setTargetCluster(undefined);
+                                    setTimeout(() => {
+                                        setTargetCluster(
+                                            all_services.find(
+                                                (s) => s?.service_name == v,
+                                            ) || undefined,
+                                        );
+                                    }, 200);
+                                }}
+                            />
 
-                    {cluster_servers?.[0] ? (
+                            {/* {cluster_servers?.[0] ? (
                         <Select
                             options={cluster_servers.map((server) => ({
                                 value: server?.private_ip!,
@@ -63,15 +72,18 @@ export default function ServiceClusters() {
                                 className: `max-w-[250px]`,
                             }}
                             changeHandler={(v) => {
-                                setTargetServer(
-                                    cluster_servers.find(
-                                        (s) => s?.private_ip == v,
-                                    ) || undefined,
-                                );
+                                setTargetServer(undefined);
+                                setTimeout(() => {
+                                    setTargetServer(
+                                        cluster_servers.find(
+                                            (s) => s?.private_ip == v,
+                                        ) || undefined,
+                                    );
+                                }, 200);
                             }}
                         />
-                    ) : undefined}
-                    {/* {all_services.map((srv, index) => {
+                    ) : undefined} */}
+                            {/* {all_services.map((srv, index) => {
                         const is_active =
                             srv?.service_name == targetCluster?.service_name;
                         if (!srv) return null;
@@ -93,17 +105,21 @@ export default function ServiceClusters() {
                             </Button>
                         );
                     })} */}
+                        </Row>
+                    </Row>
                 </Row>
                 <hr />
+
                 {targetCluster ? (
                     <ServiceCluster service={targetCluster} />
                 ) : undefined}
-                {targetServer && service ? (
+
+                {/* {targetCluster && targetServer && service ? (
                     <ServiceClusterServer
                         server={targetServer}
                         service={service}
                     />
-                ) : undefined}
+                ) : undefined} */}
             </Stack>
         </Stack>
     );
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 88037c6..6cf646c 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -12,7 +12,7 @@
 
     --color-dark: #000000;
 
-    --color-primary: #3ecf8e;
+    --color-primary: #76e4ad;
     --color-primary-hover: #3ecf8e;
     --color-primary-outline: #3ecf8e;
     --color-primary-text: #000000;
@@ -120,6 +120,11 @@ code {
     @apply text-xl font-semibold;
 }
 
+#admin-main h3,
+.admin-h3 {
+    @apply text-lg font-semibold;
+}
+
 hr {
     @apply border-foreground-light/10 dark:border-foreground-dark/10;
 }