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

92
apps/client/app/components/snapshots-table.tsx Normal file
View File

@@ -0,0 +1,92 @@
import { Calendar, Clock, Database, FolderTree, HardDrive } from "lucide-react";
import type { ListSnapshotsResponse } from "~/api-client/types.gen";
import { ByteSize } from "~/components/bytes-size";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
import { formatSnapshotDuration } from "~/modules/repositories/tabs/snapshots";
type Snapshot = ListSnapshotsResponse["snapshots"][0];
type Props = {
snapshots: Snapshot[];
};
export const SnapshotsTable = ({ snapshots }: Props) => {
return (
<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">Volume</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{snapshots.map((snapshot) => (
<TableRow key={snapshot.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">{snapshot.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(snapshot.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={snapshot.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(snapshot.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={snapshot.paths[0]}>
{snapshot.paths[0].split("/").filter(Boolean).at(-2) || "/"}
</span>
<Tooltip>
<TooltipTrigger asChild>
<span
className={`text-xs bg-muted text-muted-foreground rounded-md px-2 py-1 cursor-help ${snapshot.paths.length <= 1 ? "hidden" : ""}`}
>
+{snapshot.paths.length - 1}
</span>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-md">
<div className="flex flex-col gap-1">
{snapshot.paths.slice(1).map((path) => (
<div key={`${snapshot.short_id}-${path}`} className="text-xs">
{path}
</div>
))}
</div>
</TooltipContent>
</Tooltip>
</div>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
};

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

@@ -1,15 +1,13 @@
import { useQuery } from "@tanstack/react-query"; 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 { useMemo } from "react";
import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen"; import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
import { ByteSize } from "~/components/bytes-size"; import { ByteSize } from "~/components/bytes-size";
import { OnOff } from "~/components/onoff"; import { OnOff } from "~/components/onoff";
import { SnapshotsTable } from "~/components/snapshots-table";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card"; 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 type { BackupSchedule, Repository, Volume } from "~/lib/types";
import { formatSnapshotDuration } from "~/modules/repositories/tabs/snapshots";
type Props = { type Props = {
volume: Volume; volume: Volume;
@@ -137,85 +135,7 @@ export const ScheduleSummary = (props: Props) => {
</CardContent> </CardContent>
) : ( ) : (
<> <>
<div className="overflow-x-auto"> <SnapshotsTable snapshots={snapshots.snapshots} />
<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>
<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-between border-t"> <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>{`Showing ${snapshots.snapshots.length} of ${snapshots.snapshots.length}`}</span>
<span> <span>

107
apps/client/app/modules/repositories/tabs/snapshots.tsx
View File

@@ -1,15 +1,15 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { intervalToDuration } from "date-fns"; import { intervalToDuration } from "date-fns";
import { Calendar, Clock, Database, FolderTree, HardDrive } from "lucide-react"; import { Database } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen"; import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
import type { ListSnapshotsResponse } from "~/api-client/types.gen"; import type { ListSnapshotsResponse } from "~/api-client/types.gen";
import { ByteSize } from "~/components/bytes-size"; import { ByteSize } from "~/components/bytes-size";
import { SnapshotsTable } from "~/components/snapshots-table";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { Input } from "~/components/ui/input"; import { Input } from "~/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table"; import { Table, TableBody, TableCell, TableRow } from "~/components/ui/table";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
import type { Repository } from "~/lib/types"; import type { Repository } from "~/lib/types";
type Props = { type Props = {
@@ -137,97 +137,24 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<div className="overflow-x-auto"> {hasNoFilteredSnapshots ? (
<Table className="border-t"> <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> <TableBody>
{hasNoFilteredSnapshots ? ( <TableRow>
<TableRow> <TableCell colSpan={5} className="text-center py-12">
<TableCell colSpan={5} className="text-center py-12"> <div className="flex flex-col items-center gap-3">
<div className="flex flex-col items-center gap-3"> <p className="text-muted-foreground">No snapshots match your search.</p>
<p className="text-muted-foreground">No snapshots match your search.</p> <Button onClick={() => setSearchQuery("")} variant="outline" size="sm">
<Button onClick={() => setSearchQuery("")} variant="outline" size="sm"> Clear search
Clear search </Button>
</Button> </div>
</div> </TableCell>
</TableCell> </TableRow>
</TableRow>
) : (
filteredSnapshots.map((snapshot) => (
<TableRow key={snapshot.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">{snapshot.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(snapshot.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={snapshot.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(snapshot.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={snapshot.paths[0]}
>
{snapshot.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 ${snapshot.paths.length <= 1 ? "hidden" : ""}`}
>
+{snapshot.paths.length - 1}
</span>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-md">
<div className="flex flex-col gap-1">
{snapshot.paths.slice(1).map((path) => (
<div key={`${snapshot.short_id}-${path}`} className="text-xs">
{path}
</div>
))}
</div>
</TooltipContent>
</Tooltip>
</div>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody> </TableBody>
</Table> </Table>
</div> ) : (
<SnapshotsTable snapshots={filteredSnapshots} />
)}
<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-between border-t"> <div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-between border-t">
<span> <span>
{hasNoFilteredSnapshots {hasNoFilteredSnapshots