From c45017e204a279b1ee113cee8e109c3734a5a14a Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Mon, 13 May 2024 01:28:50 -0600 Subject: [PATCH] feat: add show cluster --- .../cluster/registry/add-docker-registry.tsx | 2 - .../cluster/registry/show-registry.tsx | 4 +- .../settings/cluster/worker/add-worker.tsx | 80 +++++++++++++++++++ .../settings/cluster/worker/show-workers.tsx | 62 ++++++++++++++ components/shared/date-tooltip.tsx | 11 ++- pages/dashboard/settings/cluster.tsx | 2 + server/api/root.ts | 2 + server/api/routers/cluster.ts | 17 ++++ 8 files changed, 174 insertions(+), 6 deletions(-) create mode 100644 components/dashboard/settings/cluster/worker/add-worker.tsx create mode 100644 components/dashboard/settings/cluster/worker/show-workers.tsx create mode 100644 server/api/routers/cluster.ts diff --git a/components/dashboard/settings/cluster/registry/add-docker-registry.tsx b/components/dashboard/settings/cluster/registry/add-docker-registry.tsx index c5cf228d..8e7f1dd2 100644 --- a/components/dashboard/settings/cluster/registry/add-docker-registry.tsx +++ b/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"); diff --git a/components/dashboard/settings/cluster/registry/show-registry.tsx b/components/dashboard/settings/cluster/registry/show-registry.tsx index 3bfc3bad..c02c6ae6 100644 --- a/components/dashboard/settings/cluster/registry/show-registry.tsx +++ b/components/dashboard/settings/cluster/registry/show-registry.tsx @@ -23,8 +23,8 @@ export const ShowRegistry = () => {
- Clusters - Add cluster to your application. + Registry + Add registry to your application.
diff --git a/components/dashboard/settings/cluster/worker/add-worker.tsx b/components/dashboard/settings/cluster/worker/add-worker.tsx new file mode 100644 index 00000000..5a7bccae --- /dev/null +++ b/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; + +export const AddWorker = () => { + const utils = api.useUtils(); + + const { data, isLoading } = api.cluster.addWorker.useQuery(); + + return ( + + + + + + + Add a new worker + Add a new worker + + {/* {isError && ( +
+ + + {error?.message} + +
+ )} */} +
+ 1. Go to your new server and run the following command + + curl https://get.docker.com | sh -s -- --version 24.0 + +
+ +
+ + 2. Run the following command to add the node(server) to your cluster + + {data} +
+ + + ); +}; diff --git a/components/dashboard/settings/cluster/worker/show-workers.tsx b/components/dashboard/settings/cluster/worker/show-workers.tsx new file mode 100644 index 00000000..bb0deb8f --- /dev/null +++ b/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 ( + + +
+ Cluster + Add nodes to your cluster +
+ + + +
+ {isLoading &&
Loading...
} + {data?.map((worker, index) => ( +
+ + {worker.Description.Hostname} + + + {worker.Status.State} + + + {worker.Spec.Availability} + + + {worker.ManagerStatus.Reachability} + + + {worker?.Spec?.Role} + + + + {worker?.Description.Engine.EngineVersion} + + + {/* Created */} + +
+ ))} +
+ + + ); +}; diff --git a/components/shared/date-tooltip.tsx b/components/shared/date-tooltip.tsx index 2538ebf7..552d629d 100644 --- a/components/shared/date-tooltip.tsx +++ b/components/shared/date-tooltip.tsx @@ -4,19 +4,26 @@ import { TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; +import { cn } from "@/lib/utils"; import { format, formatDistanceToNow } from "date-fns"; interface Props { date: string; children?: React.ReactNode; + className?: string; } -export const DateTooltip = ({ date, children }: Props) => { +export const DateTooltip = ({ date, children, className }: Props) => { return ( - + {children}{" "} {formatDistanceToNow(new Date(date), { addSuffix: true, diff --git a/pages/dashboard/settings/cluster.tsx b/pages/dashboard/settings/cluster.tsx index 98ce5cfe..d433e902 100644 --- a/pages/dashboard/settings/cluster.tsx +++ b/pages/dashboard/settings/cluster.tsx @@ -1,5 +1,6 @@ import { ShowCertificates } from "@/components/dashboard/settings/certificates/show-certificates"; import { ShowRegistry } from "@/components/dashboard/settings/cluster/registry/show-registry"; +import { ShowCluster } from "@/components/dashboard/settings/cluster/worker/show-workers"; import { DashboardLayout } from "@/components/layouts/dashboard-layout"; import { SettingsLayout } from "@/components/layouts/settings-layout"; import { validateRequest } from "@/server/auth/auth"; @@ -10,6 +11,7 @@ const Page = () => { return (
+
); }; diff --git a/server/api/root.ts b/server/api/root.ts index d9b02e20..da192b6b 100644 --- a/server/api/root.ts +++ b/server/api/root.ts @@ -21,6 +21,7 @@ import { portRouter } from "./routers/port"; import { adminRouter } from "./routers/admin"; import { dockerRouter } from "./routers/docker"; import { registryRouter } from "./routers/registry"; +import { clusterRouter } from "./routers/cluster"; /** * This is the primary router for your server. * @@ -49,6 +50,7 @@ export const appRouter = createTRPCRouter({ redirects: redirectsRouter, port: portRouter, registry: registryRouter, + cluster: clusterRouter, }); // export type definition of API diff --git a/server/api/routers/cluster.ts b/server/api/routers/cluster.ts new file mode 100644 index 00000000..9a6ff6e7 --- /dev/null +++ b/server/api/routers/cluster.ts @@ -0,0 +1,17 @@ +import { docker } from "@/server/constants"; +import { createTRPCRouter, protectedProcedure } from "../trpc"; +import { getPublicIpWithFallback } from "@/server/wss/terminal"; + +export const clusterRouter = createTRPCRouter({ + getWorkers: protectedProcedure.query(async () => { + const workers = await docker.listNodes(); + // console.log(workers); + return workers; + }), + addWorker: protectedProcedure.query(async ({ input }) => { + const result = await docker.swarmInspect(); + return `docker swarm join --token ${ + result.JoinTokens.Worker + } ${await getPublicIpWithFallback()}:2377`; + }), +});