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

feat(frontend): rclone repositories config

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-11-11 21:31:10 +01:00
parent 8f9873148a
commit 36b0282d18
10 changed files with 265 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/client/app/api-client/@tanstack/react-query.gen.ts
View File

@@ -29,6 +29,7 @@ import {
listSnapshotFiles,
restoreSnapshot,
doctorRepository,
listRcloneRemotes,
listBackupSchedules,
createBackupSchedule,
deleteBackupSchedule,
@@ -84,6 +85,7 @@ import type {
RestoreSnapshotResponse,
DoctorRepositoryData,
DoctorRepositoryResponse,
ListRcloneRemotesData,
ListBackupSchedulesData,
CreateBackupScheduleData,
CreateBackupScheduleResponse,
@@ -918,6 +920,27 @@ export const doctorRepositoryMutation = (
return mutationOptions;
};
export const listRcloneRemotesQueryKey = (options?: Options<ListRcloneRemotesData>) =>
createQueryKey("listRcloneRemotes", options);
/**
* List all configured rclone remotes on the host system
*/
export const listRcloneRemotesOptions = (options?: Options<ListRcloneRemotesData>) => {
return queryOptions({
queryFn: async ({ queryKey, signal }) => {
const { data } = await listRcloneRemotes({
...options,
...queryKey[0],
signal,
throwOnError: true,
});
return data;
},
queryKey: listRcloneRemotesQueryKey(options),
});
};
export const listBackupSchedulesQueryKey = (options?: Options<ListBackupSchedulesData>) =>
createQueryKey("listBackupSchedules", options);

14
apps/client/app/api-client/sdk.gen.ts
View File

@@ -60,6 +60,8 @@ import type {
RestoreSnapshotResponses,
DoctorRepositoryData,
DoctorRepositoryResponses,
ListRcloneRemotesData,
ListRcloneRemotesResponses,
ListBackupSchedulesData,
ListBackupSchedulesResponses,
CreateBackupScheduleData,
@@ -443,6 +445,18 @@ export const doctorRepository = <ThrowOnError extends boolean = false>(
});
};
/**
* List all configured rclone remotes on the host system
*/
export const listRcloneRemotes = <ThrowOnError extends boolean = false>(
options?: Options<ListRcloneRemotesData, ThrowOnError>,
) => {
return (options?.client ?? _heyApiClient).get<ListRcloneRemotesResponses, unknown, ThrowOnError>({
url: "/api/v1/repositories/rclone-remotes",
...options,
});
};
/**
* List all backup schedules
*/

59
apps/client/app/api-client/types.gen.ts
View File

@@ -754,6 +754,11 @@ export type ListRepositoriesResponses = {
| {
backend: "local";
name: string;
}
| {
backend: "rclone";
path: string;
remote: string;
};
createdAt: number;
id: string;
@@ -761,7 +766,7 @@ export type ListRepositoriesResponses = {
lastError: string | null;
name: string;
status: "error" | "healthy" | "unknown" | null;
type: "azure" | "gcs" | "local" | "s3";
type: "azure" | "gcs" | "local" | "rclone" | "s3";
updatedAt: number;
}>;
};
@@ -794,6 +799,11 @@ export type CreateRepositoryData = {
| {
backend: "local";
name: string;
}
| {
backend: "rclone";
path: string;
remote: string;
};
name: string;
compressionMode?: "auto" | "better" | "fastest" | "max" | "off";
@@ -877,6 +887,11 @@ export type GetRepositoryResponses = {
| {
backend: "local";
name: string;
}
| {
backend: "rclone";
path: string;
remote: string;
};
createdAt: number;
id: string;
@@ -884,7 +899,7 @@ export type GetRepositoryResponses = {
lastError: string | null;
name: string;
status: "error" | "healthy" | "unknown" | null;
type: "azure" | "gcs" | "local" | "s3";
type: "azure" | "gcs" | "local" | "rclone" | "s3";
updatedAt: number;
};
};
@@ -1037,6 +1052,25 @@ export type DoctorRepositoryResponses = {
export type DoctorRepositoryResponse = DoctorRepositoryResponses[keyof DoctorRepositoryResponses];
export type ListRcloneRemotesData = {
body?: never;
path?: never;
query?: never;
url: "/api/v1/repositories/rclone-remotes";
};
export type ListRcloneRemotesResponses = {
/**
* List of rclone remotes
*/
200: Array<{
name: string;
type: string;
}>;
};
export type ListRcloneRemotesResponse = ListRcloneRemotesResponses[keyof ListRcloneRemotesResponses];
export type ListBackupSchedulesData = {
body?: never;
path?: never;
@@ -1085,6 +1119,11 @@ export type ListBackupSchedulesResponses = {
| {
backend: "local";
name: string;
}
| {
backend: "rclone";
path: string;
remote: string;
};
createdAt: number;
id: string;
@@ -1092,7 +1131,7 @@ export type ListBackupSchedulesResponses = {
lastError: string | null;
name: string;
status: "error" | "healthy" | "unknown" | null;
type: "azure" | "gcs" | "local" | "s3";
type: "azure" | "gcs" | "local" | "rclone" | "s3";
updatedAt: number;
};
repositoryId: string;
@@ -1284,6 +1323,11 @@ export type GetBackupScheduleResponses = {
| {
backend: "local";
name: string;
}
| {
backend: "rclone";
path: string;
remote: string;
};
createdAt: number;
id: string;
@@ -1291,7 +1335,7 @@ export type GetBackupScheduleResponses = {
lastError: string | null;
name: string;
status: "error" | "healthy" | "unknown" | null;
type: "azure" | "gcs" | "local" | "s3";
type: "azure" | "gcs" | "local" | "rclone" | "s3";
updatedAt: number;
};
repositoryId: string;
@@ -1464,6 +1508,11 @@ export type GetBackupScheduleForVolumeResponses = {
| {
backend: "local";
name: string;
}
| {
backend: "rclone";
path: string;
remote: string;
};
createdAt: number;
id: string;
@@ -1471,7 +1520,7 @@ export type GetBackupScheduleForVolumeResponses = {
lastError: string | null;
name: string;
status: "error" | "healthy" | "unknown" | null;
type: "azure" | "gcs" | "local" | "s3";
type: "azure" | "gcs" | "local" | "rclone" | "s3";
updatedAt: number;
};
repositoryId: string;

79
apps/client/app/components/create-repository-form.tsx
View File

@@ -9,6 +9,10 @@ import { Button } from "./ui/button";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
import { Input } from "./ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { listRcloneRemotesOptions } from "~/api-client/@tanstack/react-query.gen";
import { useQuery } from "@tanstack/react-query";
import { Alert, AlertDescription } from "./ui/alert";
import { ExternalLink } from "lucide-react";
export const formSchema = type({
name: "2<=string<=32",
@@ -32,6 +36,7 @@ const defaultValuesForType = {
s3: { backend: "s3" as const, compressionMode: "auto" as const },
gcs: { backend: "gcs" as const, compressionMode: "auto" as const },
azure: { backend: "azure" as const, compressionMode: "auto" as const },
rclone: { backend: "rclone" as const, compressionMode: "auto" as const },
};
export const CreateRepositoryForm = ({
@@ -56,6 +61,10 @@ export const CreateRepositoryForm = ({
const watchedBackend = watch("backend");
const watchedName = watch("name");
const { data: rcloneRemotes, isLoading: isLoadingRemotes } = useQuery({
...listRcloneRemotesOptions(),
});
useEffect(() => {
if (watchedBackend && watchedBackend in defaultValuesForType) {
form.reset({ name: watchedName, ...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType] });
@@ -104,6 +113,7 @@ export const CreateRepositoryForm = ({
<SelectItem value="s3">S3</SelectItem>
<SelectItem value="gcs">Google Cloud Storage</SelectItem>
<SelectItem value="azure">Azure Blob Storage</SelectItem>
<SelectItem value="rclone">rclone (40+ cloud providers)</SelectItem>
</SelectContent>
</Select>
<FormDescription>Choose the storage backend for this repository.</FormDescription>
@@ -307,6 +317,75 @@ export const CreateRepositoryForm = ({
</>
)}
{watchedBackend === "rclone" &&
(!rcloneRemotes || rcloneRemotes.length === 0 ? (
<Alert>
<AlertDescription className="space-y-2">
<p className="font-medium">No rclone remotes configured</p>
<p className="text-sm text-muted-foreground">
To use rclone, you need to configure remotes on your host system
</p>
<a
href="https://rclone.org/docs/"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-strong-accent inline-flex items-center gap-1"
>
View rclone documentation
<ExternalLink className="w-3 h-3" />
</a>
</AlertDescription>
</Alert>
) : (
<>
<FormField
control={form.control}
name="remote"
render={({ field }) => (
<FormItem>
<FormLabel>Remote</FormLabel>
<Select onValueChange={(v) => field.onChange(v)} defaultValue={field.value} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select an rclone remote" />
</SelectTrigger>
</FormControl>
<SelectContent>
{isLoadingRemotes ? (
<SelectItem value="loading" disabled>
Loading remotes...
</SelectItem>
) : (
rcloneRemotes.map((remote: { name: string; type: string }) => (
<SelectItem key={remote.name} value={remote.name}>
{remote.name} ({remote.type})
</SelectItem>
))
)}
</SelectContent>
</Select>
<FormDescription>Select the rclone remote configured on your host system.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="path"
render={({ field }) => (
<FormItem>
<FormLabel>Path</FormLabel>
<FormControl>
<Input placeholder="backups/ironmount" {...field} />
</FormControl>
<FormDescription>Path within the remote where backups will be stored.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</>
))}
{mode === "update" && (
<Button type="submit" className="w-full" loading={loading}>
Save Changes

2
apps/client/app/modules/backups/components/snapshot-file-browser.tsx
View File

@@ -41,7 +41,7 @@ export const SnapshotFileBrowser = (props: Props) => {
const [showRestoreDialog, setShowRestoreDialog] = useState(false);
const [deleteExtraFiles, setDeleteExtraFiles] = useState(false);
const volumeBasePath = snapshot.paths[0]?.match(/^(.*?_data)(\/|$)/)?.[1] || "";
const volumeBasePath = snapshot.paths[0]?.match(/^(.*?_data)(\/|$)/)?.[1] || "/";
const { data: filesData, isLoading: filesLoading } = useQuery({
...listSnapshotFilesOptions({