72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import Stack from "@/twui/components/layout/Stack";
|
|
import { useContext, useState } from "react";
|
|
import { AppContext } from "@/src/pages/_app";
|
|
import {
|
|
NormalizedServerObject,
|
|
ParsedDeploymentServiceConfig,
|
|
} from "@/src/types";
|
|
import Row from "@/twui/components/layout/Row";
|
|
import ServiceClusterServer from "./cluster-server";
|
|
|
|
type Props = {
|
|
service: ParsedDeploymentServiceConfig;
|
|
};
|
|
|
|
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">
|
|
<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;
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
}
|