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

feat: added restart button for containers

Browse Source
This commit is contained in:
sashagoncharov19
2024-09-03 19:25:51 +00:00
parent 9bac042498
commit b1b01373ca
3 changed files with 124 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
apps/dokploy/components/dashboard/compose/monitoring/show.tsx
View File

@@ -1,86 +1,115 @@
import { import {
Card, Card,
CardContent, CardContent,
CardDescription, CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
Select, Select,
SelectContent, SelectContent,
SelectGroup, SelectGroup,
SelectItem, SelectItem,
SelectLabel, SelectLabel,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { DockerMonitoring } from "../../monitoring/docker/show"; import { DockerMonitoring } from "../../monitoring/docker/show";
import { toast } from "sonner";
interface Props { interface Props {
appName: string; appName: string;
appType: "stack" | "docker-compose"; appType: "stack" | "docker-compose";
} }
export const ShowMonitoringCompose = ({ export const ShowMonitoringCompose = ({
appName, appName,
appType = "stack", appType = "stack",
}: Props) => { }: Props) => {
const { data } = api.docker.getContainersByAppNameMatch.useQuery( const { data } = api.docker.getContainersByAppNameMatch.useQuery(
{ {
appName: appName, appName: appName,
appType, appType,
}, },
{ {
enabled: !!appName, enabled: !!appName,
}, },
); );
const [containerAppName, setContainerAppName] = useState< const [containerAppName, setContainerAppName] = useState<
string | undefined string | undefined
>(); >();
useEffect(() => { const [containerId, setContainerId] = useState<string | undefined>();
if (data && data?.length > 0) {
setContainerAppName(data[0]?.name);
}
}, [data]);
return ( const { mutateAsync: restart } = api.docker.restartContainer.useMutation();
<div>
<Card className="bg-background"> useEffect(() => {
<CardHeader> if (data && data?.length > 0) {
<CardTitle className="text-xl">Monitoring</CardTitle> setContainerAppName(data[0]?.name);
<CardDescription>Watch the usage of your compose</CardDescription> setContainerId(data[0]?.containerId);
</CardHeader> }
<CardContent className="flex flex-col gap-4"> }, [data]);
<Label>Select a container to watch the monitoring</Label>
<Select onValueChange={setContainerAppName} value={containerAppName}> return (
<SelectTrigger> <div>
<SelectValue placeholder="Select a container" /> <Card className="bg-background">
</SelectTrigger> <CardHeader>
<SelectContent> <CardTitle className="text-xl">Monitoring</CardTitle>
<SelectGroup> <CardDescription>Watch the usage of your compose</CardDescription>
{data?.map((container) => ( </CardHeader>
<SelectItem <CardContent className="flex flex-col gap-4">
key={container.containerId} <Label>Select a container to watch the monitoring</Label>
value={container.name} <div className="flex flex-row gap-4">
> <Select
{container.name} ({container.containerId}) {container.state} onValueChange={(value) => {
</SelectItem> setContainerAppName(value);
))} setContainerId(
<SelectLabel>Containers ({data?.length})</SelectLabel> data?.find((container) => container.name === value)
</SelectGroup> ?.containerId,
</SelectContent> );
</Select> }}
<DockerMonitoring value={containerAppName}
appName={containerAppName || ""} >
appType={appType} <SelectTrigger>
/> <SelectValue placeholder="Select a container" />
</CardContent> </SelectTrigger>
</Card> <SelectContent>
</div> <SelectGroup>
); {data?.map((container) => (
<SelectItem
key={container.containerId}
value={container.name}
>
{container.name} ({container.containerId}){" "}
{container.state}
</SelectItem>
))}
<SelectLabel>Containers ({data?.length})</SelectLabel>
</SelectGroup>
</SelectContent>
</Select>
<Button
onClick={async () => {
toast.success(`Restarting container ${containerId}`);
await restart({ containerId }).then(() => {
toast.success("Container restarted");
});
}}
>
Restart
</Button>
</div>
<DockerMonitoring
appName={containerAppName || ""}
appType={appType}
/>
</CardContent>
</Card>
</div>
);
}; };

10
apps/dokploy/server/api/routers/docker.ts
View File

@@ -1,6 +1,7 @@
import { z } from "zod"; import { z } from "zod";
import { import {
getConfig, getConfig,
containerRestart,
getContainers, getContainers,
getContainersByAppLabel, getContainersByAppLabel,
getContainersByAppNameMatch, getContainersByAppNameMatch,
@@ -12,6 +13,15 @@ export const dockerRouter = createTRPCRouter({
return await getContainers(); return await getContainers();
}), }),
restartContainer: protectedProcedure
.input(
z.object({
containerId: z.string().min(1),
}),
).mutation(async ({ input }) => {
return await containerRestart(input.containerId);
}),
getConfig: protectedProcedure getConfig: protectedProcedure
.input( .input(
z.object({ z.object({

17
apps/dokploy/server/api/services/docker.ts
View File

@@ -150,3 +150,20 @@ export const getContainersByAppLabel = async (appName: string) => {
return []; return [];
}; };
export const containerRestart = async (containerId: string) => {
try {
const { stdout, stderr } = await execAsync(
`docker container restart ${containerId}`,
);
if (stderr) {
console.error(`Error: ${stderr}`);
return;
}
const config = JSON.parse(stdout);
return config;
} catch (error) {}
};