feat: add show cluster

components/dashboard/settings/cluster/registry/add-docker-registry.tsx

@@ -62,8 +62,6 @@ export const AddRegistry = () => {
 		resolver: zodResolver(AddRegistrySchema),
 	});
 
-	console.log(form.formState.errors);
-
 	const password = form.watch("password");
 	const username = form.watch("username");
 	const registryUrl = form.watch("registryUrl");

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

@@ -23,8 +23,8 @@ export const ShowRegistry = () => {
 			<Card className="bg-transparent h-full">
 				<CardHeader className="flex flex-row gap-2 justify-between w-full items-center">
 					<div className="flex flex-col gap-2">
-						<CardTitle className="text-xl">Clusters</CardTitle>
-						<CardDescription>Add cluster to your application.</CardDescription>
+						<CardTitle className="text-xl">Registry</CardTitle>
+						<CardDescription>Add registry to your application.</CardDescription>
 					</div>
 
 					<div className="flex flex-row gap-2">

components/dashboard/settings/cluster/worker/add-worker.tsx

@@ -0,0 +1,80 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, PlusIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const AddWorkerSchema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
+});
+
+type AddWorker = z.infer<typeof AddWorkerSchema>;
+
+export const AddWorker = () => {
+	const utils = api.useUtils();
+
+	const { data, isLoading } = api.cluster.addWorker.useQuery();
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>
+					<PlusIcon className="h-4 w-4" />
+					Add Worker
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-4xl max-h-screen overflow-y-auto ">
+				<DialogHeader>
+					<DialogTitle>Add a new worker</DialogTitle>
+					<DialogDescription>Add a new worker</DialogDescription>
+				</DialogHeader>
+				{/* {isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)} */}
+				<div className="flex flex-col gap-4 text-sm">
+					<span>1. Go to your new server and run the following command</span>
+					<span className="bg-muted rounded-lg p-2">
+						curl https://get.docker.com | sh -s -- --version 24.0
+					</span>
+				</div>
+
+				<div className="flex flex-col gap-4 text-sm">
+					<span>
+						2. Run the following command to add the node(server) to your cluster
+					</span>
+					<span className="bg-muted rounded-lg p-2 ">{data}</span>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/cluster/worker/show-workers.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+
+import { api } from "@/utils/api";
+import { AddWorker } from "./add-worker";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+
+export const ShowCluster = () => {
+	const { data, isLoading } = api.cluster.getWorkers.useQuery();
+	// console.log(data)
+	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>
+				<AddWorker />
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<div className="grid md:grid-cols-1 gap-4">
+					{isLoading && <div>Loading...</div>}
+					{data?.map((worker, index) => (
+						<div
+							key={`key-${index}`}
+							className="flex flex-row gap-4 w-full flex-wrap"
+						>
+							<span className="text-sm text-muted-foreground">
+								{worker.Description.Hostname}
+							</span>
+							<span className="text-sm text-muted-foreground">
+								{worker.Status.State}
+							</span>
+							<span className="text-sm text-muted-foreground">
+								{worker.Spec.Availability}
+							</span>
+							<span className="text-sm text-muted-foreground">
+								{worker.ManagerStatus.Reachability}
+							</span>
+							<span className="text-sm text-muted-foreground">
+								{worker?.Spec?.Role}
+							</span>
+
+							<span className="text-sm text-muted-foreground">
+								{worker?.Description.Engine.EngineVersion}
+							</span>
+							<DateTooltip date={worker.CreatedAt} className="text-sm">
+								{/* <span className="text-sm text-muted-foreground">Created</span> */}
+							</DateTooltip>
+						</div>
+					))}
+				</div>
+			</CardContent>
+		</Card>
+	);
+};