fix: lazy load repository stats on-demand
The repositories page was eagerly fetching restic stats on every page load, which causes high CPU/Memory usage for large repositories (especially multi-TB Backblaze repos). This fix removes the eager loading from the route loader, so stats are now fetched on-demand by the frontend component instead. This resolves the issue where: - Loading the repository page would trigger restic stats immediately - Refreshing the page would trigger additional calls to restic stats - Resource consumption would ramp up significantly Fixes #614
This commit is contained in:
parent
fb3c5b33c0
commit
3484d063c8
1 changed files with 2 additions and 7 deletions
|
|
@ -2,7 +2,6 @@ import { createFileRoute } from "@tanstack/react-router";
|
||||||
import { type } from "arktype";
|
import { type } from "arktype";
|
||||||
import {
|
import {
|
||||||
getRepositoryOptions,
|
getRepositoryOptions,
|
||||||
getRepositoryStatsOptions,
|
|
||||||
listBackupSchedulesOptions,
|
listBackupSchedulesOptions,
|
||||||
listSnapshotsOptions,
|
listSnapshotsOptions,
|
||||||
} from "~/client/api-client/@tanstack/react-query.gen";
|
} from "~/client/api-client/@tanstack/react-query.gen";
|
||||||
|
|
@ -14,20 +13,17 @@ export const Route = createFileRoute("/(dashboard)/repositories/$repositoryId/")
|
||||||
errorComponent: (e) => <div>{e.error.message}</div>,
|
errorComponent: (e) => <div>{e.error.message}</div>,
|
||||||
loader: async ({ params, context }) => {
|
loader: async ({ params, context }) => {
|
||||||
const snapshotOptions = listSnapshotsOptions({ path: { shortId: params.repositoryId } });
|
const snapshotOptions = listSnapshotsOptions({ path: { shortId: params.repositoryId } });
|
||||||
const statsOptions = getRepositoryStatsOptions({ path: { shortId: params.repositoryId } });
|
|
||||||
|
|
||||||
const [res, schedules] = await Promise.all([
|
const [res, schedules, snapshots] = await Promise.all([
|
||||||
context.queryClient.ensureQueryData(getRepositoryOptions({ path: { shortId: params.repositoryId } })),
|
context.queryClient.ensureQueryData(getRepositoryOptions({ path: { shortId: params.repositoryId } })),
|
||||||
context.queryClient.ensureQueryData(listBackupSchedulesOptions()),
|
context.queryClient.ensureQueryData(listBackupSchedulesOptions()),
|
||||||
prefetchOrSkip(context.queryClient, snapshotOptions),
|
prefetchOrSkip(context.queryClient, snapshotOptions),
|
||||||
prefetchOrSkip(context.queryClient, statsOptions),
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...res,
|
...res,
|
||||||
snapshots: context.queryClient.getQueryData(snapshotOptions.queryKey),
|
snapshots: context.queryClient.getQueryData(snapshotOptions.queryKey),
|
||||||
backupSchedules: schedules,
|
backupSchedules: schedules,
|
||||||
stats: context.queryClient.getQueryData(statsOptions.queryKey),
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
validateSearch: type({ tab: "string?" }),
|
validateSearch: type({ tab: "string?" }),
|
||||||
|
|
@ -50,14 +46,13 @@ export const Route = createFileRoute("/(dashboard)/repositories/$repositoryId/")
|
||||||
|
|
||||||
function RouteComponent() {
|
function RouteComponent() {
|
||||||
const { repositoryId } = Route.useParams();
|
const { repositoryId } = Route.useParams();
|
||||||
const { snapshots, backupSchedules, stats } = Route.useLoaderData();
|
const { snapshots, backupSchedules } = Route.useLoaderData();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RepositoryDetailsPage
|
<RepositoryDetailsPage
|
||||||
repositoryId={repositoryId}
|
repositoryId={repositoryId}
|
||||||
initialSnapshots={snapshots}
|
initialSnapshots={snapshots}
|
||||||
initialBackupSchedules={backupSchedules}
|
initialBackupSchedules={backupSchedules}
|
||||||
initialStats={stats}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue