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

package/dist/services/immich.integration.service.js

@@ -1,13 +1,12 @@
-import ImmichConfigureBackup from '../components/integrations/immich/ImmichConfigureBackup.svelte';
 import BackupsRecoveryKeyModal from '../components/onboarding/dialogs/BackupsRecoveryKeyModal.svelte';
 import { modalManager } from '@immich/ui';
 import { mdiCloudUploadOutline, mdiCogOutline, mdiKeyOutline } from '@mdi/js';
 import { handleCreateBackup } from './repository.service';
-export const getBackupPageActions = (repositoryId) => {
+export const getBackupPageActions = (repositoryId, onConfigure) => {
     const Configure = {
         title: 'Configure',
         icon: mdiCogOutline,
-        onAction: () => modalManager.show(ImmichConfigureBackup, {}),
+        onAction: onConfigure,
     };
     const ViewRecoveryKey = {
         title: 'View recovery key',

package/dist/services/integrations.service.d.ts

@@ -1,5 +1,6 @@
 import { SocketEvent } from '../events';
 import { type ConfigureImmichIntegrationRequestDto, type IntegrationsResponseDto } from '../fetch-client';
+export declare const IMMICH_DEFAULT_CRON = "0 3 * * *";
 export declare const integrationsKeys: {
     all: readonly ["integrations"];
 };

package/dist/services/integrations.service.js

@@ -3,6 +3,7 @@ import { configureImmichIntegration, getIntegrations, } from '../fetch-client';
 import { queryClient } from '../query-client';
 import { handleError } from '../utils/handle-error';
 import { createMutation, createQuery } from '@tanstack/svelte-query';
+export const IMMICH_DEFAULT_CRON = '0 3 * * *';
 export const integrationsKeys = {
     all: ['integrations'],
 };
@@ -28,7 +29,7 @@ export const useConfigureImmichDefaults = () => createMutation(() => ({
         await configureImmichIntegration({
             name: 'Immich',
             worm: false,
-            cron: '0 3 * * *',
+            cron: IMMICH_DEFAULT_CRON,
             dataFolders: immichState.dataFolders,
             backupConfiguration: true,
             libraries: 'all',

package/dist/services/log.service.svelte.d.ts

@@ -32,6 +32,14 @@ type LogEvent = SummaryEvent | {
 } | {
     message_type: 'raw';
     message: string;
+} | {
+    message_type: 'yucca_prune_kept';
+    id: string;
+    time: string;
+} | {
+    message_type: 'yucca_prune_removed';
+    id: string;
+    time: string;
 } | {
     message_type: 'status';
     percent_done: number;
@@ -50,6 +58,10 @@ export declare function createLogObserver(logId: string): {
     readonly errors: string[];
     readonly events: LogEvent[];
     readonly summary: SummaryEvent | undefined;
+    readonly pruned: {
+        kept: number;
+        removed: number;
+    };
     destroy(): void;
 };
 export {};

package/dist/services/log.service.svelte.js

@@ -18,6 +18,7 @@ export function createLogObserver(logId) {
         errors: [],
         events: [],
         summary: undefined,
+        pruned: { kept: 0, removed: 0 },
     });
     const buffer = [];
     const flush = debounce(() => {
@@ -68,13 +69,23 @@ export function createLogObserver(logId) {
                 flush.flush();
                 break;
             }
+            case 'yucca_prune_kept': {
+                state.pruned.kept++;
+                flush();
+                break;
+            }
+            case 'yucca_prune_removed': {
+                state.pruned.removed++;
+                flush();
+                break;
+            }
             default: {
                 flush();
                 break;
             }
         }
     };
-    const source = new EventSource(new URL(`/api/yucca/logs/${logId}/stream`, defaults.baseUrl));
+    const source = new EventSource(`${defaults.baseUrl}/api/yucca/logs/${logId}/stream`);
     source.addEventListener('message', ({ data }) => onEvent(JSON.parse(data)));
     return {
         get status() {
@@ -89,6 +100,9 @@ export function createLogObserver(logId) {
         get summary() {
             return state.summary;
         },
+        get pruned() {
+            return state.pruned;
+        },
         destroy() {
             flush.cancel();
             source.close();

package/dist/services/repository.service.js

@@ -1,7 +1,7 @@
 import { sdk } from '..';
 import ConfigureRepositoryModal from '../components/backups/dialogs/ConfigureRepositoryModal.svelte';
 import ImportRepositoryModal from '../components/backups/dialogs/ImportRepositoryModal.svelte';
-import ViewLogModal from '../components/backups/dialogs/ViewLogModal.svelte';
+import ViewStatusModal from '../components/backups/dialogs/ViewStatusModal.svelte';
 import MetricsHistoryModal from '../components/backups/metrics-history/MetricsHistoryModal.svelte';
 import RunHistoryModal from '../components/backups/run-history/RunHistoryModal.svelte';
 import SnapshotsListModal from '../components/backups/snapshots-list/SnapshotsListModal.svelte';
@@ -84,7 +84,10 @@ export const handleCreateBackup = async (id) => {
     try {
         toastManager.info('Started backup');
         const response = await sdk.createBackup(id);
-        void modalManager.open(ViewLogModal, { logId: response.logId });
+        void modalManager.open(ViewStatusModal, {
+            logId: response.logId,
+            onRetry: () => void handleCreateBackup(id),
+        });
         return response;
     }
     catch (error) {
@@ -96,7 +99,10 @@ export const handlePruneRepository = async (id) => {
     try {
         toastManager.info('Cleaning up old backups');
         const response = await sdk.pruneRepository(id);
-        void modalManager.open(ViewLogModal, { logId: response.logId });
+        void modalManager.open(ViewStatusModal, {
+            logId: response.logId,
+            onRetry: () => void handlePruneRepository(id),
+        });
         return response;
     }
     catch (error) {

package/dist/services/runHistory.service.d.ts

@@ -8,7 +8,7 @@ export declare const runHistoryKeys: {
 export declare const runKeys: {
     byId: (id: string) => readonly ["run", string];
 };
-export declare const useRunHistory: (repositoryId: string) => import("@tanstack/svelte-query").CreateQueryResult<sdk.RunDto[], Error>;
+export declare const useRunHistory: (repositoryId: () => string | undefined) => import("@tanstack/svelte-query").CreateQueryResult<sdk.RunDto[], Error>;
 export declare const useRun: (logId: string) => import("@tanstack/svelte-query").CreateQueryResult<sdk.RunDto, Error>;
 export declare const useRunEventHandler: () => {
     onRunCreate(event: SocketEvent<{

package/dist/services/runHistory.service.js

@@ -1,5 +1,5 @@
 import { sdk } from '..';
-import ViewLogModal from '../components/backups/dialogs/ViewLogModal.svelte';
+import ViewStatusModal from '../components/backups/dialogs/ViewStatusModal.svelte';
 import { SocketEvent } from '../events';
 import { getRun, getRunHistory } from '../fetch-client';
 import { queryClient } from '../query-client';
@@ -13,8 +13,9 @@ export const runKeys = {
     byId: (id) => ['run', id],
 };
 export const useRunHistory = (repositoryId) => createQuery(() => ({
-    queryKey: runHistoryKeys.byRepository(repositoryId),
-    queryFn: () => getRunHistory(repositoryId).then(({ runs }) => runs.toSorted((a, b) => b.start.localeCompare(a.start))),
+    queryKey: runHistoryKeys.byRepository(repositoryId() ?? ''),
+    queryFn: () => getRunHistory(repositoryId()).then(({ runs }) => runs.toSorted((a, b) => b.start.localeCompare(a.start))),
+    enabled: repositoryId() !== undefined,
 }), () => queryClient);
 export const useRun = (logId) => createQuery(() => ({
     queryKey: runKeys.byId(logId),
@@ -48,7 +49,7 @@ export const handleGetRunHistory = async (id) => {
 export const getRunActions = (run) => {
     const ViewLog = {
         title: 'View Log',
-        onAction: () => void modalManager.open(ViewLogModal, { logId: run.id }),
+        onAction: () => void modalManager.open(ViewStatusModal, { logId: run.id }),
     };
     return { ViewLog };
 };

package/dist/utils/format.d.ts

@@ -1,2 +1,2 @@
-export declare const formatDuration: (ms: number) => string;
+export declare const formatDuration: (ms: number, unitDisplay?: "narrow" | "long") => string;
 export declare const humanizeBackupPath: (path: string) => string;

package/dist/utils/format.js

@@ -1,11 +1,11 @@
 import { Duration } from 'luxon';
-export const formatDuration = (ms) => {
+export const formatDuration = (ms, unitDisplay = 'narrow') => {
     const seconds = Math.round(ms / 1000);
     return seconds < 1
         ? '<1s'
         : Duration.fromMillis(seconds * 1000)
             .rescale()
-            .toHuman({ unitDisplay: 'narrow' });
+            .toHuman({ unitDisplay });
 };
 const IMMICH_FOLDER_LABELS = {
     upload: 'Photos and videos',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@futo-org/backups-orchestrator-ui",
   "repository": "https://github.com/immich-app/yucca",
   "description": "Backups orchestrator (UI library)",
-  "version": "0.27.0",
+  "version": "0.30.0",
   "license": "Source First License 1.1",
   "files": [
     "dist",
@@ -55,7 +55,7 @@
     "svelte"
   ],
   "dependencies": {
-    "@immich/ui": "^0.59.0",
+    "@immich/ui": "^0.85.0",
     "@mdi/js": "^7.4.47",
     "@oazapfts/runtime": "^1.1.0",
     "@tanstack/svelte-query": "^6.1.3",
@@ -64,7 +64,7 @@
     "lodash.debounce": "^4.0.8",
     "luxon": "^3.7.2",
     "socket.io-client": "^4.8.3",
-    "@futo-org/backups-api-client": "^0.27.0"
+    "@futo-org/backups-api-client": "^0.30.0"
   },
   "scripts": {
     "dev": "vite dev --port 5174",

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

@@ -1,208 +0,0 @@
-<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

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