Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: gpu support component and related api routers; update template environment variables

Browse Source
This commit is contained in:
vishalkadam47
2024-11-05 12:07:35 +05:30
parent 3b5e8921d0
commit b53da82204
3 changed files with 249 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

443
apps/dokploy/components/dashboard/settings/servers/gpu-support.tsx
View File

@@ -1,219 +1,260 @@
import { Button } from '@/components/ui/button'; import { AlertBlock } from "@/components/shared/alert-block";
import { useState } from 'react'; import { DialogAction } from "@/components/shared/dialog-action";
import { api } from '@/utils/api'; import { Button } from "@/components/ui/button";
import { toast } from 'sonner'; import {
import { TRPCClientError } from '@trpc/client'; Card,
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; CardContent,
import { DialogAction } from '@/components/shared/dialog-action'; CardDescription,
import { AlertBlock } from '@/components/shared/alert-block'; CardHeader,
import { Cpu, CheckCircle2, XCircle, Loader2 } from 'lucide-react'; CardTitle,
} from "@/components/ui/card";
import { api } from "@/utils/api";
import { TRPCClientError } from "@trpc/client";
import { CheckCircle2, Cpu, Loader2, XCircle } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
interface GPUSupportProps { interface GPUSupportProps {
serverId?: string; serverId?: string;
} }
export function GPUSupport({ serverId }: GPUSupportProps) { export function GPUSupport({ serverId }: GPUSupportProps) {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const utils = api.useContext(); const utils = api.useContext();
const { data: gpuStatus, isLoading: isChecking } = api.settings.checkGPUStatus.useQuery( const { data: gpuStatus, isLoading: isChecking } =
{ serverId }, api.settings.checkGPUStatus.useQuery(
{ { serverId },
enabled: !!serverId, {
refetchInterval: 5000 enabled: !!serverId,
} refetchInterval: 5000,
); },
);
const setupGPU = api.settings.setupGPU.useMutation({ const setupGPU = api.settings.setupGPU.useMutation({
onMutate: () => { onMutate: () => {
setIsLoading(true); setIsLoading(true);
}, },
onSuccess: async () => { onSuccess: async () => {
toast.success('GPU support enabled successfully'); toast.success("GPU support enabled successfully");
setIsLoading(false); setIsLoading(false);
await Promise.all([
utils.settings.checkGPUStatus.invalidate({ serverId }),
utils.server.invalidate()
]);
},
onError: (error) => {
if (error instanceof TRPCClientError) {
const errorMessage = error.message;
if (errorMessage.includes('permission denied')) {
toast.error('Permission denied. Please ensure proper sudo access.');
} else if (errorMessage.includes('Failed to configure GPU')) {
toast.error('GPU configuration failed. Please check system requirements.');
} else {
toast.error(errorMessage);
}
} else {
toast.error('Failed to enable GPU support. Please check server logs.');
}
setIsLoading(false);
}
});
const handleEnableGPU = async () => { await Promise.all([
if (!serverId) { utils.settings.checkGPUStatus.invalidate({ serverId }),
toast.error('No server selected'); utils.server.invalidate(),
return; ]);
} },
onError: (error) => {
if (error instanceof TRPCClientError) {
const errorMessage = error.message;
if (errorMessage.includes("permission denied")) {
toast.error("Permission denied. Please ensure proper sudo access.");
} else if (errorMessage.includes("Failed to configure GPU")) {
toast.error(
"GPU configuration failed. Please check system requirements.",
);
} else {
toast.error(errorMessage);
}
} else {
toast.error("Failed to enable GPU support. Please check server logs.");
}
try { setIsLoading(false);
await setupGPU.mutateAsync({ serverId }); },
} catch (error) { });
// Error handling is done in mutation's onError
}
};
return ( const handleEnableGPU = async () => {
<CardContent className="p-0"> if (!serverId) {
<div className="flex flex-col gap-4"> toast.error("No server selected");
<Card className="bg-background"> return;
<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">
<div className="flex items-center gap-2">
<Cpu className="size-5" />
<CardTitle className="text-xl">GPU Configuration</CardTitle>
</div>
<CardDescription>Configure and monitor GPU support</CardDescription>
</div>
<DialogAction
title="Enable GPU Support?"
description="This will enable GPU support for Docker Swarm on this server. Make sure you have the required hardware and drivers installed."
onClick={handleEnableGPU}
>
<Button
isLoading={isLoading}
disabled={isLoading || !serverId || isChecking}
>
{isLoading ? (
'Enabling GPU...'
) : gpuStatus?.swarmEnabled ? (
'Reconfigure GPU'
) : (
'Enable GPU'
)}
</Button>
</DialogAction>
</div>
</CardHeader>
<CardContent className="flex flex-col gap-4"> try {
<AlertBlock type="info"> await setupGPU.mutateAsync({ serverId });
<div className="font-medium mb-2">System Requirements:</div> } catch (error) {
<ul className="list-disc list-inside text-sm space-y-1"> // Error handling is done in mutation's onError
<li>NVIDIA drivers must be installed on the host system</li> }
<li>NVIDIA Container Runtime is required for GPU support</li> };
<li>Compatible GPU hardware must be present</li>
</ul>
</AlertBlock>
{isChecking ? ( return (
<div className="flex items-center justify-center text-muted-foreground py-4"> <CardContent className="p-0">
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> <div className="flex flex-col gap-4">
<span>Checking GPU status...</span> <Card className="bg-background">
</div> <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="grid gap-4"> <div className="flex flex-col gap-1">
{/* Prerequisites Section */} <div className="flex items-center gap-2">
<div className="border rounded-lg p-4"> <Cpu className="size-5" />
<h3 className="text-lg font-semibold mb-1">Prerequisites</h3> <CardTitle className="text-xl">GPU Configuration</CardTitle>
<p className="text-sm text-muted-foreground mb-4">Shows all software checks and available hardware</p> </div>
<div className="grid gap-2.5"> <CardDescription>
<StatusRow Configure and monitor GPU support
label="NVIDIA Driver" </CardDescription>
isEnabled={gpuStatus?.driverInstalled} </div>
description={gpuStatus?.driverVersion ? `Installed (v${gpuStatus.driverVersion})` : 'Not Installed'} <DialogAction
/> title="Enable GPU Support?"
<StatusRow description="This will enable GPU support for Docker Swarm on this server. Make sure you have the required hardware and drivers installed."
label="GPU Model" onClick={handleEnableGPU}
value={gpuStatus?.gpuModel || 'Not Detected'} >
showIcon={false} <Button
/> isLoading={isLoading}
<StatusRow disabled={isLoading || !serverId || isChecking}
label="GPU Memory" >
value={gpuStatus?.memoryInfo || 'Not Available'} {isLoading
showIcon={false} ? "Enabling GPU..."
/> : gpuStatus?.swarmEnabled
<StatusRow ? "Reconfigure GPU"
label="Available GPUs" : "Enable GPU"}
value={gpuStatus?.availableGPUs || 0} </Button>
showIcon={false} </DialogAction>
/> </div>
<StatusRow </CardHeader>
label="CUDA Support"
isEnabled={gpuStatus?.cudaSupport}
description={gpuStatus?.cudaVersion ? `Available (v${gpuStatus.cudaVersion})` : 'Not Available'}
/>
<StatusRow
label="NVIDIA Container Runtime"
isEnabled={gpuStatus?.runtimeInstalled}
description={gpuStatus?.runtimeInstalled ? 'Installed' : 'Not Installed'}
/>
</div>
</div>
{/* Configuration Status */} <CardContent className="flex flex-col gap-4">
<div className="border rounded-lg p-4"> <AlertBlock type="info">
<h3 className="text-lg font-semibold mb-1">Docker Swarm GPU Status</h3> <div className="font-medium mb-2">System Requirements:</div>
<p className="text-sm text-muted-foreground mb-4">Shows the configuration state that changes with the Enable GPU</p> <ul className="list-disc list-inside text-sm space-y-1">
<div className="grid gap-2.5"> <li>NVIDIA drivers must be installed on the host system</li>
<StatusRow <li>NVIDIA Container Runtime is required for GPU support</li>
label="Runtime Configuration" <li>Compatible GPU hardware must be present</li>
isEnabled={gpuStatus?.runtimeConfigured} </ul>
description={gpuStatus?.runtimeConfigured ? 'Default Runtime' : 'Not Default Runtime'} </AlertBlock>
/>
<StatusRow {isChecking ? (
label="Swarm GPU Support" <div className="flex items-center justify-center text-muted-foreground py-4">
isEnabled={gpuStatus?.swarmEnabled} <Loader2 className="mr-2 h-4 w-4 animate-spin" />
description={gpuStatus?.swarmEnabled <span>Checking GPU status...</span>
? `Enabled (${gpuStatus.gpuResources} GPU${gpuStatus.gpuResources !== 1 ? 's' : ''})` </div>
: 'Not Enabled' ) : (
} <div className="grid gap-4">
/> {/* Prerequisites Section */}
</div> <div className="border rounded-lg p-4">
</div> <h3 className="text-lg font-semibold mb-1">Prerequisites</h3>
</div> <p className="text-sm text-muted-foreground mb-4">
)} Shows all software checks and available hardware
</CardContent> </p>
</Card> <div className="grid gap-2.5">
</div> <StatusRow
</CardContent> label="NVIDIA Driver"
); isEnabled={gpuStatus?.driverInstalled}
description={
gpuStatus?.driverVersion
? `Installed (v${gpuStatus.driverVersion})`
: "Not Installed"
}
/>
<StatusRow
label="GPU Model"
value={gpuStatus?.gpuModel || "Not Detected"}
showIcon={false}
/>
<StatusRow
label="GPU Memory"
value={gpuStatus?.memoryInfo || "Not Available"}
showIcon={false}
/>
<StatusRow
label="Available GPUs"
value={gpuStatus?.availableGPUs || 0}
showIcon={false}
/>
<StatusRow
label="CUDA Support"
isEnabled={gpuStatus?.cudaSupport}
description={
gpuStatus?.cudaVersion
? `Available (v${gpuStatus.cudaVersion})`
: "Not Available"
}
/>
<StatusRow
label="NVIDIA Container Runtime"
isEnabled={gpuStatus?.runtimeInstalled}
description={
gpuStatus?.runtimeInstalled
? "Installed"
: "Not Installed"
}
/>
</div>
</div>
{/* Configuration Status */}
<div className="border rounded-lg p-4">
<h3 className="text-lg font-semibold mb-1">
Docker Swarm GPU Status
</h3>
<p className="text-sm text-muted-foreground mb-4">
Shows the configuration state that changes with the Enable
GPU
</p>
<div className="grid gap-2.5">
<StatusRow
label="Runtime Configuration"
isEnabled={gpuStatus?.runtimeConfigured}
description={
gpuStatus?.runtimeConfigured
? "Default Runtime"
: "Not Default Runtime"
}
/>
<StatusRow
label="Swarm GPU Support"
isEnabled={gpuStatus?.swarmEnabled}
description={
gpuStatus?.swarmEnabled
? `Enabled (${gpuStatus.gpuResources} GPU${gpuStatus.gpuResources !== 1 ? "s" : ""})`
: "Not Enabled"
}
/>
</div>
</div>
</div>
)}
</CardContent>
</Card>
</div>
</CardContent>
);
} }
interface StatusRowProps { interface StatusRowProps {
label: string; label: string;
isEnabled?: boolean; isEnabled?: boolean;
description?: string; description?: string;
value?: string | number; value?: string | number;
showIcon?: boolean; showIcon?: boolean;
} }
function StatusRow({ label, isEnabled, description, value, showIcon = true }: StatusRowProps) { function StatusRow({
return ( label,
<div className="flex items-center justify-between"> isEnabled,
<span className="text-sm">{label}</span> description,
<div className="flex items-center gap-2"> value,
{showIcon ? ( showIcon = true,
<> }: StatusRowProps) {
{isEnabled ? ( return (
<CheckCircle2 className="size-4 text-green-500" /> <div className="flex items-center justify-between">
) : ( <span className="text-sm">{label}</span>
<XCircle className="size-4 text-red-500" /> <div className="flex items-center gap-2">
)} {showIcon ? (
<span className={`text-sm ${isEnabled ? 'text-green-500' : 'text-red-500'}`}> <>
{description || (isEnabled ? 'Installed' : 'Not Installed')} {isEnabled ? (
</span> <CheckCircle2 className="size-4 text-green-500" />
</> ) : (
) : ( <XCircle className="size-4 text-red-500" />
<span className="text-sm text-muted-foreground">{value}</span> )}
)} <span
</div> className={`text-sm ${isEnabled ? "text-green-500" : "text-red-500"}`}
</div> >
); {description || (isEnabled ? "Installed" : "Not Installed")}
} </span>
</>
) : (
<span className="text-sm text-muted-foreground">{value}</span>
)}
</div>
</div>
);
}

5
apps/dokploy/server/api/routers/settings.ts
View File

@@ -52,10 +52,7 @@ import {
writeMainConfig, writeMainConfig,
writeTraefikConfigInPath, writeTraefikConfigInPath,
} from "@dokploy/server"; } from "@dokploy/server";
import { import { checkGPUStatus, setupGPUSupport } from "@dokploy/server";
checkGPUStatus,
setupGPUSupport,
} from "@dokploy/server";
import { generateOpenApiDocument } from "@dokploy/trpc-openapi"; import { generateOpenApiDocument } from "@dokploy/trpc-openapi";
import { TRPCError } from "@trpc/server"; import { TRPCError } from "@trpc/server";
import { sql } from "drizzle-orm"; import { sql } from "drizzle-orm";

12
apps/dokploy/templates/blender/index.ts
View File

@@ -19,12 +19,12 @@ export function generate(schema: Schema): Template {
]; ];
const envs = [ const envs = [
`PUID=1000`, "PUID=1000",
`PGID=1000`, "PGID=1000",
`TZ=Etc/UTC`, "TZ=Etc/UTC",
`SUBFOLDER=/`, "SUBFOLDER=/",
`NVIDIA_VISIBLE_DEVICES=all`, "NVIDIA_VISIBLE_DEVICES=all",
`NVIDIA_DRIVER_CAPABILITIES=all`, "NVIDIA_DRIVER_CAPABILITIES=all",
]; ];
return { return {