@futo-org/backups-orchestrator-ui 0.27.0 → 0.28.0

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

@@ -16,7 +16,7 @@
     Text,
   } from "@immich/ui";
   import { SvelteSet } from "svelte/reactivity";
-  import ViewLogModal from "./ViewLogModal.svelte";
+  import ViewStatusModal from "./ViewStatusModal.svelte";
 
   type Props = {
     repository: string;
@@ -47,7 +47,7 @@
         onSuccess: ({ logId }) => {
           onClose();
 
-          modalManager.open(ViewLogModal, {
+          modalManager.open(ViewStatusModal, {
             logId,
           });
         },

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

@@ -1,18 +1,17 @@
 <script lang="ts">
   import StackList from "../../ui/StackList.svelte";
-  import StackListItem from "../../ui/StackListItem.svelte";
+  import StackListOption from "../../ui/StackListOption.svelte";
+  import StackListPlaceholder from "../../ui/StackListPlaceholder.svelte";
+  import Suspense from "../../util/Suspense.svelte";
   import { useInspectRepositories } from "../../../services/repository.service";
   import {
     Button,
     HStack,
-    Icon,
     Modal,
     ModalBody,
     ModalFooter,
     Stack,
-    Text,
   } from "@immich/ui";
-  import { mdiChevronRight } from "@mdi/js";
   import type { Snippet } from "svelte";
 
   type Props = {
@@ -54,41 +53,32 @@
     <Stack>
       {@render leadingContent?.()}
 
-      <StackList {query}>
-        {#each sortedRepositories ?? [] as repository (repository.id)}
-          {@const accessible = repository.snapshots !== undefined}
+      <StackList>
+        <Suspense {query}>
+          {#each sortedRepositories ?? [] as repository (repository.id)}
+            {@const accessible = repository.snapshots !== undefined}
 
-          <StackListItem
-            onclick={accessible ? () => onSelect(repository.id) : undefined}
-          >
-            <Stack gap={0} class="grow min-w-0">
-              <Text>{repository.name}</Text>
-              <Text size="small" color={accessible ? "secondary" : "danger"}>
-                {#if !accessible}
-                  Can't access, is your recovery key correct?
-                {:else if repository.snapshots.length}
-                  Last backup: {new Date(
-                    repository.snapshots[0].time,
-                  ).toLocaleDateString()}
-                {:else}
-                  No backups yet
-                {/if}
-              </Text>
-            </Stack>
-
-            {#snippet trailing()}
-              {#if accessible}
-                <Icon icon={mdiChevronRight} />
+            <StackListOption
+              title={repository.name}
+              disabled={!accessible}
+              onclick={() => onSelect(repository.id)}
+            >
+              {#if !accessible}
+                Can't access, is your recovery key correct?
+              {:else if repository.snapshots.length}
+                Last backup: {new Date(
+                  repository.snapshots[0].time,
+                ).toLocaleDateString()}
+              {:else}
+                No backups yet
               {/if}
-            {/snippet}
-          </StackListItem>
-        {/each}
+            </StackListOption>
+          {/each}
 
-        {#if (sortedRepositories ?? []).length === 0}
-          <StackListItem>
-            <Text color="muted">No backups found.</Text>
-          </StackListItem>
-        {/if}
+          {#if (sortedRepositories ?? []).length === 0}
+            <StackListPlaceholder>No backups found.</StackListPlaceholder>
+          {/if}
+        </Suspense>
       </StackList>
     </Stack>
   </ModalBody>

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

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import BackupStatus, {
+    type BackupStatusState,
+    type BackupStatusType,
+  } from "../BackupStatus.svelte";
+  import OnEvents from "../../util/OnEvents.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 {
+    CloseButton,
+    FormatBytes,
+    Heading,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalHeader,
+    Scrollable,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { DateTime } from "luxon";
+  import { onDestroy } from "svelte";
+
+  type Props = {
+    logId: string;
+    onClose: () => void;
+    onRetry?: () => void;
+  };
+
+  const { logId, onClose, onRetry }: Props = $props();
+
+  const advanced = options.advanced;
+  const showAdvanced = $derived($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 type: BackupStatusType = $derived(
+    run?.type === "restore" || run?.type === "forget" ? run.type : "backup",
+  );
+
+  const backupState: BackupStatusState = $derived.by(() => {
+    if (!run) {
+      return "connecting";
+    }
+
+    if (run.status === "incomplete") {
+      return "running";
+    }
+
+    return run.status === "failed" ? "failed" : "complete";
+  });
+
+  const duration = $derived(
+    run
+      ? formatDuration(
+          (run.end ? DateTime.fromISO(run.end) : now).toMillis() -
+            DateTime.fromISO(run.start).toMillis(),
+          "long",
+        )
+      : "",
+  );
+
+  const titles: Record<BackupStatusType, Record<"running" | "done", string>> = {
+    backup: { running: "Backing up your library", done: "Backup" },
+    restore: { running: "Restoring your library", done: "Restore" },
+    forget: { running: "Pruning old backups", done: "Prune" },
+  };
+
+  const retry = $derived(
+    onRetry
+      ? () => {
+          onClose();
+          onRetry();
+        }
+      : undefined,
+  );
+
+  const title = $derived.by(() => {
+    switch (backupState) {
+      case "complete": {
+        return `${titles[type].done} complete`;
+      }
+      case "failed": {
+        return `${titles[type].done} failed`;
+      }
+      default: {
+        return titles[type].running;
+      }
+    }
+  });
+</script>
+
+<OnEvents {onRunUpdate} />
+
+<Modal
+  size="medium"
+  {onClose}
+  // this is a bit of a hack to remove the frames from base modal...
+  // this one might be removed ; twin code is in UpsellModal
+  class="[&>div>div:first-child]:border-b-0 [&>div>div:first-child]:px-8 [&>div>div:first-child]:pb-0"
+>
+  <ModalHeader>
+    <HStack fullWidth class="justify-end">
+      <CloseButton onclick={onClose} />
+    </HStack>
+  </ModalHeader>
+
+  <ModalBody class="px-8 pt-2 pb-8">
+    <BackupStatus
+      {title}
+      {type}
+      state={backupState}
+      progress={log.status.progress}
+      start={run?.start}
+      {duration}
+      errors={log.errors}
+      currentFiles={log.status.currentFiles}
+      onRetry={retry}
+    >
+      {#snippet details()}
+        {#if log.summary && type === "backup"}
+          {(log.summary.total_files_processed ?? 0).toLocaleString()} items backed
+          up &middot;
+          {(log.summary.files_new ?? 0).toLocaleString()} new items
+          {#if log.summary.total_bytes_processed !== undefined}
+            &middot;
+            <FormatBytes bytes={log.summary.total_bytes_processed} /> processed
+          {/if}
+        {:else if log.summary && type === "restore"}
+          {(log.summary.files_restored ?? 0).toLocaleString()} items restored{#if log.summary.files_skipped}
+            &middot; {log.summary.files_skipped.toLocaleString()} skipped
+          {/if}
+          {#if log.summary.bytes_restored !== undefined}
+            &middot; <FormatBytes bytes={log.summary.bytes_restored} /> restored
+          {/if}
+        {:else if type === "forget"}
+          {log.pruned.removed.toLocaleString()}
+          {log.pruned.removed === 1 ? "backup" : "backups"} removed &middot;
+          {log.pruned.kept.toLocaleString()} kept
+        {/if}
+      {/snippet}
+
+      {#snippet advanced()}
+        {#if showAdvanced}
+          <Stack gap={1}>
+            <Heading size="small">Event Log</Heading>
+            <Scrollable class="h-80 overflow-x-hidden">
+              <Stack gap={1}>
+                {#each log.events as event, index (index)}
+                  <Text size="tiny" class="font-mono select-all">
+                    {JSON.stringify(event)}
+                  </Text>
+                {/each}
+              </Stack>
+            </Scrollable>
+          </Stack>
+        {/if}
+      {/snippet}
+    </BackupStatus>
+  </ModalBody>
+</Modal>

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

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

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

@@ -1,19 +1,23 @@
 <script lang="ts">
   import StackList from "../../ui/StackList.svelte";
+  import StackListPlaceholder from "../../ui/StackListPlaceholder.svelte";
+  import Suspense from "../../util/Suspense.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 { Button } from "@immich/ui";
   import RepositoryRunHistoryItem from "./RepositoryRunHistoryItem.svelte";
 
   type Props = {
     repository: LocalRepositoryDto;
+    limit?: number;
+    onViewAll?: () => void;
   };
 
-  let { repository }: Props = $props();
+  let { repository, limit = 5, onViewAll }: Props = $props();
 
   // svelte-ignore state_referenced_locally
   const query = useRunHistory(repository.id);
@@ -22,18 +26,26 @@
 
 <OnEvents {onRunCreate} {onRunUpdate} />
 
-<StackList {query}>
+<StackList>
   {#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}
+  {#snippet action()}
+    {#if onViewAll && query.data?.length}
+      <Button variant="ghost" size="small" onclick={onViewAll}>View all</Button>
     {/if}
   {/snippet}
+
+  <Suspense {query}>
+    {#snippet children(runs)}
+      {#each runs.slice(0, limit) as run (run.id)}
+        <RepositoryRunHistoryItem {run} />
+      {/each}
+
+      {#if runs.length === 0}
+        <StackListPlaceholder>No recent backups</StackListPlaceholder>
+      {/if}
+    {/snippet}
+  </Suspense>
 </StackList>

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

@@ -1,6 +1,8 @@
 import type { LocalRepositoryDto } from "../../../fetch-client";
 type Props = {
     repository: LocalRepositoryDto;
+    limit?: number;
+    onViewAll?: () => void;
 };
 declare const RepositoryRunHistory: import("svelte").Component<Props, {}, "">;
 type RepositoryRunHistory = ReturnType<typeof RepositoryRunHistory>;

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

@@ -5,9 +5,9 @@
   import { getRunActions } from "../../../services/runHistory.service";
   import { Icon } from "@immich/ui";
   import {
-    mdiAlertCircleOutline,
-    mdiCheckCircleOutline,
-    mdiLoading,
+    mdiCloudCheckOutline,
+    mdiCloudOffOutline,
+    mdiCloudSyncOutline,
   } from "@mdi/js";
 
   type Props = {
@@ -16,30 +16,56 @@
 
   const { run }: Props = $props();
   const { ViewLog } = $derived(getRunActions(run));
+
+  const nouns = {
+    restore: { name: "restore", running: "Restore", done: "Restored" },
+    forget: { name: "prune", running: "Prune", done: "Pruned" },
+    backup: { name: "backup", running: "Backup", done: "Backed up" },
+  };
+
+  const noun = $derived(
+    run.type === "restore" || run.type === "forget"
+      ? nouns[run.type]
+      : nouns.backup,
+  );
+
+  const status = $derived.by(() => {
+    switch (run.status) {
+      case "failed": {
+        return {
+          title: `Failed ${noun.name}`,
+          color: "danger",
+          icon: mdiCloudOffOutline,
+        } as const;
+      }
+      case "incomplete": {
+        return {
+          title: `${noun.running} in progress`,
+          color: "primary",
+          icon: mdiCloudSyncOutline,
+        } as const;
+      }
+      default: {
+        return {
+          title: `Successful ${noun.name}`,
+          color: "success",
+          icon: mdiCloudCheckOutline,
+        } as const;
+      }
+    }
+  });
 </script>
 
-<StackListItem actions={[ViewLog]}>
+<StackListItem title={status.title} color={status.color} 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}
+    <Icon icon={status.icon} />
   {/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} />
+    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}
+    Attempted {#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}
+    {noun.done} {#if run.end}<RelativeTime time={run.end} />{/if}
   {/if}
 </StackListItem>

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

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import ListToolbar from "../../ui/ListToolbar.svelte";
+  import Pagination from "../../ui/Pagination.svelte";
+  import StackList from "../../ui/StackList.svelte";
+  import StackListPlaceholder from "../../ui/StackListPlaceholder.svelte";
+  import OnEvents from "../../util/OnEvents.svelte";
+  import Suspense from "../../util/Suspense.svelte";
+  import type { LocalRepositoryDto, RunDto } from "../../../fetch-client";
+  import {
+    useRunEventHandler,
+    useRunHistory,
+  } from "../../../services/runHistory.service";
+  import { Stack, type ActionItem } from "@immich/ui";
+  import { mdiRadioboxBlank, mdiRadioboxMarked } from "@mdi/js";
+  import RepositoryRunHistoryItem from "./RepositoryRunHistoryItem.svelte";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+    pageSize?: number;
+  };
+
+  let { repository, pageSize = 10 }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const query = useRunHistory(repository.id);
+  const { onRunCreate, onRunUpdate } = useRunEventHandler();
+
+  let search = $state("");
+  let newestFirst = $state(true);
+  let status = $state<"all" | "complete" | "failed" | "incomplete">("all");
+  let page = $state(1);
+
+  const onSearch = (value: string) => {
+    search = value;
+    page = 1;
+  };
+
+  const onFilter = (value: typeof status) => {
+    status = value;
+    page = 1;
+  };
+
+  const sortOptions = [
+    { newest: true, title: "Newest first" },
+    { newest: false, title: "Oldest first" },
+  ];
+
+  const statusOptions: { value: typeof status; title: string }[] = [
+    { value: "all", title: "All attempts" },
+    { value: "complete", title: "Successful only" },
+    { value: "failed", title: "Failed only" },
+    { value: "incomplete", title: "In progress only" },
+  ];
+
+  const tick = (selected: boolean) =>
+    selected ? mdiRadioboxMarked : mdiRadioboxBlank;
+
+  const sort = $derived({
+    label: newestFirst ? "Newest first" : "Oldest first",
+    items: sortOptions.map(
+      (option): ActionItem => ({
+        title: option.title,
+        icon: tick(newestFirst === option.newest),
+        onAction: () => (newestFirst = option.newest),
+      }),
+    ),
+  });
+
+  const filters = $derived({
+    label:
+      statusOptions.find((option) => option.value === status)?.title ??
+      "Filters",
+    active: status !== "all",
+    items: statusOptions.map(
+      (option): ActionItem => ({
+        title: option.title,
+        icon: tick(status === option.value),
+        onAction: () => onFilter(option.value),
+      }),
+    ),
+  });
+
+  const matches = (run: RunDto) => {
+    const term = search.trim().toLowerCase();
+
+    if (!term) {
+      return true;
+    }
+
+    return `${run.type} ${run.status}`.toLowerCase().includes(term);
+  };
+
+  const filtered = $derived(
+    (query.data ?? [])
+      .filter((run) => status === "all" || run.status === status)
+      .filter(matches)
+      .toSorted((a, b) =>
+        newestFirst
+          ? +new Date(b.start) - +new Date(a.start)
+          : +new Date(a.start) - +new Date(b.start),
+      ),
+  );
+
+  const pageCount = $derived(Math.max(Math.ceil(filtered.length / pageSize), 1));
+  const current = $derived(Math.min(page, pageCount));
+  const visible = $derived(
+    filtered.slice((current - 1) * pageSize, current * pageSize),
+  );
+</script>
+
+<OnEvents {onRunCreate} {onRunUpdate} />
+
+<Stack gap={4}>
+  <ListToolbar
+    placeholder="Search backups"
+    {search}
+    {onSearch}
+    {sort}
+    {filters}
+  />
+
+  <StackList>
+    <Suspense {query}>
+      {#each visible as run (run.id)}
+        <RepositoryRunHistoryItem {run} />
+      {/each}
+
+      {#if filtered.length === 0}
+        <StackListPlaceholder>No backups found</StackListPlaceholder>
+      {/if}
+    </Suspense>
+  </StackList>
+
+  <Pagination page={current} {pageCount} onChange={(next) => (page = next)} />
+</Stack>

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { LocalRepositoryDto } from "../../../fetch-client";
   import { Modal, ModalBody } from "@immich/ui";
-  import RepositoryRunHistory from "./RepositoryRunHistory.svelte";
+  import RepositoryRunHistoryPage from "./RepositoryRunHistoryPage.svelte";
 
   type Props = {
     repository: LocalRepositoryDto;
@@ -13,6 +13,6 @@
 
 <Modal title={`Run History for ${repository.name}`} size="giant" {onClose}>
   <ModalBody>
-    <RepositoryRunHistory {repository} />
+    <RepositoryRunHistoryPage {repository} />
   </ModalBody>
 </Modal>

package/dist/components/backups/snapshots-list/RepositorySnapshotsList.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import StackList from "../../ui/StackList.svelte";
+  import StackListPlaceholder from "../../ui/StackListPlaceholder.svelte";
   import OnEvents from "../../util/OnEvents.svelte";
+  import Suspense from "../../util/Suspense.svelte";
   import type { LocalRepositoryDto } from "../../../fetch-client";
   import { options } from "../../../options";
   import { handlePruneRepository } from "../../../services/repository.service";
@@ -8,15 +10,17 @@
     useSnapshotEventHandler,
     useSnapshots,
   } from "../../../services/snapshot.service";
-  import { Button, HStack, Text } from "@immich/ui";
+  import { Button, HStack } from "@immich/ui";
   import RepositorySnapshotsListItem from "./RepositorySnapshotsListItem.svelte";
 
   type Props = {
     repository: LocalRepositoryDto;
     immich?: boolean;
+    limit?: number;
+    onViewAll?: () => void;
   };
 
-  let { repository, immich = false }: Props = $props();
+  let { repository, immich = false, limit, onViewAll }: Props = $props();
 
   const { advanced } = options;
   // svelte-ignore state_referenced_locally
@@ -26,24 +30,32 @@
 
 <OnEvents {onRunUpdate} />
 
-<StackList {query}>
+<StackList>
   {#snippet title()}
     Snapshots
   {/snippet}
 
-  {#snippet children(snapshots)}
-    {#if snapshots.length === 0}
-      <Text class="text-center py-6" color="muted">No backups yet</Text>
-    {:else}
-      {#each snapshots as snapshot (snapshot.id)}
+  {#snippet action()}
+    {#if onViewAll && query.data?.length}
+      <Button variant="ghost" size="small" onclick={onViewAll}>View all</Button>
+    {/if}
+  {/snippet}
+
+  <Suspense {query}>
+    {#snippet children(snapshots)}
+      {#each limit ? snapshots.slice(0, limit) : snapshots as snapshot (snapshot.id)}
         <RepositorySnapshotsListItem
           repositoryId={repository.id}
           {snapshot}
           {immich}
         />
       {/each}
-    {/if}
-  {/snippet}
+
+      {#if snapshots.length === 0}
+        <StackListPlaceholder>No backups yet</StackListPlaceholder>
+      {/if}
+    {/snippet}
+  </Suspense>
 </StackList>
 
 {#if $advanced}