@futo-org/backups-orchestrator-ui 0.1.71

package/dist/components/test/TestUi.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import {
+    MockProvider,
+    orchestrationApiProvider,
+    setProvider,
+  } from "../../providers";
+  import {
+    AppShell,
+    AppShellHeader,
+    AppShellSidebar,
+    Heading,
+    NavbarItem,
+    Text,
+    ThemeSwitcher,
+  } from "@immich/ui";
+  import {
+    mdiBackupRestore,
+    mdiClock,
+    mdiCog,
+    mdiViewDashboard,
+  } from "@mdi/js";
+  import BackendsList from "../backends/BackendsList.svelte";
+  import BackupsList from "../backups/BackupsList.svelte";
+  import Dashboard from "../dashboard/Dashboard.svelte";
+  import ScheduleList from "../schedules/ScheduleList.svelte";
+
+  const { mock }: { mock: boolean } = $props();
+
+  // svelte-ignore state_referenced_locally
+  if (mock) {
+    setProvider(new MockProvider());
+  } else {
+    setProvider(orchestrationApiProvider);
+  }
+
+  let open = $state(true);
+  let route = $state("dashboard");
+</script>
+
+<AppShell>
+  <AppShellHeader>
+    <div class="flex items-center justify-between w-full px-4 py-2">
+      <Heading>
+        {#if mock}
+          <Text class="h-12 font-bold">FUTO Backups</Text>
+        {:else}
+          <img
+            alt="App Name Here"
+            src="/app-name-here.png"
+            class="inline h-12"
+          />
+        {/if}
+      </Heading>
+      <ThemeSwitcher size="medium" color="secondary" />
+    </div>
+  </AppShellHeader>
+
+  <AppShellSidebar bind:open>
+    <div class="pt-4 pr-2">
+      <div
+        onclick={() => (route = "dashboard")}
+        onkeydown={() => (route = "dashboard")}
+        tabindex={0}
+        role="button"
+        aria-label="Dashboard"
+      >
+        <NavbarItem
+          href="#"
+          title="Dashboard"
+          icon={mdiViewDashboard}
+          active={route === "dashboard"}
+        />
+      </div>
+      <div
+        onclick={() => (route = "backups")}
+        onkeydown={() => (route = "backups")}
+        tabindex={0}
+        role="button"
+        aria-label="Backups"
+      >
+        <NavbarItem
+          href="#"
+          title="Backups"
+          icon={mdiBackupRestore}
+          active={route === "backups"}
+        />
+      </div>
+      <div
+        onclick={() => (route = "schedules")}
+        onkeydown={() => (route = "schedules")}
+        tabindex={0}
+        role="button"
+        aria-label="Schedules"
+      >
+        <NavbarItem
+          href="#"
+          title="Schedules"
+          icon={mdiClock}
+          active={route === "schedules"}
+        />
+      </div>
+      <div
+        onclick={() => (route = "config")}
+        onkeydown={() => (route = "config")}
+        tabindex={0}
+        role="button"
+        aria-label="Configure"
+      >
+        <NavbarItem
+          href="#"
+          title="Configure"
+          icon={mdiCog}
+          active={route === "config"}
+        />
+      </div>
+    </div>
+  </AppShellSidebar>
+
+  <div class="p-4 flex flex-col gap-2 max-w-6xl m-auto">
+    {#if route === "dashboard"}
+      <Dashboard local onNavigate={(target) => (route = target)} />
+    {:else if route === "backups"}
+      <BackupsList local />
+    {:else if route === "config"}
+      {#if !mock}
+        <BackendsList />
+      {/if}
+    {:else if route === "schedules"}
+      {#if !mock}
+        <ScheduleList />
+      {/if}
+    {/if}
+  </div>
+</AppShell>

package/dist/components/test/TestUi.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    mock: boolean;
+};
+declare const TestUi: import("svelte").Component<$$ComponentProps, {}, "">;
+type TestUi = ReturnType<typeof TestUi>;
+export default TestUi;

package/dist/components/test/dashboard/ActiveJobs.svelte

@@ -0,0 +1,380 @@
+<script lang="ts">
+  import type { SocketEvent } from "../../../events";
+  import type { RunningTaskDto } from "../../../fetch-client";
+  import {
+    handleCancelTask,
+    handleGetRunningTasks,
+  } from "../../../services/task.service";
+  import { useRepositories } from "../../../services/repository.service";
+  import { useSchedules } from "../../../services/schedule.service";
+  import {
+    createLogObserver,
+    type LogStatus,
+  } from "../../../services/log.service.svelte";
+  import {
+    Badge,
+    Button,
+    Card,
+    CardBody,
+    HStack,
+    Icon,
+    modalManager,
+    ProgressBar,
+    Text,
+  } from "@immich/ui";
+  import {
+    mdiAlertCircleOutline,
+    mdiCheckCircleOutline,
+    mdiClockOutline,
+    mdiLoading,
+    mdiStopCircleOutline,
+    mdiTextBoxOutline,
+  } from "@mdi/js";
+  import { onDestroy, onMount } from "svelte";
+  import { SvelteMap } from "svelte/reactivity";
+  import OnEvents from "../../util/OnEvents.svelte";
+  import RelativeTime from "../../util/RelativeTime.svelte";
+  import ViewLogModal from "../../backups/dialogs/ViewLogModal.svelte";
+
+  const LINGER_MS = 3000;
+  const FADE_MS = 600;
+
+  type LiveTask = RunningTaskDto & {
+    startedAt: string;
+    completedAt?: string;
+    fading?: boolean;
+  };
+
+  let tasks = new SvelteMap<string, LiveTask>();
+
+  const repositoriesQuery = useRepositories();
+  const schedulesQuery = useSchedules();
+
+  const logObservers = new Map<string, ReturnType<typeof createLogObserver>>();
+  const timers = new Map<string, ReturnType<typeof setTimeout>[]>();
+
+  const getRepoName = (id: string) =>
+    repositoriesQuery.data?.find((repository) => repository.id === id)?.name ??
+    id;
+  const getScheduleName = (id: string) =>
+    schedulesQuery.data?.find((schedule) => schedule.id === id)?.name ?? id;
+
+  const ensureLogObserver = (logId: string) => {
+    if (!logObservers.has(logId)) {
+      logObservers.set(logId, createLogObserver(logId));
+    }
+
+    return logObservers.get(logId)!;
+  };
+
+  $effect(() => {
+    for (const task of tasks.values()) {
+      if (task.logId && !task.completedAt) {
+        ensureLogObserver(task.logId);
+      }
+    }
+  });
+
+  const getLogStatus = (logId?: string): LogStatus | undefined => {
+    if (!logId) return undefined;
+    return logObservers.get(logId)?.status;
+  };
+
+  const taskName = (task: LiveTask) =>
+    task.type === "schedule"
+      ? getScheduleName(task.parentId)
+      : getRepoName(task.parentId);
+
+  const hasFailedItems = (task: LiveTask) =>
+    task.scheduleStatus?.some((item) => item.status === "failed") ?? false;
+
+  const statusColor = (task: LiveTask) =>
+    !task.completedAt
+      ? "var(--immich-ui-warning-500)"
+      : hasFailedItems(task)
+        ? "var(--immich-ui-danger-500)"
+        : "var(--immich-ui-success-500)";
+
+  onMount(async () => {
+    const taskData = await handleGetRunningTasks();
+
+    const now = new Date().toISOString();
+    for (const task of taskData.tasks) {
+      tasks.set(task.parentId, { ...task, startedAt: now });
+    }
+  });
+
+  onDestroy(() => {
+    for (const observer of logObservers.values()) {
+      observer.destroy();
+    }
+    for (const bucket of timers.values()) {
+      for (const timer of bucket) clearTimeout(timer);
+    }
+  });
+
+  const onTaskStart = (event: SocketEvent<{ task: RunningTaskDto }>) => {
+    const task = event.data.task;
+    tasks.set(task.parentId, {
+      ...task,
+      startedAt: new Date().toISOString(),
+    });
+  };
+
+  const onTaskUpdate = (
+    event: SocketEvent<{ parentId: string; task: Partial<RunningTaskDto> }>,
+  ) => {
+    const existing = tasks.get(event.data.parentId);
+    if (existing) {
+      tasks.set(event.data.parentId, { ...existing, ...event.data.task });
+    }
+  };
+
+  const onTaskEnd = (event: SocketEvent<{ parentId: string }>) => {
+    const id = event.data.parentId;
+    const existing = tasks.get(id);
+    if (!existing) return;
+
+    if (existing.logId && logObservers.has(existing.logId)) {
+      logObservers.get(existing.logId)!.destroy();
+      logObservers.delete(existing.logId);
+    }
+
+    tasks.set(id, { ...existing, completedAt: new Date().toISOString() });
+
+    const lingerTimer = setTimeout(() => {
+      const task = tasks.get(id);
+      if (task) {
+        tasks.set(id, { ...task, fading: true });
+      }
+      const fadeTimer = setTimeout(() => tasks.delete(id), FADE_MS);
+      bucket.push(fadeTimer);
+    }, LINGER_MS);
+    const bucket = [lingerTimer];
+    timers.set(id, bucket);
+  };
+
+  const shouldDisplay = (task: LiveTask) => {
+    if (
+      task.type === "backup" &&
+      tasks
+        .values()
+        .some((entry) =>
+          entry.scheduleStatus?.some(
+            (item) => item.repositoryId === task.parentId,
+          ),
+        )
+    ) {
+      return false;
+    }
+    return true;
+  };
+
+  const openLog = (logId: string) => {
+    modalManager.open(ViewLogModal, { logId });
+  };
+
+  const onCancel = (parentId: string) => handleCancelTask(parentId);
+</script>
+
+<OnEvents {onTaskStart} {onTaskUpdate} {onTaskEnd} />
+
+{#snippet logButton(logId: string | undefined)}
+  {#if logId}
+    <Button size="tiny" variant="ghost" onclick={() => openLog(logId)}>
+      <Icon icon={mdiTextBoxOutline} size="14" />
+      Log
+    </Button>
+  {/if}
+{/snippet}
+
+{#snippet scheduleItems(task: LiveTask, compact: boolean)}
+  {#if task.scheduleStatus}
+    <div class="flex flex-col gap-2 pl-7">
+      {#each task.scheduleStatus as item (item.repositoryId)}
+        {@const subTask = compact ? undefined : tasks.get(item.repositoryId)}
+        {@const subLog =
+          !compact && subTask?.logId ? getLogStatus(subTask.logId) : undefined}
+        <div class="flex flex-col gap-1">
+          <HStack class="items-center justify-between">
+            <HStack class="items-center gap-2">
+              {#if item.status === "complete"}
+                <Icon
+                  icon={mdiCheckCircleOutline}
+                  size="16"
+                  class="text-green-500"
+                />
+              {:else if item.status === "failed"}
+                <Icon
+                  icon={mdiAlertCircleOutline}
+                  size="16"
+                  class="text-danger-500"
+                />
+              {:else if subLog && subLog.progress > 0}
+                <Icon
+                  icon={mdiLoading}
+                  size="16"
+                  class="animate-spin opacity-60"
+                />
+              {:else}
+                <Icon icon={mdiClockOutline} size="16" class="opacity-40" />
+              {/if}
+              <Text
+                size="small"
+                color={item.status === "incomplete" &&
+                !(subLog && subLog.progress > 0)
+                  ? "secondary"
+                  : undefined}
+              >
+                {getRepoName(item.repositoryId)}
+              </Text>
+              {#if item.status === "complete"}
+                <Badge size="tiny" color="success">Done</Badge>
+              {:else if item.status === "failed"}
+                <Badge size="tiny" color="danger">Failed</Badge>
+              {:else if subLog && subLog.progress > 0}
+                <Badge size="tiny" color="warning"
+                  >{Math.round(subLog.progress * 100)}%</Badge
+                >
+              {:else}
+                <Badge size="tiny">Queued</Badge>
+              {/if}
+            </HStack>
+            {#if !compact}
+              <HStack class="items-center gap-2">
+                {@render logButton(subTask?.logId)}
+                {#if subTask && !subTask.completedAt}
+                  <Button
+                    size="tiny"
+                    variant="ghost"
+                    color="danger"
+                    onclick={() => onCancel(item.repositoryId)}
+                  >
+                    <Icon icon={mdiStopCircleOutline} size="14" />
+                    Cancel
+                  </Button>
+                {/if}
+              </HStack>
+            {/if}
+          </HStack>
+          {#if !compact && subLog && subLog.progress > 0}
+            <div class="pl-6">
+              <ProgressBar progress={subLog.progress} size="small" />
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+{/snippet}
+
+{#each tasks.values() as task (task.parentId)}
+  {#if shouldDisplay(task)}
+    <div class="task-card" class:task-card-fading={task.fading}>
+      <Card style="background: color-mix(in oklch, {statusColor(task)}, transparent 92%);">
+        <CardBody class="flex flex-col gap-3">
+          <HStack class="items-center justify-between">
+            <HStack class="items-center gap-3">
+              {#if task.completedAt}
+                <Icon
+                  icon={hasFailedItems(task)
+                    ? mdiAlertCircleOutline
+                    : mdiCheckCircleOutline}
+                  size="18"
+                  class={hasFailedItems(task)
+                    ? "text-danger-500"
+                    : "text-green-500"}
+                />
+              {:else}
+                <Icon
+                  icon={mdiLoading}
+                  size="18"
+                  class="animate-spin opacity-60"
+                />
+              {/if}
+              <Text>
+                {#if task.completedAt}
+                  {#if task.type === "schedule"}Finished schedule{:else if task.type === "forget"}Finished pruning{:else}Finished
+                    backup{/if}
+                {:else if task.type === "schedule"}Running schedule{:else if task.type === "forget"}Pruning{:else}Backing
+                  up{/if}
+                — <strong>{taskName(task)}</strong>
+              </Text>
+              {#if !task.completedAt && task.type === "backup"}
+                {@const log = getLogStatus(task.logId)}
+                {#if log && log.progress > 0}
+                  <Badge size="tiny" color="warning"
+                    >{Math.round(log.progress * 100)}%</Badge
+                  >
+                {/if}
+              {/if}
+            </HStack>
+            <HStack class="items-center gap-2">
+              <Text color="secondary" size="tiny">
+                {#if task.completedAt}
+                  <RelativeTime time={task.completedAt} />
+                {:else}
+                  Started <RelativeTime time={task.startedAt} />
+                {/if}
+              </Text>
+              {@render logButton(task.logId)}
+              {#if !task.completedAt}
+                <Button
+                  size="tiny"
+                  variant="ghost"
+                  color="danger"
+                  onclick={() => onCancel(task.parentId)}
+                >
+                  <Icon icon={mdiStopCircleOutline} size="14" />
+                  Cancel
+                </Button>
+              {/if}
+            </HStack>
+          </HStack>
+
+          {#if task.type === "schedule" && task.scheduleStatus}
+            {#if task.completedAt}
+              {@render scheduleItems(task, true)}
+            {:else}
+              {@render scheduleItems(task, false)}
+            {/if}
+          {/if}
+
+          {#if !task.completedAt && task.type === "backup"}
+            {@const log = getLogStatus(task.logId)}
+            {#if log && log.progress > 0}
+              <ProgressBar progress={log.progress} size="small" />
+            {/if}
+          {/if}
+        </CardBody>
+      </Card>
+    </div>
+  {/if}
+{/each}
+
+<style>
+  .task-card {
+    opacity: 1;
+    transform: translateY(0);
+    transition-property: opacity, transform;
+    transition-duration: 600ms;
+    transition-timing-function: ease-out;
+    animation: task-enter 300ms ease-out;
+  }
+
+  .task-card-fading {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  @keyframes task-enter {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

package/dist/components/test/dashboard/ActiveJobs.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ActiveJobs: import("svelte").Component<Record<string, never>, {}, "">;
+type ActiveJobs = ReturnType<typeof ActiveJobs>;
+export default ActiveJobs;

package/dist/components/test/dashboard/BackupHealth.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import { Alert, Text } from "@immich/ui";
+  import SegmentedBar from "../../ui/VisualisationSegmentedBar.svelte";
+
+  type Props = {
+    repositories: LocalRepositoryDto[];
+  };
+
+  const { repositories }: Props = $props();
+
+  const total = $derived(repositories.length);
+
+  const status = $derived(
+    repositories.reduce(
+      (tally, repo) => {
+        if (!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 },
+    ),
+  );
+
+  const hasFailures = $derived(status.offline > 0 || status.failed > 0);
+  const allHealthy = $derived(
+    total > 0 &&
+      status.offline === 0 &&
+      status.failed === 0 &&
+      status.neverRun === 0,
+  );
+  const allNeverRun = $derived(
+    total > 0 &&
+      status.success === 0 &&
+      status.offline === 0 &&
+      status.failed === 0,
+  );
+</script>
+
+{#if allNeverRun}
+  <Alert color="info">
+    <Text class="grow">{total} backups configured</Text>
+  </Alert>
+{:else if hasFailures}
+  <Alert color="danger">
+    <Text class="grow"
+      >{status.failed + status.offline} backups failed or offline — check the Backups
+      page for details</Text
+    >
+  </Alert>
+{:else if allHealthy}
+  <Alert color="success">
+    <Text class="grow">All {total} backups healthy</Text>
+  </Alert>
+{/if}
+
+<SegmentedBar
+  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",
+    },
+  ]}
+/>

package/dist/components/test/dashboard/BackupHealth.svelte.d.ts

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