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: simplify snapshot file explorer

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-11-04 14:57:22 +01:00
parent 11ca80a929
commit d1e46918ec
16 changed files with 309 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
apps/client/app/modules/repositories/components/snapshot-files.tsx
View File

@@ -1,148 +0,0 @@
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { FolderOpen } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { listSnapshotFiles } from "~/api-client";
import { listSnapshotFilesOptions } from "~/api-client/@tanstack/react-query.gen";
import { FileTree } from "~/components/file-tree";
interface FileEntry {
name: string;
path: string;
type: string;
size?: number;
mtime?: string;
}
type Props = {
name: string;
snapshotId: string;
};
export const SnapshotFilesList = ({ name, snapshotId }: Props) => {
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
const [fetchedFolders, setFetchedFolders] = useState<Set<string>>(new Set(["/"]));
const [loadingFolders, setLoadingFolders] = useState<Set<string>>(new Set());
const [allFiles, setAllFiles] = useState<Map<string, FileEntry>>(new Map());
const queryClient = useQueryClient();
const { data, isLoading, error } = useQuery({
...listSnapshotFilesOptions({
path: { name, snapshotId },
query: { path: "/" },
}),
});
useMemo(() => {
if (data?.files) {
setAllFiles((prev) => {
const next = new Map(prev);
for (const file of data.files) {
next.set(file.path, file);
}
return next;
});
}
}, [data]);
const fileArray = useMemo(() => Array.from(allFiles.values()), [allFiles]);
const handleFolderExpand = useCallback(
async (folderPath: string) => {
setExpandedFolders((prev) => {
const next = new Set(prev);
next.add(folderPath);
return next;
});
if (!fetchedFolders.has(folderPath)) {
setLoadingFolders((prev) => new Set(prev).add(folderPath));
try {
const result = await listSnapshotFiles({
path: { name: name ?? "", snapshotId: snapshotId ?? "" },
query: { path: folderPath },
throwOnError: true,
});
if (result.data) {
setAllFiles((prev) => {
const next = new Map(prev);
for (const file of result.data.files) {
next.set(file.path, file);
}
return next;
});
setFetchedFolders((prev) => new Set(prev).add(folderPath));
}
} catch (error) {
console.error("Failed to fetch folder contents:", error);
} finally {
setLoadingFolders((prev) => {
const next = new Set(prev);
next.delete(folderPath);
return next;
});
}
}
},
[name, snapshotId, fetchedFolders],
);
const handleFolderHover = useCallback(
async (folderPath: string) => {
if (!fetchedFolders.has(folderPath) && !loadingFolders.has(folderPath)) {
queryClient.prefetchQuery(
listSnapshotFilesOptions({
path: { name, snapshotId },
query: { path: folderPath },
}),
);
}
},
[name, snapshotId, fetchedFolders, loadingFolders, queryClient],
);
if (isLoading && fileArray.length === 0) {
return (
<div className="flex items-center justify-center h-full">
<p className="text-muted-foreground">Loading files...</p>
</div>
);
}
if (error) {
return (
<div className="flex items-center justify-center h-full">
<p className="text-destructive">Failed to load files: {(error as Error).message}</p>
</div>
);
}
if (fileArray.length === 0) {
return (
<div className="flex flex-col items-center justify-center h-full text-center p-8">
<FolderOpen className="mb-4 h-12 w-12 text-muted-foreground" />
<p className="text-muted-foreground">This snapshot appears to be empty.</p>
</div>
);
}
return (
<div className="overflow-auto flex-1 border rounded-md bg-card">
<FileTree
files={fileArray.map((f) => ({
name: f.name,
path: f.path,
type: f.type === "dir" ? "directory" : "file",
size: f.size,
modifiedAt: f.mtime ? new Date(f.mtime).getTime() : undefined,
}))}
onFolderExpand={handleFolderExpand}
onFolderHover={handleFolderHover}
expandedFolders={expandedFolders}
loadingFolders={loadingFolders}
/>
</div>
);
};

27
apps/client/app/modules/repositories/routes/snapshot-details.tsx
View File

@@ -1,11 +1,20 @@
import { useQuery } from "@tanstack/react-query";
import { useParams } from "react-router";
import { redirect, useParams } from "react-router";
import { listSnapshotFilesOptions } from "~/api-client/@tanstack/react-query.gen";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { RestoreSnapshotDialog } from "../components/restore-snapshot-dialog";
import { SnapshotFilesList } from "../components/snapshot-files";
import { SnapshotFileBrowser } from "~/modules/backups/components/snapshot-file-browser";
import { getSnapshotDetails } from "~/api-client";
import type { Route } from "./+types/snapshot-details";
export default function SnapshotDetailsPage() {
export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
const snapshot = await getSnapshotDetails({ path: { name: params.name, snapshotId: params.snapshotId } });
if (snapshot.data) return snapshot.data;
return redirect("/repositories");
};
export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
const { name, snapshotId } = useParams<{ name: string; snapshotId: string }>();
const { data } = useQuery({
@@ -34,15 +43,7 @@ export default function SnapshotDetailsPage() {
<RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
</div>
<Card className="h-[600px] flex flex-col">
<CardHeader>
<CardTitle>File Explorer</CardTitle>
<CardDescription>Browse the files and folders in this snapshot.</CardDescription>
</CardHeader>
<CardContent className="flex-1 overflow-hidden flex flex-col">
<SnapshotFilesList name={name} snapshotId={snapshotId} />
</CardContent>
</Card>
<SnapshotFileBrowser repositoryName={name} snapshot={loaderData} />
{data?.snapshot && (
<Card>

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

@@ -3,21 +3,18 @@ import { intervalToDuration } from "date-fns";
import { Database } from "lucide-react";
import { useState } from "react";
import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
import type { ListSnapshotsResponse } from "~/api-client/types.gen";
import { ByteSize } from "~/components/bytes-size";
import { SnapshotsTable } from "~/components/snapshots-table";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Table, TableBody, TableCell, TableRow } from "~/components/ui/table";
import type { Repository } from "~/lib/types";
import type { Repository, Snapshot } from "~/lib/types";
type Props = {
repository: Repository;
};
type Snapshot = ListSnapshotsResponse["snapshots"][0];
export const formatSnapshotDuration = (seconds: number) => {
const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
const parts: string[] = [];
@@ -37,11 +34,10 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
...listSnapshotsOptions({ path: { name: repository.name } }),
refetchInterval: 10000,
refetchOnWindowFocus: true,
initialData: [],
});
const snapshots = data?.snapshots || [];
const filteredSnapshots = snapshots.filter((snapshot: Snapshot) => {
const filteredSnapshots = data.filter((snapshot: Snapshot) => {
if (!searchQuery) return true;
const searchLower = searchQuery.toLowerCase();
return (
@@ -50,8 +46,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
);
});
const hasNoSnapshots = snapshots.length === 0;
const hasNoFilteredSnapshots = filteredSnapshots.length === 0 && !hasNoSnapshots;
const hasNoFilteredSnapshots = !filteredSnapshots?.length && !data.length;
if (repository.status === "error") {
return (
@@ -72,11 +67,11 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
);
}
if (isLoading && !data && !failureReason) {
if (isLoading && !data.length && !failureReason) {
return (
<Card>
<CardContent className="flex items-center justify-center py-12">
<p className="text-muted-foreground">Loading snapshots yo...</p>
<p className="text-muted-foreground">Loading snapshots</p>
</CardContent>
</Card>
);
@@ -94,7 +89,8 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
);
}
if (hasNoSnapshots) {
if (!data.length) {
console.log("No snapshots found for repository:", repository.name);
return (
<Card>
<CardContent className="flex flex-col items-center justify-center text-center py-16 px-4">
@@ -124,7 +120,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
<div className="flex-1">
<CardTitle>Snapshots</CardTitle>
<CardDescription className="mt-1">
Backup snapshots stored in this repository. Total: {snapshots.length}
Backup snapshots stored in this repository. Total: {data.length}
</CardDescription>
</div>
<div className="flex gap-2 items-center">
@@ -159,7 +155,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
<span>
{hasNoFilteredSnapshots
? "No snapshots match filters."
: `Showing ${filteredSnapshots.length} of ${snapshots.length}`}
: `Showing ${filteredSnapshots.length} of ${data.length}`}
</span>
{!hasNoFilteredSnapshots && (
<span>