feat: add table to show nodes and add dropdown to add manager & workers

components/dashboard/settings/cluster/nodes/show-nodes.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { AddWorker } from "./workers/add-worker";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { Badge } from "@/components/ui/badge";
+import { DeleteWorker } from "./workers/delete-worker";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { MoreHorizontal, PlusIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ShowNodeData } from "./show-node-data";
+import { AddManager } from "./manager/add-manager";
+
+export const ShowNodes = () => {
+	const { data, isLoading } = api.cluster.getNodes.useQuery();
+	return (
+		<Card className="bg-transparent h-full">
+			<CardHeader className="flex flex-row gap-2 justify-between w-full items-center flex-wrap">
+				<div className="flex flex-col gap-2">
+					<CardTitle className="text-xl">Cluster</CardTitle>
+					<CardDescription>Add nodes to your cluster</CardDescription>
+				</div>
+				<div className="flex flex-row gap-2">
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost">
+								<PlusIcon className="h-4 w-4" />
+								Add
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuLabel>Actions</DropdownMenuLabel>
+							<AddWorker />
+							<AddManager />
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<div className="grid md:grid-cols-1 gap-4">
+					{isLoading && <div>Loading...</div>}
+					<Table>
+						<TableCaption>A list of your managers / workers.</TableCaption>
+						<TableHeader>
+							<TableRow>
+								<TableHead className="w-[100px]">Hostname</TableHead>
+								<TableHead className="text-right">Status</TableHead>
+								<TableHead className="text-right">Role</TableHead>
+								<TableHead className="text-right">Availability</TableHead>
+								<TableHead className="text-right">Engine Version</TableHead>
+								<TableHead className="text-right">Created</TableHead>
+
+								<TableHead className="text-right">Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{data?.map((node) => {
+								const isManager = node.Spec.Role === "manager";
+								return (
+									<TableRow key={node.ID}>
+										<TableCell className="w-[100px]">
+											{node.Description.Hostname}
+										</TableCell>
+										<TableCell className="text-right">
+											{node.Status.State}
+										</TableCell>
+										<TableCell className="text-right">
+											<Badge variant={isManager ? "default" : "secondary"}>
+												{node?.Spec?.Role}
+											</Badge>
+										</TableCell>
+										<TableCell className="text-right">
+											{node.Spec.Availability}
+										</TableCell>
+
+										<TableCell className="text-right">
+											{node?.Description.Engine.EngineVersion}
+										</TableCell>
+
+										<TableCell className="text-right">
+											<DateTooltip date={node.CreatedAt} className="text-sm">
+												Created{" "}
+											</DateTooltip>
+										</TableCell>
+										<TableCell className="text-right flex justify-end">
+											<DropdownMenu>
+												<DropdownMenuTrigger asChild>
+													<Button variant="ghost" className="h-8 w-8 p-0">
+														<span className="sr-only">Open menu</span>
+														<MoreHorizontal className="h-4 w-4" />
+													</Button>
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end">
+													<DropdownMenuLabel>Actions</DropdownMenuLabel>
+													<ShowNodeData data={node} />
+													{!node?.ManagerStatus?.Leader && (
+														<DeleteWorker nodeId={node.ID} />
+													)}
+												</DropdownMenuContent>
+											</DropdownMenu>
+										</TableCell>
+									</TableRow>
+								);
+							})}
+						</TableBody>
+					</Table>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};