feat: manual health check

apps/client/app/modules/details/components/healthchecks-card.tsx

@@ -1,5 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
 import { HeartIcon } from "lucide-react";
+import { toast } from "sonner";
+import { healthCheckVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
 import { OnOff } from "~/components/onoff";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
@@ -14,6 +17,17 @@ export const HealthchecksCard = ({ volume }: Props) => {
 		addSuffix: true,
 	});
 
+	const healthcheck = useMutation({
+		...healthCheckVolumeMutation(),
+		onSuccess: (d) => {
+			if (d.error) {
+				toast.error("Health check failed", { description: d.error });
+				return;
+			}
+			toast.success("Health check completed", { description: "The volume is healthy." });
+		},
+	});
+
 	return (
 		<Card className="flex-1 flex flex-col h-full">
 			<CardHeader>
@@ -30,7 +44,6 @@ export const HealthchecksCard = ({ volume }: Props) => {
 					{volume.status !== "unmounted" && (
 						<span className="text-xs text-muted-foreground mb-4">Checked {timeAgo || "never"}</span>
 					)}
-
 					<span className="flex justify-between items-center gap-2">
 						<span className="text-sm">Remount on error</span>
 						<OnOff isOn={volume.autoRemount} toggle={() => {}} enabledLabel="Enabled" disabledLabel="Paused" />
@@ -38,7 +51,12 @@ export const HealthchecksCard = ({ volume }: Props) => {
 				</div>
 				{volume.status !== "unmounted" && (
 					<div className="flex justify-center">
-						<Button variant="outline" className="mt-4 self-end">
+						<Button
+							variant="outline"
+							className="mt-4"
+							loading={healthcheck.isPending}
+							onClick={() => healthcheck.mutate({ path: { name: volume.name } })}
+						>
 							Run Health Check
 						</Button>
 					</div>

apps/client/app/modules/details/components/storage-chart.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { Label, Pie, PieChart } from "recharts";
 import { ByteSize } from "~/components/bytes-size";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "~/components/ui/chart";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
 import type { StatFs } from "~/lib/types";
 
 type Props = {