Merge pull request #847 from Dokploy/feat/improve-server-setup

Feat/improve server setup
Dokploy · Dec 9, 2024 · 96fbfa7 · 96fbfa7
2 parents 13e9a50 + 6874ede
commit 96fbfa7
Show file tree

Hide file tree

Showing 6 changed files with 340 additions and 5 deletions.
diff --git a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
@@ -33,6 +33,7 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
 import { GPUSupport } from "./gpu-support";
+import { ValidateServer } from "./validate-server";
 
 interface Props {
 	serverId: string;
@@ -90,9 +91,10 @@ export const SetupServer = ({ serverId }: Props) => {
 				) : (
 					<div id="hook-form-add-gitlab" className="grid w-full gap-1">
 						<Tabs defaultValue="ssh-keys">
-							<TabsList className="grid grid-cols-3 w-[400px]">
+							<TabsList className="grid grid-cols-4 w-[600px]">
 								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
 								<TabsTrigger value="deployments">Deployments</TabsTrigger>
+								<TabsTrigger value="validate">Validate</TabsTrigger>
 								<TabsTrigger value="gpu-setup">GPU Setup</TabsTrigger>
 							</TabsList>
 							<TabsContent
@@ -203,7 +205,7 @@ export const SetupServer = ({ serverId }: Props) => {
 									<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-row gap-2 justify-between w-full max-sm:flex-col">
 													<div className="flex flex-col gap-1">
 														<CardTitle className="text-xl">
 															Deployments
@@ -293,6 +295,14 @@ export const SetupServer = ({ serverId }: Props) => {
 									</div>
 								</CardContent>
 							</TabsContent>
+							<TabsContent
+								value="validate"
+								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">
+									<ValidateServer serverId={serverId} />
+								</div>
+							</TabsContent>
 							<TabsContent
 								value="gpu-setup"
 								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"

diff --git a/apps/dokploy/components/dashboard/settings/servers/validate-server.tsx b/apps/dokploy/components/dashboard/settings/servers/validate-server.tsx
@@ -0,0 +1,136 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Loader2, PcCase, RefreshCw } from "lucide-react";
+import { StatusRow } from "./gpu-support";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+interface Props {
+	serverId: string;
+}
+
+export const ValidateServer = ({ serverId }: Props) => {
+	const [isRefreshing, setIsRefreshing] = useState(false);
+	const { data, refetch, error, isLoading, isError } =
+		api.server.validate.useQuery(
+			{ serverId },
+			{
+				enabled: !!serverId,
+			},
+		);
+	const utils = api.useUtils();
+	return (
+		<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  max-sm:flex-col">
+							<div className="flex flex-col gap-1">
+								<div className="flex items-center gap-2">
+									<PcCase className="size-5" />
+									<CardTitle className="text-xl">Setup Validation</CardTitle>
+								</div>
+								<CardDescription>
+									Check if your server is ready for deployment
+								</CardDescription>
+							</div>
+							<Button
+								isLoading={isRefreshing}
+								onClick={async () => {
+									setIsRefreshing(true);
+									await refetch();
+									setIsRefreshing(false);
+								}}
+							>
+								<RefreshCw className="size-4" />
+								Refresh
+							</Button>
+						</div>
+						<div className="flex items-center gap-2 w-full">
+							{isError && (
+								<AlertBlock type="error" className="w-full">
+									{error.message}
+								</AlertBlock>
+							)}
+						</div>
+					</CardHeader>
+
+					<CardContent className="flex flex-col gap-4">
+						{isLoading ? (
+							<div className="flex items-center justify-center text-muted-foreground py-4">
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								<span>Checking Server Configuration</span>
+							</div>
+						) : (
+							<div className="grid w-full gap-4">
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">Status</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										Shows the server configuration status
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="Docker Installed"
+											isEnabled={data?.docker?.enabled}
+											description={
+												data?.docker?.enabled
+													? `Installed: ${data?.docker?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="RClone Installed"
+											isEnabled={data?.rclone?.enabled}
+											description={
+												data?.rclone?.enabled
+													? `Installed: ${data?.rclone?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Nixpacks Installed"
+											isEnabled={data?.nixpacks?.enabled}
+											description={
+												data?.nixpacks?.enabled
+													? `Installed: ${data?.nixpacks?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Buildpacks Installed"
+											isEnabled={data?.buildpacks?.enabled}
+											description={
+												data?.buildpacks?.enabled
+													? `Installed: ${data?.buildpacks?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Dokploy Network Installed"
+											isEnabled={data?.isDokployNetworkInstalled}
+										/>
+										<StatusRow
+											label="Swarm Installed"
+											isEnabled={data?.isSwarmInstalled}
+										/>
+										<StatusRow
+											label="Main Directory Created"
+											isEnabled={data?.isMainDirectoryInstalled}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</CardContent>
+	);
+};
diff --git a/apps/dokploy/server/api/routers/server.ts b/apps/dokploy/server/api/routers/server.ts
@@ -26,6 +26,7 @@ import {
 	haveActiveServices,
 	removeDeploymentsByServerId,
 	serverSetup,
+	serverValidate,
 	updateServerById,
 } from "@dokploy/server";
 import { TRPCError } from "@trpc/server";
@@ -118,6 +119,47 @@ export const serverRouter = createTRPCRouter({
 				throw error;
 			}
 		}),
+	validate: protectedProcedure
+		.input(apiFindOneServer)
+		.query(async ({ input, ctx }) => {
+			try {
+				const server = await findServerById(input.serverId);
+				if (server.adminId !== ctx.user.adminId) {
+					throw new TRPCError({
+						code: "UNAUTHORIZED",
+						message: "You are not authorized to validate this server",
+					});
+				}
+				const response = await serverValidate(input.serverId);
+				return response as unknown as {
+					docker: {
+						enabled: boolean;
+						version: string;
+					};
+					rclone: {
+						enabled: boolean;
+						version: string;
+					};
+					nixpacks: {
+						enabled: boolean;
+						version: string;
+					};
+					buildpacks: {
+						enabled: boolean;
+						version: string;
+					};
+					isDokployNetworkInstalled: boolean;
+					isSwarmInstalled: boolean;
+					isMainDirectoryInstalled: boolean;
+				};
+			} catch (error) {
+				throw new TRPCError({
+					code: "BAD_REQUEST",
+					message: error instanceof Error ? error?.message : `Error: ${error}`,
+					cause: error as Error,
+				});
+			}
+		}),
 	remove: protectedProcedure
 		.input(apiRemoveServer)
 		.mutation(async ({ input, ctx }) => {

diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
@@ -41,6 +41,7 @@ export * from "./setup/redis-setup";
 export * from "./setup/server-setup";
 export * from "./setup/setup";
 export * from "./setup/traefik-setup";
+export * from "./setup/server-validate";
 
 export * from "./utils/backups/index";
 export * from "./utils/backups/mariadb";

diff --git a/packages/server/src/setup/server-setup.ts b/packages/server/src/setup/server-setup.ts
@@ -132,14 +132,16 @@ const installRequirements = async (serverId: string, logPath: string) => {
 				echo -e "---------------------------------------------\n"
 				echo -e "1. Installing required packages (curl, wget, git, jq, openssl). "
 
+				command_exists() {
+					command -v "$@" > /dev/null 2>&1
+				}
+
 				${installUtilities()}
 
 				echo -e "2. Validating ports. "
 				${validatePorts()}
 
-				command_exists() {
-					command -v "$@" > /dev/null 2>&1
-				}
+				
 
 				echo -e "3. Installing RClone. "
 				${installRClone()}