@futo-org/backups-orchestrator-ui 0.1.71

package/dist/components/integrations/immich/ImmichConfigureBackup.svelte

@@ -0,0 +1,402 @@
+<script lang="ts">
+  import Suspense from "../../util/Suspense.svelte";
+  import * as sdk from "../../../fetch-client";
+  import {
+    useConfigureImmichIntegration,
+    useIntegrations,
+  } from "../../../services/integrations.service";
+  import { useRepositories } from "../../../services/repository.service";
+  import { useSchedules } from "../../../services/schedule.service";
+  import {
+    Button,
+    Checkbox,
+    Field,
+    FormModal,
+    Heading,
+    HStack,
+    Input,
+    Select,
+    Stack,
+    Switch,
+    Text,
+  } from "@immich/ui";
+  import validateCron from "cron-validate";
+  import cronstrue from "cronstrue";
+  import { SvelteSet } from "svelte/reactivity";
+
+  type Props = {
+    onFinish?: () => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    backendId?: string;
+  };
+
+  let { onFinish, onCancel, onClose }: Props = $props();
+
+  const query = useIntegrations();
+  const schedulesQuery = useSchedules();
+  const repositoriesQuery = useRepositories();
+
+  type RetentionChoice = {
+    key: string;
+    label: string;
+    policy: sdk.RetentionPolicyDto | null;
+  };
+
+  const retentionChoices: RetentionChoice[] = [
+    { key: "15d", label: "After 15 days", policy: { keepWithin: "15d" } },
+    { key: "30d", label: "After 30 days", policy: { keepWithin: "30d" } },
+    { key: "60d", label: "After 60 days", policy: { keepWithin: "60d" } },
+    { key: "90d", label: "After 90 days", policy: { keepWithin: "90d" } },
+    { key: "2", label: "Keep latest two backups", policy: { keepLast: 2 } },
+    { key: "never", label: "Never (keep all backups)", policy: null },
+  ];
+  const defaultRetentionKey = "60d";
+
+  let name = $state("Immich");
+  let worm = $state(false);
+  let backupConfiguration = $state(true);
+  let librariesMode = $state<"all" | "none" | "some">("all");
+  let retentionKey = $state<string>(defaultRetentionKey);
+
+  let cron = $state("0 3 * * *");
+  let scheduleMode = $state<"daily" | "custom">("daily");
+  let scheduleHour = $state(3);
+  let scheduleMinute = $state(0);
+
+  const selectedFolders = new SvelteSet<string>();
+  const selectedLibraries = new SvelteSet<string>();
+
+  type FolderItem = { label: string; description?: string; folders: string[] };
+
+  let populated = false;
+
+  $effect(() => {
+    if (populated || !query.data?.immichState) {
+      return;
+    }
+    populated = true;
+
+    const integration = query.data.immichIntegration;
+    if (integration) {
+      const config = integration.configuration;
+      backupConfiguration = config.backupConfiguration;
+
+      const repository = repositoriesQuery.data?.find(
+        (entry) => entry.id === integration.id,
+      );
+
+      const policy = repository?.configuration?.retentionPolicy ?? null;
+      const matched = retentionChoices.find(
+        (choice) => JSON.stringify(choice.policy) === JSON.stringify(policy),
+      );
+      retentionKey = matched?.key ?? defaultRetentionKey;
+
+      if (config.libraries === "all") {
+        librariesMode = "all";
+      } else if (config.libraries.length === 0) {
+        librariesMode = "none";
+      } else {
+        librariesMode = "some";
+
+        for (const id of config.libraries) {
+          selectedLibraries.add(id);
+        }
+      }
+
+      for (const folder of config.dataFolders) {
+        selectedFolders.add(folder);
+      }
+
+      const schedule = schedulesQuery.data?.find(
+        (schedule) => schedule.id === integration.scheduleId,
+      );
+
+      if (schedule) {
+        cron = schedule.cron;
+
+        const match = /(\d+) (\d+) \* \* \*/.exec(cron);
+        if (match) {
+          scheduleMode = "daily";
+          scheduleHour = parseInt(match[2]);
+          scheduleMinute = parseInt(match[1]);
+        } else {
+          scheduleMode = "custom";
+        }
+      }
+    } else {
+      for (const folder of query.data.immichState.dataFolders) {
+        selectedFolders.add(folder);
+      }
+    }
+  });
+
+  const effectiveCron = $derived(
+    scheduleMode === "daily" ? `${scheduleMinute} ${scheduleHour} * * *` : cron,
+  );
+
+  const mutation = useConfigureImmichIntegration();
+
+  const onSubmit = () => {
+    selectedFolders.add("backups");
+
+    mutation.mutate(
+      {
+        name,
+        worm,
+        cron: effectiveCron,
+        dataFolders: [...selectedFolders],
+        backupConfiguration,
+        libraries:
+          librariesMode === "all"
+            ? "all"
+            : librariesMode === "none"
+              ? []
+              : [...selectedLibraries],
+        retentionPolicy: worm
+          ? null
+          : (retentionChoices.find((choice) => choice.key === retentionKey)
+              ?.policy ?? null),
+      },
+      {
+        onSuccess: () => {
+          onFinish?.();
+          onClose?.();
+        },
+      },
+    );
+  };
+
+  function applicableFolders(item: FolderItem, available: string[]): string[] {
+    return item.folders.filter((folder) => available.includes(folder));
+  }
+
+  function isItemChecked(item: FolderItem, available: string[]): boolean {
+    const folders = applicableFolders(item, available);
+    return (
+      folders.length > 0 &&
+      folders.every((folder) => selectedFolders.has(folder))
+    );
+  }
+
+  function toggleItem(item: FolderItem, available: string[]) {
+    const folders = applicableFolders(item, available);
+    const allOn = folders.every((folder) => selectedFolders.has(folder));
+    for (const folder of folders) {
+      if (allOn) {
+        selectedFolders.delete(folder);
+      } else {
+        selectedFolders.add(folder);
+      }
+    }
+  }
+
+  function toggleLibrary(id: string) {
+    if (selectedLibraries.has(id)) {
+      selectedLibraries.delete(id);
+    } else {
+      selectedLibraries.add(id);
+    }
+  }
+</script>
+
+<FormModal
+  title="Backup settings"
+  size="large"
+  disabled={!validateCron(effectiveCron) ||
+    name.length === 0 ||
+    mutation.isPending}
+  onClose={() => {
+    onCancel?.();
+    onClose?.();
+  }}
+  {onSubmit}
+>
+  <Stack gap={6}>
+    <Field label="Name">
+      <Input bind:value={name} />
+    </Field>
+
+    <Suspense {query}>
+      {#snippet children({ immichState: immich })}
+        <Stack gap={2}>
+          <Heading size="tiny">What to back up</Heading>
+
+          {#each [{ label: "Photos and videos", description: "Your media uploaded directly to Immich.", folders: ["upload", "profile", "library"], recommended: true }, { label: "Database backups", description: "Albums, faces, and metadata. You'll need this to restore.", folders: ["backups"], required: true }, { label: "Thumbnails and previews", description: "Generated photo previews, can be recreated later.", folders: ["thumbs"], regenerate: true }, { label: "Encoded videos", description: "Generated video previews, can be recreated later.", folders: ["encoded-video"], regenerate: true }] as item (item.label)}
+            <label class="select-none">
+              <Stack direction="row">
+                <Checkbox
+                  checked={item.required ||
+                    isItemChecked(item, immich!.dataFolders)}
+                  onCheckedChange={() => toggleItem(item, immich!.dataFolders)}
+                  disabled={item.required}
+                />
+                <Stack gap={0}>
+                  <Text>{item.label}</Text>
+                  {#if item.description}
+                    <Text size="small" color="secondary"
+                      >{item.description}</Text
+                    >
+                  {/if}
+                  {#if item.recommended && !isItemChecked(item, immich!.dataFolders)}
+                    <Text size="small" color="danger"
+                      >It is highly recommended you back this up!</Text
+                    >
+                  {/if}
+                  {#if item.regenerate && !isItemChecked(item, immich!.dataFolders)}
+                    <Text size="small" color="warning"
+                      >When restoring, you will see broken previews, use the
+                      admin panel to regenerate them.</Text
+                    >
+                  {/if}
+                </Stack>
+              </Stack>
+            </label>
+          {/each}
+
+          <label class="select-none">
+            <Stack direction="row">
+              <Checkbox bind:checked={backupConfiguration} />
+              <Stack gap={0}>
+                <Text>Backup configuration</Text>
+                <Text size="small" color="secondary"
+                  >Saves these settings too.</Text
+                >
+                {#if !backupConfiguration}
+                  <Text size="small" color="warning"
+                    >You will need to reconfigure backups from scratch after
+                    restoring.</Text
+                  >
+                {/if}
+              </Stack>
+            </Stack>
+          </label>
+        </Stack>
+
+        <Stack gap={2}>
+          <Stack gap={0}>
+            <Heading size="tiny">External Libraries</Heading>
+            <Text size="small" color="secondary">
+              External libraries stored outside of Immich can also be included
+              in your backup. <br /> By default, all existing and future external
+              libraries will be included in your backup.
+            </Text>
+          </Stack>
+
+          <HStack fullWidth>
+            {#each [{ id: "all" as const, label: "All" }, { id: "none" as const, label: "None" }, { id: "some" as const, label: "Pick" }] as option (option.id)}
+              <Button
+                fullWidth
+                size="small"
+                variant={librariesMode === option.id ? "filled" : "outline"}
+                color={librariesMode === option.id ? "primary" : "secondary"}
+                onclick={() => (librariesMode = option.id)}
+              >
+                {option.label}
+              </Button>
+            {/each}
+          </HStack>
+
+          {#if librariesMode === "all"}
+            {#if immich!.libraries.length !== 0}
+              <Text size="small" color="secondary"
+                >Libraries included: {immich!.libraries
+                  .map((item) => item.name)
+                  .join(", ")}</Text
+              >
+            {/if}
+          {:else if librariesMode === "some"}
+            {#if immich!.libraries.length === 0}
+              <Text size="small" color="secondary"
+                >No external libraries found.</Text
+              >
+            {:else}
+              <Stack gap={1}>
+                {#each immich!.libraries as library (library.id)}
+                  <label class="flex select-none items-center gap-2">
+                    <Checkbox
+                      checked={selectedLibraries.has(library.id)}
+                      onCheckedChange={() => toggleLibrary(library.id)}
+                    />
+                    <Text>{library.name}</Text>
+                  </label>
+                {/each}
+              </Stack>
+            {/if}
+          {/if}
+        </Stack>
+
+        <Stack gap={2}>
+          <Heading size="tiny">Schedule</Heading>
+
+          <HStack fullWidth>
+            {#each [{ id: "daily" as const, label: "Every day" }, { id: "custom" as const, label: "Custom cron expression" }] as option (option.id)}
+              <Button
+                fullWidth
+                size="small"
+                variant={scheduleMode === option.id ? "filled" : "outline"}
+                color={scheduleMode === option.id ? "primary" : "secondary"}
+                onclick={() => (scheduleMode = option.id)}
+              >
+                {option.label}
+              </Button>
+            {/each}
+          </HStack>
+
+          {#if scheduleMode === "daily"}
+            <Field label="Time">
+              <Input
+                type="time"
+                value={`${String(scheduleHour).padStart(2, "0")}:${String(scheduleMinute).padStart(2, "0")}`}
+                oninput={(event) => {
+                  const [hours, minutes] = (
+                    event.currentTarget as HTMLInputElement
+                  ).value.split(":");
+                  scheduleHour = Number(hours);
+                  scheduleMinute = Number(minutes);
+                }}
+              />
+            </Field>
+          {:else}
+            <Field label="Cron expression">
+              <Input bind:value={cron} placeholder="0 3 * * *" />
+            </Field>
+
+            <Text size="small" color="secondary"
+              >Your backups will run <span class="lowercase"
+                >{cronstrue.toString(cron, {
+                  verbose: true,
+                })}</span
+              ></Text
+            >
+          {/if}
+        </Stack>
+      {/snippet}
+    </Suspense>
+
+    <Stack gap={2}>
+      <Heading size="tiny">Advanced</Heading>
+      <Field
+        label="Write-only"
+        description="Once written, files can't be removed."
+      >
+        <Switch bind:checked={worm} />
+      </Field>
+
+      <Field
+        label="Delete old backups"
+        description="Older snapshots will be pruned automatically."
+        disabled={worm}
+      >
+        <Select
+          options={retentionChoices.map(({ key, label }) => ({
+            value: key,
+            label,
+          }))}
+          value={worm ? "never" : retentionKey}
+          onChange={(value) => (retentionKey = value)}
+        />
+      </Field>
+    </Stack>
+  </Stack>
+</FormModal>

package/dist/components/integrations/immich/ImmichConfigureBackup.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    onFinish?: () => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    backendId?: string;
+};
+declare const ImmichConfigureBackup: import("svelte").Component<Props, {}, "">;
+type ImmichConfigureBackup = ReturnType<typeof ImmichConfigureBackup>;
+export default ImmichConfigureBackup;

package/dist/components/integrations/immich/ImmichConfirmDefaultBackup.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { useConfigureImmichDefaults } from "../../../services/integrations.service";
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import {
+    mdiClockOutline,
+    mdiFolderMultipleOutline,
+    mdiImageMultipleOutline,
+  } from "@mdi/js";
+
+  type Props = {
+    onCustomize: () => void;
+    onConfirm: () => void;
+    onCancel: () => void;
+  };
+
+  const { onCustomize, onConfirm, onCancel }: Props = $props();
+
+  const mutation = useConfigureImmichDefaults();
+
+  const onCreate = () =>
+    mutation.mutate(undefined, { onSuccess: () => onConfirm() });
+</script>
+
+<Modal title="Ready to back up Immich" size="small" onClose={onCancel}>
+  <ModalBody>
+    <Stack gap={3}>
+      <Text>
+        We'll create a backup with sensible defaults. You can change anything
+        later from the Immich backups page.
+      </Text>
+
+      <Stack>
+        <HStack>
+          <Icon
+            icon={mdiImageMultipleOutline}
+            class="shrink-0 place-self-start mt-1"
+          />
+          <Text>Photos, videos, database, and configuration</Text>
+        </HStack>
+        <HStack>
+          <Icon
+            icon={mdiFolderMultipleOutline}
+            class="shrink-0 place-self-start mt-1"
+          />
+          <Text>All external libraries</Text>
+        </HStack>
+        <HStack>
+          <Icon
+            icon={mdiClockOutline}
+            class="shrink-0 place-self-start mt-1"
+          />
+          <Text>Runs every day at 3:00 AM</Text>
+        </HStack>
+      </Stack>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack gap={2}>
+      <Button
+        variant="ghost"
+        onclick={onCustomize}
+        disabled={mutation.isPending}
+      >
+        Customize
+      </Button>
+      <Button onclick={onCreate} loading={mutation.isPending}>
+        Create backup
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/integrations/immich/ImmichConfirmDefaultBackup.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    onCustomize: () => void;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+declare const ImmichConfirmDefaultBackup: import("svelte").Component<Props, {}, "">;
+type ImmichConfirmDefaultBackup = ReturnType<typeof ImmichConfirmDefaultBackup>;
+export default ImmichConfirmDefaultBackup;

package/dist/components/integrations/immich/ImmichManageBackup.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import BackendsList from "../../backends/BackendsList.svelte";
+  import RepositoryRunHistory from "../../backups/run-history/RepositoryRunHistory.svelte";
+  import RepositorySnapshotsList from "../../backups/snapshots-list/RepositorySnapshotsList.svelte";
+  import PageLayout from "../../ui/PageLayout.svelte";
+  import OnEvents from "../../util/OnEvents.svelte";
+  import { getBackupPageActions } from "../../../services/immich.integration.service";
+  import {
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../../services/integrations.service";
+  import {
+    useRepositories,
+    useRepositoryEventHandler,
+  } from "../../../services/repository.service";
+  import {
+    useScheduleEventHandler,
+    useSchedules,
+  } from "../../../services/schedule.service";
+  import { Container, Stack } from "@immich/ui";
+  import ImmichManageBackupOverview from "./ImmichManageBackupOverview.svelte";
+
+  const schedules = useSchedules();
+  const repositories = useRepositories();
+  const integrations = useIntegrations();
+
+  const { onScheduleCreate, onScheduleUpdate, onScheduleDelete } =
+    useScheduleEventHandler();
+  const { onRepositoryCreate, onRepositoryUpdate, onRepositoryDelete } =
+    useRepositoryEventHandler();
+  const { onIntegrationUpdate } = useIntegrationEventHandler();
+
+  const schedule = $derived(
+    integrations.data?.immichIntegration
+      ? schedules.data?.find(
+          (schedule) =>
+            schedule.id === integrations.data.immichIntegration!.scheduleId,
+        )
+      : undefined,
+  );
+
+  const repository = $derived(
+    integrations.data?.immichIntegration
+      ? repositories.data?.find(
+          (repository) =>
+            repository.id === integrations.data.immichIntegration!.id,
+        )
+      : undefined,
+  );
+
+  const { ViewRecoveryKey, Configure, BackUpNow } = $derived(
+    getBackupPageActions(repository?.id),
+  );
+</script>
+
+<OnEvents
+  {onScheduleCreate}
+  {onScheduleUpdate}
+  {onScheduleDelete}
+  {onRepositoryCreate}
+  {onRepositoryUpdate}
+  {onRepositoryDelete}
+  {onIntegrationUpdate}
+/>
+
+<PageLayout title="Backups" actions={[ViewRecoveryKey, Configure, BackUpNow]}>
+  <Container size="large" center>
+    {#if repository && schedule}
+      <Stack class="mt-4" gap={8}>
+        <ImmichManageBackupOverview {repository} {schedule} />
+        <BackendsList {repository} />
+        <RepositoryRunHistory {repository} />
+        <RepositorySnapshotsList {repository} />
+      </Stack>
+    {/if}
+  </Container>
+</PageLayout>

package/dist/components/integrations/immich/ImmichManageBackup.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ImmichManageBackup: import("svelte").Component<Record<string, never>, {}, "">;
+type ImmichManageBackup = ReturnType<typeof ImmichManageBackup>;
+export default ImmichManageBackup;

package/dist/components/integrations/immich/ImmichManageBackupOverview.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import StackList from "../../ui/StackList.svelte";
+  import StackListItem from "../../ui/StackListItem.svelte";
+  import RelativeTime from "../../util/RelativeTime.svelte";
+  import type { LocalRepositoryDto, ScheduleDto } from "../../../fetch-client";
+  import {
+    handlePauseSchedule,
+    handleResumeSchedule,
+  } from "../../../services/schedule.service";
+  import {
+    FormatBytes,
+    Heading,
+    HStack,
+    Icon,
+    IconButton,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import {
+    mdiAlert,
+    mdiArchiveOutline,
+    mdiCheck,
+    mdiInformation,
+    mdiPauseCircleOutline,
+    mdiPlayCircleOutline,
+  } from "@mdi/js";
+  import cronstrue from "cronstrue";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+    schedule: ScheduleDto;
+  };
+
+  const { repository, schedule }: Props = $props();
+
+  function togglePause() {
+    if (schedule!.paused) {
+      handleResumeSchedule(schedule!.id, "Immich");
+    } else {
+      handlePauseSchedule(schedule!.id, "Immich");
+    }
+  }
+</script>
+
+<StackList>
+  <StackListItem>
+    {#snippet icon()}
+      <Icon icon={mdiArchiveOutline} size="32px" />
+    {/snippet}
+
+    <HStack gap={4}>
+      <Stack gap={0}>
+        <Heading size="tiny">Your library</Heading>
+        <Text>
+          <FormatBytes bytes={repository.metrics.sizeBytes} /> &middot;
+          <span class="lowercase"
+            >{cronstrue.toString(schedule.cron, {
+              verbose: true,
+            })}</span
+          >
+        </Text>
+      </Stack>
+    </HStack>
+
+    {#snippet trailing()}
+      <IconButton
+        variant="ghost"
+        onclick={togglePause}
+        aria-label={schedule.paused ? "Resume backups" : "Pause backups"}
+        icon={schedule.paused ? mdiPlayCircleOutline : mdiPauseCircleOutline}
+      />
+    {/snippet}
+  </StackListItem>
+
+  {#if repository.metrics.lastBackup}
+    {#if repository.metrics.lastBackup !== repository.metrics.lastSuccessfulBackup}
+      <StackListItem class="bg-danger-100">
+        <HStack>
+          <Icon icon={mdiAlert} /> Last backup failed <RelativeTime
+            time={repository.metrics.lastBackup}
+          />
+        </HStack>
+      </StackListItem>
+    {:else}
+      <StackListItem class="bg-success-50">
+        <HStack>
+          <Icon icon={mdiCheck} /> Last backup successful <RelativeTime
+            time={repository.metrics.lastBackup}
+          />
+        </HStack>
+      </StackListItem>
+    {/if}
+  {:else}
+    <StackListItem class="bg-warning-50">
+      <HStack>
+        <Icon icon={mdiInformation} /> Backup is yet to run.
+      </HStack>
+    </StackListItem>
+  {/if}
+</StackList>

package/dist/components/integrations/immich/ImmichManageBackupOverview.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LocalRepositoryDto, ScheduleDto } from "../../../fetch-client";
+type Props = {
+    repository: LocalRepositoryDto;
+    schedule: ScheduleDto;
+};
+declare const ImmichManageBackupOverview: import("svelte").Component<Props, {}, "">;
+type ImmichManageBackupOverview = ReturnType<typeof ImmichManageBackupOverview>;
+export default ImmichManageBackupOverview;