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 {
Card,
CardContent,
@@ -17,6 +18,7 @@ import {
} from "@/components/ui/select";
import { api } from "@/utils/api";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { DockerMonitoring } from "../../monitoring/docker/show";
interface Props {
@@ -42,9 +44,15 @@ export const ShowMonitoringCompose = ({
string | undefined
>();
const [containerId, setContainerId] = useState<string | undefined>();
const { mutateAsync: restart, isLoading } =
api.docker.restartContainer.useMutation();
useEffect(() => {
if (data && data?.length > 0) {
setContainerAppName(data[0]?.name);
setContainerId(data[0]?.containerId);
}
}, [data]);
@@ -57,24 +65,48 @@ export const ShowMonitoringCompose = ({
</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>
<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
isLoading={isLoading}
onClick={async () => {
if (!containerId) return;
toast.success(`Restarting container ${containerAppName}`);
await restart({ containerId }).then(() => {
toast.success("Container restarted");
});
}}
>
Restart
</Button>
</div>
<DockerMonitoring
appName={containerAppName || ""}
appType={appType}

View File

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

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