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 #1526 from Dokploy/fix/mongo-db-button-deploy

Browse Source 
refactor: improve code formatting and structure in ShowGeneralMongo c…
This commit is contained in:
Mauricio Siu 2025-03-17 23:18:18 -06:00 committed by GitHub
commit 5e1095d199
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 237 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

464
apps/dokploy/components/dashboard/mongo/general/show-general-mongo.tsx
View File

@ -3,10 +3,10 @@ import { DrawerLogs } from "@/components/shared/drawer-logs";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@ -16,236 +16,246 @@ import { toast } from "sonner";
import { type LogLine, parseLogs } from "../../docker/logs/utils"; import { type LogLine, parseLogs } from "../../docker/logs/utils";
import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal"; import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
interface Props { interface Props {
mongoId: string; mongoId: string;
} }
export const ShowGeneralMongo = ({ mongoId }: Props) => { export const ShowGeneralMongo = ({ mongoId }: Props) => {
const { data, refetch } = api.mongo.one.useQuery( const { data, refetch } = api.mongo.one.useQuery(
{ {
mongoId, mongoId,
}, },
{ enabled: !!mongoId } { enabled: !!mongoId },
); );
const { mutateAsync: reload, isLoading: isReloading } = const { mutateAsync: reload, isLoading: isReloading } =
api.mongo.reload.useMutation(); api.mongo.reload.useMutation();
const { mutateAsync: start, isLoading: isStarting } = const { mutateAsync: start, isLoading: isStarting } =
api.mongo.start.useMutation(); api.mongo.start.useMutation();
const { mutateAsync: stop, isLoading: isStopping } = const { mutateAsync: stop, isLoading: isStopping } =
api.mongo.stop.useMutation(); api.mongo.stop.useMutation();
const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]); const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
const [isDeploying, setIsDeploying] = useState(false); const [isDeploying, setIsDeploying] = useState(false);
api.mongo.deployWithLogs.useSubscription( api.mongo.deployWithLogs.useSubscription(
{ {
mongoId: mongoId, mongoId: mongoId,
}, },
{ {
enabled: isDeploying, enabled: isDeploying,
onData(log) { onData(log) {
if (!isDrawerOpen) { if (!isDrawerOpen) {
setIsDrawerOpen(true); setIsDrawerOpen(true);
} }
if (log === "Deployment completed successfully!") { if (log === "Deployment completed successfully!") {
setIsDeploying(false); setIsDeploying(false);
} }
const parsedLogs = parseLogs(log); const parsedLogs = parseLogs(log);
setFilteredLogs((prev) => [...prev, ...parsedLogs]); setFilteredLogs((prev) => [...prev, ...parsedLogs]);
}, },
onError(error) { onError(error) {
console.error("Deployment logs error:", error); console.error("Deployment logs error:", error);
setIsDeploying(false); setIsDeploying(false);
}, },
} },
); );
return ( return (
<> <>
<div className="flex w-full flex-col gap-5 "> <div className="flex w-full flex-col gap-5 ">
<Card className="bg-background"> <Card className="bg-background">
<CardHeader> <CardHeader>
<CardTitle className="text-xl">Deploy Settings</CardTitle> <CardTitle className="text-xl">Deploy Settings</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="flex flex-row gap-4 flex-wrap"> <CardContent className="flex flex-row gap-4 flex-wrap">
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>
<DialogAction <DialogAction
title="Deploy Mongo" title="Deploy Mongo"
description="Are you sure you want to deploy this mongo?" description="Are you sure you want to deploy this mongo?"
type="default" type="default"
onClick={async () => { onClick={async () => {
setIsDeploying(true); setIsDeploying(true);
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
refetch(); refetch();
}} }}
> >
<Tooltip> <Button
<TooltipTrigger asChild> variant="default"
<Button isLoading={data?.applicationStatus === "running"}
variant="default" className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
isLoading={data?.applicationStatus === "running"} >
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2" <Tooltip>
> <TooltipTrigger asChild>
<Rocket className="size-4 mr-1" /> <div className="flex items-center">
Deploy <Rocket className="size-4 mr-1" />
</Button> Deploy
</TooltipTrigger> </div>
<TooltipPrimitive.Portal> </TooltipTrigger>
<TooltipContent sideOffset={5} className="z-[60]"> <TooltipPrimitive.Portal>
<p>Downloads and sets up the MongoDB database</p> <TooltipContent sideOffset={5} className="z-[60]">
</TooltipContent> <p>Downloads and sets up the MongoDB database</p>
</TooltipPrimitive.Portal> </TooltipContent>
</Tooltip> </TooltipPrimitive.Portal>
</DialogAction> </Tooltip>
<DialogAction </Button>
title="Reload Mongo" </DialogAction>
description="Are you sure you want to reload this mongo?" <DialogAction
type="default" title="Reload Mongo"
onClick={async () => { description="Are you sure you want to reload this mongo?"
await reload({ type="default"
mongoId: mongoId, onClick={async () => {
appName: data?.appName || "", await reload({
}) mongoId: mongoId,
.then(() => { appName: data?.appName || "",
toast.success("Mongo reloaded successfully"); })
refetch(); .then(() => {
}) toast.success("Mongo reloaded successfully");
.catch(() => { refetch();
toast.error("Error reloading Mongo"); })
}); .catch(() => {
}} toast.error("Error reloading Mongo");
> });
<Tooltip> }}
<TooltipTrigger asChild> >
<Button <Button
variant="secondary" variant="secondary"
isLoading={isReloading} isLoading={isReloading}
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2" className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
> >
<RefreshCcw className="size-4 mr-1" /> <Tooltip>
Reload <TooltipTrigger asChild>
</Button> <div className="flex items-center">
</TooltipTrigger> <RefreshCcw className="size-4 mr-1" />
<TooltipPrimitive.Portal> Reload
<TooltipContent sideOffset={5} className="z-[60]"> </div>
<p>Restart the MongoDB service without rebuilding</p> </TooltipTrigger>
</TooltipContent> <TooltipPrimitive.Portal>
</TooltipPrimitive.Portal> <TooltipContent sideOffset={5} className="z-[60]">
</Tooltip> <p>Restart the MongoDB service without rebuilding</p>
</DialogAction> </TooltipContent>
{data?.applicationStatus === "idle" ? ( </TooltipPrimitive.Portal>
<DialogAction </Tooltip>
title="Start Mongo" </Button>
description="Are you sure you want to start this mongo?" </DialogAction>
type="default" {data?.applicationStatus === "idle" ? (
onClick={async () => { <DialogAction
await start({ title="Start Mongo"
mongoId: mongoId, description="Are you sure you want to start this mongo?"
}) type="default"
.then(() => { onClick={async () => {
toast.success("Mongo started successfully"); await start({
refetch(); mongoId: mongoId,
}) })
.catch(() => { .then(() => {
toast.error("Error starting Mongo"); toast.success("Mongo started successfully");
}); refetch();
}} })
> .catch(() => {
<Tooltip> toast.error("Error starting Mongo");
<TooltipTrigger asChild> });
<Button }}
variant="secondary" >
isLoading={isStarting} <Button
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2" variant="secondary"
> isLoading={isStarting}
<CheckCircle2 className="size-4 mr-1" /> className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
Start >
</Button> <Tooltip>
</TooltipTrigger> <TooltipTrigger asChild>
<TooltipPrimitive.Portal> <div className="flex items-center">
<TooltipContent sideOffset={5} className="z-[60]"> <CheckCircle2 className="size-4 mr-1" />
<p> Start
Start the MongoDB database (requires a previous </div>
successful setup) </TooltipTrigger>
</p> <TooltipPrimitive.Portal>
</TooltipContent> <TooltipContent sideOffset={5} className="z-[60]">
</TooltipPrimitive.Portal> <p>
</Tooltip> Start the MongoDB database (requires a previous
</DialogAction> successful setup)
) : ( </p>
<DialogAction </TooltipContent>
title="Stop Mongo" </TooltipPrimitive.Portal>
description="Are you sure you want to stop this mongo?" </Tooltip>
onClick={async () => { </Button>
await stop({ </DialogAction>
mongoId: mongoId, ) : (
}) <DialogAction
.then(() => { title="Stop Mongo"
toast.success("Mongo stopped successfully"); description="Are you sure you want to stop this mongo?"
refetch(); onClick={async () => {
}) await stop({
.catch(() => { mongoId: mongoId,
toast.error("Error stopping Mongo"); })
}); .then(() => {
}} toast.success("Mongo stopped successfully");
> refetch();
<Tooltip> })
<TooltipTrigger asChild> .catch(() => {
<Button toast.error("Error stopping Mongo");
variant="destructive" });
isLoading={isStopping} }}
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2" >
> <Button
<Ban className="size-4 mr-1" /> variant="destructive"
Stop isLoading={isStopping}
</Button> className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
</TooltipTrigger> >
<TooltipPrimitive.Portal> <Tooltip>
<TooltipContent sideOffset={5} className="z-[60]"> <TooltipTrigger asChild>
<p>Stop the currently running MongoDB database</p> <div className="flex items-center">
</TooltipContent> <Ban className="size-4 mr-1" />
</TooltipPrimitive.Portal> Stop
</Tooltip> </div>
</DialogAction> </TooltipTrigger>
)} <TooltipPrimitive.Portal>
</TooltipProvider> <TooltipContent sideOffset={5} className="z-[60]">
<DockerTerminalModal <p>Stop the currently running MongoDB database</p>
appName={data?.appName || ""} </TooltipContent>
serverId={data?.serverId || ""} </TooltipPrimitive.Portal>
> </Tooltip>
<Tooltip> </Button>
<TooltipTrigger asChild> </DialogAction>
<Button )}
variant="outline" </TooltipProvider>
className="flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2" <DockerTerminalModal
> appName={data?.appName || ""}
<Terminal className="size-4" /> serverId={data?.serverId || ""}
Open Terminal >
</Button> <Button
</TooltipTrigger> variant="outline"
<TooltipPrimitive.Portal> className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
<TooltipContent sideOffset={5} className="z-[60]"> >
<p>Open a terminal to the MongoDB container</p> <Tooltip>
</TooltipContent> <TooltipTrigger asChild>
</TooltipPrimitive.Portal> <div className="flex items-center">
</Tooltip> <Terminal className="size-4 mr-1" />
</DockerTerminalModal> Open Terminal
</CardContent> </div>
</Card> </TooltipTrigger>
<DrawerLogs <TooltipPrimitive.Portal>
isOpen={isDrawerOpen} <TooltipContent sideOffset={5} className="z-[60]">
onClose={() => { <p>Open a terminal to the MongoDB container</p>
setIsDrawerOpen(false); </TooltipContent>
setFilteredLogs([]); </TooltipPrimitive.Portal>
setIsDeploying(false); </Tooltip>
refetch(); </Button>
}} </DockerTerminalModal>
filteredLogs={filteredLogs} </CardContent>
/> </Card>
</div> <DrawerLogs
</> isOpen={isDrawerOpen}
); onClose={() => {
setIsDrawerOpen(false);
setFilteredLogs([]);
setIsDeploying(false);
refetch();
}}
filteredLogs={filteredLogs}
/>
</div>
</>
);
}; };