feat(web): pause and resume jobs (#2125)

* feat(web): pause and resume jobs

* add bg color to status instead of using badge

* styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/app.css

@@ -111,6 +111,6 @@ input:focus-visible {
 	}
 
 	.job-play-button {
-		@apply h-full flex flex-col place-items-center place-content-center px-8 text-gray-600 transition-all hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-sm dark:hover:text-black w-[120px] gap-2;
+		@apply h-full flex flex-col place-items-center place-content-center px-8 text-gray-600 transition-all hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-sm dark:hover:text-black gap-2;
 	}
 }

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -1,52 +1,60 @@
 <script lang="ts">
-	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 	import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
 	import Play from 'svelte-material-icons/Play.svelte';
+	import Pause from 'svelte-material-icons/Pause.svelte';
+	import FastForward from 'svelte-material-icons/FastForward.svelte';
 	import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
 	import { locale } from '$lib/stores/preferences.store';
 	import { createEventDispatcher } from 'svelte';
-	import { JobCountsDto } from '@api';
+	import { JobCommand, JobCommandDto, JobCountsDto } from '@api';
+	import Badge from '$lib/components/elements/badge.svelte';
 
 	export let title: string;
-	export let subtitle: string;
+	export let subtitle: string | undefined = undefined;
 	export let jobCounts: JobCountsDto;
-	/**
-	 * Show options to run job on all assets of just missing ones
-	 */
-	export let showOptions = true;
+	export let allowForceCommand = true;
 
 	$: isRunning = jobCounts.active > 0 || jobCounts.waiting > 0;
+	$: waitingCount = jobCounts.waiting + jobCounts.paused;
+	$: isPause = jobCounts.paused > 0;
 
-	const dispatch = createEventDispatcher();
-
-	const run = (force: boolean) => {
-		dispatch('click', { force });
-	};
+	const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
 </script>
 
-<div class="flex justify-between rounded-3xl bg-gray-100 dark:bg-immich-dark-gray">
-	<div id="job-info" class="w-[70%] p-9">
-		<div class="flex flex-col gap-2">
-			<div class="text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
-				{title.toUpperCase()}
+<div
+	class="flex justify-between rounded-3xl bg-gray-100 dark:bg-immich-dark-gray transition-all
+  {isRunning ? 'dark:bg-immich-primary/30 bg-immich-primary/20' : ''} 
+  {isPause ? 'dark:bg-yellow-100/30 bg-yellow-500/20' : ''}"
+>
+	<div id="job-info" class="w-full p-9">
+		<div class="flex flex-col gap-2 ">
+			<div
+				class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
+			>
+				<span>{title.toUpperCase()}</span>
+				<div class="flex gap-2">
+					{#if jobCounts.failed > 0}
+						<Badge color="danger">
+							{jobCounts.failed.toLocaleString($locale)} failed
+						</Badge>
+					{/if}
+				</div>
 			</div>
 
-			{#if subtitle.length > 0}
-				<div class="text-sm dark:text-white">{subtitle}</div>
+			{#if subtitle}
+				<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
 			{/if}
-			<div class="text-sm dark:text-white"><slot /></div>
+			<div class="text-sm dark:text-white">
+				<slot />
+			</div>
 
-			<div class="flex w-full mt-4">
+			<div class="flex w-full max-w-md mt-2">
 				<div
 					class="flex place-items-center justify-between bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray w-full rounded-tl-lg rounded-bl-lg py-4 pl-4 pr-6"
 				>
 					<p>Active</p>
 					<p class="text-2xl">
-						{#if jobCounts.active !== undefined}
-							{jobCounts.active.toLocaleString($locale)}
-						{:else}
-							<LoadingSpinner />
-						{/if}
+						{jobCounts.active.toLocaleString($locale)}
 					</p>
 				</div>
 
@@ -54,49 +62,50 @@
 					class="flex place-items-center justify-between bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray w-full rounded-tr-lg rounded-br-lg py-4 pr-4 pl-6"
 				>
 					<p class="text-2xl">
-						{#if jobCounts.waiting !== undefined}
-							{jobCounts.waiting.toLocaleString($locale)}
-						{:else}
-							<LoadingSpinner />
-						{/if}
+						{waitingCount.toLocaleString($locale)}
 					</p>
 					<p>Waiting</p>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div id="job-action" class="flex flex-col">
+	<div id="job-action" class="flex flex-col rounded-r-3xl w-32 overflow-hidden">
 		{#if isRunning}
 			<button
-				class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl rounded-tr-3xl disabled:cursor-not-allowed"
-				disabled
+				class="job-play-button bg-gray-300/90 dark:bg-gray-600/90"
+				on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
 			>
-				<LoadingSpinner />
+				<Pause size="48" /> PAUSE
+			</button>
+		{:else if jobCounts.paused > 0}
+			<button
+				class="job-play-button bg-gray-300 dark:bg-gray-600/90"
+				on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
+			>
+				<span class=" {isPause ? 'animate-pulse' : ''}">
+					<FastForward size="48" /> RESUME
+				</span>
+			</button>
+		{:else if allowForceCommand}
+			<button
+				class="job-play-button bg-gray-300 dark:bg-gray-600"
+				on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}
+			>
+				<AllInclusive size="18" /> ALL
+			</button>
+			<button
+				class="job-play-button bg-gray-300/90 dark:bg-gray-600/90"
+				on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
+			>
+				<SelectionSearch size="18" /> MISSING
+			</button>
+		{:else}
+			<button
+				class="job-play-button bg-gray-300/90 dark:bg-gray-600/90"
+				on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
+			>
+				<Play size="48" /> START
 			</button>
-		{/if}
-
-		{#if !isRunning}
-			{#if showOptions}
-				<button
-					class="job-play-button bg-gray-300 dark:bg-gray-600 rounded-tr-3xl"
-					on:click={() => run(true)}
-				>
-					<AllInclusive size="18" /> ALL
-				</button>
-				<button
-					class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl"
-					on:click={() => run(false)}
-				>
-					<SelectionSearch size="18" /> MISSING
-				</button>
-			{:else}
-				<button
-					class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl rounded-tr-3xl"
-					on:click={() => run(true)}
-				>
-					<Play size="48" />
-				</button>
-			{/if}
 		{/if}
 	</div>
 </div>

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -1,115 +1,87 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
 	import { handleError } from '$lib/utils/handle-error';
-	import { AllJobStatusResponseDto, api, JobCommand, JobName } from '@api';
-	import { onDestroy, onMount } from 'svelte';
+	import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
+	import type { ComponentType } from 'svelte';
 	import JobTile from './job-tile.svelte';
+	import StorageMigrationDescription from './storage-migration-description.svelte';
 
-	let jobs: AllJobStatusResponseDto;
-	let timer: NodeJS.Timer;
+	export let jobs: AllJobStatusResponseDto;
 
-	const load = async () => {
-		const { data } = await api.jobApi.getAllJobsStatus();
-		jobs = data;
+	type JobDetails = {
+		title: string;
+		subtitle?: string;
+		allowForceCommand?: boolean;
+		component?: ComponentType;
 	};
 
-	onMount(async () => {
-		await load();
-		timer = setInterval(async () => await load(), 5_000);
-	});
-
-	onDestroy(() => {
-		clearInterval(timer);
-	});
-
-	function getJobLabel(jobName: JobName) {
-		const names: Record<JobName, string> = {
-			[JobName.ThumbnailGenerationQueue]: 'Generate Thumbnails',
-			[JobName.MetadataExtractionQueue]: 'Extract Metadata',
-			[JobName.VideoConversionQueue]: 'Transcode Videos',
-			[JobName.ObjectTaggingQueue]: 'Tag Objects',
-			[JobName.ClipEncodingQueue]: 'Clip Encoding',
-			[JobName.BackgroundTaskQueue]: 'Background Task',
-			[JobName.StorageTemplateMigrationQueue]: 'Storage Template Migration',
-			[JobName.SearchQueue]: 'Search'
-		};
-
-		return names[jobName];
-	}
-
-	const start = async (jobId: JobName, force: boolean) => {
-		const label = getJobLabel(jobId);
-
-		try {
-			await api.jobApi.sendJobCommand(jobId, { command: JobCommand.Start, force });
-
-			jobs[jobId].active += 1;
-
-			notificationController.show({
-				message: `Started job: ${label}`,
-				type: NotificationType.Info
-			});
-		} catch (error) {
-			handleError(error, `Unable to start job: ${label}`);
+	const jobDetails: { [Key in JobName]?: JobDetails } = {
+		[JobName.ThumbnailGenerationQueue]: {
+			title: 'Generate Thumbnails',
+			subtitle: 'Regenerate JPEG and WebP thumbnails'
+		},
+		[JobName.MetadataExtractionQueue]: {
+			title: 'Extract Metadata',
+			subtitle: 'Extract metadata information i.e. GPS, resolution...etc'
+		},
+		[JobName.ObjectTaggingQueue]: {
+			title: 'Tag Objects',
+			subtitle:
+				'Run machine learning to tag objects\nNote that some assets may not have any objects detected'
+		},
+		[JobName.ClipEncodingQueue]: {
+			title: 'Encode Clip',
+			subtitle: 'Run machine learning to generate clip embeddings'
+		},
+		[JobName.VideoConversionQueue]: {
+			title: 'Transcode Videos',
+			subtitle: 'Transcode videos not in the desired format'
+		},
+		[JobName.StorageTemplateMigrationQueue]: {
+			title: 'Storage Template Migration',
+			allowForceCommand: false,
+			component: StorageMigrationDescription
 		}
 	};
+
+	const jobDetailsArray = Object.entries(jobDetails) as [JobName, JobDetails][];
+
+	async function runJob(jobId: JobName, jobCommand: JobCommandDto) {
+		const title = jobDetails[jobId]?.title;
+
+		try {
+			await api.jobApi.sendJobCommand(jobId, jobCommand);
+
+			// TODO: Return actual job status from server and use that.
+			switch (jobCommand.command) {
+				case JobCommand.Start:
+					jobs[jobId].active += 1;
+					break;
+				case JobCommand.Resume:
+					jobs[jobId].active += 1;
+					jobs[jobId].paused = 0;
+					break;
+				case JobCommand.Pause:
+					jobs[jobId].paused += 1;
+					jobs[jobId].active = 0;
+					jobs[jobId].waiting = 0;
+					break;
+			}
+		} catch (error) {
+			handleError(error, `Command '${jobCommand.command}' failed for job: ${title}`);
+		}
+	}
 </script>
 
 <div class="flex flex-col gap-7">
-	{#if jobs}
+	{#each jobDetailsArray as [jobName, { title, subtitle, allowForceCommand, component }]}
 		<JobTile
-			title="Generate thumbnails"
-			subtitle="Regenerate JPEG and WebP thumbnails"
-			on:click={(e) => start(JobName.ThumbnailGenerationQueue, e.detail.force)}
-			jobCounts={jobs[JobName.ThumbnailGenerationQueue]}
-		/>
-
-		<JobTile
-			title="Extract Metadata"
-			subtitle="Extract metadata information i.e. GPS, resolution...etc"
-			on:click={(e) => start(JobName.MetadataExtractionQueue, e.detail.force)}
-			jobCounts={jobs[JobName.MetadataExtractionQueue]}
-		/>
-
-		<JobTile
-			title="Tag Objects"
-			subtitle="Run machine learning to tag objects"
-			on:click={(e) => start(JobName.ObjectTaggingQueue, e.detail.force)}
-			jobCounts={jobs[JobName.ObjectTaggingQueue]}
+			{title}
+			{subtitle}
+			{allowForceCommand}
+			on:command={({ detail }) => runJob(jobName, detail)}
+			jobCounts={jobs[jobName]}
 		>
-			Note that some assets may not have any objects detected
+			<svelte:component this={component} />
 		</JobTile>
-
-		<JobTile
-			title="Encode Clip"
-			subtitle="Run machine learning to generate clip embeddings"
-			on:click={(e) => start(JobName.ClipEncodingQueue, e.detail.force)}
-			jobCounts={jobs[JobName.ClipEncodingQueue]}
-		/>
-
-		<JobTile
-			title="Transcode Videos"
-			subtitle="Transcode videos not in the desired format"
-			on:click={(e) => start(JobName.VideoConversionQueue, e.detail.force)}
-			jobCounts={jobs[JobName.VideoConversionQueue]}
-		/>
-
-		<JobTile
-			title="Storage migration"
-			showOptions={false}
-			subtitle={''}
-			on:click={(e) => start(JobName.StorageTemplateMigrationQueue, e.detail.force)}
-			jobCounts={jobs[JobName.StorageTemplateMigrationQueue]}
-		>
-			Apply the current
-			<a
-				href="/admin/system-settings?open=storage-template"
-				class="text-immich-primary dark:text-immich-dark-primary">Storage template</a
-			>
-			to previously uploaded assets
-		</JobTile>
-	{/if}
+	{/each}
 </div>

web/src/lib/components/admin-page/jobs/storage-migration-description.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { AppRoute } from '$lib/constants';
+</script>
+
+Apply the current
+<a
+	href={`${AppRoute.ADMIN_SETTINGS}?open=storage-template`}
+	class="text-immich-primary dark:text-immich-dark-primary">Storage template</a
+>
+to previously uploaded assets

web/src/lib/components/elements/badge.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" context="module">
+	export type BadgeColor = 'primary' | 'dark' | 'warning' | 'success' | 'danger';
+	export type BadgeRounded = false | true | 'full';
+</script>
+
+<script lang="ts">
+	export let color: BadgeColor = 'primary';
+	export let rounded: BadgeRounded = true;
+
+	const colorClasses: { [Key in BadgeColor]: string } = {
+		primary:
+			'text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary',
+		dark: 'text-neutral-50 dark:text-neutral-50 bg-neutral-900 dark:bg-neutral-900',
+		warning: 'text-yellow-900 bg-yellow-200',
+		success: 'text-green-900 bg-green-200',
+		danger: 'text-red-900 bg-red-200'
+	};
+</script>
+
+<span
+	class="inline-block h-min whitespace-nowrap px-[0.65em] pt-[0.35em] pb-[0.25em] text-center align-baseline text-[0.65em] font-bold leading-none {colorClasses[
+		color
+	]}"
+	class:rounded={rounded === true}
+	class:rounded-full={rounded === 'full'}
+>
+	<slot />
+</span>

web/src/routes/admin/jobs-status/+page.server.ts

@@ -1,18 +1,25 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
-	const { user } = await parent();
-
+export const load = (async ({ locals: { user, api } }) => {
 	if (!user) {
-		throw redirect(302, '/auth/login');
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	} else if (!user.isAdmin) {
-		throw redirect(302, '/photos');
+		throw redirect(302, AppRoute.PHOTOS);
 	}
 
-	return {
-		meta: {
-			title: 'Job Status'
-		}
-	};
-};
+	try {
+		const { data: jobs } = await api.jobApi.getAllJobsStatus();
+
+		return {
+			jobs,
+			meta: {
+				title: 'Job Status'
+			}
+		};
+	} catch (err) {
+		console.error('[jobs] > getAllJobsStatus', err);
+		throw err;
+	}
+}) satisfies PageServerLoad;

web/src/routes/admin/jobs-status/+page.svelte

@@ -1,7 +1,26 @@
-<script>
+<script lang="ts">
 	import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
+	import { api } from '@api';
+	import { onDestroy, onMount } from 'svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	let jobs = data.jobs;
+	let timer: NodeJS.Timer;
+
+	const load = async () => {
+		const { data } = await api.jobApi.getAllJobsStatus();
+		jobs = data;
+	};
+
+	onMount(async () => {
+		await load();
+		timer = setInterval(load, 5_000);
+	});
+
+	onDestroy(() => {
+		clearInterval(timer);
+	});
 </script>
 
-<section>
-	<JobsPanel />
-</section>
+<JobsPanel {jobs} />