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

Merge pull request #886 from DJKnaeckebrot/feature/delete-docker-volumes

Browse Source 
feat: option to delete docker volumes on service deletion
This commit is contained in:
Mauricio Siu
2024-12-23 02:38:28 -06:00
committed by GitHub
parent 455cae6b8c 353effd720
commit 96cdffb5b9
41 changed files with 988 additions and 936 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
View File

@@ -1,3 +1,4 @@
import { Badge } from "@/components/ui/badge";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -5,11 +6,10 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Loader2 } from "lucide-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { TerminalLine } from "../../docker/logs/terminal-line"; import { TerminalLine } from "../../docker/logs/terminal-line";
import { LogLine, parseLogs } from "../../docker/logs/utils"; import { type LogLine, parseLogs } from "../../docker/logs/utils";
import { Badge } from "@/components/ui/badge";
import { Loader2 } from "lucide-react";
interface Props { interface Props {
logPath: string | null; logPath: string | null;
@@ -24,12 +24,11 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
const [autoScroll, setAutoScroll] = useState(true); const [autoScroll, setAutoScroll] = useState(true);
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => { const scrollToBottom = () => {
if (autoScroll && scrollRef.current) { if (autoScroll && scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight; scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
} }
}; };
const handleScroll = () => { const handleScroll = () => {
if (!scrollRef.current) return; if (!scrollRef.current) return;
@@ -37,7 +36,7 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
const { scrollTop, scrollHeight, clientHeight } = scrollRef.current; const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10; const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
setAutoScroll(isAtBottom); setAutoScroll(isAtBottom);
}; };
useEffect(() => { useEffect(() => {
if (!open || !logPath) return; if (!open || !logPath) return;
@@ -69,7 +68,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
}; };
}, [logPath, open]); }, [logPath, open]);
useEffect(() => { useEffect(() => {
const logs = parseLogs(data); const logs = parseLogs(data);
setFilteredLogs(logs); setFilteredLogs(logs);
@@ -79,10 +77,9 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
scrollToBottom(); scrollToBottom();
if (autoScroll && scrollRef.current) { if (autoScroll && scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight; scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
} }
}, [filteredLogs, autoScroll]); }, [filteredLogs, autoScroll]);
return ( return (
<Dialog <Dialog
@@ -104,7 +101,10 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
<DialogHeader> <DialogHeader>
<DialogTitle>Deployment</DialogTitle> <DialogTitle>Deployment</DialogTitle>
<DialogDescription> <DialogDescription>
See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge> See all the details of this deployment |{" "}
<Badge variant="blank" className="text-xs">
{filteredLogs.length} lines
</Badge>
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
@@ -112,19 +112,17 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
ref={scrollRef} ref={scrollRef}
onScroll={handleScroll} onScroll={handleScroll}
className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar" className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
> { >
filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => ( {" "}
<TerminalLine {filteredLogs.length > 0 ? (
key={index} filteredLogs.map((log: LogLine, index: number) => (
log={log} <TerminalLine key={index} log={log} noTimestamp />
noTimestamp ))
/> ) : (
)) : <div className="flex justify-center items-center h-full text-muted-foreground">
( <Loader2 className="h-6 w-6 animate-spin" />
<div className="flex justify-center items-center h-full text-muted-foreground"> </div>
<Loader2 className="h-6 w-6 animate-spin" /> )}
</div>
)}
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

4
apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
View File

@@ -26,7 +26,9 @@ export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
return ( return (
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button className="sm:w-auto w-full" size="sm" variant="outline">View Builds</Button> <Button className="sm:w-auto w-full" size="sm" variant="outline">
View Builds
</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl"> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
<DialogHeader> <DialogHeader>

422
apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
View File

@@ -1,237 +1,237 @@
import React from "react"; import { DateTooltip } from "@/components/shared/date-tooltip";
import { DialogAction } from "@/components/shared/dialog-action";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { import {
Clock, Card,
GitBranch, CardContent,
GitPullRequest, CardDescription,
Pencil, CardHeader,
RocketIcon, CardTitle,
} from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { api } from "@/utils/api";
import {
Clock,
GitBranch,
GitPullRequest,
Pencil,
RocketIcon,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { ShowModalLogs } from "../../settings/web-server/show-modal-logs"; import React from "react";
import { DialogAction } from "@/components/shared/dialog-action";
import { api } from "@/utils/api";
import { ShowPreviewBuilds } from "./show-preview-builds";
import { DateTooltip } from "@/components/shared/date-tooltip";
import { toast } from "sonner"; import { toast } from "sonner";
import { StatusTooltip } from "@/components/shared/status-tooltip"; import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
import { AddPreviewDomain } from "./add-preview-domain"; import { AddPreviewDomain } from "./add-preview-domain";
import { import { ShowPreviewBuilds } from "./show-preview-builds";
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { ShowPreviewSettings } from "./show-preview-settings"; import { ShowPreviewSettings } from "./show-preview-settings";
interface Props { interface Props {
applicationId: string; applicationId: string;
} }
export const ShowPreviewDeployments = ({ applicationId }: Props) => { export const ShowPreviewDeployments = ({ applicationId }: Props) => {
const { data } = api.application.one.useQuery({ applicationId }); const { data } = api.application.one.useQuery({ applicationId });
const { mutateAsync: deletePreviewDeployment, isLoading } = const { mutateAsync: deletePreviewDeployment, isLoading } =
api.previewDeployment.delete.useMutation(); api.previewDeployment.delete.useMutation();
const { data: previewDeployments, refetch: refetchPreviewDeployments } = const { data: previewDeployments, refetch: refetchPreviewDeployments } =
api.previewDeployment.all.useQuery( api.previewDeployment.all.useQuery(
{ applicationId }, { applicationId },
{ {
enabled: !!applicationId, enabled: !!applicationId,
} },
); );
const handleDeletePreviewDeployment = async (previewDeploymentId: string) => { const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
deletePreviewDeployment({ deletePreviewDeployment({
previewDeploymentId: previewDeploymentId, previewDeploymentId: previewDeploymentId,
}) })
.then(() => { .then(() => {
refetchPreviewDeployments(); refetchPreviewDeployments();
toast.success("Preview deployment deleted"); toast.success("Preview deployment deleted");
}) })
.catch((error) => { .catch((error) => {
toast.error(error.message); toast.error(error.message);
}); });
}; };
return ( return (
<Card className="bg-background"> <Card className="bg-background">
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2"> <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<CardTitle className="text-xl">Preview Deployments</CardTitle> <CardTitle className="text-xl">Preview Deployments</CardTitle>
<CardDescription>See all the preview deployments</CardDescription> <CardDescription>See all the preview deployments</CardDescription>
</div> </div>
{data?.isPreviewDeploymentsActive && ( {data?.isPreviewDeploymentsActive && (
<ShowPreviewSettings applicationId={applicationId} /> <ShowPreviewSettings applicationId={applicationId} />
)} )}
</CardHeader> </CardHeader>
<CardContent className="flex flex-col gap-4"> <CardContent className="flex flex-col gap-4">
{data?.isPreviewDeploymentsActive ? ( {data?.isPreviewDeploymentsActive ? (
<> <>
<div className="flex flex-col gap-2 text-sm"> <div className="flex flex-col gap-2 text-sm">
<span> <span>
Preview deployments are a way to test your application before it Preview deployments are a way to test your application before it
is deployed to production. It will create a new deployment for is deployed to production. It will create a new deployment for
each pull request you create. each pull request you create.
</span> </span>
</div> </div>
{!previewDeployments?.length ? ( {!previewDeployments?.length ? (
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10"> <div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
<RocketIcon className="size-8 text-muted-foreground" /> <RocketIcon className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground"> <span className="text-base text-muted-foreground">
No preview deployments found No preview deployments found
</span> </span>
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{previewDeployments.map((previewDeployment) => ( {previewDeployments.map((previewDeployment) => (
<div <div
key={previewDeployment.previewDeploymentId} key={previewDeployment.previewDeploymentId}
className="w-full border rounded-xl" className="w-full border rounded-xl"
> >
<div className="md:p-6 p-2 md:pb-3 flex flex-row items-center justify-between"> <div className="md:p-6 p-2 md:pb-3 flex flex-row items-center justify-between">
<span className="text-lg font-bold"> <span className="text-lg font-bold">
{previewDeployment.pullRequestTitle} {previewDeployment.pullRequestTitle}
</span> </span>
<Badge <Badge
variant="outline" variant="outline"
className="text-sm font-medium gap-x-2" className="text-sm font-medium gap-x-2"
> >
<StatusTooltip <StatusTooltip
status={previewDeployment.previewStatus} status={previewDeployment.previewStatus}
className="size-2.5" className="size-2.5"
/> />
{previewDeployment.previewStatus {previewDeployment.previewStatus
?.replace("running", "Running") ?.replace("running", "Running")
.replace("done", "Done") .replace("done", "Done")
.replace("error", "Error") .replace("error", "Error")
.replace("idle", "Idle") || "Idle"} .replace("idle", "Idle") || "Idle"}
</Badge> </Badge>
</div> </div>
<div className="md:p-6 p-2 md:pt-0 space-y-4"> <div className="md:p-6 p-2 md:pt-0 space-y-4">
<div className="flex sm:flex-row flex-col items-center gap-2"> <div className="flex sm:flex-row flex-col items-center gap-2">
<Link <Link
href={`http://${previewDeployment.domain?.host}`} href={`http://${previewDeployment.domain?.host}`}
target="_blank" target="_blank"
className="text-sm text-blue-500/95 hover:underline gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2" className="text-sm text-blue-500/95 hover:underline gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2"
> >
{previewDeployment.domain?.host} {previewDeployment.domain?.host}
</Link> </Link>
<AddPreviewDomain <AddPreviewDomain
previewDeploymentId={ previewDeploymentId={
previewDeployment.previewDeploymentId previewDeployment.previewDeploymentId
} }
domainId={previewDeployment.domain?.domainId} domainId={previewDeployment.domain?.domainId}
> >
<Button <Button
className="sm:w-auto w-full" className="sm:w-auto w-full"
size="sm" size="sm"
variant="outline" variant="outline"
> >
<Pencil className="size-4" /> <Pencil className="size-4" />
Edit Edit
</Button> </Button>
</AddPreviewDomain> </AddPreviewDomain>
</div> </div>
<div className="flex sm:flex-row text-sm flex-col items-center justify-between"> <div className="flex sm:flex-row text-sm flex-col items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<GitBranch className="size-5 text-gray-400" /> <GitBranch className="size-5 text-gray-400" />
<span>Branch:</span> <span>Branch:</span>
<Badge className="p-2" variant="blank"> <Badge className="p-2" variant="blank">
{previewDeployment.branch} {previewDeployment.branch}
</Badge> </Badge>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Clock className="size-5 text-gray-400" /> <Clock className="size-5 text-gray-400" />
<span>Deployed:</span> <span>Deployed:</span>
<Badge className="p-2" variant="blank"> <Badge className="p-2" variant="blank">
<DateTooltip date={previewDeployment.createdAt} /> <DateTooltip date={previewDeployment.createdAt} />
</Badge> </Badge>
</div> </div>
</div> </div>
<Separator /> <Separator />
<div className="rounded-lg bg-muted p-4"> <div className="rounded-lg bg-muted p-4">
<h3 className="mb-2 text-sm font-medium"> <h3 className="mb-2 text-sm font-medium">
Pull Request Pull Request
</h3> </h3>
<div className="flex items-center space-x-2 text-sm text-muted-foreground"> <div className="flex items-center space-x-2 text-sm text-muted-foreground">
<GitPullRequest className="size-5 text-gray-400" /> <GitPullRequest className="size-5 text-gray-400" />
<Link <Link
className="hover:text-blue-500/95 hover:underline" className="hover:text-blue-500/95 hover:underline"
target="_blank" target="_blank"
href={previewDeployment.pullRequestURL} href={previewDeployment.pullRequestURL}
> >
{previewDeployment.pullRequestTitle} {previewDeployment.pullRequestTitle}
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className="justify-center flex-wrap md:p-6 p-2 md:pt-0"> <div className="justify-center flex-wrap md:p-6 p-2 md:pt-0">
<div className="flex flex-wrap justify-end gap-2"> <div className="flex flex-wrap justify-end gap-2">
<ShowModalLogs <ShowModalLogs
appName={previewDeployment.appName} appName={previewDeployment.appName}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
> >
<Button <Button
className="sm:w-auto w-full" className="sm:w-auto w-full"
variant="outline" variant="outline"
size="sm" size="sm"
> >
View Logs View Logs
</Button> </Button>
</ShowModalLogs> </ShowModalLogs>
<ShowPreviewBuilds <ShowPreviewBuilds
deployments={previewDeployment.deployments || []} deployments={previewDeployment.deployments || []}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
/> />
<DialogAction <DialogAction
title="Delete Preview" title="Delete Preview"
description="Are you sure you want to delete this preview?" description="Are you sure you want to delete this preview?"
onClick={() => onClick={() =>
handleDeletePreviewDeployment( handleDeletePreviewDeployment(
previewDeployment.previewDeploymentId previewDeployment.previewDeploymentId,
) )
} }
> >
<Button <Button
className="sm:w-auto w-full" className="sm:w-auto w-full"
variant="destructive" variant="destructive"
isLoading={isLoading} isLoading={isLoading}
size="sm" size="sm"
> >
Delete Preview Delete Preview
</Button> </Button>
</DialogAction> </DialogAction>
</div> </div>
</div> </div>
</div> </div>
))} ))}
</div> </div>
)} )}
</> </>
) : ( ) : (
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10"> <div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
<RocketIcon className="size-8 text-muted-foreground" /> <RocketIcon className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground"> <span className="text-base text-muted-foreground">
Preview deployments are disabled for this application, please Preview deployments are disabled for this application, please
enable it enable it
</span> </span>
<ShowPreviewSettings applicationId={applicationId} /> <ShowPreviewSettings applicationId={applicationId} />
</div> </div>
)} )}
</CardContent> </CardContent>
</Card> </Card>
); );
}; };

14
apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx
View File

@@ -1,5 +1,3 @@
import { api } from "@/utils/api";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@@ -20,12 +18,7 @@ import {
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input, NumberInput } from "@/components/ui/input"; import { Input, NumberInput } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Secrets } from "@/components/ui/secrets"; import { Secrets } from "@/components/ui/secrets";
import { toast } from "sonner";
import { Switch } from "@/components/ui/switch";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -33,6 +26,13 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
const schema = z.object({ const schema = z.object({
env: z.string(), env: z.string(),

28
apps/dokploy/components/dashboard/compose/delete-compose.tsx
View File

@@ -1,5 +1,6 @@
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -12,6 +13,7 @@ import {
import { import {
Form, Form,
FormControl, FormControl,
FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
@@ -32,6 +34,7 @@ const deleteComposeSchema = z.object({
projectName: z.string().min(1, { projectName: z.string().min(1, {
message: "Compose name is required", message: "Compose name is required",
}), }),
deleteVolumes: z.boolean(),
}); });
type DeleteCompose = z.infer<typeof deleteComposeSchema>; type DeleteCompose = z.infer<typeof deleteComposeSchema>;
@@ -51,6 +54,7 @@ export const DeleteCompose = ({ composeId }: Props) => {
const form = useForm<DeleteCompose>({ const form = useForm<DeleteCompose>({
defaultValues: { defaultValues: {
projectName: "", projectName: "",
deleteVolumes: false,
}, },
resolver: zodResolver(deleteComposeSchema), resolver: zodResolver(deleteComposeSchema),
}); });
@@ -58,7 +62,8 @@ export const DeleteCompose = ({ composeId }: Props) => {
const onSubmit = async (formData: DeleteCompose) => { const onSubmit = async (formData: DeleteCompose) => {
const expectedName = `${data?.name}/${data?.appName}`; const expectedName = `${data?.name}/${data?.appName}`;
if (formData.projectName === expectedName) { if (formData.projectName === expectedName) {
await mutateAsync({ composeId }) const { deleteVolumes } = formData;
await mutateAsync({ composeId, deleteVolumes })
.then((result) => { .then((result) => {
push(`/dashboard/project/${result?.projectId}`); push(`/dashboard/project/${result?.projectId}`);
toast.success("Compose deleted successfully"); toast.success("Compose deleted successfully");
@@ -133,6 +138,27 @@ export const DeleteCompose = ({ composeId }: Props) => {
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="deleteVolumes"
render={({ field }) => (
<FormItem>
<div className="flex items-center">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<FormLabel className="ml-2">
Delete volumes associated with this compose
</FormLabel>
</div>
<FormMessage />
</FormItem>
)}
/>
</form> </form>
</Form> </Form>
</div> </div>

43
apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
View File

@@ -1,3 +1,4 @@
import { Badge } from "@/components/ui/badge";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -5,12 +6,10 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Loader2 } from "lucide-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { TerminalLine } from "../../docker/logs/terminal-line"; import { TerminalLine } from "../../docker/logs/terminal-line";
import { LogLine, parseLogs } from "../../docker/logs/utils"; import { type LogLine, parseLogs } from "../../docker/logs/utils";
import { Badge } from "@/components/ui/badge";
import { Loader2 } from "lucide-react";
interface Props { interface Props {
logPath: string | null; logPath: string | null;
@@ -32,9 +31,9 @@ export const ShowDeploymentCompose = ({
const scrollToBottom = () => { const scrollToBottom = () => {
if (autoScroll && scrollRef.current) { if (autoScroll && scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight; scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
} }
}; };
const handleScroll = () => { const handleScroll = () => {
if (!scrollRef.current) return; if (!scrollRef.current) return;
@@ -42,8 +41,7 @@ export const ShowDeploymentCompose = ({
const { scrollTop, scrollHeight, clientHeight } = scrollRef.current; const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10; const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
setAutoScroll(isAtBottom); setAutoScroll(isAtBottom);
}; };
useEffect(() => { useEffect(() => {
if (!open || !logPath) return; if (!open || !logPath) return;
@@ -76,7 +74,6 @@ export const ShowDeploymentCompose = ({
}; };
}, [logPath, open]); }, [logPath, open]);
useEffect(() => { useEffect(() => {
const logs = parseLogs(data); const logs = parseLogs(data);
setFilteredLogs(logs); setFilteredLogs(logs);
@@ -86,9 +83,9 @@ export const ShowDeploymentCompose = ({
scrollToBottom(); scrollToBottom();
if (autoScroll && scrollRef.current) { if (autoScroll && scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight; scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
} }
}, [filteredLogs, autoScroll]); }, [filteredLogs, autoScroll]);
return ( return (
<Dialog <Dialog
@@ -110,7 +107,10 @@ export const ShowDeploymentCompose = ({
<DialogHeader> <DialogHeader>
<DialogTitle>Deployment</DialogTitle> <DialogTitle>Deployment</DialogTitle>
<DialogDescription> <DialogDescription>
See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge> See all the details of this deployment |{" "}
<Badge variant="blank" className="text-xs">
{filteredLogs.length} lines
</Badge>
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
@@ -119,22 +119,15 @@ export const ShowDeploymentCompose = ({
onScroll={handleScroll} onScroll={handleScroll}
className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar" className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
> >
{filteredLogs.length > 0 ? (
filteredLogs.map((log: LogLine, index: number) => (
{ <TerminalLine key={index} log={log} noTimestamp />
filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => ( ))
<TerminalLine ) : (
key={index}
log={log}
noTimestamp
/>
)) :
(
<div className="flex justify-center items-center h-full text-muted-foreground"> <div className="flex justify-center items-center h-full text-muted-foreground">
<Loader2 className="h-6 w-6 animate-spin" /> <Loader2 className="h-6 w-6 animate-spin" />
</div> </div>
) )}
}
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

2
apps/dokploy/components/dashboard/compose/general/deploy-compose.tsx
View File

@@ -53,7 +53,7 @@ export const DeployCompose = ({ composeId }: Props) => {
}) })
.then(async () => { .then(async () => {
router.push( router.push(
`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments` `/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
); );
}) })
.catch(() => { .catch(() => {

536
apps/dokploy/components/dashboard/projects/show.tsx
View File

@@ -1,35 +1,35 @@
import { DateTooltip } from "@/components/shared/date-tooltip"; import { DateTooltip } from "@/components/shared/date-tooltip";
import { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
AlertDialogCancel, AlertDialogCancel,
AlertDialogContent, AlertDialogContent,
AlertDialogDescription, AlertDialogDescription,
AlertDialogFooter, AlertDialogFooter,
AlertDialogHeader, AlertDialogHeader,
AlertDialogTitle, AlertDialogTitle,
AlertDialogTrigger, AlertDialogTrigger,
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuGroup, DropdownMenuGroup,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { import {
AlertTriangle, AlertTriangle,
BookIcon, BookIcon,
ExternalLink, ExternalLink,
ExternalLinkIcon, ExternalLinkIcon,
FolderInput, FolderInput,
MoreHorizontalIcon, MoreHorizontalIcon,
TrashIcon, TrashIcon,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { Fragment } from "react"; import { Fragment } from "react";
@@ -38,257 +38,257 @@ import { ProjectEnviroment } from "./project-enviroment";
import { UpdateProject } from "./update"; import { UpdateProject } from "./update";
export const ShowProjects = () => { export const ShowProjects = () => {
const utils = api.useUtils(); const utils = api.useUtils();
const { data } = api.project.all.useQuery(); const { data } = api.project.all.useQuery();
const { data: auth } = api.auth.get.useQuery(); const { data: auth } = api.auth.get.useQuery();
const { data: user } = api.user.byAuthId.useQuery( const { data: user } = api.user.byAuthId.useQuery(
{ {
authId: auth?.id || "", authId: auth?.id || "",
}, },
{ {
enabled: !!auth?.id && auth?.rol === "user", enabled: !!auth?.id && auth?.rol === "user",
} },
); );
const { mutateAsync } = api.project.remove.useMutation(); const { mutateAsync } = api.project.remove.useMutation();
return ( return (
<> <>
{data?.length === 0 && ( {data?.length === 0 && (
<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4"> <div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
<FolderInput className="size-10 md:size-28 text-muted-foreground" /> <FolderInput className="size-10 md:size-28 text-muted-foreground" />
<span className="text-center font-medium text-muted-foreground"> <span className="text-center font-medium text-muted-foreground">
No projects added yet. Click on Create project. No projects added yet. Click on Create project.
</span> </span>
</div> </div>
)} )}
<div className="mt-6 w-full grid sm:grid-cols-2 lg:grid-cols-3 flex-wrap gap-5 pb-10"> <div className="mt-6 w-full grid sm:grid-cols-2 lg:grid-cols-3 flex-wrap gap-5 pb-10">
{data?.map((project) => { {data?.map((project) => {
const emptyServices = const emptyServices =
project?.mariadb.length === 0 && project?.mariadb.length === 0 &&
project?.mongo.length === 0 && project?.mongo.length === 0 &&
project?.mysql.length === 0 && project?.mysql.length === 0 &&
project?.postgres.length === 0 && project?.postgres.length === 0 &&
project?.redis.length === 0 && project?.redis.length === 0 &&
project?.applications.length === 0 && project?.applications.length === 0 &&
project?.compose.length === 0; project?.compose.length === 0;
const totalServices = const totalServices =
project?.mariadb.length + project?.mariadb.length +
project?.mongo.length + project?.mongo.length +
project?.mysql.length + project?.mysql.length +
project?.postgres.length + project?.postgres.length +
project?.redis.length + project?.redis.length +
project?.applications.length + project?.applications.length +
project?.compose.length; project?.compose.length;
const flattedDomains = [ const flattedDomains = [
...project.applications.flatMap((a) => a.domains), ...project.applications.flatMap((a) => a.domains),
...project.compose.flatMap((a) => a.domains), ...project.compose.flatMap((a) => a.domains),
]; ];
const renderDomainsDropdown = ( const renderDomainsDropdown = (
item: typeof project.compose | typeof project.applications item: typeof project.compose | typeof project.applications,
) => ) =>
item[0] ? ( item[0] ? (
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuLabel> <DropdownMenuLabel>
{"applicationId" in item[0] ? "Applications" : "Compose"} {"applicationId" in item[0] ? "Applications" : "Compose"}
</DropdownMenuLabel> </DropdownMenuLabel>
{item.map((a) => ( {item.map((a) => (
<Fragment <Fragment
key={"applicationId" in a ? a.applicationId : a.composeId} key={"applicationId" in a ? a.applicationId : a.composeId}
> >
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuLabel className="font-normal capitalize text-xs "> <DropdownMenuLabel className="font-normal capitalize text-xs ">
{a.name} {a.name}
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{a.domains.map((domain) => ( {a.domains.map((domain) => (
<DropdownMenuItem key={domain.domainId} asChild> <DropdownMenuItem key={domain.domainId} asChild>
<Link <Link
className="space-x-4 text-xs cursor-pointer justify-between" className="space-x-4 text-xs cursor-pointer justify-between"
target="_blank" target="_blank"
href={`${domain.https ? "https" : "http"}://${ href={`${domain.https ? "https" : "http"}://${
domain.host domain.host
}${domain.path}`} }${domain.path}`}
> >
<span>{domain.host}</span> <span>{domain.host}</span>
<ExternalLink className="size-4 shrink-0" /> <ExternalLink className="size-4 shrink-0" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
))} ))}
</DropdownMenuGroup> </DropdownMenuGroup>
</Fragment> </Fragment>
))} ))}
</DropdownMenuGroup> </DropdownMenuGroup>
) : null; ) : null;
return ( return (
<div key={project.projectId} className="w-full lg:max-w-md"> <div key={project.projectId} className="w-full lg:max-w-md">
<Link href={`/dashboard/project/${project.projectId}`}> <Link href={`/dashboard/project/${project.projectId}`}>
<Card className="group relative w-full bg-transparent transition-colors hover:bg-card"> <Card className="group relative w-full bg-transparent transition-colors hover:bg-card">
{flattedDomains.length > 1 ? ( {flattedDomains.length > 1 ? (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100" className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
size="sm" size="sm"
variant="default" variant="default"
> >
<ExternalLinkIcon className="size-3.5" /> <ExternalLinkIcon className="size-3.5" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="w-[200px] space-y-2" className="w-[200px] space-y-2"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{renderDomainsDropdown(project.applications)} {renderDomainsDropdown(project.applications)}
{renderDomainsDropdown(project.compose)} {renderDomainsDropdown(project.compose)}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
) : flattedDomains[0] ? ( ) : flattedDomains[0] ? (
<Button <Button
className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100" className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
size="sm" size="sm"
variant="default" variant="default"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<Link <Link
href={`${ href={`${
flattedDomains[0].https ? "https" : "http" flattedDomains[0].https ? "https" : "http"
}://${flattedDomains[0].host}${flattedDomains[0].path}`} }://${flattedDomains[0].host}${flattedDomains[0].path}`}
target="_blank" target="_blank"
> >
<ExternalLinkIcon className="size-3.5" /> <ExternalLinkIcon className="size-3.5" />
</Link> </Link>
</Button> </Button>
) : null} ) : null}
<CardHeader> <CardHeader>
<CardTitle className="flex items-center justify-between gap-2"> <CardTitle className="flex items-center justify-between gap-2">
<span className="flex flex-col gap-1.5"> <span className="flex flex-col gap-1.5">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<BookIcon className="size-4 text-muted-foreground" /> <BookIcon className="size-4 text-muted-foreground" />
<span className="text-base font-medium leading-none"> <span className="text-base font-medium leading-none">
{project.name} {project.name}
</span> </span>
</div> </div>
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium text-muted-foreground">
{project.description} {project.description}
</span> </span>
</span> </span>
<div className="flex self-start space-x-1"> <div className="flex self-start space-x-1">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="px-2" className="px-2"
> >
<MoreHorizontalIcon className="size-5" /> <MoreHorizontalIcon className="size-5" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-[200px] space-y-2"> <DropdownMenuContent className="w-[200px] space-y-2">
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
Actions Actions
</DropdownMenuLabel> </DropdownMenuLabel>
<div onClick={(e) => e.stopPropagation()}> <div onClick={(e) => e.stopPropagation()}>
<ProjectEnviroment <ProjectEnviroment
projectId={project.projectId} projectId={project.projectId}
/> />
</div> </div>
<div onClick={(e) => e.stopPropagation()}> <div onClick={(e) => e.stopPropagation()}>
<UpdateProject projectId={project.projectId} /> <UpdateProject projectId={project.projectId} />
</div> </div>
<div onClick={(e) => e.stopPropagation()}> <div onClick={(e) => e.stopPropagation()}>
{(auth?.rol === "admin" || {(auth?.rol === "admin" ||
user?.canDeleteProjects) && ( user?.canDeleteProjects) && (
<AlertDialog> <AlertDialog>
<AlertDialogTrigger className="w-full"> <AlertDialogTrigger className="w-full">
<DropdownMenuItem <DropdownMenuItem
className="w-full cursor-pointer space-x-3" className="w-full cursor-pointer space-x-3"
onSelect={(e) => e.preventDefault()} onSelect={(e) => e.preventDefault()}
> >
<TrashIcon className="size-4" /> <TrashIcon className="size-4" />
<span>Delete</span> <span>Delete</span>
</DropdownMenuItem> </DropdownMenuItem>
</AlertDialogTrigger> </AlertDialogTrigger>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle> <AlertDialogTitle>
Are you sure to delete this project? Are you sure to delete this project?
</AlertDialogTitle> </AlertDialogTitle>
{!emptyServices ? ( {!emptyServices ? (
<div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950"> <div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
<AlertTriangle className="text-yellow-600 dark:text-yellow-400" /> <AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
<span className="text-sm text-yellow-600 dark:text-yellow-400"> <span className="text-sm text-yellow-600 dark:text-yellow-400">
You have active services, please You have active services, please
delete them first delete them first
</span> </span>
</div> </div>
) : ( ) : (
<AlertDialogDescription> <AlertDialogDescription>
This action cannot be undone This action cannot be undone
</AlertDialogDescription> </AlertDialogDescription>
)} )}
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel> <AlertDialogCancel>
Cancel Cancel
</AlertDialogCancel> </AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
disabled={!emptyServices} disabled={!emptyServices}
onClick={async () => { onClick={async () => {
await mutateAsync({ await mutateAsync({
projectId: project.projectId, projectId: project.projectId,
}) })
.then(() => { .then(() => {
toast.success( toast.success(
"Project delete succesfully" "Project delete succesfully",
); );
}) })
.catch(() => { .catch(() => {
toast.error( toast.error(
"Error to delete this project" "Error to delete this project",
); );
}) })
.finally(() => { .finally(() => {
utils.project.all.invalidate(); utils.project.all.invalidate();
}); });
}} }}
> >
Delete Delete
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
)} )}
</div> </div>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardFooter className="pt-4"> <CardFooter className="pt-4">
<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4"> <div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
<DateTooltip date={project.createdAt}> <DateTooltip date={project.createdAt}>
Created Created
</DateTooltip> </DateTooltip>
<span> <span>
{totalServices}{" "} {totalServices}{" "}
{totalServices === 1 ? "service" : "services"} {totalServices === 1 ? "service" : "services"}
</span> </span>
</div> </div>
</CardFooter> </CardFooter>
</Card> </Card>
</Link> </Link>
</div> </div>
); );
})} })}
</div> </div>
</> </>
); );
}; };

342
apps/dokploy/components/dashboard/search-command.tsx
View File

@@ -1,189 +1,189 @@
"use client"; "use client";
import React from "react";
import { import {
Command, MariadbIcon,
CommandEmpty, MongodbIcon,
CommandList, MysqlIcon,
CommandGroup, PostgresqlIcon,
CommandInput, RedisIcon,
CommandItem, } from "@/components/icons/data-tools-icons";
CommandDialog, import { Badge } from "@/components/ui/badge";
CommandSeparator, import {
Command,
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
} from "@/components/ui/command"; } from "@/components/ui/command";
import { useRouter } from "next/router";
import { import {
extractServices, type Services,
type Services, extractServices,
} from "@/pages/dashboard/project/[projectId]"; } from "@/pages/dashboard/project/[projectId]";
import { api } from "@/utils/api";
import type { findProjectById } from "@dokploy/server/services/project"; import type { findProjectById } from "@dokploy/server/services/project";
import { BookIcon, CircuitBoard, GlobeIcon } from "lucide-react"; import { BookIcon, CircuitBoard, GlobeIcon } from "lucide-react";
import { import { useRouter } from "next/router";
MariadbIcon, import React from "react";
MongodbIcon,
MysqlIcon,
PostgresqlIcon,
RedisIcon,
} from "@/components/icons/data-tools-icons";
import { api } from "@/utils/api";
import { Badge } from "@/components/ui/badge";
import { StatusTooltip } from "../shared/status-tooltip"; import { StatusTooltip } from "../shared/status-tooltip";
type Project = Awaited<ReturnType<typeof findProjectById>>; type Project = Awaited<ReturnType<typeof findProjectById>>;
export const SearchCommand = () => { export const SearchCommand = () => {
const router = useRouter(); const router = useRouter();
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [search, setSearch] = React.useState(""); const [search, setSearch] = React.useState("");
const { data } = api.project.all.useQuery(); const { data } = api.project.all.useQuery();
const { data: isCloud, isLoading } = api.settings.isCloud.useQuery(); const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();
React.useEffect(() => { React.useEffect(() => {
const down = (e: KeyboardEvent) => { const down = (e: KeyboardEvent) => {
if (e.key === "j" && (e.metaKey || e.ctrlKey)) { if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
e.preventDefault(); e.preventDefault();
setOpen((open) => !open); setOpen((open) => !open);
} }
}; };
document.addEventListener("keydown", down); document.addEventListener("keydown", down);
return () => document.removeEventListener("keydown", down); return () => document.removeEventListener("keydown", down);
}, []); }, []);
return ( return (
<div> <div>
<CommandDialog open={open} onOpenChange={setOpen}> <CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput <CommandInput
placeholder={"Search projects or settings"} placeholder={"Search projects or settings"}
value={search} value={search}
onValueChange={setSearch} onValueChange={setSearch}
/> />
<CommandList> <CommandList>
<CommandEmpty> <CommandEmpty>
No projects added yet. Click on Create project. No projects added yet. Click on Create project.
</CommandEmpty> </CommandEmpty>
<CommandGroup heading={"Projects"}> <CommandGroup heading={"Projects"}>
<CommandList> <CommandList>
{data?.map((project) => ( {data?.map((project) => (
<CommandItem <CommandItem
key={project.projectId} key={project.projectId}
onSelect={() => { onSelect={() => {
router.push(`/dashboard/project/${project.projectId}`); router.push(`/dashboard/project/${project.projectId}`);
setOpen(false); setOpen(false);
}} }}
> >
<BookIcon className="size-4 text-muted-foreground mr-2" /> <BookIcon className="size-4 text-muted-foreground mr-2" />
{project.name} {project.name}
</CommandItem> </CommandItem>
))} ))}
</CommandList> </CommandList>
</CommandGroup> </CommandGroup>
<CommandSeparator /> <CommandSeparator />
<CommandGroup heading={"Services"}> <CommandGroup heading={"Services"}>
<CommandList> <CommandList>
{data?.map((project) => { {data?.map((project) => {
const applications: Services[] = extractServices(project); const applications: Services[] = extractServices(project);
return applications.map((application) => ( return applications.map((application) => (
<CommandItem <CommandItem
key={application.id} key={application.id}
onSelect={() => { onSelect={() => {
router.push( router.push(
`/dashboard/project/${project.projectId}/services/${application.type}/${application.id}` `/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`,
); );
setOpen(false); setOpen(false);
}} }}
> >
{application.type === "postgres" && ( {application.type === "postgres" && (
<PostgresqlIcon className="h-6 w-6 mr-2" /> <PostgresqlIcon className="h-6 w-6 mr-2" />
)} )}
{application.type === "redis" && ( {application.type === "redis" && (
<RedisIcon className="h-6 w-6 mr-2" /> <RedisIcon className="h-6 w-6 mr-2" />
)} )}
{application.type === "mariadb" && ( {application.type === "mariadb" && (
<MariadbIcon className="h-6 w-6 mr-2" /> <MariadbIcon className="h-6 w-6 mr-2" />
)} )}
{application.type === "mongo" && ( {application.type === "mongo" && (
<MongodbIcon className="h-6 w-6 mr-2" /> <MongodbIcon className="h-6 w-6 mr-2" />
)} )}
{application.type === "mysql" && ( {application.type === "mysql" && (
<MysqlIcon className="h-6 w-6 mr-2" /> <MysqlIcon className="h-6 w-6 mr-2" />
)} )}
{application.type === "application" && ( {application.type === "application" && (
<GlobeIcon className="h-6 w-6 mr-2" /> <GlobeIcon className="h-6 w-6 mr-2" />
)} )}
{application.type === "compose" && ( {application.type === "compose" && (
<CircuitBoard className="h-6 w-6 mr-2" /> <CircuitBoard className="h-6 w-6 mr-2" />
)} )}
<span className="flex-grow"> <span className="flex-grow">
{project.name} / {application.name}{" "} {project.name} / {application.name}{" "}
<div style={{ display: "none" }}>{application.id}</div> <div style={{ display: "none" }}>{application.id}</div>
</span> </span>
<div> <div>
<StatusTooltip status={application.status} /> <StatusTooltip status={application.status} />
</div> </div>
</CommandItem> </CommandItem>
)); ));
})} })}
</CommandList> </CommandList>
</CommandGroup> </CommandGroup>
<CommandSeparator /> <CommandSeparator />
<CommandGroup heading={"Application"} hidden={true}> <CommandGroup heading={"Application"} hidden={true}>
<CommandItem <CommandItem
onSelect={() => { onSelect={() => {
router.push("/dashboard/projects"); router.push("/dashboard/projects");
setOpen(false); setOpen(false);
}} }}
> >
Projects Projects
</CommandItem> </CommandItem>
{!isCloud && ( {!isCloud && (
<> <>
<CommandItem <CommandItem
onSelect={() => { onSelect={() => {
router.push("/dashboard/monitoring"); router.push("/dashboard/monitoring");
setOpen(false); setOpen(false);
}} }}
> >
Monitoring Monitoring
</CommandItem> </CommandItem>
<CommandItem <CommandItem
onSelect={() => { onSelect={() => {
router.push("/dashboard/traefik"); router.push("/dashboard/traefik");
setOpen(false); setOpen(false);
}} }}
> >
Traefik Traefik
</CommandItem> </CommandItem>
<CommandItem <CommandItem
onSelect={() => { onSelect={() => {
router.push("/dashboard/docker"); router.push("/dashboard/docker");
setOpen(false); setOpen(false);
}} }}
> >
Docker Docker
</CommandItem> </CommandItem>
<CommandItem <CommandItem
onSelect={() => { onSelect={() => {
router.push("/dashboard/requests"); router.push("/dashboard/requests");
setOpen(false); setOpen(false);
}} }}
> >
Requests Requests
</CommandItem> </CommandItem>
</> </>
)} )}
<CommandItem <CommandItem
onSelect={() => { onSelect={() => {
router.push("/dashboard/settings/server"); router.push("/dashboard/settings/server");
setOpen(false); setOpen(false);
}} }}
> >
Settings Settings
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</CommandDialog> </CommandDialog>
</div> </div>
); );
}; };

2
apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
View File

@@ -29,7 +29,7 @@ export const DeleteNotification = ({ notificationId }: Props) => {
size="icon" size="icon"
className="h-9 w-9 group hover:bg-red-500/10" className="h-9 w-9 group hover:bg-red-500/10"
isLoading={isLoading} isLoading={isLoading}
> >
<Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" /> <Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" />
</Button> </Button>
</AlertDialogTrigger> </AlertDialogTrigger>

100
apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
View File

@@ -40,58 +40,60 @@ export const ShowNotifications = () => {
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4"> <div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
{data?.map((notification, index) => ( {data?.map((notification, index) => (
<div <div
key={notification.notificationId} key={notification.notificationId}
className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 bg-gray-200/50 border border-card" className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 bg-gray-200/50 border border-card"
> >
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{notification.notificationType === "slack" && ( {notification.notificationType === "slack" && (
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
<SlackIcon className="h-6 w-6 text-indigo-400" /> <SlackIcon className="h-6 w-6 text-indigo-400" />
</div> </div>
)} )}
{notification.notificationType === "telegram" && ( {notification.notificationType === "telegram" && (
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
<TelegramIcon className="h-6 w-6 text-indigo-400" /> <TelegramIcon className="h-6 w-6 text-indigo-400" />
</div> </div>
)} )}
{notification.notificationType === "discord" && ( {notification.notificationType === "discord" && (
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
<DiscordIcon className="h-6 w-6 text-indigo-400" /> <DiscordIcon className="h-6 w-6 text-indigo-400" />
</div> </div>
)} )}
{notification.notificationType === "email" && ( {notification.notificationType === "email" && (
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
<Mail className="h-6 w-6 text-indigo-400" /> <Mail className="h-6 w-6 text-indigo-400" />
</div> </div>
)} )}
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-sm font-medium dark:text-zinc-300 text-zinc-800"> <span className="text-sm font-medium dark:text-zinc-300 text-zinc-800">
{notification.name} {notification.name}
</span> </span>
<span className="text-xs font-medium text-muted-foreground"> <span className="text-xs font-medium text-muted-foreground">
{notification.notificationType?.[0]?.toUpperCase() + notification.notificationType?.slice(1)} notification {notification.notificationType?.[0]?.toUpperCase() +
</span> notification.notificationType?.slice(1)}{" "}
</div> notification
</div> </span>
<div className="flex items-center gap-2"> </div>
<UpdateNotification </div>
notificationId={notification.notificationId} <div className="flex items-center gap-2">
/> <UpdateNotification
<DeleteNotification notificationId={notification.notificationId}
notificationId={notification.notificationId} />
/> <DeleteNotification
</div> notificationId={notification.notificationId}
/>
</div>
</div>
))}
</div> </div>
))}
</div>
<div className="flex flex-col gap-4 justify-end w-full items-end"> <div className="flex flex-col gap-4 justify-end w-full items-end">
<AddNotification /> <AddNotification />
</div>
</div> </div>
</div>
)} )}
</CardContent> </CardContent>
</Card> </Card>

8
apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
View File

@@ -218,9 +218,11 @@ export const UpdateNotification = ({ notificationId }: Props) => {
return ( return (
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger className="" asChild> <DialogTrigger className="" asChild>
<Button variant="ghost" <Button
size="icon" variant="ghost"
className="h-9 w-9 dark:hover:bg-zinc-900/80 hover:bg-gray-200/80"> size="icon"
className="h-9 w-9 dark:hover:bg-zinc-900/80 hover:bg-gray-200/80"
>
<Pen className="size-4 text-muted-foreground" /> <Pen className="size-4 text-muted-foreground" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>

2
apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
View File

@@ -1,3 +1,4 @@
import { AlertBlock } from "@/components/shared/alert-block";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@@ -26,7 +27,6 @@ import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
import { Disable2FA } from "./disable-2fa"; import { Disable2FA } from "./disable-2fa";
import { Enable2FA } from "./enable-2fa"; import { Enable2FA } from "./enable-2fa";
import { AlertBlock } from "@/components/shared/alert-block";
const profileSchema = z.object({ const profileSchema = z.object({
email: z.string(), email: z.string(),

6
apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx
View File

@@ -1,3 +1,5 @@
import { AlertBlock } from "@/components/shared/alert-block";
import { DialogAction } from "@/components/shared/dialog-action";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@@ -18,13 +20,11 @@ import { Input } from "@/components/ui/input";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { useRouter } from "next/router";
import { useEffect } from "react"; import { useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
import { DialogAction } from "@/components/shared/dialog-action";
import { AlertBlock } from "@/components/shared/alert-block";
import { useRouter } from "next/router";
const profileSchema = z.object({ const profileSchema = z.object({
password: z.string().min(1, { password: z.string().min(1, {

2
apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx
View File

@@ -25,8 +25,8 @@ import { toast } from "sonner";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { EditTraefikEnv } from "../../web-server/edit-traefik-env"; import { EditTraefikEnv } from "../../web-server/edit-traefik-env";
import { ShowModalLogs } from "../../web-server/show-modal-logs";
import { ManageTraefikPorts } from "../../web-server/manage-traefik-ports"; import { ManageTraefikPorts } from "../../web-server/manage-traefik-ports";
import { ShowModalLogs } from "../../web-server/show-modal-logs";
interface Props { interface Props {
serverId?: string; serverId?: string;

3
apps/dokploy/components/dashboard/settings/servers/edit-script.tsx
View File

@@ -108,7 +108,8 @@ export const EditScript = ({ serverId }: Props) => {
</DialogDescription> </DialogDescription>
<AlertBlock type="warning"> <AlertBlock type="warning">
We recommend not modifying this script unless you know what you are doing. We recommend not modifying this script unless you know what you are
doing.
</AlertBlock> </AlertBlock>
</DialogHeader> </DialogHeader>
<div className="grid gap-4"> <div className="grid gap-4">

2
apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
View File

@@ -34,8 +34,8 @@ import { toast } from "sonner";
import { ShowDeployment } from "../../application/deployments/show-deployment"; import { ShowDeployment } from "../../application/deployments/show-deployment";
import { EditScript } from "./edit-script"; import { EditScript } from "./edit-script";
import { GPUSupport } from "./gpu-support"; import { GPUSupport } from "./gpu-support";
import { ValidateServer } from "./validate-server";
import { SecurityAudit } from "./security-audit"; import { SecurityAudit } from "./security-audit";
import { ValidateServer } from "./validate-server";
interface Props { interface Props {
serverId: string; serverId: string;

4
apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
View File

@@ -23,17 +23,17 @@ import { api } from "@/utils/api";
import { format } from "date-fns"; import { format } from "date-fns";
import { KeyIcon, MoreHorizontal, ServerIcon } from "lucide-react"; import { KeyIcon, MoreHorizontal, ServerIcon } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router";
import { toast } from "sonner"; import { toast } from "sonner";
import { TerminalModal } from "../web-server/terminal-modal"; import { TerminalModal } from "../web-server/terminal-modal";
import { ShowServerActions } from "./actions/show-server-actions"; import { ShowServerActions } from "./actions/show-server-actions";
import { AddServer } from "./add-server"; import { AddServer } from "./add-server";
import { SetupServer } from "./setup-server"; import { SetupServer } from "./setup-server";
import { ShowDockerContainersModal } from "./show-docker-containers-modal"; import { ShowDockerContainersModal } from "./show-docker-containers-modal";
import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal"; import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
import { UpdateServer } from "./update-server"; import { UpdateServer } from "./update-server";
import { useRouter } from "next/router";
import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription"; import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
export const ShowServers = () => { export const ShowServers = () => {
const router = useRouter(); const router = useRouter();

6
apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
View File

@@ -1,12 +1,12 @@
import { CodeEditor } from "@/components/shared/code-editor";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { ExternalLinkIcon, Loader2 } from "lucide-react";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { ExternalLinkIcon, Loader2 } from "lucide-react";
import { CopyIcon } from "lucide-react"; import { CopyIcon } from "lucide-react";
import Link from "next/link";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { CodeEditor } from "@/components/shared/code-editor";
import Link from "next/link";
export const CreateSSHKey = () => { export const CreateSSHKey = () => {
const { data, refetch } = api.sshKey.all.useQuery(); const { data, refetch } = api.sshKey.all.useQuery();

18
apps/dokploy/components/dashboard/settings/servers/welcome-stripe/setup.tsx
View File

@@ -5,26 +5,26 @@ import { StatusTooltip } from "@/components/shared/status-tooltip";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
CardContent,
CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
CardDescription,
CardContent,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { RocketIcon } from "lucide-react";
import { toast } from "sonner";
import { EditScript } from "../edit-script";
import { api } from "@/utils/api";
import { useState } from "react";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
Select, Select,
SelectTrigger,
SelectValue,
SelectContent, SelectContent,
SelectGroup, SelectGroup,
SelectItem, SelectItem,
SelectLabel, SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { api } from "@/utils/api";
import { RocketIcon } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { EditScript } from "../edit-script";
export const Setup = () => { export const Setup = () => {
const { data: servers } = api.server.all.useQuery(); const { data: servers } = api.server.all.useQuery();

16
apps/dokploy/components/dashboard/settings/servers/welcome-stripe/verify.tsx
View File

@@ -1,27 +1,27 @@
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
CardContent,
CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
CardDescription,
CardContent,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Loader2, PcCase, RefreshCw } from "lucide-react";
import { api } from "@/utils/api";
import { useState } from "react";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { api } from "@/utils/api";
import { Loader2, PcCase, RefreshCw } from "lucide-react";
import { useState } from "react";
import { AlertBlock } from "@/components/shared/alert-block";
import { import {
Select, Select,
SelectTrigger,
SelectValue,
SelectContent, SelectContent,
SelectGroup, SelectGroup,
SelectItem, SelectItem,
SelectLabel, SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { StatusRow } from "../gpu-support"; import { StatusRow } from "../gpu-support";
import { AlertBlock } from "@/components/shared/alert-block";
export const Verify = () => { export const Verify = () => {
const { data: servers } = api.server.all.useQuery(); const { data: servers } = api.server.all.useQuery();

14
apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
View File

@@ -1,3 +1,5 @@
import { GithubIcon } from "@/components/icons/data-tools-icons";
import { AlertBlock } from "@/components/shared/alert-block";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@@ -7,21 +9,19 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { defineStepper } from "@stepperize/react";
import { BookIcon, Puzzle } from "lucide-react"; import { BookIcon, Puzzle } from "lucide-react";
import { Code2, Database, GitMerge, Globe, Plug, Users } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { defineStepper } from "@stepperize/react";
import React from "react"; import React from "react";
import { Separator } from "@/components/ui/separator"; import ConfettiExplosion from "react-confetti-explosion";
import { AlertBlock } from "@/components/shared/alert-block";
import { CreateServer } from "./create-server"; import { CreateServer } from "./create-server";
import { CreateSSHKey } from "./create-ssh-key"; import { CreateSSHKey } from "./create-ssh-key";
import { Setup } from "./setup"; import { Setup } from "./setup";
import { Verify } from "./verify"; import { Verify } from "./verify";
import { Database, Globe, GitMerge, Users, Code2, Plug } from "lucide-react";
import ConfettiExplosion from "react-confetti-explosion";
import Link from "next/link";
import { GithubIcon } from "@/components/icons/data-tools-icons";
export const { useStepper, steps, Scoped } = defineStepper( export const { useStepper, steps, Scoped } = defineStepper(
{ {

2
apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx
View File

@@ -6,6 +6,7 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -13,7 +14,6 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import type React from "react"; import type React from "react";

6
apps/dokploy/pages/api/deploy/github.ts
View File

@@ -3,19 +3,19 @@ import { applications, compose, github } from "@/server/db/schema";
import type { DeploymentJob } from "@/server/queues/queue-types"; import type { DeploymentJob } from "@/server/queues/queue-types";
import { myQueue } from "@/server/queues/queueSetup"; import { myQueue } from "@/server/queues/queueSetup";
import { deploy } from "@/server/utils/deploy"; import { deploy } from "@/server/utils/deploy";
import { generateRandomDomain } from "@/templates/utils";
import { import {
createPreviewDeployment,
type Domain, type Domain,
IS_CLOUD,
createPreviewDeployment,
findPreviewDeploymentByApplicationId, findPreviewDeploymentByApplicationId,
findPreviewDeploymentsByPullRequestId, findPreviewDeploymentsByPullRequestId,
IS_CLOUD,
removePreviewDeployment, removePreviewDeployment,
} from "@dokploy/server"; } from "@dokploy/server";
import { Webhooks } from "@octokit/webhooks"; import { Webhooks } from "@octokit/webhooks";
import { and, eq } from "drizzle-orm"; import { and, eq } from "drizzle-orm";
import type { NextApiRequest, NextApiResponse } from "next"; import type { NextApiRequest, NextApiResponse } from "next";
import { extractCommitMessage, extractHash } from "./[refreshToken]"; import { extractCommitMessage, extractHash } from "./[refreshToken]";
import { generateRandomDomain } from "@/templates/utils";
export default async function handler( export default async function handler(
req: NextApiRequest, req: NextApiRequest,

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

@@ -3,6 +3,7 @@ import { db } from "@/server/db";
import { import {
apiCreateCompose, apiCreateCompose,
apiCreateComposeByTemplate, apiCreateComposeByTemplate,
apiDeleteCompose,
apiFetchServices, apiFetchServices,
apiFindCompose, apiFindCompose,
apiRandomizeCompose, apiRandomizeCompose,
@@ -117,7 +118,7 @@ export const composeRouter = createTRPCRouter({
return updateCompose(input.composeId, input); return updateCompose(input.composeId, input);
}), }),
delete: protectedProcedure delete: protectedProcedure
.input(apiFindCompose) .input(apiDeleteCompose)
.mutation(async ({ input, ctx }) => { .mutation(async ({ input, ctx }) => {
if (ctx.user.rol === "user") { if (ctx.user.rol === "user") {
await checkServiceAccess(ctx.user.authId, input.composeId, "delete"); await checkServiceAccess(ctx.user.authId, input.composeId, "delete");
@@ -138,7 +139,7 @@ export const composeRouter = createTRPCRouter({
.returning(); .returning();
const cleanupOperations = [ const cleanupOperations = [
async () => await removeCompose(composeResult), async () => await removeCompose(composeResult, input.deleteVolumes),
async () => await removeDeploymentsByComposeId(composeResult), async () => await removeDeploymentsByComposeId(composeResult),
async () => await removeComposeDirectory(composeResult.appName), async () => await removeComposeDirectory(composeResult.appName),
]; ];

30
apps/dokploy/templates/onedev/index.ts
View File

@@ -1,22 +1,22 @@
import { import {
type DomainSchema, type DomainSchema,
type Schema, type Schema,
type Template, type Template,
generateRandomDomain, generateRandomDomain,
} from "../utils"; } from "../utils";
export function generate(schema: Schema): Template { export function generate(schema: Schema): Template {
const randomDomain = generateRandomDomain(schema); const randomDomain = generateRandomDomain(schema);
const domains: DomainSchema[] = [ const domains: DomainSchema[] = [
{ {
host: randomDomain, host: randomDomain,
port: 6610, port: 6610,
serviceName: "onedev", serviceName: "onedev",
}, },
]; ];
return { return {
domains, domains,
}; };
} }

72
apps/dokploy/templates/unsend/index.ts
View File

@@ -1,44 +1,44 @@
import { import {
generateHash, type DomainSchema,
generateRandomDomain, type Schema,
generateBase64, type Template,
type Template, generateBase64,
type Schema, generateHash,
type DomainSchema, generateRandomDomain,
} from "../utils"; } from "../utils";
export function generate(schema: Schema): Template { export function generate(schema: Schema): Template {
const mainDomain = generateRandomDomain(schema); const mainDomain = generateRandomDomain(schema);
const secretBase = generateBase64(64); const secretBase = generateBase64(64);
const domains: DomainSchema[] = [ const domains: DomainSchema[] = [
{ {
host: mainDomain, host: mainDomain,
port: 3000, port: 3000,
serviceName: "unsend", serviceName: "unsend",
}, },
]; ];
const envs = [ const envs = [
"REDIS_URL=redis://unsend-redis-prod:6379", "REDIS_URL=redis://unsend-redis-prod:6379",
"POSTGRES_USER=postgres", "POSTGRES_USER=postgres",
"POSTGRES_PASSWORD=postgres", "POSTGRES_PASSWORD=postgres",
"POSTGRES_DB=unsend", "POSTGRES_DB=unsend",
"DATABASE_URL=postgresql://postgres:postgres@unsend-db-prod:5432/unsend", "DATABASE_URL=postgresql://postgres:postgres@unsend-db-prod:5432/unsend",
"NEXTAUTH_URL=http://localhost:3000", "NEXTAUTH_URL=http://localhost:3000",
`NEXTAUTH_SECRET=${secretBase}`, `NEXTAUTH_SECRET=${secretBase}`,
"GITHUB_ID='Fill'", "GITHUB_ID='Fill'",
"GITHUB_SECRET='Fill'", "GITHUB_SECRET='Fill'",
"AWS_DEFAULT_REGION=us-east-1", "AWS_DEFAULT_REGION=us-east-1",
"AWS_SECRET_KEY='Fill'", "AWS_SECRET_KEY='Fill'",
"AWS_ACCESS_KEY='Fill'", "AWS_ACCESS_KEY='Fill'",
"DOCKER_OUTPUT=1", "DOCKER_OUTPUT=1",
"API_RATE_LIMIT=1", "API_RATE_LIMIT=1",
"DISCORD_WEBHOOK_URL=", "DISCORD_WEBHOOK_URL=",
]; ];
return { return {
envs, envs,
domains, domains,
}; };
} }

2
packages/server/src/db/schema/application.ts
View File

@@ -17,6 +17,7 @@ import { github } from "./github";
import { gitlab } from "./gitlab"; import { gitlab } from "./gitlab";
import { mounts } from "./mount"; import { mounts } from "./mount";
import { ports } from "./port"; import { ports } from "./port";
import { previewDeployments } from "./preview-deployments";
import { projects } from "./project"; import { projects } from "./project";
import { redirects } from "./redirects"; import { redirects } from "./redirects";
import { registry } from "./registry"; import { registry } from "./registry";
@@ -25,7 +26,6 @@ import { server } from "./server";
import { applicationStatus, certificateType } from "./shared"; import { applicationStatus, certificateType } from "./shared";
import { sshKeys } from "./ssh-key"; import { sshKeys } from "./ssh-key";
import { generateAppName } from "./utils"; import { generateAppName } from "./utils";
import { previewDeployments } from "./preview-deployments";
export const sourceType = pgEnum("sourceType", [ export const sourceType = pgEnum("sourceType", [
"docker", "docker",

5
packages/server/src/db/schema/compose.ts
View File

@@ -155,6 +155,11 @@ export const apiFindCompose = z.object({
composeId: z.string().min(1), composeId: z.string().min(1),
}); });
export const apiDeleteCompose = z.object({
composeId: z.string().min(1),
deleteVolumes: z.boolean(),
});
export const apiFetchServices = z.object({ export const apiFetchServices = z.object({
composeId: z.string().min(1), composeId: z.string().min(1),
type: z.enum(["fetch", "cache"]).optional().default("cache"), type: z.enum(["fetch", "cache"]).optional().default("cache"),

2
packages/server/src/db/schema/deployment.ts
View File

@@ -11,8 +11,8 @@ import { nanoid } from "nanoid";
import { z } from "zod"; import { z } from "zod";
import { applications } from "./application"; import { applications } from "./application";
import { compose } from "./compose"; import { compose } from "./compose";
import { server } from "./server";
import { previewDeployments } from "./preview-deployments"; import { previewDeployments } from "./preview-deployments";
import { server } from "./server";
export const deploymentStatus = pgEnum("deploymentStatus", [ export const deploymentStatus = pgEnum("deploymentStatus", [
"running", "running",

2
packages/server/src/db/schema/domain.ts
View File

@@ -14,8 +14,8 @@ import { z } from "zod";
import { domain } from "../validations/domain"; import { domain } from "../validations/domain";
import { applications } from "./application"; import { applications } from "./application";
import { compose } from "./compose"; import { compose } from "./compose";
import { certificateType } from "./shared";
import { previewDeployments } from "./preview-deployments"; import { previewDeployments } from "./preview-deployments";
import { certificateType } from "./shared";
export const domainType = pgEnum("domainType", [ export const domainType = pgEnum("domainType", [
"compose", "compose",

10
packages/server/src/db/schema/preview-deployments.ts
View File

@@ -1,13 +1,13 @@
import { relations } from "drizzle-orm"; import { relations } from "drizzle-orm";
import { pgTable, text } from "drizzle-orm/pg-core"; import { pgTable, text } from "drizzle-orm/pg-core";
import { nanoid } from "nanoid";
import { applications } from "./application";
import { domains } from "./domain";
import { deployments } from "./deployment";
import { createInsertSchema } from "drizzle-zod"; import { createInsertSchema } from "drizzle-zod";
import { nanoid } from "nanoid";
import { z } from "zod"; import { z } from "zod";
import { generateAppName } from "./utils"; import { applications } from "./application";
import { deployments } from "./deployment";
import { domains } from "./domain";
import { applicationStatus } from "./shared"; import { applicationStatus } from "./shared";
import { generateAppName } from "./utils";
export const previewDeployments = pgTable("preview_deployments", { export const previewDeployments = pgTable("preview_deployments", {
previewDeploymentId: text("previewDeploymentId") previewDeploymentId: text("previewDeploymentId")

32
packages/server/src/services/compose.ts
View File

@@ -206,7 +206,9 @@ export const deployCompose = async ({
descriptionLog: string; descriptionLog: string;
}) => { }) => {
const compose = await findComposeById(composeId); const compose = await findComposeById(composeId);
const buildLink = `${await getDokployUrl()}/dashboard/project/${compose.projectId}/services/compose/${compose.composeId}?tab=deployments`; const buildLink = `${await getDokployUrl()}/dashboard/project/${
compose.projectId
}/services/compose/${compose.composeId}?tab=deployments`;
const deployment = await createDeploymentCompose({ const deployment = await createDeploymentCompose({
composeId: composeId, composeId: composeId,
title: titleLog, title: titleLog,
@@ -308,7 +310,9 @@ export const deployRemoteCompose = async ({
descriptionLog: string; descriptionLog: string;
}) => { }) => {
const compose = await findComposeById(composeId); const compose = await findComposeById(composeId);
const buildLink = `${await getDokployUrl()}/dashboard/project/${compose.projectId}/services/compose/${compose.composeId}?tab=deployments`; const buildLink = `${await getDokployUrl()}/dashboard/project/${
compose.projectId
}/services/compose/${compose.composeId}?tab=deployments`;
const deployment = await createDeploymentCompose({ const deployment = await createDeploymentCompose({
composeId: composeId, composeId: composeId,
title: titleLog, title: titleLog,
@@ -437,13 +441,17 @@ export const rebuildRemoteCompose = async ({
return true; return true;
}; };
export const removeCompose = async (compose: Compose) => { export const removeCompose = async (
compose: Compose,
deleteVolumes: boolean,
) => {
try { try {
const { COMPOSE_PATH } = paths(!!compose.serverId); const { COMPOSE_PATH } = paths(!!compose.serverId);
const projectPath = join(COMPOSE_PATH, compose.appName); const projectPath = join(COMPOSE_PATH, compose.appName);
if (compose.composeType === "stack") { if (compose.composeType === "stack") {
const command = `cd ${projectPath} && docker stack rm ${compose.appName} && rm -rf ${projectPath}`; const command = `cd ${projectPath} && docker stack rm ${compose.appName} && rm -rf ${projectPath}`;
if (compose.serverId) { if (compose.serverId) {
await execAsyncRemote(compose.serverId, command); await execAsyncRemote(compose.serverId, command);
} else { } else {
@@ -453,7 +461,13 @@ export const removeCompose = async (compose: Compose) => {
cwd: projectPath, cwd: projectPath,
}); });
} else { } else {
const command = `cd ${projectPath} && docker compose -p ${compose.appName} down && rm -rf ${projectPath}`; let command: string;
if (deleteVolumes) {
command = `cd ${projectPath} && docker compose -p ${compose.appName} down --volumes && rm -rf ${projectPath}`;
} else {
command = `cd ${projectPath} && docker compose -p ${compose.appName} down && rm -rf ${projectPath}`;
}
if (compose.serverId) { if (compose.serverId) {
await execAsyncRemote(compose.serverId, command); await execAsyncRemote(compose.serverId, command);
} else { } else {
@@ -477,7 +491,11 @@ export const startCompose = async (composeId: string) => {
if (compose.serverId) { if (compose.serverId) {
await execAsyncRemote( await execAsyncRemote(
compose.serverId, compose.serverId,
`cd ${join(COMPOSE_PATH, compose.appName, "code")} && docker compose -p ${compose.appName} up -d`, `cd ${join(
COMPOSE_PATH,
compose.appName,
"code",
)} && docker compose -p ${compose.appName} up -d`,
); );
} else { } else {
await execAsync(`docker compose -p ${compose.appName} up -d`, { await execAsync(`docker compose -p ${compose.appName} up -d`, {
@@ -507,7 +525,9 @@ export const stopCompose = async (composeId: string) => {
if (compose.serverId) { if (compose.serverId) {
await execAsyncRemote( await execAsyncRemote(
compose.serverId, compose.serverId,
`cd ${join(COMPOSE_PATH, compose.appName)} && docker compose -p ${compose.appName} stop`, `cd ${join(COMPOSE_PATH, compose.appName)} && docker compose -p ${
compose.appName
} stop`,
); );
} else { } else {
await execAsync(`docker compose -p ${compose.appName} stop`, { await execAsync(`docker compose -p ${compose.appName} stop`, {

4
packages/server/src/utils/backups/index.ts
View File

@@ -7,12 +7,12 @@ import {
cleanUpSystemPrune, cleanUpSystemPrune,
cleanUpUnusedImages, cleanUpUnusedImages,
} from "../docker/utils"; } from "../docker/utils";
import { sendDatabaseBackupNotifications } from "../notifications/database-backup";
import { sendDockerCleanupNotifications } from "../notifications/docker-cleanup";
import { runMariadbBackup } from "./mariadb"; import { runMariadbBackup } from "./mariadb";
import { runMongoBackup } from "./mongo"; import { runMongoBackup } from "./mongo";
import { runMySqlBackup } from "./mysql"; import { runMySqlBackup } from "./mysql";
import { runPostgresBackup } from "./postgres"; import { runPostgresBackup } from "./postgres";
import { sendDockerCleanupNotifications } from "../notifications/docker-cleanup";
import { sendDatabaseBackupNotifications } from "../notifications/database-backup";
export const initCronJobs = async () => { export const initCronJobs = async () => {
console.log("Setting up cron jobs...."); console.log("Setting up cron jobs....");

2
packages/server/src/utils/builders/index.ts
View File

@@ -2,6 +2,7 @@ import { createWriteStream } from "node:fs";
import { join } from "node:path"; import { join } from "node:path";
import type { InferResultType } from "@dokploy/server/types/with"; import type { InferResultType } from "@dokploy/server/types/with";
import type { CreateServiceOptions } from "dockerode"; import type { CreateServiceOptions } from "dockerode";
import { nanoid } from "nanoid";
import { uploadImage, uploadImageRemoteCommand } from "../cluster/upload"; import { uploadImage, uploadImageRemoteCommand } from "../cluster/upload";
import { import {
calculateResources, calculateResources,
@@ -17,7 +18,6 @@ import { buildHeroku, getHerokuCommand } from "./heroku";
import { buildNixpacks, getNixpacksCommand } from "./nixpacks"; import { buildNixpacks, getNixpacksCommand } from "./nixpacks";
import { buildPaketo, getPaketoCommand } from "./paketo"; import { buildPaketo, getPaketoCommand } from "./paketo";
import { buildStatic, getStaticCommand } from "./static"; import { buildStatic, getStaticCommand } from "./static";
import { nanoid } from "nanoid";
// NIXPACKS codeDirectory = where is the path of the code directory // NIXPACKS codeDirectory = where is the path of the code directory
// HEROKU codeDirectory = where is the path of the code directory // HEROKU codeDirectory = where is the path of the code directory

2
packages/server/src/utils/docker/utils.ts
View File

@@ -238,9 +238,11 @@ export const startServiceRemote = async (serverId: string, appName: string) => {
export const removeService = async ( export const removeService = async (
appName: string, appName: string,
serverId?: string | null, serverId?: string | null,
deleteVolumes = false,
) => { ) => {
try { try {
const command = `docker service rm ${appName}`; const command = `docker service rm ${appName}`;
if (serverId) { if (serverId) {
await execAsyncRemote(serverId, command); await execAsyncRemote(serverId, command);
} else { } else {