fix: linting

This commit is contained in:
sashagoncharov19
2024-09-04 10:49:38 +00:00
parent 7c920dde71
commit 21a646ce66
2 changed files with 102 additions and 101 deletions

View File

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

View File

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