mirror of https://github.com/immich-app/immich.git
feat: queue detail page (#24352)
Jason Rasmussen
GitHub
parent
4f93eda8d8
commit
45f68f73a9
@ -0,0 +1,160 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { queueManager } from '$lib/managers/queue-manager.svelte';
|
||||||
|
import type { QueueSnapshot } from '$lib/types';
|
||||||
|
import type { QueueResponseDto } from '@immich/sdk';
|
||||||
|
import { LoadingSpinner, Theme, theme } from '@immich/ui';
|
||||||
|
import { DateTime } from 'luxon';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import uPlot, { type AlignedData, type Axis } from 'uplot';
|
||||||
|
import 'uplot/dist/uPlot.min.css';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
queue: QueueResponseDto;
|
||||||
|
class?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { queue, class: className = '' }: Props = $props();
|
||||||
|
|
||||||
|
type Data = number | null;
|
||||||
|
type NormalizedData = [
|
||||||
|
Data[], // timestamps
|
||||||
|
Data[], // failed counts
|
||||||
|
Data[], // active counts
|
||||||
|
Data[], // waiting counts
|
||||||
|
];
|
||||||
|
|
||||||
|
const normalizeData = (snapshots: QueueSnapshot[]) => {
|
||||||
|
const items: NormalizedData = [[], [], [], []];
|
||||||
|
|
||||||
|
for (const { timestamp, snapshot } of snapshots) {
|
||||||
|
items[0].push(timestamp);
|
||||||
|
|
||||||
|
const statistics = (snapshot || []).find(({ name }) => name === queue.name)?.statistics;
|
||||||
|
|
||||||
|
if (statistics) {
|
||||||
|
items[1].push(statistics.failed);
|
||||||
|
items[2].push(statistics.active);
|
||||||
|
items[3].push(statistics.waiting + statistics.paused);
|
||||||
|
} else {
|
||||||
|
items[0].push(timestamp);
|
||||||
|
items[1].push(null);
|
||||||
|
items[2].push(null);
|
||||||
|
items[3].push(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
items[0].push(Date.now() + 5000);
|
||||||
|
items[1].push(items[1].at(-1) ?? 0);
|
||||||
|
items[2].push(items[2].at(-1) ?? 0);
|
||||||
|
items[3].push(items[3].at(-1) ?? 0);
|
||||||
|
|
||||||
|
return items;
|
||||||
|
};
|
||||||
|
|
||||||
|
const data = $derived(normalizeData(queueManager.snapshots));
|
||||||
|
|
||||||
|
let chartElement: HTMLDivElement | undefined = $state();
|
||||||
|
let isDark = $derived(theme.value === Theme.Dark);
|
||||||
|
let plot: uPlot;
|
||||||
|
|
||||||
|
const axisOptions: Axis = {
|
||||||
|
stroke: () => (isDark ? '#ccc' : 'black'),
|
||||||
|
ticks: {
|
||||||
|
show: true,
|
||||||
|
stroke: () => (isDark ? '#444' : '#ddd'),
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: true,
|
||||||
|
stroke: () => (isDark ? '#444' : '#ddd'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const seriesOptions: uPlot.Series = {
|
||||||
|
spanGaps: false,
|
||||||
|
points: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
width: 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
const options: uPlot.Options = {
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
cursor: {
|
||||||
|
show: false,
|
||||||
|
lock: true,
|
||||||
|
drag: {
|
||||||
|
setScale: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
width: 200,
|
||||||
|
height: 200,
|
||||||
|
ms: 1,
|
||||||
|
pxAlign: true,
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
distr: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
stroke: '#d94a4a',
|
||||||
|
...seriesOptions,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stroke: '#4250af',
|
||||||
|
...seriesOptions,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stroke: '#1075db',
|
||||||
|
...seriesOptions,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
axes: [
|
||||||
|
{
|
||||||
|
...axisOptions,
|
||||||
|
values: (plot, values) => {
|
||||||
|
return values.map((value) => {
|
||||||
|
if (!value) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return DateTime.fromMillis(value).toFormat('hh:mm:ss');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisOptions,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const onThemeChange = () => plot?.redraw(false);
|
||||||
|
|
||||||
|
$effect(() => theme.value && onThemeChange());
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
plot = new uPlot(options, data as AlignedData, chartElement);
|
||||||
|
});
|
||||||
|
|
||||||
|
const update = () => {
|
||||||
|
if (plot && chartElement && data[0].length > 0) {
|
||||||
|
const now = Date.now();
|
||||||
|
const scale = { min: now - chartElement!.clientWidth * 100, max: now };
|
||||||
|
|
||||||
|
plot.setData(data as AlignedData, false);
|
||||||
|
plot.setScale('x', scale);
|
||||||
|
plot.setSize({ width: chartElement.clientWidth, height: chartElement.clientHeight });
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-full {className}" bind:this={chartElement}>
|
||||||
|
{#if data[0].length === 0}
|
||||||
|
<LoadingSpinner size="giant" />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import QueueCard from '$lib/components/QueueCard.svelte';
|
||||||
|
import QueueStorageMigrationDescription from '$lib/components/QueueStorageMigrationDescription.svelte';
|
||||||
|
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
|
||||||
|
import { queueManager } from '$lib/managers/queue-manager.svelte';
|
||||||
|
import { asQueueItem } from '$lib/services/queue.service';
|
||||||
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
|
import {
|
||||||
|
QueueCommand,
|
||||||
|
type QueueCommandDto,
|
||||||
|
QueueName,
|
||||||
|
type QueueResponseDto,
|
||||||
|
runQueueCommandLegacy,
|
||||||
|
} from '@immich/sdk';
|
||||||
|
import { modalManager, toastManager } from '@immich/ui';
|
||||||
|
import type { Component } from 'svelte';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
queues: QueueResponseDto[];
|
||||||
|
};
|
||||||
|
|
||||||
|
let { queues }: Props = $props();
|
||||||
|
const featureFlags = featureFlagsManager.value;
|
||||||
|
|
||||||
|
type QueueDetails = {
|
||||||
|
description?: Component;
|
||||||
|
allText?: string;
|
||||||
|
refreshText?: string;
|
||||||
|
missingText: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
handleCommand?: (jobId: QueueName, jobCommand: QueueCommandDto) => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const queueDetails: Partial<Record<QueueName, QueueDetails>> = {
|
||||||
|
[QueueName.ThumbnailGeneration]: {
|
||||||
|
allText: $t('all'),
|
||||||
|
missingText: $t('missing'),
|
||||||
|
},
|
||||||
|
[QueueName.MetadataExtraction]: {
|
||||||
|
allText: $t('all'),
|
||||||
|
missingText: $t('missing'),
|
||||||
|
},
|
||||||
|
[QueueName.Library]: {
|
||||||
|
missingText: $t('rescan'),
|
||||||
|
},
|
||||||
|
[QueueName.Sidecar]: {
|
||||||
|
allText: $t('sync'),
|
||||||
|
missingText: $t('discover'),
|
||||||
|
disabled: !featureFlags.sidecar,
|
||||||
|
},
|
||||||
|
[QueueName.SmartSearch]: {
|
||||||
|
allText: $t('all'),
|
||||||
|
missingText: $t('missing'),
|
||||||
|
disabled: !featureFlags.smartSearch,
|
||||||
|
},
|
||||||
|
[QueueName.DuplicateDetection]: {
|
||||||
|
allText: $t('all'),
|
||||||
|
missingText: $t('missing'),
|
||||||
|
disabled: !featureFlags.duplicateDetection,
|
||||||
|
},
|
||||||
|
[QueueName.FaceDetection]: {
|
||||||
|
allText: $t('reset'),
|
||||||
|
refreshText: $t('refresh'),
|
||||||
|
missingText: $t('missing'),
|
||||||
|
disabled: !featureFlags.facialRecognition,
|
||||||
|
},
|
||||||
|
[QueueName.FacialRecognition]: {
|
||||||
|
allText: $t('reset'),
|
||||||
|
missingText: $t('missing'),
|
||||||
|
disabled: !featureFlags.facialRecognition,
|
||||||
|
},
|
||||||
|
[QueueName.Ocr]: {
|
||||||
|
allText: $t('all'),
|
||||||
|
missingText: $t('missing'),
|
||||||
|
disabled: !featureFlags.ocr,
|
||||||
|
},
|
||||||
|
[QueueName.VideoConversion]: {
|
||||||
|
allText: $t('all'),
|
||||||
|
missingText: $t('missing'),
|
||||||
|
},
|
||||||
|
[QueueName.StorageTemplateMigration]: {
|
||||||
|
missingText: $t('start'),
|
||||||
|
description: QueueStorageMigrationDescription,
|
||||||
|
},
|
||||||
|
[QueueName.Migration]: {
|
||||||
|
missingText: $t('start'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
let queueList = Object.entries(queueDetails) as [QueueName, QueueDetails][];
|
||||||
|
|
||||||
|
const handleCommand = async (name: QueueName, dto: QueueCommandDto) => {
|
||||||
|
const item = asQueueItem($t, { name });
|
||||||
|
|
||||||
|
switch (name) {
|
||||||
|
case QueueName.FaceDetection:
|
||||||
|
case QueueName.FacialRecognition: {
|
||||||
|
if (dto.force) {
|
||||||
|
const confirmed = await modalManager.showDialog({ prompt: $t('admin.confirm_reprocess_all_faces') });
|
||||||
|
if (!confirmed) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await runQueueCommandLegacy({ name, queueCommandDto: dto });
|
||||||
|
await queueManager.refresh();
|
||||||
|
|
||||||
|
switch (dto.command) {
|
||||||
|
case QueueCommand.Empty: {
|
||||||
|
toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, $t('admin.failed_job_command', { values: { command: dto.command, job: item.title } }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-7 mt-10">
|
||||||
|
{#each queueList as [queueName, props] (queueName)}
|
||||||
|
{@const queue = queues.find(({ name }) => name === queueName)}
|
||||||
|
{#if queue}
|
||||||
|
<QueueCard {queue} onCommand={(command) => handleCommand(queueName, command)} {...props} />
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
@ -1,197 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
|
|
||||||
import { getQueueName } from '$lib/utils';
|
|
||||||
import { handleError } from '$lib/utils/handle-error';
|
|
||||||
import {
|
|
||||||
QueueCommand,
|
|
||||||
type QueueCommandDto,
|
|
||||||
QueueName,
|
|
||||||
type QueuesResponseLegacyDto,
|
|
||||||
runQueueCommandLegacy,
|
|
||||||
} from '@immich/sdk';
|
|
||||||
import { modalManager, toastManager } from '@immich/ui';
|
|
||||||
import {
|
|
||||||
mdiContentDuplicate,
|
|
||||||
mdiFaceRecognition,
|
|
||||||
mdiFileJpgBox,
|
|
||||||
mdiFileXmlBox,
|
|
||||||
mdiFolderMove,
|
|
||||||
mdiImageSearch,
|
|
||||||
mdiLibraryShelves,
|
|
||||||
mdiOcr,
|
|
||||||
mdiTable,
|
|
||||||
mdiTagFaces,
|
|
||||||
mdiVideo,
|
|
||||||
} from '@mdi/js';
|
|
||||||
import type { Component } from 'svelte';
|
|
||||||
import { t } from 'svelte-i18n';
|
|
||||||
import JobTile from './JobTile.svelte';
|
|
||||||
import StorageMigrationDescription from './StorageMigrationDescription.svelte';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
jobs: QueuesResponseLegacyDto;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { jobs = $bindable() }: Props = $props();
|
|
||||||
const featureFlags = featureFlagsManager.value;
|
|
||||||
|
|
||||||
type JobDetails = {
|
|
||||||
title: string;
|
|
||||||
subtitle?: string;
|
|
||||||
description?: Component;
|
|
||||||
allText?: string;
|
|
||||||
refreshText?: string;
|
|
||||||
missingText: string;
|
|
||||||
disabled?: boolean;
|
|
||||||
icon: string;
|
|
||||||
handleCommand?: (jobId: QueueName, jobCommand: QueueCommandDto) => Promise<void>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleConfirmCommand = async (jobId: QueueName, dto: QueueCommandDto) => {
|
|
||||||
if (dto.force) {
|
|
||||||
const isConfirmed = await modalManager.showDialog({
|
|
||||||
prompt: $t('admin.confirm_reprocess_all_faces'),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isConfirmed) {
|
|
||||||
await handleCommand(jobId, { command: QueueCommand.Start, force: true });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await handleCommand(jobId, dto);
|
|
||||||
};
|
|
||||||
|
|
||||||
let jobDetails: Partial<Record<QueueName, JobDetails>> = {
|
|
||||||
[QueueName.ThumbnailGeneration]: {
|
|
||||||
icon: mdiFileJpgBox,
|
|
||||||
title: $getQueueName(QueueName.ThumbnailGeneration),
|
|
||||||
subtitle: $t('admin.thumbnail_generation_job_description'),
|
|
||||||
allText: $t('all'),
|
|
||||||
missingText: $t('missing'),
|
|
||||||
},
|
|
||||||
[QueueName.MetadataExtraction]: {
|
|
||||||
icon: mdiTable,
|
|
||||||
title: $getQueueName(QueueName.MetadataExtraction),
|
|
||||||
subtitle: $t('admin.metadata_extraction_job_description'),
|
|
||||||
allText: $t('all'),
|
|
||||||
missingText: $t('missing'),
|
|
||||||
},
|
|
||||||
[QueueName.Library]: {
|
|
||||||
icon: mdiLibraryShelves,
|
|
||||||
title: $getQueueName(QueueName.Library),
|
|
||||||
subtitle: $t('admin.library_tasks_description'),
|
|
||||||
missingText: $t('rescan'),
|
|
||||||
},
|
|
||||||
[QueueName.Sidecar]: {
|
|
||||||
title: $getQueueName(QueueName.Sidecar),
|
|
||||||
icon: mdiFileXmlBox,
|
|
||||||
subtitle: $t('admin.sidecar_job_description'),
|
|
||||||
allText: $t('sync'),
|
|
||||||
missingText: $t('discover'),
|
|
||||||
disabled: !featureFlags.sidecar,
|
|
||||||
},
|
|
||||||
[QueueName.SmartSearch]: {
|
|
||||||
icon: mdiImageSearch,
|
|
||||||
title: $getQueueName(QueueName.SmartSearch),
|
|
||||||
subtitle: $t('admin.smart_search_job_description'),
|
|
||||||
allText: $t('all'),
|
|
||||||
missingText: $t('missing'),
|
|
||||||
disabled: !featureFlags.smartSearch,
|
|
||||||
},
|
|
||||||
[QueueName.DuplicateDetection]: {
|
|
||||||
icon: mdiContentDuplicate,
|
|
||||||
title: $getQueueName(QueueName.DuplicateDetection),
|
|
||||||
subtitle: $t('admin.duplicate_detection_job_description'),
|
|
||||||
allText: $t('all'),
|
|
||||||
missingText: $t('missing'),
|
|
||||||
disabled: !featureFlags.duplicateDetection,
|
|
||||||
},
|
|
||||||
[QueueName.FaceDetection]: {
|
|
||||||
icon: mdiFaceRecognition,
|
|
||||||
title: $getQueueName(QueueName.FaceDetection),
|
|
||||||
subtitle: $t('admin.face_detection_description'),
|
|
||||||
allText: $t('reset'),
|
|
||||||
refreshText: $t('refresh'),
|
|
||||||
missingText: $t('missing'),
|
|
||||||
handleCommand: handleConfirmCommand,
|
|
||||||
disabled: !featureFlags.facialRecognition,
|
|
||||||
},
|
|
||||||
[QueueName.FacialRecognition]: {
|
|
||||||
icon: mdiTagFaces,
|
|
||||||
title: $getQueueName(QueueName.FacialRecognition),
|
|
||||||
subtitle: $t('admin.facial_recognition_job_description'),
|
|
||||||
allText: $t('reset'),
|
|
||||||
missingText: $t('missing'),
|
|
||||||
handleCommand: handleConfirmCommand,
|
|
||||||
disabled: !featureFlags.facialRecognition,
|
|
||||||
},
|
|
||||||
[QueueName.Ocr]: {
|
|
||||||
icon: mdiOcr,
|
|
||||||
title: $getQueueName(QueueName.Ocr),
|
|
||||||
subtitle: $t('admin.ocr_job_description'),
|
|
||||||
allText: $t('all'),
|
|
||||||
missingText: $t('missing'),
|
|
||||||
disabled: !featureFlags.ocr,
|
|
||||||
},
|
|
||||||
[QueueName.VideoConversion]: {
|
|
||||||
icon: mdiVideo,
|
|
||||||
title: $getQueueName(QueueName.VideoConversion),
|
|
||||||
subtitle: $t('admin.video_conversion_job_description'),
|
|
||||||
allText: $t('all'),
|
|
||||||
missingText: $t('missing'),
|
|
||||||
},
|
|
||||||
[QueueName.StorageTemplateMigration]: {
|
|
||||||
icon: mdiFolderMove,
|
|
||||||
title: $getQueueName(QueueName.StorageTemplateMigration),
|
|
||||||
missingText: $t('start'),
|
|
||||||
description: StorageMigrationDescription,
|
|
||||||
},
|
|
||||||
[QueueName.Migration]: {
|
|
||||||
icon: mdiFolderMove,
|
|
||||||
title: $getQueueName(QueueName.Migration),
|
|
||||||
subtitle: $t('admin.migration_job_description'),
|
|
||||||
missingText: $t('start'),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
let jobList = Object.entries(jobDetails) as [QueueName, JobDetails][];
|
|
||||||
|
|
||||||
async function handleCommand(name: QueueName, dto: QueueCommandDto) {
|
|
||||||
const title = jobDetails[name]?.title;
|
|
||||||
|
|
||||||
try {
|
|
||||||
jobs[name] = await runQueueCommandLegacy({ name, queueCommandDto: dto });
|
|
||||||
|
|
||||||
switch (dto.command) {
|
|
||||||
case QueueCommand.Empty: {
|
|
||||||
toastManager.success($t('admin.cleared_jobs', { values: { job: title } }));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
handleError(error, $t('admin.failed_job_command', { values: { command: dto.command, job: title } }));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-7">
|
|
||||||
{#each jobList as [jobName, { title, subtitle, description, disabled, allText, refreshText, missingText, icon, handleCommand: handleCommandOverride }] (jobName)}
|
|
||||||
{@const { jobCounts: statistics, queueStatus } = jobs[jobName]}
|
|
||||||
<JobTile
|
|
||||||
{icon}
|
|
||||||
{title}
|
|
||||||
{disabled}
|
|
||||||
{subtitle}
|
|
||||||
{description}
|
|
||||||
{allText}
|
|
||||||
{refreshText}
|
|
||||||
{missingText}
|
|
||||||
{statistics}
|
|
||||||
{queueStatus}
|
|
||||||
onCommand={(command) => (handleCommandOverride || handleCommand)(jobName, command)}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
import { eventManager } from '$lib/managers/event-manager.svelte';
|
||||||
|
import type { QueueSnapshot } from '$lib/types';
|
||||||
|
import { getQueues, type QueueResponseDto } from '@immich/sdk';
|
||||||
|
import { DateTime } from 'luxon';
|
||||||
|
|
||||||
|
export class QueueManager {
|
||||||
|
#snapshots = $state<QueueSnapshot[]>([]);
|
||||||
|
#queues: QueueResponseDto[] = $derived(this.#snapshots.at(-1)?.snapshot ?? []);
|
||||||
|
|
||||||
|
#interval?: ReturnType<typeof setInterval>;
|
||||||
|
#listenerCount = 0;
|
||||||
|
|
||||||
|
get snapshots() {
|
||||||
|
return this.#snapshots;
|
||||||
|
}
|
||||||
|
|
||||||
|
get queues() {
|
||||||
|
return this.#queues;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
eventManager.on('QueueUpdate', () => void this.refresh());
|
||||||
|
}
|
||||||
|
|
||||||
|
listen() {
|
||||||
|
if (!this.#interval) {
|
||||||
|
this.#interval = setInterval(() => void this.refresh(true), 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#listenerCount++;
|
||||||
|
void this.refresh();
|
||||||
|
|
||||||
|
return () => this.#listenerCount--;
|
||||||
|
}
|
||||||
|
|
||||||
|
async refresh(tick = false) {
|
||||||
|
this.#snapshots.push({
|
||||||
|
timestamp: DateTime.now().toMillis(),
|
||||||
|
snapshot: this.#listenerCount > 0 || !tick ? await getQueues().catch(() => undefined) : undefined,
|
||||||
|
});
|
||||||
|
this.#snapshots = this.#snapshots.slice(-30);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const queueManager = new QueueManager();
|
||||||
@ -0,0 +1,246 @@
|
|||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import { AppRoute } from '$lib/constants';
|
||||||
|
import { eventManager } from '$lib/managers/event-manager.svelte';
|
||||||
|
import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
|
||||||
|
import { user } from '$lib/stores/user.store';
|
||||||
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
|
import { getFormatter } from '$lib/utils/i18n';
|
||||||
|
import { emptyQueue, getQueue, QueueName, updateQueue, type QueueResponseDto } from '@immich/sdk';
|
||||||
|
import { modalManager, toastManager, type ActionItem, type IconLike } from '@immich/ui';
|
||||||
|
import {
|
||||||
|
mdiClose,
|
||||||
|
mdiCog,
|
||||||
|
mdiContentDuplicate,
|
||||||
|
mdiDatabaseOutline,
|
||||||
|
mdiFaceRecognition,
|
||||||
|
mdiFileJpgBox,
|
||||||
|
mdiFileXmlBox,
|
||||||
|
mdiFolderMove,
|
||||||
|
mdiImageSearch,
|
||||||
|
mdiLibraryShelves,
|
||||||
|
mdiOcr,
|
||||||
|
mdiPause,
|
||||||
|
mdiPlay,
|
||||||
|
mdiPlus,
|
||||||
|
mdiStateMachine,
|
||||||
|
mdiSync,
|
||||||
|
mdiTable,
|
||||||
|
mdiTagFaces,
|
||||||
|
mdiTrashCanOutline,
|
||||||
|
mdiTrayFull,
|
||||||
|
mdiVideo,
|
||||||
|
} from '@mdi/js';
|
||||||
|
import type { MessageFormatter } from 'svelte-i18n';
|
||||||
|
import { get } from 'svelte/store';
|
||||||
|
|
||||||
|
type QueueItem = {
|
||||||
|
icon: IconLike;
|
||||||
|
title: string;
|
||||||
|
subtitle?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getQueuesActions = ($t: MessageFormatter) => {
|
||||||
|
const ViewQueues: ActionItem = {
|
||||||
|
title: $t('admin.queues'),
|
||||||
|
description: $t('admin.queues_page_description'),
|
||||||
|
icon: mdiSync,
|
||||||
|
type: $t('page'),
|
||||||
|
isGlobal: true,
|
||||||
|
$if: () => get(user)?.isAdmin,
|
||||||
|
onAction: () => goto(AppRoute.ADMIN_QUEUES),
|
||||||
|
};
|
||||||
|
|
||||||
|
const CreateJob: ActionItem = {
|
||||||
|
icon: mdiPlus,
|
||||||
|
title: $t('admin.create_job'),
|
||||||
|
type: $t('command'),
|
||||||
|
shortcuts: { shift: true, key: 'n' },
|
||||||
|
onAction: async () => {
|
||||||
|
await modalManager.show(JobCreateModal, {});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const ManageConcurrency: ActionItem = {
|
||||||
|
icon: mdiCog,
|
||||||
|
title: $t('admin.manage_concurrency'),
|
||||||
|
description: $t('admin.manage_concurrency_description'),
|
||||||
|
type: $t('page'),
|
||||||
|
onAction: () => goto(`${AppRoute.ADMIN_SETTINGS}?isOpen=job`),
|
||||||
|
};
|
||||||
|
|
||||||
|
return { ViewQueues, ManageConcurrency, CreateJob };
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getQueueActions = ($t: MessageFormatter, queue: QueueResponseDto) => {
|
||||||
|
const Pause: ActionItem = {
|
||||||
|
icon: mdiPause,
|
||||||
|
title: $t('pause'),
|
||||||
|
$if: () => !queue.isPaused,
|
||||||
|
onAction: () => handlePauseQueue(queue),
|
||||||
|
};
|
||||||
|
|
||||||
|
const Resume: ActionItem = {
|
||||||
|
icon: mdiPlay,
|
||||||
|
title: $t('resume'),
|
||||||
|
$if: () => queue.isPaused,
|
||||||
|
onAction: () => handleResumeQueue(queue),
|
||||||
|
};
|
||||||
|
|
||||||
|
const Empty: ActionItem = {
|
||||||
|
icon: mdiClose,
|
||||||
|
title: $t('clear'),
|
||||||
|
onAction: () => handleEmptyQueue(queue),
|
||||||
|
};
|
||||||
|
|
||||||
|
const RemoveFailedJobs: ActionItem = {
|
||||||
|
icon: mdiTrashCanOutline,
|
||||||
|
color: 'danger',
|
||||||
|
title: $t('admin.remove_failed_jobs'),
|
||||||
|
onAction: () => handleRemoveFailedJobs(queue),
|
||||||
|
};
|
||||||
|
|
||||||
|
return { Pause, Resume, Empty, RemoveFailedJobs };
|
||||||
|
};
|
||||||
|
|
||||||
|
export const handlePauseQueue = async (queue: QueueResponseDto) => {
|
||||||
|
const response = await updateQueue({ name: queue.name, queueUpdateDto: { isPaused: true } });
|
||||||
|
eventManager.emit('QueueUpdate', response);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const handleResumeQueue = async (queue: QueueResponseDto) => {
|
||||||
|
const response = await updateQueue({ name: queue.name, queueUpdateDto: { isPaused: false } });
|
||||||
|
eventManager.emit('QueueUpdate', response);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const handleEmptyQueue = async (queue: QueueResponseDto) => {
|
||||||
|
const $t = await getFormatter();
|
||||||
|
const item = asQueueItem($t, queue);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await emptyQueue({ name: queue.name, queueDeleteDto: { failed: false } });
|
||||||
|
const response = await getQueue({ name: queue.name });
|
||||||
|
eventManager.emit('QueueUpdate', response);
|
||||||
|
toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, $t('errors.something_went_wrong'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveFailedJobs = async (queue: QueueResponseDto) => {
|
||||||
|
const $t = await getFormatter();
|
||||||
|
|
||||||
|
try {
|
||||||
|
await emptyQueue({ name: queue.name, queueDeleteDto: { failed: true } });
|
||||||
|
const response = await getQueue({ name: queue.name });
|
||||||
|
eventManager.emit('QueueUpdate', response);
|
||||||
|
toastManager.success();
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, $t('errors.something_went_wrong'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const asQueueItem = ($t: MessageFormatter, queue: { name: QueueName }): QueueItem => {
|
||||||
|
// TODO merge this mapping with data from QueuePanel.svelte
|
||||||
|
const items: Record<QueueName, QueueItem> = {
|
||||||
|
[QueueName.ThumbnailGeneration]: {
|
||||||
|
icon: mdiFileJpgBox,
|
||||||
|
title: $t('admin.thumbnail_generation_job'),
|
||||||
|
subtitle: $t('admin.thumbnail_generation_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.MetadataExtraction]: {
|
||||||
|
icon: mdiTable,
|
||||||
|
title: $t('admin.metadata_extraction_job'),
|
||||||
|
subtitle: $t('admin.metadata_extraction_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.Library]: {
|
||||||
|
icon: mdiLibraryShelves,
|
||||||
|
title: $t('external_libraries'),
|
||||||
|
subtitle: $t('admin.library_tasks_description'),
|
||||||
|
},
|
||||||
|
[QueueName.Sidecar]: {
|
||||||
|
title: $t('admin.sidecar_job'),
|
||||||
|
icon: mdiFileXmlBox,
|
||||||
|
subtitle: $t('admin.sidecar_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.SmartSearch]: {
|
||||||
|
icon: mdiImageSearch,
|
||||||
|
title: $t('admin.machine_learning_smart_search'),
|
||||||
|
subtitle: $t('admin.smart_search_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.DuplicateDetection]: {
|
||||||
|
icon: mdiContentDuplicate,
|
||||||
|
title: $t('admin.machine_learning_duplicate_detection'),
|
||||||
|
subtitle: $t('admin.duplicate_detection_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.FaceDetection]: {
|
||||||
|
icon: mdiFaceRecognition,
|
||||||
|
title: $t('admin.face_detection'),
|
||||||
|
subtitle: $t('admin.face_detection_description'),
|
||||||
|
},
|
||||||
|
[QueueName.FacialRecognition]: {
|
||||||
|
icon: mdiTagFaces,
|
||||||
|
title: $t('admin.machine_learning_facial_recognition'),
|
||||||
|
subtitle: $t('admin.facial_recognition_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.Ocr]: {
|
||||||
|
icon: mdiOcr,
|
||||||
|
title: $t('admin.machine_learning_ocr'),
|
||||||
|
subtitle: $t('admin.ocr_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.VideoConversion]: {
|
||||||
|
icon: mdiVideo,
|
||||||
|
title: $t('admin.video_conversion_job'),
|
||||||
|
subtitle: $t('admin.video_conversion_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.StorageTemplateMigration]: {
|
||||||
|
icon: mdiFolderMove,
|
||||||
|
title: $t('admin.storage_template_migration'),
|
||||||
|
},
|
||||||
|
[QueueName.Migration]: {
|
||||||
|
icon: mdiFolderMove,
|
||||||
|
title: $t('admin.migration_job'),
|
||||||
|
subtitle: $t('admin.migration_job_description'),
|
||||||
|
},
|
||||||
|
[QueueName.BackgroundTask]: {
|
||||||
|
icon: mdiTrayFull,
|
||||||
|
title: $t('admin.background_task_job'),
|
||||||
|
},
|
||||||
|
[QueueName.Search]: {
|
||||||
|
icon: '',
|
||||||
|
title: $t('search'),
|
||||||
|
},
|
||||||
|
[QueueName.Notifications]: {
|
||||||
|
icon: '',
|
||||||
|
title: $t('notifications'),
|
||||||
|
},
|
||||||
|
[QueueName.BackupDatabase]: {
|
||||||
|
icon: mdiDatabaseOutline,
|
||||||
|
title: $t('admin.backup_database'),
|
||||||
|
},
|
||||||
|
[QueueName.Workflow]: {
|
||||||
|
icon: mdiStateMachine,
|
||||||
|
title: $t('workflow'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return items[queue.name];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const asQueueSlug = (name: QueueName) => {
|
||||||
|
return name.replaceAll(/[A-Z]/g, (m) => '-' + m.toLowerCase());
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fromQueueSlug = (slug: string): QueueName | undefined => {
|
||||||
|
const name = slug.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
|
||||||
|
if (Object.values(QueueName).includes(name as QueueName)) {
|
||||||
|
return name as QueueName;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getQueueDetailUrl = (queue: QueueResponseDto) => {
|
||||||
|
return `${AppRoute.ADMIN_QUEUES}/${asQueueSlug(queue.name)}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const handleViewQueue = (queue: QueueResponseDto) => {
|
||||||
|
return goto(getQueueDetailUrl(queue));
|
||||||
|
};
|
||||||
@ -1,116 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { goto } from '$app/navigation';
|
|
||||||
import JobsPanel from '$lib/components/jobs/JobsPanel.svelte';
|
|
||||||
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
|
|
||||||
import { AppRoute } from '$lib/constants';
|
|
||||||
import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
|
|
||||||
import { asyncTimeout } from '$lib/utils';
|
|
||||||
import { handleError } from '$lib/utils/handle-error';
|
|
||||||
import {
|
|
||||||
getQueuesLegacy,
|
|
||||||
QueueCommand,
|
|
||||||
QueueName,
|
|
||||||
runQueueCommandLegacy,
|
|
||||||
type QueuesResponseLegacyDto,
|
|
||||||
} from '@immich/sdk';
|
|
||||||
import { Button, CommandPaletteContext, HStack, modalManager, Text, type ActionItem } from '@immich/ui';
|
|
||||||
import { mdiCog, mdiPlay, mdiPlus } from '@mdi/js';
|
|
||||||
import { onDestroy, onMount } from 'svelte';
|
|
||||||
import { t } from 'svelte-i18n';
|
|
||||||
import type { PageData } from './$types';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
data: PageData;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { data }: Props = $props();
|
|
||||||
|
|
||||||
let jobs: QueuesResponseLegacyDto | undefined = $state();
|
|
||||||
|
|
||||||
let running = true;
|
|
||||||
|
|
||||||
const pausedJobs = $derived(
|
|
||||||
Object.entries(jobs ?? {})
|
|
||||||
.filter(([_, queue]) => queue.queueStatus?.isPaused)
|
|
||||||
.map(([name]) => name as QueueName),
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleResumePausedJobs = async () => {
|
|
||||||
try {
|
|
||||||
for (const name of pausedJobs) {
|
|
||||||
await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
|
|
||||||
}
|
|
||||||
// Refresh jobs status immediately after resuming
|
|
||||||
jobs = await getQueuesLegacy();
|
|
||||||
} catch (error) {
|
|
||||||
handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateJob = () => modalManager.show(JobCreateModal);
|
|
||||||
|
|
||||||
const jobConcurrencyLink = `${AppRoute.ADMIN_SETTINGS}?isOpen=job`;
|
|
||||||
|
|
||||||
const commands: ActionItem[] = [
|
|
||||||
{
|
|
||||||
title: $t('admin.create_job'),
|
|
||||||
type: $t('command'),
|
|
||||||
icon: mdiPlus,
|
|
||||||
onAction: () => void handleCreateJob(),
|
|
||||||
shortcuts: { shift: true, key: 'n' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: $t('admin.manage_concurrency'),
|
|
||||||
description: $t('admin.manage_concurrency_description'),
|
|
||||||
type: $t('page'),
|
|
||||||
icon: mdiCog,
|
|
||||||
onAction: () => goto(jobConcurrencyLink),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
while (running) {
|
|
||||||
jobs = await getQueuesLegacy();
|
|
||||||
await asyncTimeout(5000);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onDestroy(() => {
|
|
||||||
running = false;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPaletteContext {commands} />
|
|
||||||
|
|
||||||
<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
|
|
||||||
{#snippet buttons()}
|
|
||||||
<HStack gap={0}>
|
|
||||||
{#if pausedJobs.length > 0}
|
|
||||||
<Button
|
|
||||||
leadingIcon={mdiPlay}
|
|
||||||
onclick={handleResumePausedJobs}
|
|
||||||
size="small"
|
|
||||||
variant="ghost"
|
|
||||||
title={pausedJobs.join(', ')}
|
|
||||||
>
|
|
||||||
<Text class="hidden md:block">
|
|
||||||
{$t('resume_paused_jobs', { values: { count: pausedJobs.length } })}
|
|
||||||
</Text>
|
|
||||||
</Button>
|
|
||||||
{/if}
|
|
||||||
<Button leadingIcon={mdiPlus} onclick={handleCreateJob} size="small" variant="ghost" color="secondary">
|
|
||||||
<Text class="hidden md:block">{$t('admin.create_job')}</Text>
|
|
||||||
</Button>
|
|
||||||
<Button leadingIcon={mdiCog} href={jobConcurrencyLink} size="small" variant="ghost" color="secondary">
|
|
||||||
<Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
|
|
||||||
</Button>
|
|
||||||
</HStack>
|
|
||||||
{/snippet}
|
|
||||||
<section id="setting-content" class="flex place-content-center sm:mx-4">
|
|
||||||
<section class="w-full pb-28 sm:w-5/6 md:w-212.5">
|
|
||||||
{#if jobs}
|
|
||||||
<JobsPanel {jobs} />
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
</AdminPageLayout>
|
|
||||||
@ -1,18 +1,5 @@
|
|||||||
import { authenticate } from '$lib/utils/auth';
|
import { AppRoute } from '$lib/constants';
|
||||||
import { getFormatter } from '$lib/utils/i18n';
|
import { redirect } from '@sveltejs/kit';
|
||||||
import { getQueuesLegacy } from '@immich/sdk';
|
|
||||||
import type { PageLoad } from './$types';
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
export const load = (async ({ url }) => {
|
export const load = (() => redirect(307, AppRoute.ADMIN_QUEUES)) satisfies PageLoad;
|
||||||
await authenticate(url, { admin: true });
|
|
||||||
|
|
||||||
const jobs = await getQueuesLegacy();
|
|
||||||
const $t = await getFormatter();
|
|
||||||
|
|
||||||
return {
|
|
||||||
jobs,
|
|
||||||
meta: {
|
|
||||||
title: $t('admin.job_status'),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}) satisfies PageLoad;
|
|
||||||
|
|||||||
@ -0,0 +1,83 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import HeaderButton from '$lib/components/HeaderButton.svelte';
|
||||||
|
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
|
||||||
|
import OnEvents from '$lib/components/OnEvents.svelte';
|
||||||
|
import JobsPanel from '$lib/components/QueuePanel.svelte';
|
||||||
|
import { queueManager } from '$lib/managers/queue-manager.svelte';
|
||||||
|
import { getQueuesActions } from '$lib/services/queue.service';
|
||||||
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
|
import { QueueCommand, runQueueCommandLegacy, type QueueResponseDto } from '@immich/sdk';
|
||||||
|
import { Button, CommandPaletteContext, HStack, Text, type ActionItem } from '@immich/ui';
|
||||||
|
import { mdiPlay } from '@mdi/js';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
data: PageData;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { data }: Props = $props();
|
||||||
|
|
||||||
|
onMount(() => queueManager.listen());
|
||||||
|
|
||||||
|
let queues = $derived<QueueResponseDto[]>(queueManager.queues);
|
||||||
|
const pausedQueues = $derived(queues.filter(({ isPaused }) => isPaused).map(({ name }) => name));
|
||||||
|
|
||||||
|
const handleResumePausedJobs = async () => {
|
||||||
|
try {
|
||||||
|
for (const name of pausedQueues) {
|
||||||
|
await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
|
||||||
|
}
|
||||||
|
await queueManager.refresh();
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const { CreateJob, ManageConcurrency } = $derived(getQueuesActions($t));
|
||||||
|
const commands: ActionItem[] = $derived([CreateJob, ManageConcurrency]);
|
||||||
|
|
||||||
|
const onQueueUpdate = (update: QueueResponseDto) => {
|
||||||
|
queues = queues.map((queue) => {
|
||||||
|
if (queue.name === update.name) {
|
||||||
|
return update;
|
||||||
|
}
|
||||||
|
return queue;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<CommandPaletteContext {commands} />
|
||||||
|
|
||||||
|
<OnEvents {onQueueUpdate} />
|
||||||
|
|
||||||
|
<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
|
||||||
|
{#snippet buttons()}
|
||||||
|
<HStack gap={0}>
|
||||||
|
{#if pausedQueues.length > 0}
|
||||||
|
<Button
|
||||||
|
leadingIcon={mdiPlay}
|
||||||
|
onclick={handleResumePausedJobs}
|
||||||
|
size="small"
|
||||||
|
variant="ghost"
|
||||||
|
title={pausedQueues.join(', ')}
|
||||||
|
>
|
||||||
|
<Text class="hidden md:block">
|
||||||
|
{$t('resume_paused_jobs', { values: { count: pausedQueues.length } })}
|
||||||
|
</Text>
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
<HeaderButton action={CreateJob} />
|
||||||
|
<HeaderButton action={ManageConcurrency} />
|
||||||
|
</HStack>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
<section id="setting-content" class="flex place-content-center sm:mx-4">
|
||||||
|
<section class="w-full pb-28 sm:w-5/6 md:w-212.5">
|
||||||
|
{#if queues}
|
||||||
|
<JobsPanel {queues} />
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</AdminPageLayout>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { authenticate } from '$lib/utils/auth';
|
||||||
|
import { getFormatter } from '$lib/utils/i18n';
|
||||||
|
import { getQueues } from '@immich/sdk';
|
||||||
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
|
export const load = (async ({ url }) => {
|
||||||
|
await authenticate(url, { admin: true });
|
||||||
|
|
||||||
|
const queues = await getQueues();
|
||||||
|
const $t = await getFormatter();
|
||||||
|
|
||||||
|
return {
|
||||||
|
queues,
|
||||||
|
meta: {
|
||||||
|
title: $t('admin.queues'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}) satisfies PageLoad;
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import HeaderButton from '$lib/components/HeaderButton.svelte';
|
||||||
|
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
|
||||||
|
import OnEvents from '$lib/components/OnEvents.svelte';
|
||||||
|
import QueueGraph from '$lib/components/QueueGraph.svelte';
|
||||||
|
import { AppRoute } from '$lib/constants';
|
||||||
|
import { queueManager } from '$lib/managers/queue-manager.svelte';
|
||||||
|
import { asQueueItem, getQueueActions } from '$lib/services/queue.service';
|
||||||
|
import { type QueueResponseDto } from '@immich/sdk';
|
||||||
|
import { Badge, Card, CardBody, CardHeader, CardTitle, Container, Heading, HStack, Icon, Text } from '@immich/ui';
|
||||||
|
import { mdiClockTimeTwoOutline } from '@mdi/js';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
data: PageData;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { data }: Props = $props();
|
||||||
|
|
||||||
|
let queue = $derived(data.queue);
|
||||||
|
|
||||||
|
const { Pause, Resume, Empty, RemoveFailedJobs } = $derived(getQueueActions($t, queue));
|
||||||
|
const item = $derived(asQueueItem($t, queue));
|
||||||
|
|
||||||
|
onMount(() => queueManager.listen());
|
||||||
|
|
||||||
|
const onQueueUpdate = (update: QueueResponseDto) => {
|
||||||
|
if (update.name === queue.name) {
|
||||||
|
queue = update;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<OnEvents {onQueueUpdate} />
|
||||||
|
|
||||||
|
<AdminPageLayout breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}>
|
||||||
|
{#snippet buttons()}
|
||||||
|
<HStack gap={0}>
|
||||||
|
<HeaderButton action={Pause} />
|
||||||
|
<HeaderButton action={Resume} />
|
||||||
|
<HeaderButton action={Empty} />
|
||||||
|
<HeaderButton action={RemoveFailedJobs} />
|
||||||
|
</HStack>
|
||||||
|
{/snippet}
|
||||||
|
<div>
|
||||||
|
<Container size="large" center>
|
||||||
|
<div class="mb-1 mt-4 flex items-center gap-2">
|
||||||
|
<Heading tag="h1" size="large">{item.title}</Heading>
|
||||||
|
{#if queue.isPaused}
|
||||||
|
<Badge color="warning">
|
||||||
|
{$t('paused')}
|
||||||
|
</Badge>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<Text color="muted" class="mb-4">{item.subtitle}</Text>
|
||||||
|
|
||||||
|
<div class="flex gap-1 mb-4">
|
||||||
|
<Badge>{$t('active_count', { values: { count: queue.statistics.active } })}</Badge>
|
||||||
|
<Badge>{$t('waiting_count', { values: { count: queue.statistics.waiting } })}</Badge>
|
||||||
|
{#if queue.statistics.failed > 0}
|
||||||
|
<Badge color="danger">{$t('failed_count', { values: { count: queue.statistics.failed } })}</Badge>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8">
|
||||||
|
<Card color="secondary">
|
||||||
|
<CardHeader>
|
||||||
|
<div class="flex items-center gap-2 text-primary">
|
||||||
|
<Icon icon={mdiClockTimeTwoOutline} size="1.5rem" />
|
||||||
|
<CardTitle>{$t('admin.jobs_over_time')}</CardTitle>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<QueueGraph {queue} class="h-[300px]" />
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</AdminPageLayout>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { AppRoute } from '$lib/constants';
|
||||||
|
import { fromQueueSlug } from '$lib/services/queue.service';
|
||||||
|
import { authenticate, requestServerInfo } from '$lib/utils/auth';
|
||||||
|
import { getFormatter } from '$lib/utils/i18n';
|
||||||
|
import { getQueue, getQueueJobs, QueueJobStatus } from '@immich/sdk';
|
||||||
|
import { redirect } from '@sveltejs/kit';
|
||||||
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
|
export const load = (async ({ params, url }) => {
|
||||||
|
await authenticate(url, { admin: true });
|
||||||
|
await requestServerInfo();
|
||||||
|
|
||||||
|
const name = fromQueueSlug(params.name);
|
||||||
|
if (!name) {
|
||||||
|
redirect(302, AppRoute.ADMIN_QUEUES);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [queue, failedJobs] = await Promise.all([
|
||||||
|
getQueue({ name }),
|
||||||
|
getQueueJobs({ name, status: [QueueJobStatus.Failed, QueueJobStatus.Paused] }),
|
||||||
|
]);
|
||||||
|
const $t = await getFormatter();
|
||||||
|
|
||||||
|
return {
|
||||||
|
queue,
|
||||||
|
failedJobs,
|
||||||
|
meta: {
|
||||||
|
title: $t('admin.queue_details'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}) satisfies PageLoad;
|
||||||
Loading…
Reference in New Issue