@futo-org/backups-orchestrator-ui 0.44.0 → 0.46.0

package/dist/components/backups/BackupStatus.svelte

@@ -6,7 +6,8 @@
     | "running"
     | "complete"
     | "warned"
-    | "failed";
+    | "failed"
+    | "cancelled";
 </script>
 
 <script lang="ts">
@@ -75,6 +76,12 @@
     forget: "Old backups could not be pruned",
   };
 
+  const cancelled: Record<BackupStatusType, string> = {
+    backup: "Your backup was cancelled",
+    restore: "Your restore was cancelled",
+    forget: "Pruning old backups was cancelled",
+  };
+
   const reassurance: Record<BackupStatusType, string> = {
     backup: "No changes were made to your existing backups.",
     restore: "Your backups are untouched — nothing was lost.",
@@ -106,6 +113,9 @@
       case "failed": {
         return failed[type];
       }
+      case "cancelled": {
+        return cancelled[type];
+      }
       case "complete": {
         return succeeded[type];
       }
@@ -121,7 +131,7 @@
   const titleColor = $derived(
     backupState === "complete"
       ? "success"
-      : backupState === "warned"
+      : backupState === "warned" || backupState === "cancelled"
         ? "warning"
         : backupState === "failed"
           ? "danger"
@@ -131,7 +141,8 @@
   const terminal = $derived(
     backupState === "complete" ||
       backupState === "warned" ||
-      backupState === "failed",
+      backupState === "failed" ||
+      backupState === "cancelled",
   );
 </script>
 

package/dist/components/backups/BackupStatus.svelte.d.ts

@@ -1,5 +1,5 @@
 export type BackupStatusType = "backup" | "restore" | "forget";
-export type BackupStatusState = "connecting" | "running" | "complete" | "warned" | "failed";
+export type BackupStatusState = "connecting" | "running" | "complete" | "warned" | "failed" | "cancelled";
 import type { Snippet } from "svelte";
 type Props = {
     title: string;

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

@@ -64,6 +64,9 @@
       case "failed": {
         return "failed";
       }
+      case "cancelled": {
+        return "cancelled";
+      }
       case "warn": {
         return "warned";
       }
@@ -109,6 +112,9 @@
       case "failed": {
         return `${titles[type].done} failed`;
       }
+      case "cancelled": {
+        return `${titles[type].done} cancelled`;
+      }
       default: {
         return titles[type].running;
       }

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

@@ -120,6 +120,14 @@
                   />
                   <Text>Backup finished</Text>
                   <Badge size="tiny" color="danger">Failed</Badge>
+                {:else if status === 'cancelled'}
+                  <Icon
+                    icon={mdiAlertCircleOutline}
+                    size="18"
+                    class="text-warning-500"
+                  />
+                  <Text>Backup cancelled</Text>
+                  <Badge size="tiny" color="warning">Cancelled</Badge>
                 {:else if isEnd}
                   <Icon
                     icon={mdiAlertCircleOutline}

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

@@ -15,7 +15,7 @@
   };
 
   const { run }: Props = $props();
-  const { ViewLog } = $derived(getRunActions(run));
+  const { ViewLog, DownloadLog } = $derived(getRunActions(run));
 
   const nouns = {
     restore: { name: "restore", running: "Restore", done: "Restored" },
@@ -38,6 +38,13 @@
           icon: mdiCloudOffOutline,
         } as const;
       }
+      case "cancelled": {
+        return {
+          title: `Cancelled ${noun.name}`,
+          color: "warning",
+          icon: mdiCloudOffOutline,
+        } as const;
+      }
       case "warn": {
         return {
           title: `${noun.done} with warnings`,
@@ -63,14 +70,14 @@
   });
 </script>
 
-<StackListItem title={status.title} color={status.color} actions={[ViewLog]}>
+<StackListItem title={status.title} color={status.color} actions={[ViewLog, DownloadLog]}>
   {#snippet icon()}
     <Icon icon={status.icon} />
   {/snippet}
 
   {#if run.status === "incomplete"}
     Started <RelativeTime time={run.start} />
-  {:else if run.status === "failed"}
+  {:else if run.status === "failed" || run.status === "cancelled"}
     Attempted {#if run.end}<RelativeTime time={run.end} />{/if}
   {:else}
     {noun.done} {#if run.end}<RelativeTime time={run.end} />{/if}

package/dist/components/dashboard/{Dashboard.svelte.d.ts → DashboardPage.svelte.d.ts}

@@ -3,6 +3,6 @@ type Props = {
     initialData?: RepositoryListResponseDto;
     onViewBackups?: () => void;
 };
-declare const Dashboard: import("svelte").Component<Props, {}, "">;
-type Dashboard = ReturnType<typeof Dashboard>;
-export default Dashboard;
+declare const DashboardPage: import("svelte").Component<Props, {}, "">;
+type DashboardPage = ReturnType<typeof DashboardPage>;
+export default DashboardPage;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import RepositoryRunHistoryPage from "../../backups/run-history/RepositoryRunHistoryPage.svelte";
+  import { Container } from "@immich/ui";
+  import ImmichConfiguredGate from "./ImmichConfiguredGate.svelte";
+
+  type Props = {
+    onUnconfigured: () => void;
+  };
+
+  const { onUnconfigured }: Props = $props();
+</script>
+
+<ImmichConfiguredGate {onUnconfigured}>
+  {#snippet children(repository)}
+    <Container size="medium" center>
+      <RepositoryRunHistoryPage {repository} />
+    </Container>
+  {/snippet}
+</ImmichConfiguredGate>

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

@@ -0,0 +1,6 @@
+type Props = {
+    onUnconfigured: () => void;
+};
+declare const ImmichBackupAttemptsPage: import("svelte").Component<Props, {}, "">;
+type ImmichBackupAttemptsPage = ReturnType<typeof ImmichBackupAttemptsPage>;
+export default ImmichBackupAttemptsPage;

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Container } from "@immich/ui";
+  import ImmichConfiguredGate from "./ImmichConfiguredGate.svelte";
+  import ImmichSettingsBackupContents from "./settings/ImmichSettingsBackupContents.svelte";
+  import ImmichSettingsBandwidth from "./settings/ImmichSettingsBandwidth.svelte";
+  import ImmichSettingsSchedule from "./settings/ImmichSettingsSchedule.svelte";
+  import ImmichSettingsStorage from "./settings/ImmichSettingsStorage.svelte";
+
+  type Props = {
+    onUnconfigured: () => void;
+  };
+
+  const { onUnconfigured }: Props = $props();
+</script>
+
+<ImmichConfiguredGate {onUnconfigured}>
+  {#snippet children()}
+    <Container size="large" center>
+      <ImmichSettingsBackupContents />
+      <ImmichSettingsSchedule />
+      <ImmichSettingsBandwidth />
+      <ImmichSettingsStorage />
+    </Container>
+  {/snippet}
+</ImmichConfiguredGate>

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

@@ -0,0 +1,6 @@
+type Props = {
+    onUnconfigured: () => void;
+};
+declare const ImmichBackupSettingsPage: import("svelte").Component<Props, {}, "">;
+type ImmichBackupSettingsPage = ReturnType<typeof ImmichBackupSettingsPage>;
+export default ImmichBackupSettingsPage;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import UpsellPage from "../../onboarding/upsell/UpsellPage.svelte";
-  import ImmichManageBackup from "./ImmichManageBackup.svelte";
+  import ImmichManageBackupPage from "./ImmichManageBackupPage.svelte";
   import ImmichOnboardingSetupFlow from "./ImmichOnboardingSetupFlow.svelte";
 
   type Question = {
@@ -13,9 +13,19 @@
     price: string;
     includedStorage: string;
     questions: Question[];
+    onConfigure: () => void;
+    onViewAttempts: () => void;
+    onViewSnapshots: () => void;
   };
 
-  const { price, includedStorage, questions }: Props = $props();
+  const {
+    price,
+    includedStorage,
+    questions,
+    onConfigure,
+    onViewAttempts,
+    onViewSnapshots,
+  }: Props = $props();
 </script>
 
 <ImmichOnboardingSetupFlow>
@@ -23,5 +33,5 @@
     <UpsellPage {price} {includedStorage} {questions} onGetStarted={onStart} />
   {/snippet}
 
-  <ImmichManageBackup />
+  <ImmichManageBackupPage {onConfigure} {onViewAttempts} {onViewSnapshots} />
 </ImmichOnboardingSetupFlow>

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

@@ -7,6 +7,9 @@ type Props = {
     price: string;
     includedStorage: string;
     questions: Question[];
+    onConfigure: () => void;
+    onViewAttempts: () => void;
+    onViewSnapshots: () => void;
 };
 declare const ImmichBackupsPage: import("svelte").Component<Props, {}, "">;
 type ImmichBackupsPage = ReturnType<typeof ImmichBackupsPage>;

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

@@ -7,6 +7,7 @@
   } from "../../../services/immich.integration.service";
   import { HStack, Icon, LoadingSpinner, Text } from "@immich/ui";
   import {
+    mdiAlertCircleOutline,
     mdiChevronRight,
     mdiCloudAlertOutline,
     mdiCloudCheckVariantOutline,
@@ -29,6 +30,10 @@
   const configured = $derived(status.kind !== "unconfigured");
 
   const appearance = $derived.by(() => {
+    if (backup.needsAttention) {
+      return { color: "warning", icon: mdiAlertCircleOutline } as const;
+    }
+
     switch (status.kind) {
       case "loading": {
         return { color: "secondary", icon: undefined } as const;
@@ -44,7 +49,8 @@
       case "warn": {
         return { color: "warning", icon: mdiCloudCheckVariantOutline } as const;
       }
-      case "incomplete": {
+      case "incomplete":
+      case "cancelled": {
         return { color: "warning", icon: mdiCloudAlertOutline } as const;
       }
       case "paused": {
@@ -84,7 +90,9 @@
   {/if}
 
   <Text size="tiny" class="flex-1 leading-tight">
-    {#if status.kind === "loading"}
+    {#if backup.needsAttention}
+      Needs attention
+    {:else if status.kind === "loading"}
       Checking backup status
     {:else if status.kind === "offline"}
       Backup service is offline
@@ -98,6 +106,8 @@
       Backed up with warnings <RelativeTime time={status.lastBackup} />
     {:else if status.kind === "incomplete"}
       Backup did not complete <RelativeTime time={status.lastBackup} />
+    {:else if status.kind === "cancelled"}
+      Backup was cancelled <RelativeTime time={status.lastBackup} />
     {:else if status.kind === "paused"}
       Backups paused
     {:else if status.kind === "unconfigured"}

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import OnEvents from "../../util/OnEvents.svelte";
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import {
+    useImmichBackupStatus,
+    useImmichBackupStatusEventHandler,
+  } from "../../../services/immich.integration.service";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children: Snippet<[LocalRepositoryDto]>;
+    onUnconfigured: () => void;
+  };
+
+  const { children, onUnconfigured }: Props = $props();
+
+  const backup = useImmichBackupStatus();
+
+  const { repository, status } = $derived(backup);
+
+  $effect(() => {
+    if (status.kind === "unconfigured") {
+      onUnconfigured();
+    }
+  });
+</script>
+
+<OnEvents {...useImmichBackupStatusEventHandler()} />
+
+{#if repository}
+  {@render children(repository)}
+{/if}

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

@@ -0,0 +1,9 @@
+import type { LocalRepositoryDto } from "../../../fetch-client";
+import type { Snippet } from "svelte";
+type Props = {
+    children: Snippet<[LocalRepositoryDto]>;
+    onUnconfigured: () => void;
+};
+declare const ImmichConfiguredGate: import("svelte").Component<Props, {}, "">;
+type ImmichConfiguredGate = ReturnType<typeof ImmichConfiguredGate>;
+export default ImmichConfiguredGate;

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import {
+    useConfigureImmichDatabaseDump,
+    useIgnoreImmichDatabaseDumpWarning,
+    useImmichBackupStatus,
+  } from "../../../services/immich.integration.service";
+  import { Alert, Button, HStack, Stack, Text } from "@immich/ui";
+
+  const backup = useImmichBackupStatus();
+  const configure = useConfigureImmichDatabaseDump();
+  const ignore = useIgnoreImmichDatabaseDumpWarning();
+</script>
+
+{#if backup.needsAttention}
+  <Alert color="warning" title="Immich database backups are still enabled">
+    <Stack gap={3}>
+      <Text size="small">
+        FUTO Backups already creates the same database backups as Immich.
+        <br />
+        Most users should select "use FUTO Backups only".
+      </Text>
+      <HStack gap={2}>
+        <Button
+          size="small"
+          color="primary"
+          loading={configure.isPending}
+          onclick={() => configure.mutate({ enabled: false })}
+        >
+          Use FUTO Backups only
+        </Button>
+        <Button
+          size="small"
+          variant="ghost"
+          loading={ignore.isPending}
+          onclick={() => ignore.mutate()}
+        >
+          Ignore
+        </Button>
+      </HStack>
+    </Stack>
+  </Alert>
+{/if}

package/dist/components/integrations/immich/{ImmichBackupSettings.svelte.d.ts → ImmichDatabaseDumpAlert.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ImmichBackupSettings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ImmichDatabaseDumpAlert: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type ImmichBackupSettings = InstanceType<typeof ImmichBackupSettings>;
-export default ImmichBackupSettings;
+type ImmichDatabaseDumpAlert = InstanceType<typeof ImmichDatabaseDumpAlert>;
+export default ImmichDatabaseDumpAlert;

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

@@ -5,6 +5,7 @@
   import type { LocalRepositoryDto, ScheduleDto } from "../../../fetch-client";
   import type { ImmichBackupStatus } from "../../../services/immich.integration.service";
   import { handleCreateBackup } from "../../../services/repository.service";
+  import { handleCancelTask } from "../../../services/task.service";
   import { Button, FormatBytes, Icon } from "@immich/ui";
   import {
     mdiAlert,
@@ -13,6 +14,7 @@
     mdiCloudUploadOutline,
     mdiInformation,
     mdiProgressUpload,
+    mdiStopCircleOutline,
   } from "@mdi/js";
   import cronstrue from "cronstrue";
 
@@ -37,7 +39,8 @@
       case "warn": {
         return { color: "warning", icon: mdiAlert } as const;
       }
-      case "incomplete": {
+      case "incomplete":
+      case "cancelled": {
         return { color: "warning", icon: mdiAlert } as const;
       }
       case "complete": {
@@ -67,15 +70,28 @@
     </span>
 
     {#snippet trailing()}
-      <Button
-        variant="ghost"
-        size="small"
-        class="whitespace-nowrap"
-        leadingIcon={mdiCloudUploadOutline}
-        onclick={() => void handleCreateBackup(repository.id)}
-      >
-        Back up now
-      </Button>
+      {#if status.kind === "running"}
+        <Button
+          variant="ghost"
+          size="small"
+          color="danger"
+          class="whitespace-nowrap"
+          leadingIcon={mdiStopCircleOutline}
+          onclick={() => void handleCancelTask(repository.id)}
+        >
+          Cancel backup
+        </Button>
+      {:else}
+        <Button
+          variant="ghost"
+          size="small"
+          class="whitespace-nowrap"
+          leadingIcon={mdiCloudUploadOutline}
+          onclick={() => void handleCreateBackup(repository.id)}
+        >
+          Back up now
+        </Button>
+      {/if}
     {/snippet}
 
     {#snippet footer()}
@@ -93,6 +109,8 @@
         Last backup finished with warnings <RelativeTime time={status.lastBackup} />
       {:else if status.kind === "incomplete"}
         Last backup did not complete <RelativeTime time={status.lastBackup} />
+      {:else if status.kind === "cancelled"}
+        Last backup was cancelled <RelativeTime time={status.lastBackup} />
       {:else if status.kind === "complete"}
         Last backup successful <RelativeTime time={status.lastBackup} />
       {:else if status.kind === "paused"}

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

@@ -0,0 +1,52 @@
+<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,
+    useImmichBackupStatus,
+    useImmichBackupStatusEventHandler,
+  } from "../../../services/immich.integration.service";
+  import { Container, Stack } from "@immich/ui";
+  import ImmichDatabaseDumpAlert from "./ImmichDatabaseDumpAlert.svelte";
+  import ImmichManageBackupOverview from "./ImmichManageBackupOverview.svelte";
+
+  type Props = {
+    onConfigure: () => void;
+    onViewAttempts: () => void;
+    onViewSnapshots: () => void;
+  };
+
+  const { onConfigure, onViewAttempts, onViewSnapshots }: Props = $props();
+
+  const backup = useImmichBackupStatus();
+
+  const { repository, schedule } = $derived(backup);
+
+  const { ViewRecoveryKey, Configure } = $derived(
+    getBackupPageActions(repository?.id, onConfigure),
+  );
+</script>
+
+<OnEvents {...useImmichBackupStatusEventHandler()} />
+
+<PageLayout title="Backups" actions={[ViewRecoveryKey, Configure]}>
+  <Container size="medium" center>
+    {#if repository && schedule}
+      <Stack class="mt-4" gap={6}>
+        <ImmichDatabaseDumpAlert />
+        <ImmichManageBackupOverview {repository} {schedule} status={backup.status} />
+        <BackendsList {repository} />
+        <RepositoryRunHistory {repository} onViewAll={onViewAttempts} />
+        <RepositorySnapshotsList
+          {repository}
+          immich
+          limit={5}
+          onViewAll={onViewSnapshots}
+        />
+      </Stack>
+    {/if}
+  </Container>
+</PageLayout>

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

@@ -0,0 +1,8 @@
+type Props = {
+    onConfigure: () => void;
+    onViewAttempts: () => void;
+    onViewSnapshots: () => void;
+};
+declare const ImmichManageBackupPage: import("svelte").Component<Props, {}, "">;
+type ImmichManageBackupPage = ReturnType<typeof ImmichManageBackupPage>;
+export default ImmichManageBackupPage;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import RepositorySnapshotsPage from "../../backups/snapshots-list/RepositorySnapshotsPage.svelte";
+  import { Container } from "@immich/ui";
+  import ImmichConfiguredGate from "./ImmichConfiguredGate.svelte";
+
+  type Props = {
+    onUnconfigured: () => void;
+  };
+
+  const { onUnconfigured }: Props = $props();
+</script>
+
+<ImmichConfiguredGate {onUnconfigured}>
+  {#snippet children(repository)}
+    <Container size="medium" center>
+      <RepositorySnapshotsPage {repository} immich />
+    </Container>
+  {/snippet}
+</ImmichConfiguredGate>

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

@@ -0,0 +1,6 @@
+type Props = {
+    onUnconfigured: () => void;
+};
+declare const ImmichSnapshotsPage: import("svelte").Component<Props, {}, "">;
+type ImmichSnapshotsPage = ReturnType<typeof ImmichSnapshotsPage>;
+export default ImmichSnapshotsPage;