From 667067811cf3597887ab66e08f4f6d36983c60b3 Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Fri, 17 May 2024 22:59:31 -0600 Subject: [PATCH] refactor: improve interface for cluster --- .../settings/cluster/nodes/add-node.tsx | 67 ++++++ .../cluster/nodes/manager/add-manager.tsx | 58 ++++-- .../settings/cluster/nodes/show-nodes.tsx | 197 ++++++++++-------- .../cluster/nodes/workers/add-worker.tsx | 58 ++++-- .../cluster/registry/show-registry.tsx | 2 +- 5 files changed, 254 insertions(+), 128 deletions(-) create mode 100644 components/dashboard/settings/cluster/nodes/add-node.tsx diff --git a/components/dashboard/settings/cluster/nodes/add-node.tsx b/components/dashboard/settings/cluster/nodes/add-node.tsx new file mode 100644 index 00000000..43c21630 --- /dev/null +++ b/components/dashboard/settings/cluster/nodes/add-node.tsx @@ -0,0 +1,67 @@ +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Button } from "@/components/ui/button"; +import { ExternalLink, PlusIcon } from "lucide-react"; +import { AddWorker } from "./workers/add-worker"; +import { AddManager } from "./manager/add-manager"; +import Link from "next/link"; + +export const AddNode = () => { + return ( + + + + + + + Add Node + + Follow the steps to add a new node to your cluster, before you start + working with this feature, you need to understand how docker swarm + works.{" "} + + Docker Swarm + + + + Architecture + + + + +
+ + + Worker + Manager + + + + + + + + +
+ + + ); +}; diff --git a/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx b/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx index 8c6b1db8..ebb4c7f3 100644 --- a/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx +++ b/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx @@ -1,49 +1,63 @@ -import { Button } from "@/components/ui/button"; import { - Dialog, - DialogContent, DialogDescription, DialogHeader, DialogTitle, - DialogTrigger, } from "@/components/ui/dialog"; import { api } from "@/utils/api"; -import { DropdownMenuItem } from "@/components/ui/dropdown-menu"; +import { CardContent } from "@/components/ui/card"; +import { CopyIcon } from "lucide-react"; +import copy from "copy-to-clipboard"; +import { toast } from "sonner"; + export const AddManager = () => { const { data } = api.cluster.addManager.useQuery(); return ( <> - - - e.preventDefault()} - > - Add Manager - - - +
+ Add a new manager Add a new manager -
+
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 + 2. Run the following command to add the node(manager) to your cluster - {data} + + {data} + +
- -
+ + ); }; diff --git a/components/dashboard/settings/cluster/nodes/show-nodes.tsx b/components/dashboard/settings/cluster/nodes/show-nodes.tsx index 47cbee4c..95d105ab 100644 --- a/components/dashboard/settings/cluster/nodes/show-nodes.tsx +++ b/components/dashboard/settings/cluster/nodes/show-nodes.tsx @@ -7,7 +7,6 @@ import { 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"; @@ -20,7 +19,7 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; -import { MoreHorizontal, PlusIcon } from "lucide-react"; +import { HelpCircle, LockIcon, MoreHorizontal } from "lucide-react"; import { Button } from "@/components/ui/button"; import { DropdownMenu, @@ -29,10 +28,19 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { ShowNodeData } from "./show-node-data"; -import { AddManager } from "./manager/add-manager"; +import { AddNode } from "./add-node"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; export const ShowNodes = () => { const { data, isLoading } = api.cluster.getNodes.useQuery(); + const { data: registry } = api.registry.all.useQuery(); + + const haveAtLeastOneRegistry = !!(registry && registry?.length > 0); return ( @@ -40,91 +48,114 @@ export const ShowNodes = () => { Cluster Add nodes to your cluster -
- - - - - - Actions - - - - -
+ {haveAtLeastOneRegistry && ( +
+ +
+ )} -
- {isLoading &&
Loading...
} - - A list of your managers / workers. - - - Hostname - Status - Role - Availability - Engine Version - Created + {haveAtLeastOneRegistry ? ( +
+ {isLoading &&
Loading...
} +
+ A list of your managers / workers. + + + Hostname + Status + Role + Availability + Engine Version + Created - Actions - - - - {data?.map((node) => { - const isManager = node.Spec.Role === "manager"; - return ( - - - {node.Description.Hostname} - - - {node.Status.State} - - - - {node?.Spec?.Role} - - - - {node.Spec.Availability} - + Actions + + + + {data?.map((node) => { + const isManager = node.Spec.Role === "manager"; + return ( + + + {node.Description.Hostname} + + + {node.Status.State} + + + + {node?.Spec?.Role} + + + + {node.Spec.Availability} + - - {node?.Description.Engine.EngineVersion} - + + {node?.Description.Engine.EngineVersion} + - - - Created{" "} - - - - - - - - - Actions - - {!node?.ManagerStatus?.Leader && ( - - )} - - - - - ); - })} - -
-
+ + + Created{" "} + + + + + + + + + Actions + + {!node?.ManagerStatus?.Leader && ( + + )} + + + + + ); + })} + + + + ) : ( +
+ +
+ + To add nodes to your cluster, you need to configure at least one + registry. + + + + + + + + Nodes need a registry to pull images from. + + + +
+ +
    +
  • + Docker Registry: Use custom registries like + Docker Hub, DigitalOcean Registry, etc. +
    • +
  • + Self-Hosted Docker Registry: Automatically set + up a local registry to store all images. +
    • +
+
+ )} ); diff --git a/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx b/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx index f0556158..9cca90e4 100644 --- a/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx +++ b/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx @@ -1,47 +1,61 @@ -import { Button } from "@/components/ui/button"; +import { CardContent } from "@/components/ui/card"; import { - Dialog, - DialogContent, DialogDescription, DialogHeader, DialogTitle, - DialogTrigger, } from "@/components/ui/dialog"; -import { DropdownMenuItem } from "@/components/ui/dropdown-menu"; import { api } from "@/utils/api"; +import copy from "copy-to-clipboard"; +import { CopyIcon } from "lucide-react"; +import { toast } from "sonner"; export const AddWorker = () => { const { data } = api.cluster.addWorker.useQuery(); return ( - - - e.preventDefault()} - > - Add Worker - - - +
+ Add a new worker Add a new worker -
+
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 + 2. Run the following command to add the node(worker) to your cluster + + + + {data} + - {data}
- -
+ + ); }; diff --git a/components/dashboard/settings/cluster/registry/show-registry.tsx b/components/dashboard/settings/cluster/registry/show-registry.tsx index 30ed18fe..fe403df0 100644 --- a/components/dashboard/settings/cluster/registry/show-registry.tsx +++ b/components/dashboard/settings/cluster/registry/show-registry.tsx @@ -22,7 +22,7 @@ export const ShowRegistry = () => { return (
- +
Registry Add registry to your application.