@futo-org/backups-orchestrator-ui 0.1.71

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import { Modal, ModalBody } from "@immich/ui";
+  import RepositoryRunHistory from "./RepositoryRunHistory.svelte";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+    onClose: () => void;
+  };
+
+  let { repository, onClose }: Props = $props();
+</script>
+
+<Modal title={`Run History for ${repository.name}`} size="giant" {onClose}>
+  <ModalBody>
+    <RepositoryRunHistory {repository} />
+  </ModalBody>
+</Modal>

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

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

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import StackList from "../../ui/StackList.svelte";
+  import OnEvents from "../../util/OnEvents.svelte";
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import { options } from "../../../options";
+  import { handlePruneRepository } from "../../../services/repository.service";
+  import {
+    useSnapshotEventHandler,
+    useSnapshots,
+  } from "../../../services/snapshot.service";
+  import { Button, HStack, Text } from "@immich/ui";
+  import RepositorySnapshotsListItem from "./RepositorySnapshotsListItem.svelte";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+  };
+
+  let { repository }: Props = $props();
+
+  const { advanced } = options;
+  // svelte-ignore state_referenced_locally
+  const query = useSnapshots(repository.id);
+  const { onRunUpdate } = useSnapshotEventHandler();
+</script>
+
+<OnEvents {onRunUpdate} />
+
+<StackList {query}>
+  {#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)}
+        <RepositorySnapshotsListItem repositoryId={repository.id} {snapshot} />
+      {/each}
+    {/if}
+  {/snippet}
+</StackList>
+
+{#if $advanced}
+  <HStack>
+    <Button
+      size="small"
+      variant="outline"
+      onclick={() => handlePruneRepository(repository.id)}
+      >Clean up old backups now</Button
+    >
+  </HStack>
+{/if}

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

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

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import StackListItem from "../../ui/StackListItem.svelte";
+  import RelativeTime from "../../util/RelativeTime.svelte";
+  import type { SnapshotDto } from "../../../fetch-client";
+  import { getSnapshotActions } from "../../../services/snapshot.service";
+  import { FormatBytes, HStack, Text } from "@immich/ui";
+
+  type Props = {
+    repositoryId: string;
+    snapshot: SnapshotDto;
+  };
+
+  const { repositoryId, snapshot }: Props = $props();
+  const { Restore, Delete } = $derived(
+    getSnapshotActions(repositoryId, snapshot),
+  );
+</script>
+
+<StackListItem actions={[Restore, Delete]}>
+  <HStack>
+    <RelativeTime time={snapshot.time} />
+
+    {#if snapshot.summary}
+      <Text color="secondary">
+        &middot; {snapshot.summary.totalFiles.toLocaleString()} files &middot;
+        <FormatBytes bytes={snapshot.summary.totalBytes} />
+      </Text>
+
+      {#if snapshot.summary.filesNew > 0 || snapshot.summary.filesChanged > 0}
+        <Text color="muted" size="tiny">
+          {#if snapshot.summary.filesNew > 0}
+            &middot; {snapshot.summary.filesNew.toLocaleString()} new
+          {/if}
+          {#if snapshot.summary.filesChanged > 0}
+            &middot; {snapshot.summary.filesChanged.toLocaleString()} changed
+          {/if}
+        </Text>
+      {/if}
+    {/if}
+  </HStack>
+</StackListItem>

package/dist/components/backups/snapshots-list/RepositorySnapshotsListItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SnapshotDto } from "../../../fetch-client";
+type Props = {
+    repositoryId: string;
+    snapshot: SnapshotDto;
+};
+declare const RepositorySnapshotsListItem: import("svelte").Component<Props, {}, "">;
+type RepositorySnapshotsListItem = ReturnType<typeof RepositorySnapshotsListItem>;
+export default RepositorySnapshotsListItem;

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import { Modal, ModalBody } from "@immich/ui";
+  import RepositorySnapshotsList from "./RepositorySnapshotsList.svelte";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+    onClose: () => void;
+  };
+
+  let { repository, onClose }: Props = $props();
+</script>
+
+<Modal title={`Snapshots for ${repository.name}`} size="giant" {onClose}>
+  <ModalBody>
+    <RepositorySnapshotsList {repository} />
+  </ModalBody>
+</Modal>

package/dist/components/backups/snapshots-list/SnapshotsListModal.svelte.d.ts

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

package/dist/components/dashboard/Dashboard.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { RepositoryListResponseDto } from "../../fetch-client";
+  import {
+    useRepositories,
+    useRepositoryEventHandler,
+  } from "../../services/repository.service";
+  import { getReadableErrorMessage } from "../../utils/handle-error";
+  import { Alert, LoadingSpinner, Stack } from "@immich/ui";
+  import OnEvents from "../util/OnEvents.svelte";
+  import DashboardAvgBackupTime from "./DashboardAvgBackupTime.svelte";
+  import DashboardBackupHealth from "./DashboardBackupHealth.svelte";
+  import DashboardCurrentUsage from "./DashboardCurrentUsage.svelte";
+  import DashboardDailyBackupTime from "./DashboardDailyBackupTime.svelte";
+  import DashboardInstall from "./DashboardInstall.svelte";
+  import DashboardRecentBackups from "./DashboardRecentBackups.svelte";
+  import DashboardTotalStored from "./DashboardTotalStored.svelte";
+
+  type Props = {
+    local?: boolean;
+    initialData?: RepositoryListResponseDto;
+    onNavigate?: (route: string) => void;
+  };
+
+  const { local, initialData, onNavigate }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const query = useRepositories(initialData?.repositories);
+  const { onRepositoryCreate, onRepositoryUpdate } =
+    useRepositoryEventHandler();
+</script>
+
+<OnEvents {onRepositoryCreate} {onRepositoryUpdate} />
+
+{#if query.isLoading}
+  <LoadingSpinner />
+{:else if query.isError}
+  <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+{:else if query.isSuccess}
+  <Stack>
+    <Stack direction="row">
+      <DashboardBackupHealth repositories={query.data} {local} {onNavigate} />
+      <DashboardInstall />
+    </Stack>
+    <Stack direction="row">
+      <DashboardAvgBackupTime repositories={query.data} />
+      <DashboardDailyBackupTime repositories={query.data} />
+      <DashboardTotalStored repositories={query.data} />
+      <DashboardCurrentUsage />
+    </Stack>
+    <DashboardRecentBackups repositories={query.data} {local} />
+  </Stack>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { RepositoryListResponseDto } from "../../fetch-client";
+type Props = {
+    local?: boolean;
+    initialData?: RepositoryListResponseDto;
+    onNavigate?: (route: string) => void;
+};
+declare const Dashboard: import("svelte").Component<Props, {}, "">;
+type Dashboard = ReturnType<typeof Dashboard>;
+export default Dashboard;

package/dist/components/dashboard/DashboardAvgBackupTime.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../fetch-client";
+  import { formatDuration } from "../../utils/format";
+  import { Card, CardBody } from "@immich/ui";
+  import VisualisationGauge from "../ui/VisualisationGauge.svelte";
+
+  type Props = {
+    repositories: LocalRepositoryDto[];
+  };
+
+  const { repositories }: Props = $props();
+
+  const durations = $derived(
+    repositories
+      .map((repo) => repo.metrics?.lastBackupDuration)
+      .filter((duration): duration is number => duration != null),
+  );
+
+  const avgBackupTime = $derived(
+    durations.length > 0
+      ? durations.reduce((sum, duration) => sum + duration, 0) /
+          durations.length
+      : undefined,
+  );
+</script>
+
+<Card>
+  <CardBody>
+    <VisualisationGauge
+      title="Avg. Backup Time"
+      content={avgBackupTime != null ? formatDuration(avgBackupTime) : "—"}
+    />
+  </CardBody>
+</Card>

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

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

package/dist/components/dashboard/DashboardBackupHealth.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../fetch-client";
+  import {
+    Button,
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    HStack,
+  } from "@immich/ui";
+  import VisualisationSegmentedBar from "../ui/VisualisationSegmentedBar.svelte";
+
+  type Props = {
+    repositories: LocalRepositoryDto[];
+    local?: boolean;
+    onNavigate?: (route: string) => void;
+  };
+
+  const { repositories, local, onNavigate }: Props = $props();
+
+  const total = $derived(repositories.length);
+
+  const status = $derived(
+    repositories.reduce(
+      (tally, repo) => {
+        if (local && !repo.backends?.primary.online) {
+          tally.offline++;
+        } else if (!repo.metrics?.lastBackup) {
+          tally.neverRun++;
+        } else if (
+          repo.metrics.lastBackup === repo.metrics.lastSuccessfulBackup
+        ) {
+          tally.success++;
+        } else {
+          tally.failed++;
+        }
+        return tally;
+      },
+      { success: 0, offline: 0, failed: 0, neverRun: 0 },
+    ),
+  );
+</script>
+
+<Card>
+  <CardHeader>
+    <HStack class="justify-between">
+      <CardTitle>Your Backups</CardTitle>
+      {#if onNavigate}
+        <Button
+          variant="outline"
+          size="tiny"
+          onclick={() => onNavigate("backups")}
+        >
+          View all
+        </Button>
+      {/if}
+    </HStack>
+  </CardHeader>
+  <CardBody>
+    <VisualisationSegmentedBar
+      title="Backup Health"
+      summary="{status.success} of {total} successful"
+      segments={[
+        {
+          value: status.success,
+          label: "Successful",
+          color: "var(--immich-ui-success-500)",
+          badge: "success",
+        },
+        {
+          value: status.offline,
+          label: "Offline",
+          color: "var(--immich-ui-warning-500)",
+          badge: "warning",
+        },
+        {
+          value: status.failed,
+          label: "Failed",
+          color: "var(--immich-ui-danger-500)",
+          badge: "danger",
+        },
+        {
+          value: status.neverRun,
+          label: "Never Run",
+          color: "var(--immich-ui-light-400)",
+          badge: "secondary",
+        },
+      ]}
+    />
+  </CardBody>
+</Card>

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

@@ -0,0 +1,9 @@
+import type { LocalRepositoryDto } from "../../fetch-client";
+type Props = {
+    repositories: LocalRepositoryDto[];
+    local?: boolean;
+    onNavigate?: (route: string) => void;
+};
+declare const DashboardBackupHealth: import("svelte").Component<Props, {}, "">;
+type DashboardBackupHealth = ReturnType<typeof DashboardBackupHealth>;
+export default DashboardBackupHealth;

package/dist/components/dashboard/DashboardCurrentUsage.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Card, CardBody } from "@immich/ui";
+  import VisualisationGauge from "../ui/VisualisationGauge.svelte";
+</script>
+
+<Card>
+  <CardBody>
+    <VisualisationGauge title="Current Usage" content="$-/mo" />
+  </CardBody>
+</Card>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DashboardCurrentUsage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DashboardCurrentUsage = InstanceType<typeof DashboardCurrentUsage>;
+export default DashboardCurrentUsage;

package/dist/components/dashboard/DashboardDailyBackupTime.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../fetch-client";
+  import { formatDuration } from "../../utils/format";
+  import { Card, CardBody } from "@immich/ui";
+  import VisualisationGauge from "../ui/VisualisationGauge.svelte";
+
+  type Props = {
+    repositories: LocalRepositoryDto[];
+  };
+
+  const { repositories }: Props = $props();
+
+  const dailyBackupTime = $derived(
+    repositories
+      .map((repo) => repo.metrics?.lastBackupDuration)
+      .filter((duration): duration is number => duration != null)
+      .reduce<number | undefined>(
+        (sum, duration) => (sum ?? 0) + duration,
+        undefined,
+      ),
+  );
+</script>
+
+<Card>
+  <CardBody>
+    <VisualisationGauge
+      title="Daily Backup Time"
+      content={dailyBackupTime != null ? formatDuration(dailyBackupTime) : "—"}
+    />
+  </CardBody>
+</Card>

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

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

package/dist/components/dashboard/DashboardInstall.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Button, Card, CardBody, CardHeader, CardTitle, Logo } from "@immich/ui";
+</script>
+
+<Card>
+  <CardHeader>
+    <CardTitle>Install FUTO Backups</CardTitle>
+  </CardHeader>
+  <CardBody>
+    <Button variant="outline" size="small">
+      <Logo variant="icon" size="tiny" />
+      Setup on Immich
+    </Button>
+  </CardBody>
+</Card>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DashboardInstall: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DashboardInstall = InstanceType<typeof DashboardInstall>;
+export default DashboardInstall;

package/dist/components/dashboard/DashboardRecentBackups.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../fetch-client";
+  import {
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    ContextMenuButton,
+    HStack,
+    Icon,
+    modalManager,
+    Text,
+    type ActionItem,
+  } from "@immich/ui";
+  import {
+    mdiAlertCircleOutline,
+    mdiCheckCircleOutline,
+    mdiDotsVertical,
+    mdiHistory,
+  } from "@mdi/js";
+  import RelativeTime from "../util/RelativeTime.svelte";
+  import MetricsHistoryModal from "../backups/metrics-history/MetricsHistoryModal.svelte";
+
+  type Props = {
+    repositories: LocalRepositoryDto[];
+    local?: boolean;
+  };
+
+  const { repositories, local }: Props = $props();
+
+  const recentAttempts = $derived(
+    repositories
+      .filter((repo) => repo.metrics.lastBackup)
+      .toSorted(
+        (a, b) =>
+          +new Date(b.metrics.lastBackup!) - +new Date(a.metrics.lastBackup!),
+      )
+      .slice(0, 5),
+  );
+
+  const getActions = (repository: LocalRepositoryDto): ActionItem[] => [
+    {
+      title: "View history",
+      icon: mdiHistory,
+      onAction: () =>
+        void modalManager.open(MetricsHistoryModal, { repository }),
+    },
+  ];
+</script>
+
+<Card>
+  <CardHeader>
+    <CardTitle>Recent Backups</CardTitle>
+  </CardHeader>
+  <CardBody>
+    {#if recentAttempts.length === 0}
+      <Text color="secondary">
+        Completed backups will appear here once your first backup runs.
+      </Text>
+    {:else}
+      <div>
+        {#each recentAttempts as repo, index (repo.id)}
+          {#if index > 0}
+            <hr
+              style="border: none; border-top: 1px solid var(--immich-ui-default-border);"
+            />
+          {/if}
+          <HStack class="justify-between py-2">
+            <HStack class="gap-2">
+              {#if repo.metrics.lastBackup === repo.metrics.lastSuccessfulBackup}
+                <Icon
+                  icon={mdiCheckCircleOutline}
+                  size="16"
+                  class="text-success-500"
+                />
+              {:else}
+                <Icon
+                  icon={mdiAlertCircleOutline}
+                  size="16"
+                  class="text-danger-500"
+                />
+              {/if}
+              <Text>{repo.name}</Text>
+            </HStack>
+            <HStack class="gap-1">
+              <Text color="secondary" size="small">
+                <RelativeTime time={repo.metrics.lastBackup!} />
+              </Text>
+              {#if !local}
+                <ContextMenuButton
+                  icon={mdiDotsVertical}
+                  aria-label="Options"
+                  items={getActions(repo)}
+                  variant="ghost"
+                  color="secondary"
+                />
+              {/if}
+            </HStack>
+          </HStack>
+        {/each}
+      </div>
+    {/if}
+  </CardBody>
+</Card>

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

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

package/dist/components/dashboard/DashboardTotalStored.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../fetch-client";
+  import { Card, CardBody, getByteUnitString } from "@immich/ui";
+  import VisualisationGauge from "../ui/VisualisationGauge.svelte";
+
+  type Props = {
+    repositories: LocalRepositoryDto[];
+  };
+
+  const { repositories }: Props = $props();
+
+  const totalStored = $derived(
+    repositories.reduce(
+      (sum, repo) => sum + (repo.metrics?.sizeBytes ?? 0),
+      0,
+    ),
+  );
+</script>
+
+<Card>
+  <CardBody>
+    <VisualisationGauge
+      title="Total Stored"
+      content={getByteUnitString(totalStored)}
+    />
+  </CardBody>
+</Card>

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

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

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import ImmichManageBackup from "./ImmichManageBackup.svelte";
+  import ImmichOnboardingSetupFlow from "./ImmichOnboardingSetupFlow.svelte";
+
+  type Props = {
+    onExit: () => void;
+  };
+
+  const { onExit }: Props = $props();
+</script>
+
+<ImmichOnboardingSetupFlow {onExit}>
+  <ImmichManageBackup />
+</ImmichOnboardingSetupFlow>

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

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