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
Show Stats 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 {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { api } from "@/utils/api";
import { useEffect, useState } from "react";
import { DockerMonitoring } from "../../monitoring/docker/show";
import { toast } from "sonner";
interface Props {
appName: string;
appType: "stack" | "docker-compose";
appName: string;
appType: "stack" | "docker-compose";
}
export const ShowMonitoringCompose = ({
appName,
appType = "stack",
appName,
appType = "stack",
}: Props) => {
const { data } = api.docker.getContainersByAppNameMatch.useQuery(
{
appName: appName,
appType,
},
{
enabled: !!appName,
},
);
const { data } = api.docker.getContainersByAppNameMatch.useQuery(
{
appName: appName,
appType,
},
{
enabled: !!appName,
},
);
const [containerAppName, setContainerAppName] = useState<
string | undefined
>();
const [containerAppName, setContainerAppName] = useState<
string | undefined
>();
useEffect(() => {
if (data && data?.length > 0) {
setContainerAppName(data[0]?.name);
}
}, [data]);
const [containerId, setContainerId] = useState<string | undefined>();
return (
<div>
<Card className="bg-background">
<CardHeader>
<CardTitle className="text-xl">Monitoring</CardTitle>
<CardDescription>Watch the usage of your compose</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-4">
<Label>Select a container to watch the monitoring</Label>
<Select onValueChange={setContainerAppName} value={containerAppName}>
<SelectTrigger>
<SelectValue placeholder="Select a container" />
</SelectTrigger>
<SelectContent>
<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>
<DockerMonitoring
appName={containerAppName || ""}
appType={appType}
/>
</CardContent>
</Card>
</div>
);
const { mutateAsync: restart } = api.docker.restartContainer.useMutation();
useEffect(() => {
if (data && data?.length > 0) {
setContainerAppName(data[0]?.name);
setContainerId(data[0]?.containerId);
}
}, [data]);
return (
<div>
<Card className="bg-background">
<CardHeader>
<CardTitle className="text-xl">Monitoring</CardTitle>
<CardDescription>Watch the usage of your compose</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-4">
<Label>Select a container to watch the monitoring</Label>
<div className="flex flex-row gap-4">
<Select
onValueChange={(value) => {
setContainerAppName(value);
setContainerId(
data?.find((container) => container.name === value)
?.containerId,
);
}}
value={containerAppName}
>
<SelectTrigger>
<SelectValue placeholder="Select a container" />
</SelectTrigger>
<SelectContent>
<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 {
getConfig,
containerRestart,
getContainers,
getContainersByAppLabel,
getContainersByAppNameMatch,
@ -12,6 +13,15 @@ export const dockerRouter = createTRPCRouter({
return await getContainers();
}),
restartContainer: protectedProcedure
.input(
z.object({
containerId: z.string().min(1),
}),
).mutation(async ({ input }) => {
return await containerRestart(input.containerId);
}),
getConfig: protectedProcedure
.input(
z.object({

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

@ -150,3 +150,20 @@ export const getContainersByAppLabel = async (appName: string) => {
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) {}
};