ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

refactor(snapshots): unify tables in a single component

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-10-30 18:38:05 +01:00
parent bd168df352
commit ed73ca73fb
3 changed files with 112 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
apps/client/app/modules/details/components/schedule-summary.tsx
View File

@@ -1,15 +1,13 @@
import { useQuery } from "@tanstack/react-query";
import { Calendar, Clock, Database, FolderTree, HardDrive, Pencil } from "lucide-react";
import { Database, Pencil } from "lucide-react";
import { useMemo } from "react";
import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
import { ByteSize } from "~/components/bytes-size";
import { OnOff } from "~/components/onoff";
import { SnapshotsTable } from "~/components/snapshots-table";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
import type { BackupSchedule, Repository, Volume } from "~/lib/types";
import { formatSnapshotDuration } from "~/modules/repositories/tabs/snapshots";
type Props = {
volume: Volume;
@@ -137,85 +135,7 @@ export const ScheduleSummary = (props: Props) => {
</CardContent>
) : (
<>
<div className="overflow-x-auto">
<Table className="border-t">
<TableHeader className="bg-card-header">
<TableRow>
<TableHead className="uppercase">Snapshot ID</TableHead>
<TableHead className="uppercase">Date & Time</TableHead>
<TableHead className="uppercase">Size</TableHead>
<TableHead className="uppercase hidden md:table-cell text-right">Duration</TableHead>
<TableHead className="uppercase hidden text-right lg:table-cell">Paths</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{snapshots.snapshots.map((s) => (
<TableRow key={s.short_id} className="hover:bg-accent/50">
<TableCell className="font-mono text-sm">
<div className="flex items-center gap-2">
<HardDrive className="h-4 w-4 text-muted-foreground" />
<span className="text-strong-accent">{s.short_id}</span>
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Calendar className="h-4 w-4 text-muted-foreground" />
<span className="text-sm">{new Date(s.time).toLocaleString()}</span>
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">
<ByteSize bytes={s.size} base={1024} />
</span>
</div>
</TableCell>
<TableCell className="hidden md:table-cell">
<div className="flex items-center justify-end gap-2">
<Clock className="h-4 w-4 text-muted-foreground" />
<span className="text-sm text-muted-foreground">
{formatSnapshotDuration(s.duration / 1000)}
</span>
</div>
</TableCell>
<TableCell className="hidden lg:table-cell">
<div className="flex items-center justify-end gap-2">
<FolderTree className="h-4 w-4 text-muted-foreground" />
<div className="flex flex-wrap gap-1">
<span
className="text-xs bg-primary/10 text-primary rounded-md px-2 py-1"
title={s.paths[0]}
>
{s.paths[0].split("/").filter(Boolean).pop() || "/"}
</span>
<Tooltip>
<TooltipTrigger asChild>
<span
className={`text-xs bg-muted text-muted-foreground rounded-md px-2 py-1 cursor-help ${s.paths.length <= 1 ? "hidden" : ""}`}
>
+{s.paths.length - 1}
</span>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-md">
<div className="flex flex-col gap-1">
{s.paths.slice(1).map((path) => (
<div key={`${s.short_id}-${path}`} className="text-xs">
{path}
</div>
))}
</div>
</TooltipContent>
</Tooltip>
</div>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
<SnapshotsTable snapshots={snapshots.snapshots} />
<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-between border-t">
<span>{`Showing ${snapshots.snapshots.length} of ${snapshots.snapshots.length}`}</span>
<span>