Updates
This commit is contained in:
parent
29a8b17c61
commit
2363f9dc1f
@ -31,12 +31,11 @@ export default function ServiceClusterServer({ service, server }: Props) {
|
||||
const [log, setLog] = useState<string>();
|
||||
|
||||
return (
|
||||
<Stack className="grid-cell gap-0" componentRef={elementRef as any}>
|
||||
<Stack className="grid-cell-content">
|
||||
<Stack className="gap-0">
|
||||
<Row className="w-full justify-between">
|
||||
<Row>
|
||||
{/* <Row>
|
||||
<code>{server.private_ip}</code>
|
||||
</Row>
|
||||
</Row> */}
|
||||
<Row>
|
||||
{ServerTerminalTargets.map((targ, index) => {
|
||||
const is_active = targ.name == target;
|
||||
@ -50,6 +49,7 @@ export default function ServiceClusterServer({ service, server }: Props) {
|
||||
size="smaller"
|
||||
color="gray"
|
||||
variant={is_active ? undefined : "outlined"}
|
||||
key={index}
|
||||
>
|
||||
{targ.name}
|
||||
</Button>
|
||||
@ -57,12 +57,10 @@ export default function ServiceClusterServer({ service, server }: Props) {
|
||||
})}
|
||||
</Row>
|
||||
</Row>
|
||||
<ServiceClusterServerLogSelector
|
||||
{...{ server, service, setLog }}
|
||||
/>
|
||||
</Stack>
|
||||
<ServiceClusterServerLogSelector {...{ server, service, setLog }} />
|
||||
<hr />
|
||||
{isIntersecting ? (
|
||||
<ServiceClusterServerViews {...{ server, service, target, log }} />
|
||||
{/* {isIntersecting ? (
|
||||
<ServiceClusterServerViews
|
||||
{...{ server, service, target, log }}
|
||||
/>
|
||||
@ -70,7 +68,7 @@ export default function ServiceClusterServer({ service, server }: Props) {
|
||||
<Center>
|
||||
<Loading />
|
||||
</Center>
|
||||
)}
|
||||
)} */}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,37 +1,61 @@
|
||||
import Stack from "@/twui/components/layout/Stack";
|
||||
import { useContext } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import { AppContext } from "@/src/pages/_app";
|
||||
import { ParsedDeploymentServiceConfig } from "@/src/types";
|
||||
import {
|
||||
NormalizedServerObject,
|
||||
ParsedDeploymentServiceConfig,
|
||||
} from "@/src/types";
|
||||
import Row from "@/twui/components/layout/Row";
|
||||
import H2 from "@/twui/components/layout/H2";
|
||||
import ServiceClusterServer from "./cluster-server";
|
||||
import Button from "@/twui/components/layout/Button";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
type Props = {
|
||||
service: ParsedDeploymentServiceConfig;
|
||||
cluster_index: number;
|
||||
};
|
||||
|
||||
export default function ServiceCluster({ service, cluster_index }: Props) {
|
||||
export default function ServiceCluster({ service }: Props) {
|
||||
const { pageProps } = useContext(AppContext);
|
||||
const cluster_servers = service.servers;
|
||||
|
||||
const [targetServer, setTargetServer] = useState<
|
||||
NormalizedServerObject | undefined
|
||||
>(cluster_servers?.[0]);
|
||||
|
||||
return (
|
||||
<Stack className="w-full grid-cell col-span-1 gap-0">
|
||||
<Stack className="grid-cell-content">
|
||||
<H2>Cluster #{cluster_index}</H2>
|
||||
</Stack>
|
||||
<hr />
|
||||
<Row className="nested-grid-frame xl:grid-cols-2">
|
||||
<Row className="p-4">
|
||||
{cluster_servers?.map((server, index) => {
|
||||
const is_active =
|
||||
server?.private_ip == targetServer?.private_ip;
|
||||
|
||||
return (
|
||||
<ServiceClusterServer
|
||||
server={server}
|
||||
service={service}
|
||||
<Button
|
||||
title={`Cluster ${index + 1}`}
|
||||
key={index}
|
||||
/>
|
||||
color="gray"
|
||||
variant={is_active ? undefined : "outlined"}
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setTargetServer(server);
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={twMerge(
|
||||
is_active ? "font-semibold" : "",
|
||||
)}
|
||||
>
|
||||
{server.private_ip}
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
|
||||
{targetServer ? (
|
||||
<ServiceClusterServer server={targetServer} service={service} />
|
||||
) : undefined}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
import Stack from "@/twui/components/layout/Stack";
|
||||
import { useContext } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import { AppContext } from "@/src/pages/_app";
|
||||
import ServiceCluster from "../(partials)/cluster";
|
||||
import {
|
||||
NormalizedServerObject,
|
||||
ParsedDeploymentServiceConfig,
|
||||
} from "@/src/types";
|
||||
import Button from "@/twui/components/layout/Button";
|
||||
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";
|
||||
|
||||
export default function ServiceClusters() {
|
||||
const { pageProps } = useContext(AppContext);
|
||||
@ -9,18 +18,93 @@ export default function ServiceClusters() {
|
||||
|
||||
const all_services = [service, ...(children_services || [])];
|
||||
|
||||
const [targetCluster, setTargetCluster] = useState<
|
||||
ParsedDeploymentServiceConfig | undefined
|
||||
>(service || undefined);
|
||||
const clusterIndex =
|
||||
all_services.findIndex(
|
||||
(srv) => srv?.service_name == targetCluster?.service_name,
|
||||
) + 1;
|
||||
|
||||
const cluster_servers = targetCluster?.servers;
|
||||
|
||||
const [targetServer, setTargetServer] = useState<
|
||||
NormalizedServerObject | undefined
|
||||
>(cluster_servers?.[0]);
|
||||
|
||||
return (
|
||||
<Stack className="w-full nested-grid-frame grid-cols-1">
|
||||
{all_services.map((srv, index) => {
|
||||
<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,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
{cluster_servers?.[0] ? (
|
||||
<Select
|
||||
options={cluster_servers.map((server) => ({
|
||||
value: server?.private_ip!,
|
||||
title: `${server?.private_ip}`,
|
||||
}))}
|
||||
wrapperWrapperProps={{
|
||||
className: `max-w-[250px]`,
|
||||
}}
|
||||
changeHandler={(v) => {
|
||||
setTargetServer(
|
||||
cluster_servers.find(
|
||||
(s) => s?.private_ip == v,
|
||||
) || undefined,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : undefined}
|
||||
{/* {all_services.map((srv, index) => {
|
||||
const is_active =
|
||||
srv?.service_name == targetCluster?.service_name;
|
||||
if (!srv) return null;
|
||||
return (
|
||||
<ServiceCluster
|
||||
<Button
|
||||
title={`Cluster ${index + 1}`}
|
||||
key={index}
|
||||
service={srv}
|
||||
cluster_index={index + 1}
|
||||
/>
|
||||
color="gray"
|
||||
variant={is_active ? undefined : "outlined"}
|
||||
size="small"
|
||||
>
|
||||
<span
|
||||
className={twMerge(
|
||||
is_active ? "font-semibold" : "",
|
||||
)}
|
||||
>
|
||||
Cluster {index + 1}
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
})} */}
|
||||
</Row>
|
||||
<hr />
|
||||
{targetCluster ? (
|
||||
<ServiceCluster service={targetCluster} />
|
||||
) : undefined}
|
||||
{targetServer && service ? (
|
||||
<ServiceClusterServer
|
||||
server={targetServer}
|
||||
service={service}
|
||||
/>
|
||||
) : undefined}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import Stack from "@/twui/components/layout/Stack";
|
||||
import { Fragment, useContext } from "react";
|
||||
import { AppContext } from "@/src/pages/_app";
|
||||
import twuiSlugToNormalText from "@/twui/components/utils/slug-to-normal-text";
|
||||
|
||||
@ -76,6 +76,10 @@
|
||||
@apply text-primary-text;
|
||||
}
|
||||
|
||||
.twui-button-primary * {
|
||||
@apply text-primary-text;
|
||||
}
|
||||
|
||||
.twui-h1,
|
||||
.twui-h2,
|
||||
.twui-h3 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user