Moduletrace/turboci-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Benjamin Toby 2026-03-10 13:42:50 +00:00
parent 2363f9dc1f
commit aeff7c6ff0
5 changed files with 137 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/pages/admin/services/service/(partials)/cluster-server-log-selector.tsx
View File

@ -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>
);
}

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

@ -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;

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

@ -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>
);
}

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

@ -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>
);

7
src/styles/globals.css
View File

@ -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;
}