refactor(multi-server): improve alerts and add instructions to ssh keys

This commit is contained in:
Mauricio Siu 2024-09-22 13:57:13 -06:00
parent 1a877340d3
commit f0f34df13c
13 changed files with 382 additions and 207 deletions

View File

@ -278,6 +278,12 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>} {isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
<div className="px-4">
<AlertBlock type="info">
Changing settings such as placements may cause the logs/monitoring
to be unavailable.
</AlertBlock>
</div>
<Form {...form}> <Form {...form}>
<form <form

View File

@ -42,6 +42,7 @@ export const ShowContainers = ({ serverId }: Props) => {
const { data, isLoading } = api.docker.getContainers.useQuery({ const { data, isLoading } = api.docker.getContainers.useQuery({
serverId, serverId,
}); });
const [sorting, setSorting] = React.useState<SortingState>([]); const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>( const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[], [],
@ -109,83 +110,99 @@ export const ShowContainers = ({ serverId }: Props) => {
</DropdownMenu> </DropdownMenu>
</div> </div>
<div className="rounded-md border"> <div className="rounded-md border">
<Table> {isLoading ? (
<TableHeader> <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
{table.getHeaderGroups().map((headerGroup) => ( <span className="text-muted-foreground text-lg font-medium">
<TableRow key={headerGroup.id}> Loading...
{headerGroup.headers.map((header) => { </span>
return ( </div>
<TableHead key={header.id}> ) : data?.length === 0 ? (
{header.isPlaceholder <div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
? null <span className="text-muted-foreground text-lg font-medium">
: flexRender( No results.
header.column.columnDef.header, </span>
header.getContext(), </div>
)} ) : (
</TableHead> <Table>
); <TableHeader>
})} {table.getHeaderGroups().map((headerGroup) => (
</TableRow> <TableRow key={headerGroup.id}>
))} {headerGroup.headers.map((header) => {
</TableHeader> return (
<TableBody> <TableHead key={header.id}>
{table.getRowModel().rows?.length ? ( {header.isPlaceholder
table.getRowModel().rows.map((row) => ( ? null
<TableRow : flexRender(
key={row.id} header.column.columnDef.header,
data-state={row.getIsSelected() && "selected"} header.getContext(),
> )}
{row.getVisibleCells().map((cell) => ( </TableHead>
<TableCell key={cell.id}> );
{flexRender( })}
cell.column.columnDef.cell,
cell.getContext(),
)}
</TableCell>
))}
</TableRow> </TableRow>
)) ))}
) : ( </TableHeader>
<TableRow> <TableBody>
<TableCell {table?.getRowModel()?.rows?.length ? (
colSpan={columns.length} table.getRowModel().rows.map((row) => (
className="h-24 text-center" <TableRow
> key={row.id}
{isLoading ? ( data-state={row.getIsSelected() && "selected"}
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]"> >
<span className="text-muted-foreground text-lg font-medium"> {row.getVisibleCells().map((cell) => (
Loading... <TableCell key={cell.id}>
</span> {flexRender(
</div> cell.column.columnDef.cell,
) : ( cell.getContext(),
<>No results.</> )}
)} </TableCell>
</TableCell> ))}
</TableRow> </TableRow>
)} ))
</TableBody> ) : (
</Table> <TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
{isLoading ? (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
Loading...
</span>
</div>
) : (
<>No results.</>
)}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
)}
</div> </div>
<div className="flex items-center justify-end space-x-2 py-4"> {data && data?.length > 0 && (
<div className="space-x-2 flex flex-wrap"> <div className="flex items-center justify-end space-x-2 py-4">
<Button <div className="space-x-2 flex flex-wrap">
variant="outline" <Button
size="sm" variant="outline"
onClick={() => table.previousPage()} size="sm"
disabled={!table.getCanPreviousPage()} onClick={() => table.previousPage()}
> disabled={!table.getCanPreviousPage()}
Previous >
</Button> Previous
<Button </Button>
variant="outline" <Button
size="sm" variant="outline"
onClick={() => table.nextPage()} size="sm"
disabled={!table.getCanNextPage()} onClick={() => table.nextPage()}
> disabled={!table.getCanNextPage()}
Next >
</Button> Next
</Button>
</div>
</div> </div>
</div> )}
</div> </div>
</div> </div>
); );

View File

@ -17,14 +17,23 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
isLoading, isLoading,
error, error,
isError, isError,
} = api.settings.readDirectories.useQuery({ } = api.settings.readDirectories.useQuery(
serverId, {
}); serverId,
},
{
retry: 2,
},
);
return ( return (
<div className={cn("mt-6 md:grid gap-4")}> <div className={cn("mt-6 md:grid gap-4")}>
<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full"> <div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>} {isError && (
<AlertBlock type="error" className="w-full">
{error?.message}
</AlertBlock>
)}
{isLoading && ( {isLoading && (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]"> <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium"> <span className="text-muted-foreground text-lg font-medium">

View File

@ -150,8 +150,6 @@ export const DockerMonitoring = ({
}); });
}, [data]); }, [data]);
console.log(currentData);
useEffect(() => { useEffect(() => {
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"; const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${window.location.host}/listen-docker-stats-monitoring?appName=${appName}&appType=${appType}`; const wsUrl = `${protocol}//${window.location.host}/listen-docker-stats-monitoring?appName=${appName}&appType=${appType}`;

View File

@ -1,5 +1,11 @@
import { CardDescription, CardTitle } from "@/components/ui/card"; import { CardDescription, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"; import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { useState } from "react"; import { useState } from "react";
import { ShowStorageActions } from "./show-storage-actions"; import { ShowStorageActions } from "./show-storage-actions";
@ -23,8 +29,8 @@ export const ShowServerActions = ({ serverId }: Props) => {
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-xl overflow-y-auto max-h-screen "> <DialogContent className="sm:max-w-xl overflow-y-auto max-h-screen ">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<CardTitle className="text-xl">Web server settings</CardTitle> <DialogTitle className="text-xl">Web server settings</DialogTitle>
<CardDescription>Reload or clean the web server.</CardDescription> <DialogDescription>Reload or clean the web server.</DialogDescription>
</div> </div>
<div className="grid grid-cols-2 w-full gap-4"> <div className="grid grid-cols-2 w-full gap-4">

View File

@ -18,11 +18,21 @@ import {
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"; import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { useUrl } from "@/utils/hooks/use-url"; import {
import { RocketIcon, ServerIcon } from "lucide-react"; CopyIcon,
ExternalLinkIcon,
RocketIcon,
ServerIcon,
} from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { ShowDeployment } from "../../application/deployments/show-deployment"; import { ShowDeployment } from "../../application/deployments/show-deployment";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CodeEditor } from "@/components/shared/code-editor";
import copy from "copy-to-clipboard";
import Link from "next/link";
import { Separator } from "@/components/ui/separator";
import { AlertBlock } from "@/components/shared/alert-block";
interface Props { interface Props {
serverId: string; serverId: string;
@ -49,6 +59,8 @@ export const SetupServer = ({ serverId }: Props) => {
const { mutateAsync, isLoading } = api.server.setup.useMutation(); const { mutateAsync, isLoading } = api.server.setup.useMutation();
console.log(server?.sshKey);
return ( return (
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
@ -70,100 +82,219 @@ export const SetupServer = ({ serverId }: Props) => {
</p> </p>
</div> </div>
</DialogHeader> </DialogHeader>
{!server?.sshKeyId ? (
<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
<AlertBlock type="warning">
Please add a SSH Key to your server before setting up the server.
you can assign a SSH Key to your server in Edit Server.
</AlertBlock>
</div>
) : (
<div id="hook-form-add-gitlab" className="grid w-full gap-1">
<Tabs defaultValue="ssh-keys">
<TabsList className="grid grid-cols-2 w-[400px]">
<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
<TabsTrigger value="deployments">Deployments</TabsTrigger>
</TabsList>
<TabsContent
value="ssh-keys"
className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
>
<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
<p className="text-primary text-base font-semibold">
You have two options to add SSH Keys to your server:
</p>
<div id="hook-form-add-gitlab" className="grid w-full gap-1"> <ul>
<CardContent className="p-0"> <li>
<div className="flex flex-col gap-4"> 1. Add the public SSH Key when you create a server in your
<Card className="bg-background"> preffered provider (Hostinger, Digital Ocean, Hetzner,
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2"> etc){" "}
<div className="flex flex-row gap-2 justify-between w-full items-end max-sm:flex-col"> </li>
<div className="flex flex-col gap-1"> <li>2. Add The SSH Key to Server Manually</li>
<CardTitle className="text-xl">Deployments</CardTitle> </ul>
<CardDescription> <div className="flex flex-col gap-4 w-full overflow-auto">
See all the 5 Server Setup <div className="flex relative flex-col gap-2 overflow-y-auto">
</CardDescription> <div className="text-sm text-primary flex flex-row gap-2 items-center">
</div> Copy Public Key ({server?.sshKey?.name})
<DialogAction <button
title={"Setup Server?"} type="button"
description="This will setup the server and all associated data" className=" right-2 top-8"
onClick={async () => { onClick={() => {
await mutateAsync({ copy(
serverId: server?.serverId || "", server?.sshKey?.publicKey || "Generate a SSH Key",
}) );
.then(async () => { toast.success("SSH Copied to clipboard");
refetch(); }}
toast.success("Server setup successfully");
})
.catch(() => {
toast.error("Error configuring server");
});
}}
>
<Button isLoading={isLoading}>Setup Server</Button>
</DialogAction>
</div>
</CardHeader>
<CardContent className="flex flex-col gap-4">
{server?.deployments?.length === 0 ? (
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
<RocketIcon className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground">
No deployments found
</span>
</div>
) : (
<div className="flex flex-col gap-4">
{deployments?.map((deployment) => (
<div
key={deployment.deploymentId}
className="flex items-center justify-between rounded-lg border p-4 gap-2"
> >
<div className="flex flex-col"> <CopyIcon className="size-4 text-muted-foreground" />
<span className="flex items-center gap-4 font-medium capitalize text-foreground"> </button>
{deployment.status} </div>
<StatusTooltip
status={deployment?.status}
className="size-2.5"
/>
</span>
<span className="text-sm text-muted-foreground">
{deployment.title}
</span>
{deployment.description && (
<span className="break-all text-sm text-muted-foreground">
{deployment.description}
</span>
)}
</div>
<div className="flex flex-col items-end gap-2">
<div className="text-sm capitalize text-muted-foreground">
<DateTooltip date={deployment.createdAt} />
</div>
<Button
onClick={() => {
setActiveLog(deployment.logPath);
}}
>
View
</Button>
</div>
</div>
))}
</div> </div>
)} </div>
<ShowDeployment <div className="flex flex-col gap-2 w-full mt-2 border rounded-lg p-4">
open={activeLog !== null} <span className="text-base font-semibold text-primary">
onClose={() => setActiveLog(null)} Automatic process
logPath={activeLog} </span>
/> <Link
href="https://docs.dokploy.com/en/docs/core/get-started/introduction"
target="_blank"
className="text-primary flex flex-row gap-2"
>
View Tutorial <ExternalLinkIcon className="size-4" />
</Link>
</div>
<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
<span className="text-base font-semibold text-primary">
Manual process
</span>
<ul>
<li className="items-center flex gap-1">
1. Login to your server{" "}
<span className="text-primary bg-secondary p-1 rounded-lg">
ssh {server?.username}@{server?.ipAddress}
</span>
<button
type="button"
onClick={() => {
copy(
`ssh ${server?.username}@${server?.ipAddress}`,
);
toast.success("Copied to clipboard");
}}
>
<CopyIcon className="size-4" />
</button>
</li>
<li>
2. When you are logged in run the following command
<div className="flex relative flex-col gap-4 w-full mt-2">
<CodeEditor
lineWrapping
language="properties"
value={`echo "${server?.sshKey?.publicKey}" >> ~/.ssh/authorized_keys`}
readOnly
className="font-mono opacity-60"
/>
<button
type="button"
className="absolute right-2 top-2"
onClick={() => {
copy(server?.sshKey?.publicKey || "");
toast.success("Copied to clipboard");
}}
>
<CopyIcon className="size-4" />
</button>
</div>
</li>
<li className="mt-1">
3. You're done, you can test the connection by entering
to the terminal or by setting up the server tab.
</li>
</ul>
</div>
</div>
</TabsContent>
<TabsContent value="deployments">
<CardContent className="p-0">
<div className="flex flex-col gap-4">
<Card className="bg-background">
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
<div className="flex flex-row gap-2 justify-between w-full items-end max-sm:flex-col">
<div className="flex flex-col gap-1">
<CardTitle className="text-xl">
Deployments
</CardTitle>
<CardDescription>
See all the 5 Server Setup
</CardDescription>
</div>
<DialogAction
title={"Setup Server?"}
description="This will setup the server and all associated data"
onClick={async () => {
await mutateAsync({
serverId: server?.serverId || "",
})
.then(async () => {
refetch();
toast.success("Server setup successfully");
})
.catch(() => {
toast.error("Error configuring server");
});
}}
>
<Button isLoading={isLoading}>Setup Server</Button>
</DialogAction>
</div>
</CardHeader>
<CardContent className="flex flex-col gap-4">
{server?.deployments?.length === 0 ? (
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
<RocketIcon className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground">
No deployments found
</span>
</div>
) : (
<div className="flex flex-col gap-4">
{deployments?.map((deployment) => (
<div
key={deployment.deploymentId}
className="flex items-center justify-between rounded-lg border p-4 gap-2"
>
<div className="flex flex-col">
<span className="flex items-center gap-4 font-medium capitalize text-foreground">
{deployment.status}
<StatusTooltip
status={deployment?.status}
className="size-2.5"
/>
</span>
<span className="text-sm text-muted-foreground">
{deployment.title}
</span>
{deployment.description && (
<span className="break-all text-sm text-muted-foreground">
{deployment.description}
</span>
)}
</div>
<div className="flex flex-col items-end gap-2">
<div className="text-sm capitalize text-muted-foreground">
<DateTooltip date={deployment.createdAt} />
</div>
<Button
onClick={() => {
setActiveLog(deployment.logPath);
}}
>
View
</Button>
</div>
</div>
))}
</div>
)}
<ShowDeployment
open={activeLog !== null}
onClose={() => setActiveLog(null)}
logPath={activeLog}
/>
</CardContent>
</Card>
</div>
</CardContent> </CardContent>
</Card> </TabsContent>
</div> </Tabs>
</CardContent> </div>
</div> )}
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

View File

@ -131,13 +131,18 @@ export const ShowServers = () => {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel> <DropdownMenuLabel>Actions</DropdownMenuLabel>
<TerminalModal serverId={server.serverId}> {server.sshKeyId && (
<span>Enter the terminal</span> <TerminalModal serverId={server.serverId}>
</TerminalModal> <span>Enter the terminal</span>
</TerminalModal>
)}
<SetupServer serverId={server.serverId} /> <SetupServer serverId={server.serverId} />
<UpdateServer serverId={server.serverId} /> <UpdateServer serverId={server.serverId} />
<ShowServerActions serverId={server.serverId} /> {server.sshKeyId && (
<ShowServerActions serverId={server.serverId} />
)}
<DialogAction <DialogAction
disabled={!canDelete} disabled={!canDelete}
title={ title={
@ -182,15 +187,19 @@ export const ShowServers = () => {
</DropdownMenuItem> </DropdownMenuItem>
</DialogAction> </DialogAction>
<DropdownMenuSeparator /> {server.sshKeyId && (
<DropdownMenuLabel>Extra</DropdownMenuLabel> <>
<DropdownMenuSeparator />
<DropdownMenuLabel>Extra</DropdownMenuLabel>
<ShowTraefikFileSystemModal <ShowTraefikFileSystemModal
serverId={server.serverId} serverId={server.serverId}
/> />
<ShowDockerContainersModal <ShowDockerContainersModal
serverId={server.serverId} serverId={server.serverId}
/> />
</>
)}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</TableCell> </TableCell>

View File

@ -41,8 +41,8 @@ export const ShowUsers = () => {
}, []); }, []);
return ( return (
<div className="h-full col-span-2"> <div className=" col-span-2">
<Card className="bg-transparent h-full "> <Card className="bg-transparent ">
<CardHeader className="flex flex-row gap-2 justify-between w-full flex-wrap"> <CardHeader className="flex flex-row gap-2 justify-between w-full flex-wrap">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<CardTitle className="text-xl">Users</CardTitle> <CardTitle className="text-xl">Users</CardTitle>
@ -55,9 +55,9 @@ export const ShowUsers = () => {
</div> </div>
)} )}
</CardHeader> </CardHeader>
<CardContent className="space-y-2 h-full"> <CardContent className="space-y-2">
{data?.length === 0 ? ( {data?.length === 0 ? (
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-3 h-full">
<Users className="size-8 self-center text-muted-foreground" /> <Users className="size-8 self-center text-muted-foreground" />
<span className="text-base text-muted-foreground"> <span className="text-base text-muted-foreground">
To create a user, you need to add: To create a user, you need to add:

View File

@ -276,16 +276,20 @@ export const settingsRouter = createTRPCRouter({
readDirectories: protectedProcedure readDirectories: protectedProcedure
.input(apiServerSchema) .input(apiServerSchema)
.query(async ({ ctx, input }) => { .query(async ({ ctx, input }) => {
if (ctx.user.rol === "user") { try {
const canAccess = await canAccessToTraefikFiles(ctx.user.authId); if (ctx.user.rol === "user") {
const canAccess = await canAccessToTraefikFiles(ctx.user.authId);
if (!canAccess) { if (!canAccess) {
throw new TRPCError({ code: "UNAUTHORIZED" }); throw new TRPCError({ code: "UNAUTHORIZED" });
}
} }
const { MAIN_TRAEFIK_PATH } = paths(!!input?.serverId);
const result = await readDirectory(MAIN_TRAEFIK_PATH, input?.serverId);
return result || [];
} catch (error) {
throw error;
} }
const { MAIN_TRAEFIK_PATH } = paths(!!input?.serverId);
const result = await readDirectory(MAIN_TRAEFIK_PATH, input?.serverId);
return result || [];
}), }),
updateTraefikFile: protectedProcedure updateTraefikFile: protectedProcedure

View File

@ -337,8 +337,6 @@ export const deployRemoteCompose = async ({
await execAsyncRemote(compose.serverId, command); await execAsyncRemote(compose.serverId, command);
await getBuildComposeCommand(compose, deployment.logPath); await getBuildComposeCommand(compose, deployment.logPath);
console.log(" ---- done ----");
} }
await updateDeploymentStatus(deployment.deploymentId, "done"); await updateDeploymentStatus(deployment.deploymentId, "done");
@ -443,9 +441,6 @@ export const stopCompose = async (composeId: string) => {
try { try {
const { COMPOSE_PATH } = paths(!!compose.serverId); const { COMPOSE_PATH } = paths(!!compose.serverId);
if (compose.composeType === "docker-compose") { if (compose.composeType === "docker-compose") {
console.log(
`cd ${join(COMPOSE_PATH, compose.appName)} && docker compose -p ${compose.appName} stop`,
);
if (compose.serverId) { if (compose.serverId) {
await execAsyncRemote( await execAsyncRemote(
compose.serverId, compose.serverId,

View File

@ -58,7 +58,11 @@ export const getContainers = async (serverId?: string | null) => {
.filter((container) => !container.name.includes("dokploy")); .filter((container) => !container.name.includes("dokploy"));
return containers; return containers;
} catch (error) {} } catch (error) {
console.error(error);
return [];
}
}; };
export const getConfig = async ( export const getConfig = async (

View File

@ -72,11 +72,9 @@ export const setupDockerContainerLogsWebSocketServer = (
}) })
.on("data", (data: string) => { .on("data", (data: string) => {
ws.send(data.toString()); ws.send(data.toString());
// console.log(`OUTPUT: ${data.toString()}`);
}) })
.stderr.on("data", (data) => { .stderr.on("data", (data) => {
ws.send(data.toString()); ws.send(data.toString());
// console.error(`STDERR: ${data.toString()}`);
}); });
}); });
}) })

View File

@ -71,11 +71,9 @@ export const setupDeploymentLogsWebSocketServer = (
}) })
.on("data", (data: string) => { .on("data", (data: string) => {
ws.send(data.toString()); ws.send(data.toString());
// console.log(`OUTPUT: ${data.toString()}`);
}) })
.stderr.on("data", (data) => { .stderr.on("data", (data) => {
ws.send(data.toString()); ws.send(data.toString());
// console.error(`STDERR: ${data.toString()}`);
}); });
}); });
}) })