refactor: split create schedule form (#453)
This commit is contained in:
Nico
GitHub
parent
35773a6969
commit
17b4027e0b
11 changed files with 895 additions and 750 deletions
|
|
@ -1,748 +0,0 @@
|
|||
import { arktypeResolver } from "@hookform/resolvers/arktype";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { type } from "arktype";
|
||||
import { X } from "lucide-react";
|
||||
import { useCallback, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { listRepositoriesOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { CronInput } from "~/client/components/cron-input";
|
||||
import { RepositoryIcon } from "~/client/components/repository-icon";
|
||||
import { Button } from "~/client/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
|
||||
import { Checkbox } from "~/client/components/ui/checkbox";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "~/client/components/ui/form";
|
||||
import { Input } from "~/client/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
|
||||
import { Textarea } from "~/client/components/ui/textarea";
|
||||
import { VolumeFileBrowser } from "~/client/components/volume-file-browser";
|
||||
import type { BackupSchedule, Volume } from "~/client/lib/types";
|
||||
import { deepClean } from "~/utils/object";
|
||||
import { cronToFormValues } from "../lib/cron-utils";
|
||||
|
||||
const internalFormSchema = type({
|
||||
name: "1 <= string <= 128",
|
||||
repositoryId: "string",
|
||||
excludePatternsText: "string?",
|
||||
excludeIfPresentText: "string?",
|
||||
includePatternsText: "string?",
|
||||
includePatterns: "string[]?",
|
||||
frequency: "string",
|
||||
dailyTime: "string?",
|
||||
weeklyDay: "string?",
|
||||
monthlyDays: "string[]?",
|
||||
cronExpression: "string?",
|
||||
keepLast: "number?",
|
||||
keepHourly: "number?",
|
||||
keepDaily: "number?",
|
||||
keepWeekly: "number?",
|
||||
keepMonthly: "number?",
|
||||
keepYearly: "number?",
|
||||
oneFileSystem: "boolean?",
|
||||
});
|
||||
const cleanSchema = type.pipe((d) => internalFormSchema(deepClean(d)));
|
||||
|
||||
export const weeklyDays = [
|
||||
{ label: "Monday", value: "1" },
|
||||
{ label: "Tuesday", value: "2" },
|
||||
{ label: "Wednesday", value: "3" },
|
||||
{ label: "Thursday", value: "4" },
|
||||
{ label: "Friday", value: "5" },
|
||||
{ label: "Saturday", value: "6" },
|
||||
{ label: "Sunday", value: "0" },
|
||||
];
|
||||
|
||||
type InternalFormValues = typeof internalFormSchema.infer;
|
||||
|
||||
export type BackupScheduleFormValues = Omit<
|
||||
InternalFormValues,
|
||||
"excludePatternsText" | "excludeIfPresentText" | "includePatternsText"
|
||||
> & {
|
||||
excludePatterns?: string[];
|
||||
excludeIfPresent?: string[];
|
||||
};
|
||||
|
||||
type Props = {
|
||||
volume: Volume;
|
||||
initialValues?: BackupSchedule;
|
||||
onSubmit: (data: BackupScheduleFormValues) => void;
|
||||
loading?: boolean;
|
||||
summaryContent?: React.ReactNode;
|
||||
formId: string;
|
||||
};
|
||||
|
||||
const backupScheduleToFormValues = (schedule?: BackupSchedule): InternalFormValues | undefined => {
|
||||
if (!schedule) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const cronValues = cronToFormValues(schedule.cronExpression ?? "0 * * * *");
|
||||
|
||||
const patterns = schedule.includePatterns || [];
|
||||
const isGlobPattern = (p: string) => /[*?[\]]/.test(p);
|
||||
const fileBrowserPaths = patterns.filter((p) => !isGlobPattern(p));
|
||||
const textPatterns = patterns.filter(isGlobPattern);
|
||||
|
||||
return {
|
||||
name: schedule.name,
|
||||
repositoryId: schedule.repositoryId,
|
||||
includePatterns: fileBrowserPaths.length > 0 ? fileBrowserPaths : undefined,
|
||||
includePatternsText: textPatterns.length > 0 ? textPatterns.join("\n") : undefined,
|
||||
excludePatternsText: schedule.excludePatterns?.join("\n") || undefined,
|
||||
excludeIfPresentText: schedule.excludeIfPresent?.join("\n") || undefined,
|
||||
oneFileSystem: schedule.oneFileSystem ?? false,
|
||||
...cronValues,
|
||||
...schedule.retentionPolicy,
|
||||
};
|
||||
};
|
||||
|
||||
export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: Props) => {
|
||||
const form = useForm<InternalFormValues>({
|
||||
resolver: arktypeResolver(cleanSchema as unknown as typeof internalFormSchema),
|
||||
defaultValues: backupScheduleToFormValues(initialValues),
|
||||
});
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(data: InternalFormValues) => {
|
||||
const {
|
||||
excludePatternsText,
|
||||
excludeIfPresentText,
|
||||
includePatternsText,
|
||||
includePatterns: fileBrowserPatterns,
|
||||
cronExpression,
|
||||
...rest
|
||||
} = data;
|
||||
const excludePatterns = excludePatternsText
|
||||
? excludePatternsText
|
||||
.split("\n")
|
||||
.map((p) => p.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
|
||||
const excludeIfPresent = excludeIfPresentText
|
||||
? excludeIfPresentText
|
||||
.split("\n")
|
||||
.map((p) => p.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
|
||||
const textPatterns = includePatternsText
|
||||
? includePatternsText
|
||||
.split("\n")
|
||||
.map((p) => p.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
const includePatterns = [...(fileBrowserPatterns || []), ...textPatterns];
|
||||
|
||||
onSubmit({
|
||||
...rest,
|
||||
cronExpression,
|
||||
includePatterns: includePatterns.length > 0 ? includePatterns : [],
|
||||
excludePatterns,
|
||||
excludeIfPresent,
|
||||
});
|
||||
},
|
||||
[onSubmit],
|
||||
);
|
||||
|
||||
const { data: repositoriesData } = useQuery({
|
||||
...listRepositoriesOptions(),
|
||||
});
|
||||
|
||||
const frequency = form.watch("frequency");
|
||||
const formValues = form.watch();
|
||||
|
||||
const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set(initialValues?.includePatterns || []));
|
||||
|
||||
const handleSelectionChange = useCallback(
|
||||
(paths: Set<string>) => {
|
||||
setSelectedPaths(paths);
|
||||
form.setValue("includePatterns", Array.from(paths));
|
||||
},
|
||||
[form],
|
||||
);
|
||||
|
||||
const handleRemovePath = useCallback(
|
||||
(pathToRemove: string) => {
|
||||
const newPaths = new Set(selectedPaths);
|
||||
newPaths.delete(pathToRemove);
|
||||
setSelectedPaths(newPaths);
|
||||
form.setValue("includePatterns", Array.from(newPaths));
|
||||
},
|
||||
[selectedPaths, form],
|
||||
);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(handleSubmit)}
|
||||
className="grid gap-4 xl:grid-cols-[minmax(0,2.3fr)_minmax(320px,1fr)]"
|
||||
id={formId}
|
||||
>
|
||||
<div className="grid gap-4 min-w-0">
|
||||
<Card className="min-w-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Backup automation</CardTitle>
|
||||
<CardDescription className="mt-1">
|
||||
Schedule automated backups of <strong>{volume.name}</strong> to a secure repository.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 @md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem className="@md:col-span-2">
|
||||
<FormLabel>Backup name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="My backup" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>A unique name to identify this backup schedule.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="repositoryId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="@md:col-span-2">
|
||||
<FormLabel>Backup repository</FormLabel>
|
||||
<FormControl>
|
||||
<Select {...field} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a repository" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{repositoriesData?.map((repo) => (
|
||||
<SelectItem key={repo.id} value={repo.id}>
|
||||
<span className="flex items-center gap-2">
|
||||
<RepositoryIcon backend={repo.type} />
|
||||
{repo.name}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Choose where encrypted backups for <strong>{volume.name}</strong> will be stored.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequency"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Backup frequency</FormLabel>
|
||||
<FormControl>
|
||||
<Select {...field} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select frequency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="hourly">Hourly</SelectItem>
|
||||
<SelectItem value="daily">Daily</SelectItem>
|
||||
<SelectItem value="weekly">Weekly</SelectItem>
|
||||
<SelectItem value="monthly">Specific days</SelectItem>
|
||||
<SelectItem value="cron">Custom (Cron)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormDescription>Define how often snapshots should be taken.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{frequency === "cron" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="cronExpression"
|
||||
render={({ field, fieldState }) => (
|
||||
<CronInput value={field.value || ""} onChange={field.onChange} error={fieldState.error?.message} />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{frequency !== "hourly" && frequency !== "cron" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dailyTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Execution time</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="time" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Time of day when the backup will run.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{frequency === "weekly" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="weeklyDay"
|
||||
render={({ field }) => (
|
||||
<FormItem className="@md:col-span-2">
|
||||
<FormLabel>Execution day</FormLabel>
|
||||
<FormControl>
|
||||
<Select {...field} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a day" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{weeklyDays.map((day) => (
|
||||
<SelectItem key={day.value} value={day.value}>
|
||||
{day.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormDescription>Choose which day of the week to run the backup.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{frequency === "monthly" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="monthlyDays"
|
||||
render={({ field }) => (
|
||||
<FormItem className="@md:col-span-2">
|
||||
<FormLabel>Days of the month</FormLabel>
|
||||
<FormControl>
|
||||
<div className="grid grid-cols-7 gap-4 w-max">
|
||||
{Array.from({ length: 31 }, (_, i) => {
|
||||
const day = (i + 1).toString();
|
||||
const isSelected = field.value?.includes(day);
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
key={day}
|
||||
variant={isSelected ? "primary" : "secondary"}
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
const current = field.value || [];
|
||||
const next = isSelected ? current.filter((d) => d !== day) : [...current, day];
|
||||
field.onChange(next);
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormDescription>Select one or more days when the backup should run.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Backup paths</CardTitle>
|
||||
<CardDescription>
|
||||
Select which folders or files to include in the backup. If no paths are selected, the entire volume will
|
||||
be backed up.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<VolumeFileBrowser
|
||||
key={volume.id}
|
||||
volumeId={volume.shortId}
|
||||
selectedPaths={selectedPaths}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
withCheckboxes={true}
|
||||
foldersOnly={false}
|
||||
className="relative border rounded-md bg-card p-2 h-100 overflow-y-auto"
|
||||
/>
|
||||
{selectedPaths.size > 0 && (
|
||||
<div className="mt-4">
|
||||
<p className="text-xs text-muted-foreground mb-2">Selected paths:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.from(selectedPaths).map((path) => (
|
||||
<span
|
||||
key={path}
|
||||
className="text-xs bg-accent px-2 py-1 rounded-md font-mono inline-flex items-center gap-1"
|
||||
>
|
||||
{path}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemovePath(path)}
|
||||
className="ml-1 hover:bg-destructive/20 rounded p-0.5 transition-colors"
|
||||
aria-label={`Remove ${path}` as string}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="includePatternsText"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mt-6">
|
||||
<FormLabel>Additional include patterns</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder="/data/** /config/*.json *.db"
|
||||
className="font-mono text-sm min-h-25"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Optionally add custom include patterns using glob syntax. Enter one pattern per line. These will
|
||||
be combined with the paths selected above.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Exclude patterns</CardTitle>
|
||||
<CardDescription>
|
||||
Optionally specify patterns to exclude from backups. Enter one pattern per line (e.g., *.tmp,
|
||||
node_modules/**, .cache/).
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="excludePatternsText"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Exclusion patterns</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder="*.tmp node_modules/** .cache/ *.log"
|
||||
className="font-mono text-sm min-h-30"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Patterns support glob syntax. See
|
||||
<a
|
||||
href="https://restic.readthedocs.io/en/stable/040_backup.html#excluding-files"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline hover:text-foreground"
|
||||
>
|
||||
Restic documentation
|
||||
</a>
|
||||
for more details.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="excludeIfPresentText"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mt-6">
|
||||
<FormLabel>Exclude if file present</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder=".nobackup .exclude-from-backup CACHEDIR.TAG"
|
||||
className="font-mono text-sm min-h-20"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Exclude folders containing a file with the specified name. Enter one filename per line. For
|
||||
example, use <code className="bg-muted px-1 rounded">.nobackup</code> to skip any folder
|
||||
containing a <code className="bg-muted px-1 rounded">.nobackup</code> file.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="oneFileSystem"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 mt-6">
|
||||
<FormControl>
|
||||
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
<div className="space-y-1 leading-none">
|
||||
<FormLabel>Stay on one file system</FormLabel>
|
||||
<FormDescription>
|
||||
Prevent Restic from crossing file system boundaries. This is useful to avoid backing up network
|
||||
mounts or other partitions that might be mounted inside your backup source.
|
||||
</FormDescription>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Retention policy</CardTitle>
|
||||
<CardDescription>Define how many snapshots to keep. Leave empty to keep all.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 @md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepLast"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep last N snapshots</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="Optional"
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the N most recent snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepHourly"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep hourly</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="Optional"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N hourly snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepDaily"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep daily</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="e.g., 7"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N daily snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepWeekly"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep weekly</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="e.g., 4"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N weekly snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepMonthly"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep monthly</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="e.g., 6"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N monthly snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepYearly"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep yearly</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="Optional"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N yearly snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="xl:sticky xl:top-6 xl:self-start">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-4">
|
||||
<div>
|
||||
<CardTitle>Schedule summary</CardTitle>
|
||||
<CardDescription>Review the backup configuration.</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Volume</p>
|
||||
<p className="font-medium">{volume.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Schedule</p>
|
||||
<p className="font-medium">
|
||||
{frequency ? frequency.charAt(0).toUpperCase() + frequency.slice(1) : "-"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Repository</p>
|
||||
<p className="font-medium">
|
||||
{repositoriesData?.find((r) => r.id === formValues.repositoryId)?.name || "—"}
|
||||
</p>
|
||||
</div>
|
||||
{(formValues.includePatterns && formValues.includePatterns.length > 0) ||
|
||||
formValues.includePatternsText ? (
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Include paths/patterns</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{formValues.includePatterns?.slice(0, 20).map((path) => (
|
||||
<span key={path} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
|
||||
{path}
|
||||
</span>
|
||||
))}
|
||||
{formValues.includePatterns && formValues.includePatterns.length > 20 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
+ {formValues.includePatterns.length - 20} more
|
||||
</span>
|
||||
)}
|
||||
{formValues.includePatternsText
|
||||
?.split("\n")
|
||||
.filter(Boolean)
|
||||
.slice(0, 20 - (formValues.includePatterns?.length || 0))
|
||||
.map((pattern) => (
|
||||
<span key={pattern} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
|
||||
{pattern.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{formValues.excludePatternsText && (
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Exclude patterns</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{formValues.excludePatternsText
|
||||
.split("\n")
|
||||
.filter(Boolean)
|
||||
.map((pattern) => (
|
||||
<span key={pattern} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
|
||||
{pattern.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{formValues.excludeIfPresentText && (
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Exclude if present</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{formValues.excludeIfPresentText
|
||||
.split("\n")
|
||||
.filter(Boolean)
|
||||
.map((filename) => (
|
||||
<span key={filename} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
|
||||
{filename.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">One file system</p>
|
||||
<p className="font-medium">{formValues.oneFileSystem ? "Enabled" : "Disabled"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Retention</p>
|
||||
<p className="font-medium">
|
||||
{Object.entries(formValues)
|
||||
.filter(([key, value]) => key.startsWith("keep") && Boolean(value))
|
||||
.map(([key, value]) => {
|
||||
const label = key.replace("keep", "").toLowerCase();
|
||||
return `${value.toString()} ${label}`;
|
||||
})
|
||||
.join(", ") || "-"}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { listRepositoriesOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { RepositoryIcon } from "~/client/components/repository-icon";
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
|
||||
import { Input } from "~/client/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
|
||||
import type { Volume } from "~/client/lib/types";
|
||||
import type { UseFormReturn } from "react-hook-form";
|
||||
import type { InternalFormValues } from "./types";
|
||||
|
||||
type BasicInfoSectionProps = {
|
||||
form: UseFormReturn<InternalFormValues>;
|
||||
volume: Volume;
|
||||
};
|
||||
|
||||
export const BasicInfoSection = ({ form, volume }: BasicInfoSectionProps) => {
|
||||
const { data: repositoriesData } = useQuery({
|
||||
...listRepositoriesOptions(),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem className="@md:col-span-2">
|
||||
<FormLabel>Backup name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="My backup" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>A unique name to identify this backup schedule.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="repositoryId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="@md:col-span-2">
|
||||
<FormLabel>Backup repository</FormLabel>
|
||||
<FormControl>
|
||||
<Select {...field} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a repository" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{repositoriesData?.map((repo) => (
|
||||
<SelectItem key={repo.id} value={repo.id}>
|
||||
<span className="flex items-center gap-2">
|
||||
<RepositoryIcon backend={repo.type} />
|
||||
{repo.name}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Choose where encrypted backups for <strong>{volume.name}</strong> will be stored.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
|
||||
import { Textarea } from "~/client/components/ui/textarea";
|
||||
import { Checkbox } from "~/client/components/ui/checkbox";
|
||||
import type { UseFormReturn } from "react-hook-form";
|
||||
import type { InternalFormValues } from "./types";
|
||||
|
||||
type ExcludeSectionProps = {
|
||||
form: UseFormReturn<InternalFormValues>;
|
||||
};
|
||||
|
||||
export const ExcludeSection = ({ form }: ExcludeSectionProps) => {
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="excludePatternsText"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Exclusion patterns</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder="*.tmp node_modules/** .cache/ *.log"
|
||||
className="font-mono text-sm min-h-30"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Patterns support glob syntax. See
|
||||
<a
|
||||
href="https://restic.readthedocs.io/en/stable/040_backup.html#excluding-files"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline hover:text-foreground"
|
||||
>
|
||||
Restic documentation
|
||||
</a>
|
||||
for more details.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="excludeIfPresentText"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mt-6">
|
||||
<FormLabel>Exclude if file present</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder=".nobackup .exclude-from-backup CACHEDIR.TAG"
|
||||
className="font-mono text-sm min-h-20"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Exclude folders containing a file with the specified name. Enter one filename per line. For example, use{" "}
|
||||
<code className="bg-muted px-1 rounded">.nobackup</code> to skip any folder containing a{" "}
|
||||
<code className="bg-muted px-1 rounded">.nobackup</code> file.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="oneFileSystem"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 mt-6">
|
||||
<FormControl>
|
||||
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
<div className="space-y-1 leading-none">
|
||||
<FormLabel>Stay on one file system</FormLabel>
|
||||
<FormDescription>
|
||||
Prevent Restic from crossing file system boundaries. This is useful to avoid backing up network mounts
|
||||
or other partitions that might be mounted inside your backup source.
|
||||
</FormDescription>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
import { CronInput } from "~/client/components/cron-input";
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
|
||||
import { Input } from "~/client/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
|
||||
import { Button } from "~/client/components/ui/button";
|
||||
import type { UseFormReturn } from "react-hook-form";
|
||||
import type { InternalFormValues } from "./types";
|
||||
import { weeklyDays } from "./types";
|
||||
|
||||
type FrequencySectionProps = {
|
||||
form: UseFormReturn<InternalFormValues>;
|
||||
frequency: string;
|
||||
};
|
||||
|
||||
export const FrequencySection = ({ form, frequency }: FrequencySectionProps) => {
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequency"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Backup frequency</FormLabel>
|
||||
<FormControl>
|
||||
<Select {...field} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select frequency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="hourly">Hourly</SelectItem>
|
||||
<SelectItem value="daily">Daily</SelectItem>
|
||||
<SelectItem value="weekly">Weekly</SelectItem>
|
||||
<SelectItem value="monthly">Specific days</SelectItem>
|
||||
<SelectItem value="cron">Custom (Cron)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormDescription>Define how often snapshots should be taken.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{frequency === "cron" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="cronExpression"
|
||||
render={({ field, fieldState }) => (
|
||||
<CronInput value={field.value || ""} onChange={field.onChange} error={fieldState.error?.message} />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{frequency !== "hourly" && frequency !== "cron" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dailyTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Execution time</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="time" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Time of day when the backup will run.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{frequency === "weekly" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="weeklyDay"
|
||||
render={({ field }) => (
|
||||
<FormItem className="@md:col-span-2">
|
||||
<FormLabel>Execution day</FormLabel>
|
||||
<FormControl>
|
||||
<Select {...field} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a day" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{weeklyDays.map((day) => (
|
||||
<SelectItem key={day.value} value={day.value}>
|
||||
{day.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormDescription>Choose which day of the week to run the backup.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{frequency === "monthly" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="monthlyDays"
|
||||
render={({ field }) => (
|
||||
<FormItem className="@md:col-span-2">
|
||||
<FormLabel>Days of the month</FormLabel>
|
||||
<FormControl>
|
||||
<div className="grid grid-cols-7 gap-4 w-max">
|
||||
{Array.from({ length: 31 }, (_, i) => {
|
||||
const day = (i + 1).toString();
|
||||
const isSelected = field.value?.includes(day);
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
key={day}
|
||||
variant={isSelected ? "primary" : "secondary"}
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
const current = field.value || [];
|
||||
const next = isSelected ? current.filter((d) => d !== day) : [...current, day];
|
||||
field.onChange(next);
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormDescription>Select one or more days when the backup should run.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
import { arktypeResolver } from "@hookform/resolvers/arktype";
|
||||
import { useCallback, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Form } from "~/client/components/ui/form";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
|
||||
import type { BackupSchedule, Volume } from "~/client/lib/types";
|
||||
import { BasicInfoSection } from "./basic-info-section";
|
||||
import { ExcludeSection } from "./exclude-section";
|
||||
import { FrequencySection } from "./frequency-section";
|
||||
import { PathsSection } from "./paths-section";
|
||||
import { RetentionSection } from "./retention-section";
|
||||
import { SummarySection } from "./summary-section";
|
||||
import { cleanSchema, type BackupScheduleFormValues, type InternalFormValues } from "./types";
|
||||
import { backupScheduleToFormValues } from "./utils";
|
||||
|
||||
export type { BackupScheduleFormValues };
|
||||
|
||||
type Props = {
|
||||
volume: Volume;
|
||||
initialValues?: BackupSchedule;
|
||||
onSubmit: (data: BackupScheduleFormValues) => void;
|
||||
loading?: boolean;
|
||||
summaryContent?: React.ReactNode;
|
||||
formId: string;
|
||||
};
|
||||
|
||||
export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: Props) => {
|
||||
const form = useForm<InternalFormValues>({
|
||||
resolver: arktypeResolver(cleanSchema as unknown as typeof import("./types").internalFormSchema),
|
||||
defaultValues: backupScheduleToFormValues(initialValues),
|
||||
});
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(data: InternalFormValues) => {
|
||||
const {
|
||||
excludePatternsText,
|
||||
excludeIfPresentText,
|
||||
includePatternsText,
|
||||
includePatterns: fileBrowserPatterns,
|
||||
cronExpression,
|
||||
...rest
|
||||
} = data;
|
||||
const excludePatterns = excludePatternsText
|
||||
? excludePatternsText
|
||||
.split("\n")
|
||||
.map((p) => p.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
|
||||
const excludeIfPresent = excludeIfPresentText
|
||||
? excludeIfPresentText
|
||||
.split("\n")
|
||||
.map((p) => p.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
|
||||
const textPatterns = includePatternsText
|
||||
? includePatternsText
|
||||
.split("\n")
|
||||
.map((p) => p.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
const includePatterns = [...(fileBrowserPatterns || []), ...textPatterns];
|
||||
|
||||
onSubmit({
|
||||
...rest,
|
||||
cronExpression,
|
||||
includePatterns: includePatterns.length > 0 ? includePatterns : [],
|
||||
excludePatterns,
|
||||
excludeIfPresent,
|
||||
});
|
||||
},
|
||||
[onSubmit],
|
||||
);
|
||||
|
||||
const frequency = form.watch("frequency");
|
||||
const formValues = form.watch();
|
||||
|
||||
const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set(initialValues?.includePatterns || []));
|
||||
const [showAllSelectedPaths, setShowAllSelectedPaths] = useState(false);
|
||||
|
||||
const handleSelectionChange = useCallback(
|
||||
(paths: Set<string>) => {
|
||||
setSelectedPaths(paths);
|
||||
form.setValue("includePatterns", Array.from(paths));
|
||||
},
|
||||
[form],
|
||||
);
|
||||
|
||||
const handleRemovePath = useCallback(
|
||||
(pathToRemove: string) => {
|
||||
const newPaths = new Set(selectedPaths);
|
||||
newPaths.delete(pathToRemove);
|
||||
setSelectedPaths(newPaths);
|
||||
form.setValue("includePatterns", Array.from(newPaths));
|
||||
},
|
||||
[selectedPaths, form],
|
||||
);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(handleSubmit)}
|
||||
className="grid gap-4 xl:grid-cols-[minmax(0,2.3fr)_minmax(320px,1fr)]"
|
||||
id={formId}
|
||||
>
|
||||
<div className="grid gap-4 min-w-0">
|
||||
<Card className="min-w-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Backup automation</CardTitle>
|
||||
<CardDescription className="mt-1">
|
||||
Schedule automated backups of <strong>{volume.name}</strong> to a secure repository.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 @md:grid-cols-2">
|
||||
<BasicInfoSection form={form} volume={volume} />
|
||||
<FrequencySection form={form} frequency={frequency} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Backup paths</CardTitle>
|
||||
<CardDescription>
|
||||
Select which folders or files to include in the backup. If no paths are selected, the entire volume will
|
||||
be backed up.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PathsSection
|
||||
form={form}
|
||||
volume={volume}
|
||||
selectedPaths={selectedPaths}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
onRemovePath={handleRemovePath}
|
||||
showAllSelectedPaths={showAllSelectedPaths}
|
||||
onToggleShowAllPaths={() => setShowAllSelectedPaths(!showAllSelectedPaths)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Exclude patterns</CardTitle>
|
||||
<CardDescription>
|
||||
Optionally specify patterns to exclude from backups. Enter one pattern per line (e.g., *.tmp,
|
||||
node_modules/**, .cache/).
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ExcludeSection form={form} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Retention policy</CardTitle>
|
||||
<CardDescription>Define how many snapshots to keep. Leave empty to keep all.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 @md:grid-cols-2">
|
||||
<RetentionSection form={form} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="xl:sticky xl:top-6 xl:self-start">
|
||||
<SummarySection volume={volume} frequency={frequency} formValues={formValues} />
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import { X } from "lucide-react";
|
||||
import { VolumeFileBrowser } from "~/client/components/volume-file-browser";
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
|
||||
import { Textarea } from "~/client/components/ui/textarea";
|
||||
import type { Volume } from "~/client/lib/types";
|
||||
import type { UseFormReturn } from "react-hook-form";
|
||||
import type { InternalFormValues } from "./types";
|
||||
|
||||
type PathsSectionProps = {
|
||||
form: UseFormReturn<InternalFormValues>;
|
||||
volume: Volume;
|
||||
selectedPaths: Set<string>;
|
||||
onSelectionChange: (paths: Set<string>) => void;
|
||||
onRemovePath: (path: string) => void;
|
||||
showAllSelectedPaths: boolean;
|
||||
onToggleShowAllPaths: () => void;
|
||||
};
|
||||
|
||||
export const PathsSection = ({
|
||||
form,
|
||||
volume,
|
||||
selectedPaths,
|
||||
onSelectionChange,
|
||||
onRemovePath,
|
||||
showAllSelectedPaths,
|
||||
onToggleShowAllPaths,
|
||||
}: PathsSectionProps) => {
|
||||
return (
|
||||
<>
|
||||
<VolumeFileBrowser
|
||||
key={volume.id}
|
||||
volumeId={volume.shortId}
|
||||
selectedPaths={selectedPaths}
|
||||
onSelectionChange={onSelectionChange}
|
||||
withCheckboxes={true}
|
||||
foldersOnly={false}
|
||||
className="relative border rounded-md bg-card p-2 h-100 overflow-y-auto"
|
||||
/>
|
||||
{selectedPaths.size > 0 && (
|
||||
<div className="mt-4">
|
||||
<p className="text-xs text-muted-foreground mb-2">Selected paths:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.from(selectedPaths)
|
||||
.slice(0, showAllSelectedPaths ? undefined : 20)
|
||||
.map((path) => (
|
||||
<span
|
||||
key={path}
|
||||
className="text-xs bg-accent px-2 py-1 rounded-md font-mono inline-flex items-center gap-1"
|
||||
>
|
||||
{path}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRemovePath(path)}
|
||||
className="ml-1 hover:bg-destructive/20 rounded p-0.5 transition-colors"
|
||||
aria-label={`Remove ${path}` as string}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
{selectedPaths.size > 20 && (
|
||||
<button type="button" onClick={onToggleShowAllPaths} className="text-xs text-primary hover:underline">
|
||||
{showAllSelectedPaths ? "Show less" : `+ ${selectedPaths.size - 20} more`}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="includePatternsText"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mt-6">
|
||||
<FormLabel>Additional include patterns</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder="/data/** /config/*.json *.db"
|
||||
className="font-mono text-sm min-h-25"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Optionally add custom include patterns using glob syntax. Enter one pattern per line. These will be
|
||||
combined with the paths selected above.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
|
||||
import { Input } from "~/client/components/ui/input";
|
||||
import type { UseFormReturn } from "react-hook-form";
|
||||
import type { InternalFormValues } from "./types";
|
||||
|
||||
type RetentionSectionProps = {
|
||||
form: UseFormReturn<InternalFormValues>;
|
||||
};
|
||||
|
||||
export const RetentionSection = ({ form }: RetentionSectionProps) => {
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepLast"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep last N snapshots</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="Optional"
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the N most recent snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepHourly"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep hourly</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="Optional"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N hourly snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepDaily"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep daily</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="e.g., 7"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N daily snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepWeekly"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep weekly</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="e.g., 4"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N weekly snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepMonthly"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep monthly</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="e.g., 6"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N monthly snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keepYearly"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Keep yearly</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="Optional"
|
||||
{...field}
|
||||
onChange={(v) => field.onChange(Number(v.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Keep the last N yearly snapshots.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { listRepositoriesOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
|
||||
import type { Volume } from "~/client/lib/types";
|
||||
import type { InternalFormValues } from "./types";
|
||||
|
||||
type SummarySectionProps = {
|
||||
volume: Volume;
|
||||
frequency: string;
|
||||
formValues: InternalFormValues;
|
||||
};
|
||||
|
||||
export const SummarySection = ({ volume, frequency, formValues }: SummarySectionProps) => {
|
||||
const { data: repositoriesData } = useQuery({
|
||||
...listRepositoriesOptions(),
|
||||
});
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-4">
|
||||
<div>
|
||||
<CardTitle>Schedule summary</CardTitle>
|
||||
<CardDescription>Review the backup configuration.</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Volume</p>
|
||||
<p className="font-medium">{volume.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Schedule</p>
|
||||
<p className="font-medium">{frequency ? frequency.charAt(0).toUpperCase() + frequency.slice(1) : "-"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Repository</p>
|
||||
<p className="font-medium">{repositoriesData?.find((r) => r.id === formValues.repositoryId)?.name || "—"}</p>
|
||||
</div>
|
||||
{(formValues.includePatterns && formValues.includePatterns.length > 0) || formValues.includePatternsText ? (
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Include paths/patterns</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{formValues.includePatterns?.slice(0, 20).map((path) => (
|
||||
<span key={path} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
|
||||
{path}
|
||||
</span>
|
||||
))}
|
||||
{formValues.includePatterns && formValues.includePatterns.length > 20 && (
|
||||
<span className="text-xs text-muted-foreground">+ {formValues.includePatterns.length - 20} more</span>
|
||||
)}
|
||||
{formValues.includePatternsText
|
||||
?.split("\n")
|
||||
.filter(Boolean)
|
||||
.slice(0, 20 - (formValues.includePatterns?.length || 0))
|
||||
.map((pattern) => (
|
||||
<span key={pattern} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
|
||||
{pattern.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{formValues.excludePatternsText && (
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Exclude patterns</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{formValues.excludePatternsText
|
||||
.split("\n")
|
||||
.filter(Boolean)
|
||||
.map((pattern) => (
|
||||
<span key={pattern} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
|
||||
{pattern.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{formValues.excludeIfPresentText && (
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Exclude if present</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{formValues.excludeIfPresentText
|
||||
.split("\n")
|
||||
.filter(Boolean)
|
||||
.map((filename) => (
|
||||
<span key={filename} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
|
||||
{filename.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">One file system</p>
|
||||
<p className="font-medium">{formValues.oneFileSystem ? "Enabled" : "Disabled"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-muted-foreground">Retention</p>
|
||||
<p className="font-medium">
|
||||
{Object.entries(formValues)
|
||||
.filter(([key, value]) => key.startsWith("keep") && Boolean(value))
|
||||
.map(([key, value]) => {
|
||||
const label = key.replace("keep", "").toLowerCase();
|
||||
return `${value.toString()} ${label}`;
|
||||
})
|
||||
.join(", ") || "-"}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { type } from "arktype";
|
||||
import { deepClean } from "~/utils/object";
|
||||
|
||||
export const internalFormSchema = type({
|
||||
name: "1 <= string <= 128",
|
||||
repositoryId: "string",
|
||||
excludePatternsText: "string?",
|
||||
excludeIfPresentText: "string?",
|
||||
includePatternsText: "string?",
|
||||
includePatterns: "string[]?",
|
||||
frequency: "string",
|
||||
dailyTime: "string?",
|
||||
weeklyDay: "string?",
|
||||
monthlyDays: "string[]?",
|
||||
cronExpression: "string?",
|
||||
keepLast: "number?",
|
||||
keepHourly: "number?",
|
||||
keepDaily: "number?",
|
||||
keepWeekly: "number?",
|
||||
keepMonthly: "number?",
|
||||
keepYearly: "number?",
|
||||
oneFileSystem: "boolean?",
|
||||
});
|
||||
|
||||
export const cleanSchema = type.pipe((d) => internalFormSchema(deepClean(d)));
|
||||
|
||||
export const weeklyDays = [
|
||||
{ label: "Monday", value: "1" },
|
||||
{ label: "Tuesday", value: "2" },
|
||||
{ label: "Wednesday", value: "3" },
|
||||
{ label: "Thursday", value: "4" },
|
||||
{ label: "Friday", value: "5" },
|
||||
{ label: "Saturday", value: "6" },
|
||||
{ label: "Sunday", value: "0" },
|
||||
];
|
||||
|
||||
export type InternalFormValues = typeof internalFormSchema.infer;
|
||||
|
||||
export type BackupScheduleFormValues = Omit<
|
||||
InternalFormValues,
|
||||
"excludePatternsText" | "excludeIfPresentText" | "includePatternsText"
|
||||
> & {
|
||||
excludePatterns?: string[];
|
||||
excludeIfPresent?: string[];
|
||||
};
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import type { BackupSchedule } from "~/client/lib/types";
|
||||
import { cronToFormValues } from "../../lib/cron-utils";
|
||||
import type { InternalFormValues } from "./types";
|
||||
|
||||
export const backupScheduleToFormValues = (
|
||||
schedule?: BackupSchedule,
|
||||
): InternalFormValues | undefined => {
|
||||
if (!schedule) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const cronValues = cronToFormValues(schedule.cronExpression ?? "0 * * * *");
|
||||
|
||||
const patterns = schedule.includePatterns || [];
|
||||
const isGlobPattern = (p: string) => /[*?[\]]/.test(p);
|
||||
const fileBrowserPaths = patterns.filter((p) => !isGlobPattern(p));
|
||||
const textPatterns = patterns.filter(isGlobPattern);
|
||||
|
||||
return {
|
||||
name: schedule.name,
|
||||
repositoryId: schedule.repositoryId,
|
||||
includePatterns: fileBrowserPaths.length > 0 ? fileBrowserPaths : undefined,
|
||||
includePatternsText: textPatterns.length > 0 ? textPatterns.join("\n") : undefined,
|
||||
excludePatternsText: schedule.excludePatterns?.join("\n") || undefined,
|
||||
excludeIfPresentText: schedule.excludeIfPresent?.join("\n") || undefined,
|
||||
oneFileSystem: schedule.oneFileSystem ?? false,
|
||||
...cronValues,
|
||||
...schedule.retentionPolicy,
|
||||
};
|
||||
};
|
||||
|
|
@ -8,7 +8,7 @@ import { formatDateTime } from "~/client/lib/datetime";
|
|||
import { parseError } from "~/client/lib/errors";
|
||||
import { getRepository, getSnapshotDetails } from "~/client/api-client";
|
||||
import type { Route } from "./+types/snapshot-details";
|
||||
import { Suspense } from "react";
|
||||
import { Suspense, useState } from "react";
|
||||
import { Database } from "lucide-react";
|
||||
|
||||
export const handle = {
|
||||
|
|
@ -52,6 +52,8 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
|
|||
snapshotId: string;
|
||||
}>();
|
||||
|
||||
const [showAllPaths, setShowAllPaths] = useState(false);
|
||||
|
||||
const { data } = useQuery({
|
||||
...listSnapshotFilesOptions({
|
||||
path: { id: id ?? "", snapshotId: snapshotId ?? "" },
|
||||
|
|
@ -178,11 +180,20 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
|
|||
<div className="col-span-2">
|
||||
<span className="text-muted-foreground">Paths:</span>
|
||||
<div className="space-y-1 mt-1">
|
||||
{data.snapshot.paths.map((path) => (
|
||||
{data.snapshot.paths.slice(0, showAllPaths ? undefined : 20).map((path) => (
|
||||
<p key={path} className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">
|
||||
{path}
|
||||
</p>
|
||||
))}
|
||||
{data.snapshot.paths.length > 20 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAllPaths(!showAllPaths)}
|
||||
className="text-xs text-primary hover:underline mt-1"
|
||||
>
|
||||
{showAllPaths ? "Show less" : `+ ${data.snapshot.paths.length - 20} more`}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue