feat: allow stopping an ongoing backup

This commit is contained in:
Nicolas Meienberger
2025-11-08 23:26:53 +01:00
parent 3abf8ab12d
commit 5f620b4c45
11 changed files with 258 additions and 97 deletions

View File

@@ -36,6 +36,7 @@ import {
updateBackupSchedule,
getBackupScheduleForVolume,
runBackupNow,
stopBackup,
getSystemInfo,
downloadResticPassword,
} from "../sdk.gen";
@@ -94,9 +95,10 @@ import type {
GetBackupScheduleForVolumeData,
RunBackupNowData,
RunBackupNowResponse,
StopBackupData,
StopBackupResponse,
GetSystemInfoData,
DownloadResticPasswordData,
DownloadResticPasswordError,
DownloadResticPasswordResponse,
} from "../types.gen";
import { client as _heyApiClient } from "../client.gen";
@@ -1108,6 +1110,45 @@ export const runBackupNowMutation = (
return mutationOptions;
};
export const stopBackupQueryKey = (options: Options<StopBackupData>) => createQueryKey("stopBackup", options);
/**
* Stop a backup that is currently in progress
*/
export const stopBackupOptions = (options: Options<StopBackupData>) => {
return queryOptions({
queryFn: async ({ queryKey, signal }) => {
const { data } = await stopBackup({
...options,
...queryKey[0],
signal,
throwOnError: true,
});
return data;
},
queryKey: stopBackupQueryKey(options),
});
};
/**
* Stop a backup that is currently in progress
*/
export const stopBackupMutation = (
options?: Partial<Options<StopBackupData>>,
): UseMutationOptions<StopBackupResponse, DefaultError, Options<StopBackupData>> => {
const mutationOptions: UseMutationOptions<StopBackupResponse, DefaultError, Options<StopBackupData>> = {
mutationFn: async (localOptions) => {
const { data } = await stopBackup({
...options,
...localOptions,
throwOnError: true,
});
return data;
},
};
return mutationOptions;
};
export const getSystemInfoQueryKey = (options?: Options<GetSystemInfoData>) => createQueryKey("getSystemInfo", options);
/**
@@ -1154,14 +1195,10 @@ export const downloadResticPasswordOptions = (options?: Options<DownloadResticPa
*/
export const downloadResticPasswordMutation = (
options?: Partial<Options<DownloadResticPasswordData>>,
): UseMutationOptions<
DownloadResticPasswordResponse,
DownloadResticPasswordError,
Options<DownloadResticPasswordData>
> => {
): UseMutationOptions<DownloadResticPasswordResponse, DefaultError, Options<DownloadResticPasswordData>> => {
const mutationOptions: UseMutationOptions<
DownloadResticPasswordResponse,
DownloadResticPasswordError,
DefaultError,
Options<DownloadResticPasswordData>
> = {
mutationFn: async (localOptions) => {

View File

@@ -74,11 +74,13 @@ import type {
GetBackupScheduleForVolumeResponses,
RunBackupNowData,
RunBackupNowResponses,
StopBackupData,
StopBackupResponses,
StopBackupErrors,
GetSystemInfoData,
GetSystemInfoResponses,
DownloadResticPasswordData,
DownloadResticPasswordResponses,
DownloadResticPasswordErrors,
} from "./types.gen";
import { client as _heyApiClient } from "./client.gen";
@@ -533,6 +535,16 @@ export const runBackupNow = <ThrowOnError extends boolean = false>(
});
};
/**
* Stop a backup that is currently in progress
*/
export const stopBackup = <ThrowOnError extends boolean = false>(options: Options<StopBackupData, ThrowOnError>) => {
return (options.client ?? _heyApiClient).post<StopBackupResponses, StopBackupErrors, ThrowOnError>({
url: "/api/v1/backups/{scheduleId}/stop",
...options,
});
};
/**
* Get system information including available capabilities
*/
@@ -551,11 +563,7 @@ export const getSystemInfo = <ThrowOnError extends boolean = false>(
export const downloadResticPassword = <ThrowOnError extends boolean = false>(
options?: Options<DownloadResticPasswordData, ThrowOnError>,
) => {
return (options?.client ?? _heyApiClient).post<
DownloadResticPasswordResponses,
DownloadResticPasswordErrors,
ThrowOnError
>({
return (options?.client ?? _heyApiClient).post<DownloadResticPasswordResponses, unknown, ThrowOnError>({
url: "/api/v1/system/restic-password",
...options,
headers: {

View File

@@ -1480,6 +1480,33 @@ export type RunBackupNowResponses = {
export type RunBackupNowResponse = RunBackupNowResponses[keyof RunBackupNowResponses];
export type StopBackupData = {
body?: never;
path: {
scheduleId: string;
};
query?: never;
url: "/api/v1/backups/{scheduleId}/stop";
};
export type StopBackupErrors = {
/**
* No backup is currently running for this schedule
*/
409: unknown;
};
export type StopBackupResponses = {
/**
* Backup stopped successfully
*/
200: {
success: boolean;
};
};
export type StopBackupResponse = StopBackupResponses[keyof StopBackupResponses];
export type GetSystemInfoData = {
body?: never;
path?: never;
@@ -1509,17 +1536,6 @@ export type DownloadResticPasswordData = {
url: "/api/v1/system/restic-password";
};
export type DownloadResticPasswordErrors = {
/**
* Authentication required or incorrect password
*/
401: {
message?: string;
};
};
export type DownloadResticPasswordError = DownloadResticPasswordErrors[keyof DownloadResticPasswordErrors];
export type DownloadResticPasswordResponses = {
/**
* Restic password file content

View File

@@ -1,4 +1,4 @@
import { Pencil, Play, Trash2 } from "lucide-react";
import { Pencil, Play, Square, Trash2 } from "lucide-react";
import { useMemo, useState } from "react";
import { OnOff } from "~/components/onoff";
import { Button } from "~/components/ui/button";
@@ -18,12 +18,14 @@ type Props = {
schedule: BackupSchedule;
handleToggleEnabled: (enabled: boolean) => void;
handleRunBackupNow: () => void;
handleStopBackup: () => void;
handleDeleteSchedule: () => void;
setIsEditMode: (isEdit: boolean) => void;
};
export const ScheduleSummary = (props: Props) => {
const { schedule, handleToggleEnabled, handleRunBackupNow, handleDeleteSchedule, setIsEditMode } = props;
const { schedule, handleToggleEnabled, handleRunBackupNow, handleStopBackup, handleDeleteSchedule, setIsEditMode } =
props;
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const summary = useMemo(() => {
@@ -75,16 +77,17 @@ export const ScheduleSummary = (props: Props) => {
</div>
</div>
<div className="flex flex-col sm:flex-row gap-2">
<Button
variant="default"
size="sm"
onClick={handleRunBackupNow}
disabled={schedule.lastBackupStatus === "in_progress"}
className="w-full sm:w-auto"
>
<Play className="h-4 w-4 mr-2" />
<span className="sm:inline">Backup now</span>
</Button>
{schedule.lastBackupStatus === "in_progress" ? (
<Button variant="destructive" size="sm" onClick={handleStopBackup} className="w-full sm:w-auto">
<Square className="h-4 w-4 mr-2" />
<span className="sm:inline">Stop backup</span>
</Button>
) : (
<Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full sm:w-auto">
<Play className="h-4 w-4 mr-2" />
<span className="sm:inline">Backup now</span>
</Button>
)}
<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full sm:w-auto">
<Pencil className="h-4 w-4 mr-2" />
<span className="sm:inline">Edit schedule</span>

View File

@@ -9,6 +9,7 @@ import {
deleteBackupScheduleMutation,
listSnapshotsOptions,
updateBackupScheduleMutation,
stopBackupMutation,
} from "~/api-client/@tanstack/react-query.gen";
import { parseError } from "~/lib/errors";
import { getCronExpression } from "~/utils/utils";
@@ -44,9 +45,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
const [selectedSnapshotId, setSelectedSnapshotId] = useState<string>();
const { data: schedule } = useQuery({
...getBackupScheduleOptions({
path: { scheduleId: params.id },
}),
...getBackupScheduleOptions({ path: { scheduleId: params.id } }),
initialData: loaderData,
refetchInterval: 10000,
refetchOnWindowFocus: true,
@@ -57,13 +56,10 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
isLoading,
failureReason,
} = useQuery({
...listSnapshotsOptions({
path: { name: schedule.repository.name },
query: { backupId: schedule.id.toString() },
}),
...listSnapshotsOptions({ path: { name: schedule.repository.name }, query: { backupId: schedule.id.toString() } }),
});
const upsertSchedule = useMutation({
const updateSchedule = useMutation({
...updateBackupScheduleMutation(),
onSuccess: () => {
toast.success("Backup schedule saved successfully");
@@ -82,9 +78,17 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
toast.success("Backup started successfully");
},
onError: (error) => {
toast.error("Failed to start backup", {
description: parseError(error)?.message,
});
toast.error("Failed to start backup", { description: parseError(error)?.message });
},
});
const stopBackup = useMutation({
...stopBackupMutation(),
onSuccess: () => {
toast.success("Backup stopped successfully");
},
onError: (error) => {
toast.error("Failed to stop backup", { description: parseError(error)?.message });
},
});
@@ -95,9 +99,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
navigate("/backups");
},
onError: (error) => {
toast.error("Failed to delete backup schedule", {
description: parseError(error)?.message,
});
toast.error("Failed to delete backup schedule", { description: parseError(error)?.message });
},
});
@@ -114,7 +116,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
if (formValues.keepMonthly) retentionPolicy.keepMonthly = formValues.keepMonthly;
if (formValues.keepYearly) retentionPolicy.keepYearly = formValues.keepYearly;
upsertSchedule.mutate({
updateSchedule.mutate({
path: { scheduleId: schedule.id.toString() },
body: {
repositoryId: formValues.repositoryId,
@@ -128,9 +130,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
};
const handleToggleEnabled = (enabled: boolean) => {
if (!schedule) return;
upsertSchedule.mutate({
updateSchedule.mutate({
path: { scheduleId: schedule.id.toString() },
body: {
repositoryId: schedule.repositoryId,
@@ -143,28 +143,12 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
});
};
const handleRunBackupNow = () => {
if (!schedule) return;
runBackupNow.mutate({
path: {
scheduleId: schedule.id.toString(),
},
});
};
const handleDeleteSchedule = () => {
if (!schedule) return;
deleteSchedule.mutate({ path: { scheduleId: schedule.id.toString() } });
};
if (isEditMode) {
return (
<div>
<CreateScheduleForm volume={schedule.volume} initialValues={schedule} onSubmit={handleSubmit} formId={formId} />
<div className="flex justify-end mt-4 gap-2">
<Button type="submit" className="ml-auto" variant="primary" form={formId} loading={upsertSchedule.isPending}>
<Button type="submit" className="ml-auto" variant="primary" form={formId} loading={updateSchedule.isPending}>
Update schedule
</Button>
<Button variant="outline" onClick={() => setIsEditMode(false)}>
@@ -181,8 +165,9 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
<div className="flex flex-col gap-6">
<ScheduleSummary
handleToggleEnabled={handleToggleEnabled}
handleRunBackupNow={handleRunBackupNow}
handleDeleteSchedule={handleDeleteSchedule}
handleRunBackupNow={() => runBackupNow.mutate({ path: { scheduleId: schedule.id.toString() } })}
handleStopBackup={() => stopBackup.mutate({ path: { scheduleId: schedule.id.toString() } })}
handleDeleteSchedule={() => deleteSchedule.mutate({ path: { scheduleId: schedule.id.toString() } })}
setIsEditMode={setIsEditMode}
schedule={schedule}
/>