@futo-org/backups-orchestrator-ui 0.1.71

package/dist/components/backups/dialogs/ImportRepositoryModal.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { type LocalRepositoryDto } from "../../../fetch-client";
+  import {
+    handleCheckImportRepository,
+    useImportRepository,
+  } from "../../../services/repository.service";
+  import { FormModal, LoadingSpinner, modalManager, Text } from "@immich/ui";
+  import { onMount } from "svelte";
+  import ConfigureRepositoryModal from "./ConfigureRepositoryModal.svelte";
+
+  type Props = {
+    onClose: () => void;
+    repository: LocalRepositoryDto;
+  };
+
+  let { onClose, repository }: Props = $props();
+  let readable: boolean | undefined = $state();
+
+  onMount(async () => {
+    const check = await handleCheckImportRepository(
+      repository.id,
+      repository.backends!.primary.id,
+    );
+
+    readable = check.readable;
+  });
+
+  const mutation = useImportRepository();
+
+  const onSubmit = () =>
+    mutation.mutate(
+      { id: repository.id, backendId: repository.backends!.primary.id },
+      {
+        onSuccess: ({ repository: created }) => {
+          onClose();
+
+          modalManager.open(ConfigureRepositoryModal, {
+            repository: {
+              ...created,
+              configuration: created.configuration!,
+            },
+          });
+        },
+      },
+    );
+</script>
+
+<FormModal
+  title={`Import ${repository.name}`}
+  submitText="Import"
+  disabled={readable !== true || mutation.isPending}
+  {onSubmit}
+  {onClose}
+>
+  {#if readable === undefined}
+    <LoadingSpinner />
+  {:else if readable}
+    <Text>Repository is readable and accessible!</Text>
+  {:else}
+    <Text>Can't read repository.</Text>
+  {/if}
+</FormModal>

package/dist/components/backups/dialogs/ImportRepositoryModal.svelte.d.ts

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

package/dist/components/backups/dialogs/RestoreSnapshotModal.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import PathListField from "../../ui/PathListField.svelte";
+  import PathPickerField from "../../ui/PathPickerField.svelte";
+  import type { RepositorySnapshotRestoreRequestDto } from "../../../fetch-client";
+  import {
+    handleGetSnapshotListing,
+    useRestoreSnapshot,
+  } from "../../../services/snapshot.service";
+  import {
+    FormModal,
+    Heading,
+    HStack,
+    modalManager,
+    Stack,
+    Switch,
+    Text,
+  } from "@immich/ui";
+  import { SvelteSet } from "svelte/reactivity";
+  import ViewLogModal from "./ViewLogModal.svelte";
+
+  type Props = {
+    repository: string;
+    snapshot: string;
+    onClose: () => void;
+  };
+
+  let { repository, snapshot, onClose }: Props = $props();
+
+  let inPlace = $state(true);
+  let target = $state("");
+  let include = new SvelteSet<string>();
+
+  const mutation = useRestoreSnapshot();
+
+  const onSubmit = () => {
+    const dto: RepositorySnapshotRestoreRequestDto = {
+      include: [...include],
+    };
+
+    if (!inPlace) {
+      dto.target = target;
+    }
+
+    mutation.mutate(
+      { repositoryId: repository, snapshotId: snapshot, options: dto },
+      {
+        onSuccess: ({ logId }) => {
+          onClose();
+
+          modalManager.open(ViewLogModal, {
+            logId,
+          });
+        },
+      },
+    );
+  };
+
+</script>
+
+<FormModal
+  title="Restore Backup"
+  submitText="Restore"
+  disabled={mutation.isPending}
+  {onSubmit}
+  {onClose}
+>
+  <Stack gap={5}>
+    <PathListField
+      paths={include}
+      addLabel="Add more files"
+      manageLabel="Select files instead"
+      pickerTitle="Files to restore"
+      pickerDescription="Pick the files and folders to restore. Leave empty to restore everything."
+      handleGetListing={(path) =>
+        handleGetSnapshotListing(repository, snapshot, path)}
+    >
+      {#snippet label()}Files to restore{/snippet}
+      {#snippet empty()}Restoring all files and folders.{/snippet}
+    </PathListField>
+
+    <Stack gap={4}>
+      <Heading class="px-1" size="tiny">Options</Heading>
+
+      <HStack gap={4}>
+        <Stack gap={0}>
+          <Text>In-place restore</Text>
+          <Text color="secondary" size="small">
+            Restore files to where they were originally.
+          </Text>
+        </Stack>
+        <Switch bind:checked={inPlace} />
+      </HStack>
+
+      {#if !inPlace}
+        <PathPickerField
+          bind:value={target}
+          placeholder="/path/to/restore/into"
+          pickerTitle="Choose target folder"
+          pickerDescription="Pick the folder to restore files into."
+        >
+          {#snippet title()}Target{/snippet}
+          {#snippet description()}
+            Where do you want this backup restored to?
+          {/snippet}
+        </PathPickerField>
+      {/if}
+    </Stack>
+  </Stack>
+</FormModal>

package/dist/components/backups/dialogs/RestoreSnapshotModal.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    repository: string;
+    snapshot: string;
+    onClose: () => void;
+};
+declare const RestoreSnapshotModal: import("svelte").Component<Props, {}, "">;
+type RestoreSnapshotModal = ReturnType<typeof RestoreSnapshotModal>;
+export default RestoreSnapshotModal;

package/dist/components/backups/dialogs/ViewLogModal.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import OnEvents from "../../util/OnEvents.svelte";
+  import RelativeTime from "../../util/RelativeTime.svelte";
+  import { options } from "../../../options";
+  import { createLogObserver } from "../../../services/log.service.svelte";
+  import { useRun, useRunEventHandler } from "../../../services/runHistory.service";
+  import { formatDuration } from "../../../utils/format";
+  import {
+    Alert,
+    FormatBytes,
+    Heading,
+    Modal,
+    ModalBody,
+    ProgressBar,
+    Scrollable,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { DateTime } from "luxon";
+  import { onDestroy } from "svelte";
+
+  type Props = {
+    logId: string;
+    onClose: () => void;
+  };
+
+  let { logId, onClose }: Props = $props();
+
+  const advanced = options.advanced;
+  // svelte-ignore state_referenced_locally
+  const log = createLogObserver(logId);
+  // svelte-ignore state_referenced_locally
+  const runQuery = useRun(logId);
+  const run = $derived(runQuery.data);
+  const { onRunUpdate } = useRunEventHandler();
+
+  let now = $state(DateTime.now());
+  const tick = setInterval(() => (now = DateTime.now()), 1000);
+
+  onDestroy(() => {
+    clearInterval(tick);
+    log.destroy();
+  });
+
+  const running = $derived(run?.status === "incomplete");
+  const duration = $derived(
+    run
+      ? formatDuration(
+          (run.end ? DateTime.fromISO(run.end) : now).toMillis() -
+            DateTime.fromISO(run.start).toMillis(),
+        )
+      : "",
+  );
+</script>
+
+<OnEvents {onRunUpdate} />
+
+<Modal
+  title={run?.type === "restore"
+    ? "Restore Log"
+    : run?.type === "forget"
+      ? "Prune Log"
+      : "Backup Log"}
+  size="giant"
+  {onClose}
+>
+  <ModalBody>
+    <Stack gap={5}>
+      <Stack gap={1}>
+        {#if !run}
+          <Heading size="medium">Connecting…</Heading>
+        {:else if run.status === "incomplete"}
+          <Heading size="medium">
+            {#if run.type === "restore"}Restoring{:else if run.type === "forget"}Pruning{:else}Backing
+              up{/if} &middot; {Math.round(log.status.progress * 100)}%
+          </Heading>
+        {:else if run.status === "failed"}
+          <Heading size="medium" color="danger">
+            {#if run.type === "restore"}Restore{:else if run.type === "forget"}Prune{:else}Backup{/if}
+            failed after {duration}
+          </Heading>
+        {:else if log.errors.length > 0}
+          <Heading size="medium" color="warning">
+            {#if run.type === "restore"}Restored{:else if run.type === "forget"}Pruned{:else}Backed
+              up{/if} in {duration} &middot; {log.errors.length} error{log
+              .errors.length === 1
+              ? ""
+              : "s"}
+          </Heading>
+        {:else}
+          <Heading size="medium" color="success">
+            {#if run.type === "restore"}Restored{:else if run.type === "forget"}Pruned{:else}Backed
+              up{/if} in {duration}
+          </Heading>
+        {/if}
+
+        {#if run}
+          <Text color="secondary">
+            Started <RelativeTime time={run.start} />
+          </Text>
+        {/if}
+      </Stack>
+
+      {#if running}
+        <ProgressBar progress={log.status.progress} size="large">
+          {#if log.status.text}
+            <Text
+              size="small"
+              class={log.status.progress > 0.5 ? "text-light" : "text-dark"}
+            >
+              {log.status.text}
+            </Text>
+          {/if}
+        </ProgressBar>
+      {/if}
+
+      {#if log.errors.length > 0}
+        <Stack gap={2}>
+          <Alert color="danger">{log.errors[0]}</Alert>
+          {#if log.errors.length > 1}
+            <Scrollable class="max-h-32">
+              <Stack gap={1}>
+                {#each log.errors.slice(1) as error}
+                  <Alert color="danger">{error}</Alert>
+                {/each}
+              </Stack>
+            </Scrollable>
+          {/if}
+        </Stack>
+      {/if}
+
+      {#if log.summary && run?.type !== "forget"}
+        <Stack gap={1}>
+          {#if run?.type === "restore"}
+            <Text>
+              {(log.summary.files_restored ?? 0).toLocaleString()} restored
+              {#if log.summary.files_skipped}
+                &middot; {log.summary.files_skipped.toLocaleString()} skipped
+              {/if}
+              {#if log.summary.files_deleted}
+                &middot; {log.summary.files_deleted.toLocaleString()} deleted
+              {/if}
+            </Text>
+            {#if log.summary.bytes_restored !== undefined}
+              <Text color="secondary">
+                Restored <FormatBytes bytes={log.summary.bytes_restored} />
+                {#if log.summary.total_bytes !== undefined}
+                  of
+                  <FormatBytes
+                    bytes={Math.max(
+                      log.summary.bytes_restored,
+                      log.summary.total_bytes,
+                    )}
+                  />
+                {/if}
+              </Text>
+            {/if}
+          {:else}
+            <Text>
+              {(log.summary.files_new ?? 0).toLocaleString()} new &middot;
+              {(log.summary.files_changed ?? 0).toLocaleString()} changed &middot;
+              {(log.summary.files_unmodified ?? 0).toLocaleString()} unchanged
+            </Text>
+            {#if log.summary.data_added !== undefined}
+              <Text color="secondary">
+                Added <FormatBytes bytes={log.summary.data_added} />
+                {#if log.summary.total_bytes_processed !== undefined}
+                  of
+                  <FormatBytes
+                    bytes={Math.max(
+                      log.summary.data_added,
+                      log.summary.total_bytes_processed,
+                    )}
+                  /> processed
+                {/if}
+              </Text>
+            {/if}
+          {/if}
+        </Stack>
+      {/if}
+
+      {#if running}
+        <Stack gap={1} class="h-20 overflow-hidden">
+          {#each log.status.currentFiles.slice(0, 3) as file}
+            <Text size="small" color="secondary" class="truncate" title={file}>
+              {file}
+            </Text>
+          {/each}
+        </Stack>
+      {/if}
+
+      {#if $advanced}
+        <Stack gap={1}>
+          <Heading size="small">Event Log</Heading>
+          <Scrollable class="h-80 overflow-x-hidden">
+            <Stack gap={1}>
+              {#each log.events as event}
+                <Text size="tiny" class="font-mono select-all">
+                  {JSON.stringify(event)}
+                </Text>
+              {/each}
+            </Stack>
+          </Scrollable>
+        </Stack>
+      {/if}
+    </Stack>
+  </ModalBody>
+</Modal>

package/dist/components/backups/dialogs/ViewLogModal.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    logId: string;
+    onClose: () => void;
+};
+declare const ViewLogModal: import("svelte").Component<Props, {}, "">;
+type ViewLogModal = ReturnType<typeof ViewLogModal>;
+export default ViewLogModal;

package/dist/components/backups/metrics-history/MetricsHistoryModal.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import { useMetricsHistory } from "../../../services/metricsHistory.service";
+  import { formatDuration } from "../../../utils/format";
+  import { getReadableErrorMessage } from "../../../utils/handle-error";
+  import {
+    Alert,
+    Badge,
+    getByteUnitString,
+    HStack,
+    Icon,
+    LoadingSpinner,
+    Modal,
+    ModalBody,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import {
+    mdiAlertCircleOutline,
+    mdiCheckCircleOutline,
+    mdiDatabaseOutline,
+    mdiPlayCircleOutline,
+    mdiTimerOutline,
+  } from "@mdi/js";
+  import RelativeTime from "../../util/RelativeTime.svelte";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+    onClose: () => void;
+  };
+
+  const { repository, onClose }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const query = useMetricsHistory(repository.id);
+
+  const entries = $derived(
+    query.data?.pages.flatMap((page) => page.items) ?? [],
+  );
+
+  const isoDate = (value: string) => new Date(value).toLocaleString();
+
+  let sentinel = $state<HTMLDivElement | null>(null);
+
+  $effect(() => {
+    if (!sentinel) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (
+          entry.isIntersecting &&
+          query.hasNextPage &&
+          !query.isFetchingNextPage
+        ) {
+          void query.fetchNextPage();
+        }
+      },
+      { rootMargin: "200px" },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  });
+</script>
+
+<Modal title={`Metrics history for ${repository.name}`} size="large" {onClose}>
+  <ModalBody>
+    {#if query.isLoading}
+      <LoadingSpinner />
+    {:else if query.isError}
+      <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+    {:else if entries.length === 0}
+      <Text color="secondary" class="text-center py-6">
+        No metrics history yet.
+      </Text>
+    {:else}
+      <Stack gap={0} class="divide-y rounded-2xl border overflow-hidden">
+        {#each entries as entry (entry.id)}
+          {@const isStart = entry.started != null}
+          {@const isEnd = entry.backup != null}
+          {@const isSize = entry.sizeBytes != null && !isStart && !isEnd}
+          {@const succeeded =
+            isEnd &&
+            entry.successfulBackup != null &&
+            entry.successfulBackup === entry.backup}
+          <Stack gap={1} class="px-4 py-3">
+            <HStack class="justify-between gap-4">
+              <HStack class="gap-2">
+                {#if isStart}
+                  <Icon
+                    icon={mdiPlayCircleOutline}
+                    size="18"
+                    class="text-info-500"
+                  />
+                  <Text>Backup started</Text>
+                {:else if isEnd && succeeded}
+                  <Icon
+                    icon={mdiCheckCircleOutline}
+                    size="18"
+                    class="text-success-500"
+                  />
+                  <Text>Backup finished</Text>
+                  <Badge size="tiny" color="success">Success</Badge>
+                {:else if isEnd}
+                  <Icon
+                    icon={mdiAlertCircleOutline}
+                    size="18"
+                    class="text-danger-500"
+                  />
+                  <Text>Backup finished</Text>
+                  <Badge size="tiny" color="danger">Failed</Badge>
+                {:else if isSize}
+                  <Icon
+                    icon={mdiDatabaseOutline}
+                    size="18"
+                    class="text-info-500"
+                  />
+                  <Text>Size updated</Text>
+                {:else}
+                  <Icon icon={mdiTimerOutline} size="18" color="secondary" />
+                  <Text>Event</Text>
+                {/if}
+              </HStack>
+              <Text
+                color="secondary"
+                size="small"
+                title={isoDate(entry.createdAt)}
+              >
+                <RelativeTime time={entry.createdAt} />
+              </Text>
+            </HStack>
+
+            <HStack class="gap-2 flex-wrap pl-7">
+              {#if entry.backupDuration != null}
+                <Badge size="tiny" color="secondary">
+                  Duration {formatDuration(entry.backupDuration)}
+                </Badge>
+              {/if}
+              {#if entry.sizeBytes != null}
+                <Badge size="tiny" color="secondary">
+                  Size {getByteUnitString(entry.sizeBytes)}
+                </Badge>
+              {/if}
+              {#if entry.started}
+                <Badge size="tiny" color="secondary">
+                  Started {isoDate(entry.started)}
+                </Badge>
+              {/if}
+              {#if entry.backup}
+                <Badge size="tiny" color="secondary">
+                  Ended {isoDate(entry.backup)}
+                </Badge>
+              {/if}
+            </HStack>
+          </Stack>
+        {/each}
+      </Stack>
+
+      {#if query.hasNextPage}
+        <div bind:this={sentinel} class="flex justify-center py-4">
+          {#if query.isFetchingNextPage}
+            <LoadingSpinner />
+          {/if}
+        </div>
+      {/if}
+    {/if}
+  </ModalBody>
+</Modal>

package/dist/components/backups/metrics-history/MetricsHistoryModal.svelte.d.ts

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

package/dist/components/backups/run-history/RepositoryRunHistory.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import StackList from "../../ui/StackList.svelte";
+  import OnEvents from "../../util/OnEvents.svelte";
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import {
+    useRunEventHandler,
+    useRunHistory,
+  } from "../../../services/runHistory.service";
+  import { Text } from "@immich/ui";
+  import RepositoryRunHistoryItem from "./RepositoryRunHistoryItem.svelte";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+  };
+
+  let { repository }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const query = useRunHistory(repository.id);
+  const { onRunCreate, onRunUpdate } = useRunEventHandler();
+</script>
+
+<OnEvents {onRunCreate} {onRunUpdate} />
+
+<StackList {query}>
+  {#snippet title()}
+    Recent backup attempts
+  {/snippet}
+
+  {#snippet children(runs)}
+    {#if runs.length === 0}
+      <Text class="text-center py-6" color="muted">No recent backups</Text>
+    {:else}
+      {#each runs.slice(0, 5) as run (run.id)}
+        <RepositoryRunHistoryItem {run} />
+      {/each}
+    {/if}
+  {/snippet}
+</StackList>

package/dist/components/backups/run-history/RepositoryRunHistory.svelte.d.ts

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

package/dist/components/backups/run-history/RepositoryRunHistoryItem.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import StackListItem from "../../ui/StackListItem.svelte";
+  import RelativeTime from "../../util/RelativeTime.svelte";
+  import type { RunDto } from "../../../fetch-client";
+  import { getRunActions } from "../../../services/runHistory.service";
+  import { Icon } from "@immich/ui";
+  import {
+    mdiAlertCircleOutline,
+    mdiCheckCircleOutline,
+    mdiLoading,
+  } from "@mdi/js";
+
+  type Props = {
+    run: RunDto;
+  };
+
+  const { run }: Props = $props();
+  const { ViewLog } = $derived(getRunActions(run));
+</script>
+
+<StackListItem actions={[ViewLog]}>
+  {#snippet icon()}
+    {#if run.status === "complete"}
+      <Icon icon={mdiCheckCircleOutline} class="text-success-500" />
+    {:else if run.status === "failed"}
+      <Icon icon={mdiAlertCircleOutline} class="text-danger-500" />
+    {:else}
+      <Icon icon={mdiLoading} class="animate-spin opacity-60" />
+    {/if}
+  {/snippet}
+
+  {#if run.status === "incomplete"}
+    {#if run.type === "restore"}Restoring{:else if run.type === "forget"}Pruning{:else}Backing
+      up{/if} &middot; started
+    <RelativeTime time={run.start} />
+  {:else if run.status === "failed"}
+    {#if run.type === "restore"}Restore{:else if run.type === "forget"}Prune{:else}Backup{/if}
+    failed
+    {#if run.end}<RelativeTime time={run.end} />{/if}
+  {:else}
+    {#if run.type === "restore"}Restored{:else if run.type === "forget"}Pruned{:else}Backed
+      up{/if}
+    {#if run.end}<RelativeTime time={run.end} />{/if}
+  {/if}
+</StackListItem>

package/dist/components/backups/run-history/RepositoryRunHistoryItem.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RunDto } from "../../../fetch-client";
+type Props = {
+    run: RunDto;
+};
+declare const RepositoryRunHistoryItem: import("svelte").Component<Props, {}, "">;
+type RepositoryRunHistoryItem = ReturnType<typeof RepositoryRunHistoryItem>;
+export default RepositoryRunHistoryItem;