@futo-org/backups-orchestrator-ui 0.40.2 → 0.42.0

package/dist/components/backups/BackupItem.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { LocalRepositoryDto } from "../../fetch-client";
+  import { getProvider } from "../../providers";
   import { getRepositoryActions } from "../../services/repository.service";
   import { getBackupOutcome } from "../../utils/backup-status";
   import { Badge, FormatBytes, Icon } from "@immich/ui";
@@ -9,10 +10,11 @@
 
   type Props = {
     repository: LocalRepositoryDto;
-    local?: boolean
   };
 
-  const { repository, local }: Props = $props();
+  const { repository }: Props = $props();
+
+  const local = getProvider().api === "orchestrator";
 
   const BackendNames = {
     yucca: "FUTO Backups",

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

@@ -1,7 +1,6 @@
 import type { LocalRepositoryDto } from "../../fetch-client";
 type Props = {
     repository: LocalRepositoryDto;
-    local?: boolean;
 };
 declare const BackupItem: import("svelte").Component<Props, {}, "">;
 type BackupItem = ReturnType<typeof BackupItem>;

package/dist/components/backups/BackupsList.svelte

@@ -4,6 +4,7 @@
     useRepositories,
     useRepositoryEventHandler,
   } from "../../services/repository.service";
+  import { getProvider } from "../../providers";
   import { Button, HStack, modalManager, Stack } from "@immich/ui";
   import StackList from "../ui/StackList.svelte";
   import StackListPlaceholder from "../ui/StackListPlaceholder.svelte";
@@ -13,11 +14,12 @@
   import CreateRepositoryModal from "./dialogs/CreateRepositoryModal.svelte";
 
   type Props = {
-    local?: boolean;
     initialData?: RepositoryListResponseDto;
   };
 
-  const { local, initialData }: Props = $props();
+  const { initialData }: Props = $props();
+
+  const local = getProvider().api === "orchestrator";
 
   // svelte-ignore state_referenced_locally
   const query = useRepositories(initialData?.repositories);
@@ -46,7 +48,7 @@
 
         <Suspense {query}>
           {#each localRepositories as repository (repository.id)}
-            <BackupItem {repository} {local} />
+            <BackupItem {repository} />
           {/each}
 
           {#if localRepositories.length === 0}

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

@@ -1,6 +1,5 @@
 import type { RepositoryListResponseDto } from "../../fetch-client";
 type Props = {
-    local?: boolean;
     initialData?: RepositoryListResponseDto;
 };
 declare const BackupsList: import("svelte").Component<Props, {}, "">;

package/dist/components/dashboard/Dashboard.svelte

@@ -4,6 +4,7 @@
     useRepositories,
     useRepositoryEventHandler,
   } from "../../services/repository.service";
+  import { getProvider } from "../../providers";
   import { getReadableErrorMessage } from "../../utils/handle-error";
   import { Alert, LoadingSpinner, Stack } from "@immich/ui";
   import OnEvents from "../util/OnEvents.svelte";
@@ -16,12 +17,13 @@
   import DashboardTotalStored from "./DashboardTotalStored.svelte";
 
   type Props = {
-    local?: boolean;
     initialData?: RepositoryListResponseDto;
     onViewBackups?: () => void;
   };
 
-  const { local, initialData, onViewBackups }: Props = $props();
+  const { initialData, onViewBackups }: Props = $props();
+
+  const local = getProvider().api === "orchestrator";
 
   // svelte-ignore state_referenced_locally
   const query = useRepositories(initialData?.repositories);
@@ -38,11 +40,7 @@
 {:else if query.isSuccess}
   <Stack gap={6}>
     <Stack direction="row" gap={4}>
-      <DashboardBackupHealth
-        repositories={query.data}
-        {local}
-        {onViewBackups}
-      />
+      <DashboardBackupHealth repositories={query.data} {onViewBackups} />
 
       {#if !local}
         <DashboardInstall />
@@ -54,6 +52,6 @@
       <DashboardTotalStored repositories={query.data} />
       <DashboardCurrentUsage />
     </Stack>
-    <DashboardRecentBackups repositories={query.data} {local} />
+    <DashboardRecentBackups repositories={query.data} />
   </Stack>
 {/if}

package/dist/components/dashboard/Dashboard.svelte.d.ts

@@ -1,6 +1,5 @@
 import type { RepositoryListResponseDto } from "../../fetch-client";
 type Props = {
-    local?: boolean;
     initialData?: RepositoryListResponseDto;
     onViewBackups?: () => void;
 };

package/dist/components/dashboard/DashboardBackupHealth.svelte

@@ -8,16 +8,18 @@
     CardTitle,
     HStack,
   } from "@immich/ui";
+  import { getProvider } from "../../providers";
   import { getBackupOutcome } from "../../utils/backup-status";
   import VisualisationSegmentedBar from "../ui/VisualisationSegmentedBar.svelte";
 
   type Props = {
     repositories: LocalRepositoryDto[];
-    local?: boolean;
     onViewBackups?: () => void;
   };
 
-  const { repositories, local, onViewBackups }: Props = $props();
+  const { repositories, onViewBackups }: Props = $props();
+
+  const local = getProvider().api === "orchestrator";
 
   const total = $derived(repositories.length);
 

package/dist/components/dashboard/DashboardBackupHealth.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { LocalRepositoryDto } from "../../fetch-client";
 type Props = {
     repositories: LocalRepositoryDto[];
-    local?: boolean;
     onViewBackups?: () => void;
 };
 declare const DashboardBackupHealth: import("svelte").Component<Props, {}, "">;

package/dist/components/dashboard/DashboardInstall.svelte

@@ -7,7 +7,7 @@
     <CardTitle>Install FUTO Backups</CardTitle>
   </CardHeader>
   <CardBody>
-    <Button variant="outline" size="small">
+    <Button href="https://my.immich.app/link?target=backups" variant="outline" size="small">
       <Logo variant="icon" size="tiny" />
       Setup on Immich
     </Button>

package/dist/components/dashboard/DashboardRecentBackups.svelte

@@ -6,6 +6,7 @@
     mdiCloudOffOutline,
     mdiHistory,
   } from "@mdi/js";
+  import { getProvider } from "../../providers";
   import { getBackupOutcome } from "../../utils/backup-status";
   import MetricsHistoryModal from "../backups/metrics-history/MetricsHistoryModal.svelte";
   import StackList from "../ui/StackList.svelte";
@@ -15,10 +16,11 @@
 
   type Props = {
     repositories: LocalRepositoryDto[];
-    local?: boolean;
   };
 
-  const { repositories, local }: Props = $props();
+  const { repositories }: Props = $props();
+
+  const local = getProvider().api === "orchestrator";
 
   const recentAttempts = $derived(
     repositories

package/dist/components/dashboard/DashboardRecentBackups.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { LocalRepositoryDto } from "../../fetch-client";
 type Props = {
     repositories: LocalRepositoryDto[];
-    local?: boolean;
 };
 declare const DashboardRecentBackups: import("svelte").Component<Props, {}, "">;
 type DashboardRecentBackups = ReturnType<typeof DashboardRecentBackups>;

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

@@ -2,23 +2,10 @@
   import OnEvents from "../../util/OnEvents.svelte";
   import RelativeTime from "../../util/RelativeTime.svelte";
   import {
-    useIntegrationEventHandler,
-    useIntegrations,
-  } from "../../../services/integrations.service";
-  import {
-    useRepositories,
-    useRepositoryEventHandler,
-  } from "../../../services/repository.service";
-  import {
-    useRunEventHandler,
-    useRunHistory,
-  } from "../../../services/runHistory.service";
-  import {
-    useScheduleEventHandler,
-    useSchedules,
-  } from "../../../services/schedule.service";
-  import { getBackupOutcome } from "../../../utils/backup-status";
-  import { HStack, Icon, Text } from "@immich/ui";
+    useImmichBackupStatus,
+    useImmichBackupStatusEventHandler,
+  } from "../../../services/immich.integration.service";
+  import { HStack, Icon, LoadingSpinner, Text } from "@immich/ui";
   import {
     mdiChevronRight,
     mdiCloudAlertOutline,
@@ -27,7 +14,7 @@
     mdiCloudUploadOutline,
   } from "@mdi/js";
 
-  type Color = "primary" | "success" | "warning" | "danger";
+  type Color = "primary" | "secondary" | "success" | "warning" | "danger";
 
   type Props = {
     href: string;
@@ -35,136 +22,97 @@
 
   const { href }: Props = $props();
 
-  // TODO: this should probably be condensed into one big request - since this loads on every initial Immich page load (in the future)
-
-  const integrations = useIntegrations();
-  const repositories = useRepositories();
-  const schedules = useSchedules();
-
-  const { onIntegrationUpdate } = useIntegrationEventHandler();
-  const { onRepositoryCreate, onRepositoryUpdate, onRepositoryDelete } =
-    useRepositoryEventHandler();
-  const { onScheduleCreate, onScheduleUpdate, onScheduleDelete } =
-    useScheduleEventHandler();
-  const { onRunCreate, onRunUpdate } = useRunEventHandler();
-
-  const integration = $derived(integrations.data?.immichIntegration);
-
-  const repository = $derived(
-    integration
-      ? repositories.data?.find((entry) => entry.id === integration.id)
-      : undefined,
-  );
-
-  const runHistory = useRunHistory(() => repository?.id);
-
-  const latestBackupRun = $derived(
-    runHistory.data?.find(
-      (run) => run.type === "backup" || run.type === "schedule",
-    ),
-  );
-
-  const paused = $derived(
-    Boolean(
-      integration &&
-      schedules.data?.find((entry) => entry.id === integration.scheduleId)
-        ?.paused,
-    ),
-  );
-
-  const lastBackup = $derived(repository?.metrics.lastBackup ?? undefined);
-
-  const outcome = $derived(getBackupOutcome(repository?.metrics));
-
-  const loading = $derived(
-    integrations.isLoading || repositories.isLoading || schedules.isLoading,
-  );
-
-  const configured = $derived(Boolean(repository));
-  const running = $derived(latestBackupRun?.status === "incomplete");
-
-  const status = $derived.by(() => {
-    if (running) {
-      return { color: "primary", icon: mdiCloudUploadOutline } as const;
-    }
-
-    if (outcome === "failed") {
-      return { color: "danger", icon: mdiCloudOffOutline } as const;
-    }
-
-    if (outcome === "warn") {
-      return { color: "warning", icon: mdiCloudCheckVariantOutline } as const;
-    }
-
-    if (paused) {
-      return { color: "warning", icon: mdiCloudAlertOutline } as const;
+  const backup = useImmichBackupStatus();
+
+  const { status } = $derived(backup);
+
+  const configured = $derived(status.kind !== "unconfigured");
+
+  const appearance = $derived.by(() => {
+    switch (status.kind) {
+      case "loading": {
+        return { color: "secondary", icon: undefined } as const;
+      }
+      case "running": {
+        return { color: "primary", icon: mdiCloudUploadOutline } as const;
+      }
+      case "offline":
+      case "missing":
+      case "failed": {
+        return { color: "danger", icon: mdiCloudOffOutline } as const;
+      }
+      case "warn": {
+        return { color: "warning", icon: mdiCloudCheckVariantOutline } as const;
+      }
+      case "paused": {
+        return { color: "warning", icon: mdiCloudAlertOutline } as const;
+      }
+      case "unconfigured":
+      case "never": {
+        return { color: "warning", icon: mdiCloudOffOutline } as const;
+      }
+      case "complete": {
+        return { color: "success", icon: mdiCloudCheckVariantOutline } as const;
+      }
     }
-
-    if (!configured || !lastBackup) {
-      return { color: "warning", icon: mdiCloudOffOutline } as const;
-    }
-
-    return { color: "success", icon: mdiCloudCheckVariantOutline } as const;
   });
 
   const tints: Record<Color, string> = {
     primary: "bg-primary-50 text-primary",
+    secondary: "bg-subtle text-muted",
     success: "bg-success-50 text-success-700",
     warning: "bg-warning-50 text-warning-800",
     danger: "bg-danger-50 text-danger-700",
   };
 </script>
 
-<OnEvents
-  {onIntegrationUpdate}
-  {onRepositoryCreate}
-  {onRepositoryUpdate}
-  {onRepositoryDelete}
-  {onScheduleCreate}
-  {onScheduleUpdate}
-  {onScheduleDelete}
-  {onRunCreate}
-  {onRunUpdate}
-/>
-
-{#if !loading}
-  <a
-    {href}
-    class="flex w-full cursor-pointer items-center gap-2 px-3 py-3 text-start text-sm {tints[
-      status.color
-    ]}"
-  >
-    <Icon color={status.color} icon={status.icon} size="1.25em" class="shrink-0" />
-
-    <Text size="tiny" color={status.color} class="flex-1 truncate">
-      {#if running}
-        Backing up now
-      {:else if outcome === "failed"}
-        Backup failed
-      {:else if outcome === "warn" && lastBackup}
-        Backed up with warnings <RelativeTime time={lastBackup} />
-      {:else if paused}
-        Backups paused
-      {:else if !configured}
-        Not backed up
-      {:else if lastBackup}
-        Last backup <RelativeTime time={lastBackup} />
-      {:else}
-        Finish setting up backups
-      {/if}
-    </Text>
-
-    <HStack gap={0}>
-      {#if !configured}
-        <Text size="tiny" color="primary" class="shrink-0">Set up</Text>
-      {/if}
-
-      <Icon
-        color={configured ? status.color : "primary5"}
-        icon={mdiChevronRight}
-        size="1.25em"
-        class="shrink-0"
-      />
-    </HStack>
-  </a>
-{/if}
+<OnEvents {...useImmichBackupStatusEventHandler()} />
+
+<a
+  {href}
+  class="flex w-full cursor-pointer items-center gap-2 px-3 py-3 text-start text-sm {tints[
+    appearance.color
+  ]}"
+>
+  {#if appearance.icon}
+    <Icon icon={appearance.icon} size="1.25em" class="shrink-0" />
+  {:else}
+    <LoadingSpinner size="tiny" class="shrink-0" />
+  {/if}
+
+  <Text size="tiny" class="flex-1 leading-tight">
+    {#if status.kind === "loading"}
+      Checking backup status
+    {:else if status.kind === "offline"}
+      Backup service is offline
+    {:else if status.kind === "missing"}
+      Backup missing on service
+    {:else if status.kind === "running"}
+      Backing up now
+    {:else if status.kind === "failed"}
+      Backup failed
+    {:else if status.kind === "warn"}
+      Backed up with warnings <RelativeTime time={status.lastBackup} />
+    {:else if status.kind === "paused"}
+      Backups paused
+    {:else if status.kind === "unconfigured"}
+      Not backed up
+    {:else if status.kind === "complete"}
+      Last backup <RelativeTime time={status.lastBackup} />
+    {:else}
+      Finish setting up backups
+    {/if}
+  </Text>
+
+  <HStack gap={0}>
+    {#if !configured}
+      <Text size="tiny" color="primary" class="shrink-0">Set up</Text>
+    {/if}
+
+    <Icon
+      icon={mdiChevronRight}
+      size="1.25em"
+      class={configured ? "shrink-0" : "shrink-0 text-primary"}
+    />
+  </HStack>
+</a>

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

@@ -4,52 +4,20 @@
   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";
+    getBackupPageActions,
+    useImmichBackupStatus,
+    useImmichBackupStatusEventHandler,
+  } from "../../../services/immich.integration.service";
   import RepositoryRunHistoryPage from "../../backups/run-history/RepositoryRunHistoryPage.svelte";
   import RepositorySnapshotsPage from "../../backups/snapshots-list/RepositorySnapshotsPage.svelte";
   import ImmichBackupSettings from "./ImmichBackupSettings.svelte";
   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 backup = useImmichBackupStatus();
 
-  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 { repository, schedule } = $derived(backup);
 
   let view = $state<"overview" | "attempts" | "snapshots" | "settings">(
     "overview",
@@ -60,15 +28,7 @@
   );
 </script>
 
-<OnEvents
-  {onScheduleCreate}
-  {onScheduleUpdate}
-  {onScheduleDelete}
-  {onRepositoryCreate}
-  {onRepositoryUpdate}
-  {onRepositoryDelete}
-  {onIntegrationUpdate}
-/>
+<OnEvents {...useImmichBackupStatusEventHandler()} />
 
 {#if view === "attempts" && repository}
   <PageLayout title="Backup attempts" onBack={() => (view = "overview")}>
@@ -97,7 +57,7 @@
     <Container size="medium" center>
       {#if repository && schedule}
         <Stack class="mt-4" gap={6}>
-          <ImmichManageBackupOverview {repository} {schedule} />
+          <ImmichManageBackupOverview {repository} {schedule} status={backup.status} />
           <BackendsList {repository} />
           <RepositoryRunHistory
             {repository}

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

@@ -3,8 +3,8 @@
   import StackListItem from "../../ui/StackListItem.svelte";
   import RelativeTime from "../../util/RelativeTime.svelte";
   import type { LocalRepositoryDto, ScheduleDto } from "../../../fetch-client";
+  import type { ImmichBackupStatus } from "../../../services/immich.integration.service";
   import { handleCreateBackup } from "../../../services/repository.service";
-  import { getBackupOutcome } from "../../../utils/backup-status";
   import { Button, FormatBytes, Icon } from "@immich/ui";
   import {
     mdiAlert,
@@ -12,39 +12,44 @@
     mdiCheck,
     mdiCloudUploadOutline,
     mdiInformation,
+    mdiProgressUpload,
   } from "@mdi/js";
   import cronstrue from "cronstrue";
 
   type Props = {
     repository: LocalRepositoryDto;
     schedule: ScheduleDto;
+    status: ImmichBackupStatus;
   };
 
-  const { repository, schedule }: Props = $props();
+  const { repository, schedule, status }: Props = $props();
 
-  const outcome = $derived(getBackupOutcome(repository.metrics));
-
-  const status = $derived.by(() => {
-    switch (outcome) {
-      case "never": {
-        return { color: "warning", icon: mdiInformation } as const;
+  const appearance = $derived.by(() => {
+    switch (status.kind) {
+      case "running": {
+        return { color: "primary", icon: mdiProgressUpload } as const;
       }
+      case "offline":
+      case "missing":
       case "failed": {
         return { color: "danger", icon: mdiAlert } as const;
       }
       case "warn": {
         return { color: "warning", icon: mdiAlert } as const;
       }
-      default: {
+      case "complete": {
         return { color: "success", icon: mdiCheck } as const;
       }
+      default: {
+        return { color: "warning", icon: mdiInformation } as const;
+      }
     }
   });
 
 </script>
 
 <StackList>
-  <StackListItem title="Your library" footerColor={status.color}>
+  <StackListItem title="Your library" footerColor={appearance.color}>
     {#snippet icon()}
       <Icon icon={mdiArchiveOutline} />
     {/snippet}
@@ -71,20 +76,24 @@
     {/snippet}
 
     {#snippet footer()}
-      <Icon icon={status.icon} />
+      <Icon icon={appearance.icon} />
 
-      {#if outcome === "never"}
-        Backup is yet to run.
-      {:else if outcome === "failed"}
-        Last backup failed <RelativeTime time={repository.metrics.lastBackup!} />
-      {:else if outcome === "warn"}
-        Last backup finished with warnings <RelativeTime
-          time={repository.metrics.lastBackup!}
-        />
+      {#if status.kind === "offline"}
+        Backup storage is offline.
+      {:else if status.kind === "missing"}
+        Backup is missing on the service.
+      {:else if status.kind === "running"}
+        Backup in progress
+      {:else if status.kind === "failed"}
+        Last backup failed <RelativeTime time={status.lastBackup} />
+      {:else if status.kind === "warn"}
+        Last backup finished with warnings <RelativeTime time={status.lastBackup} />
+      {:else if status.kind === "complete"}
+        Last backup successful <RelativeTime time={status.lastBackup} />
+      {:else if status.kind === "paused"}
+        Backups paused
       {:else}
-        Last backup successful <RelativeTime
-          time={repository.metrics.lastBackup!}
-        />
+        Backup is yet to run.
       {/if}
     {/snippet}
   </StackListItem>

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

@@ -1,7 +1,9 @@
 import type { LocalRepositoryDto, ScheduleDto } from "../../../fetch-client";
+import type { ImmichBackupStatus } from "../../../services/immich.integration.service";
 type Props = {
     repository: LocalRepositoryDto;
     schedule: ScheduleDto;
+    status: ImmichBackupStatus;
 };
 declare const ImmichManageBackupOverview: import("svelte").Component<Props, {}, "">;
 type ImmichManageBackupOverview = ReturnType<typeof ImmichManageBackupOverview>;