Merge pull request #414 from SashaGoncharov19/canary

feat: added restart button for containers
This commit is contained in:
Mauricio Siu
2024-09-04 09:56:45 -06:00
committed by GitHub
3 changed files with 78 additions and 18 deletions

View File

@@ -1,3 +1,4 @@
import { Button } from "@/components/ui/button";
import { import {
Card, Card,
CardContent, CardContent,
@@ -17,6 +18,7 @@ import {
} 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 { toast } from "sonner";
import { DockerMonitoring } from "../../monitoring/docker/show"; import { DockerMonitoring } from "../../monitoring/docker/show";
interface Props { interface Props {
@@ -42,9 +44,15 @@ export const ShowMonitoringCompose = ({
string | undefined string | undefined
>(); >();
const [containerId, setContainerId] = useState<string | undefined>();
const { mutateAsync: restart, isLoading } =
api.docker.restartContainer.useMutation();
useEffect(() => { useEffect(() => {
if (data && data?.length > 0) { if (data && data?.length > 0) {
setContainerAppName(data[0]?.name); setContainerAppName(data[0]?.name);
setContainerId(data[0]?.containerId);
} }
}, [data]); }, [data]);
@@ -57,24 +65,48 @@ export const ShowMonitoringCompose = ({
</CardHeader> </CardHeader>
<CardContent className="flex flex-col gap-4"> <CardContent className="flex flex-col gap-4">
<Label>Select a container to watch the monitoring</Label> <Label>Select a container to watch the monitoring</Label>
<Select onValueChange={setContainerAppName} value={containerAppName}> <div className="flex flex-row gap-4">
<SelectTrigger> <Select
<SelectValue placeholder="Select a container" /> onValueChange={(value) => {
</SelectTrigger> setContainerAppName(value);
<SelectContent> setContainerId(
<SelectGroup> data?.find((container) => container.name === value)
{data?.map((container) => ( ?.containerId,
<SelectItem );
key={container.containerId} }}
value={container.name} value={containerAppName}
> >
{container.name} ({container.containerId}) {container.state} <SelectTrigger>
</SelectItem> <SelectValue placeholder="Select a container" />
))} </SelectTrigger>
<SelectLabel>Containers ({data?.length})</SelectLabel> <SelectContent>
</SelectGroup> <SelectGroup>
</SelectContent> {data?.map((container) => (
</Select> <SelectItem
key={container.containerId}
value={container.name}
>
{container.name} ({container.containerId}){" "}
{container.state}
</SelectItem>
))}
<SelectLabel>Containers ({data?.length})</SelectLabel>
</SelectGroup>
</SelectContent>
</Select>
<Button
isLoading={isLoading}
onClick={async () => {
if (!containerId) return;
toast.success(`Restarting container ${containerAppName}`);
await restart({ containerId }).then(() => {
toast.success("Container restarted");
});
}}
>
Restart
</Button>
</div>
<DockerMonitoring <DockerMonitoring
appName={containerAppName || ""} appName={containerAppName || ""}
appType={appType} appType={appType}

View File

@@ -1,5 +1,6 @@
import { z } from "zod"; import { z } from "zod";
import { import {
containerRestart,
getConfig, getConfig,
getContainers, getContainers,
getContainersByAppLabel, getContainersByAppLabel,
@@ -12,6 +13,16 @@ 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({

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) {}
};