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 = {

apps/client/app/modules/details/tabs/backups.tsx

@@ -8,7 +8,6 @@ import { Input } from "~/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
 import { Switch } from "~/components/ui/switch";
 import type { Volume } from "~/lib/types";
-import { cn } from "~/lib/utils";
 
 type BackupDestination = "s3" | "sftp" | "filesystem";
 type BackupFrequency = "hourly" | "daily" | "weekly";

apps/client/app/modules/details/tabs/info.tsx

@@ -15,11 +15,11 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
 			<Card className="p-6">
 				<CreateVolumeForm initialValues={{ ...volume, ...volume.config }} onSubmit={console.log} />
 			</Card>
-			<div className="grid gap-4">
-				<div className="lg:row-span-1">
+			<div className="flex flex-col gap-4">
+				<div className="self-start w-full">
 					<HealthchecksCard volume={volume} />
 				</div>
-				<div>
+				<div className="flex-1 w-full">
 					<StorageChart statfs={statfs} />
 				</div>
 			</div>