refactor: improve interface for cluster

This commit is contained in:
Mauricio Siu
2024-05-17 22:59:31 -06:00
parent eda33e095e
commit 667067811c
5 changed files with 254 additions and 128 deletions

View File

@@ -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 (
<>
<Dialog>
<DialogTrigger asChild>
<DropdownMenuItem
className="cursor-pointer flex flex-row gap-2 items-center"
onSelect={(e) => e.preventDefault()}
>
Add Manager
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className="sm:max-w-4xl max-h-screen overflow-y-auto ">
<div>
<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
<DialogHeader>
<DialogTitle>Add a new manager</DialogTitle>
<DialogDescription>Add a new manager</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-4 text-sm">
<div className="flex flex-col gap-2.5 text-sm">
<span>1. Go to your new server and run the following command</span>
<span className="bg-muted rounded-lg p-2">
<span className="bg-muted rounded-lg p-2 flex justify-between">
curl https://get.docker.com | sh -s -- --version 24.0
<button
type="button"
className="self-center"
onClick={() => {
copy("curl https://get.docker.com | sh -s -- --version 24.0");
toast.success("Copied to clipboard");
}}
>
<CopyIcon className="h-4 w-4 cursor-pointer" />
</button>
</span>
</div>
<div className="flex flex-col gap-4 text-sm">
<div className="flex flex-col gap-2.5 text-sm">
<span>
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
</span>
<span className="bg-muted rounded-lg p-2 ">{data}</span>
<span className="bg-muted rounded-lg p-2 flex">
{data}
<button
type="button"
className="self-start"
onClick={() => {
copy(data || "");
toast.success("Copied to clipboard");
}}
>
<CopyIcon className="h-4 w-4 cursor-pointer" />
</button>
</span>
</div>
</DialogContent>
</Dialog>
</CardContent>
</div>
</>
);
};