feat(server): dynamic job concurrency (#2622)

* feat(server): dynamic job concurrency

* styling and add setting info to top of the job list

* regenerate api

* remove DETECT_OBJECT job

---------

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

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

@@ -30,7 +30,7 @@
 </script>
 
 <div
-	class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-3xl overflow-hidden"
+	class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-[35px] overflow-hidden"
 >
 	<div class="flex flex-col w-full">
 		{#if queueStatus.isPaused}

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

@@ -9,15 +9,17 @@
 	import Icon from 'svelte-material-icons/DotsVertical.svelte';
 	import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
 	import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
-	import FolderMove from 'svelte-material-icons/FolderMove.svelte';
-	import Table from 'svelte-material-icons/Table.svelte';
 	import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
+	import FolderMove from 'svelte-material-icons/FolderMove.svelte';
+	import Information from 'svelte-material-icons/Information.svelte';
+	import Table from 'svelte-material-icons/Table.svelte';
 	import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
 	import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
 	import Video from 'svelte-material-icons/Video.svelte';
 	import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
 	import JobTile from './job-tile.svelte';
 	import StorageMigrationDescription from './storage-migration-description.svelte';
+	import { AppRoute } from '$lib/constants';
 
 	export let jobs: AllJobStatusResponseDto;
 
@@ -45,52 +47,52 @@
 
 	const onFaceConfirm = () => {
 		faceConfirm = false;
-		handleCommand(JobName.RecognizeFacesQueue, { command: JobCommand.Start, force: true });
+		handleCommand(JobName.RecognizeFaces, { command: JobCommand.Start, force: true });
 	};
 
 	const jobDetails: Partial<Record<JobName, JobDetails>> = {
-		[JobName.ThumbnailGenerationQueue]: {
+		[JobName.ThumbnailGeneration]: {
 			icon: FileJpgBox,
-			title: 'Generate Thumbnails',
+			title: api.getJobName(JobName.ThumbnailGeneration),
 			subtitle: 'Regenerate JPEG and WebP thumbnails'
 		},
-		[JobName.MetadataExtractionQueue]: {
+		[JobName.MetadataExtraction]: {
 			icon: Table,
-			title: 'Extract Metadata',
+			title: api.getJobName(JobName.MetadataExtraction),
 			subtitle: 'Extract metadata information i.e. GPS, resolution...etc'
 		},
-		[JobName.SidecarQueue]: {
-			title: 'Sidecar Metadata',
+		[JobName.Sidecar]: {
+			title: api.getJobName(JobName.Sidecar),
 			icon: FileXmlBox,
 			subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
 			allText: 'SYNC',
 			missingText: 'DISCOVER'
 		},
-		[JobName.ObjectTaggingQueue]: {
+		[JobName.ObjectTagging]: {
 			icon: TagMultiple,
-			title: 'Tag Objects',
+			title: api.getJobName(JobName.ObjectTagging),
 			subtitle:
 				'Run machine learning to tag objects\nNote that some assets may not have any objects detected'
 		},
-		[JobName.ClipEncodingQueue]: {
+		[JobName.ClipEncoding]: {
 			icon: VectorCircle,
-			title: 'Encode Clip',
+			title: api.getJobName(JobName.ClipEncoding),
 			subtitle: 'Run machine learning to generate clip embeddings'
 		},
-		[JobName.RecognizeFacesQueue]: {
+		[JobName.RecognizeFaces]: {
 			icon: FaceRecognition,
-			title: 'Recognize Faces',
+			title: api.getJobName(JobName.RecognizeFaces),
 			subtitle: 'Run machine learning to recognize faces',
 			handleCommand: handleFaceCommand
 		},
-		[JobName.VideoConversionQueue]: {
+		[JobName.VideoConversion]: {
 			icon: Video,
-			title: 'Transcode Videos',
+			title: api.getJobName(JobName.VideoConversion),
 			subtitle: 'Transcode videos not in the desired format'
 		},
-		[JobName.StorageTemplateMigrationQueue]: {
+		[JobName.StorageTemplateMigration]: {
 			icon: FolderMove,
-			title: 'Storage Template Migration',
+			title: api.getJobName(JobName.StorageTemplateMigration),
 			allowForceCommand: false,
 			component: StorageMigrationDescription
 		}
@@ -128,6 +130,17 @@
 {/if}
 
 <div class="flex flex-col gap-7">
+	<div class="flex dark:text-white text-black gap-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-full">
+		<Information />
+		<p class="text-xs">
+			MANAGE JOB CURRENCENCY LEVEL IN
+			<a
+				href={`${AppRoute.ADMIN_SETTINGS}?open=job-settings`}
+				class="text-immich-primary dark:text-immich-dark-primary font-medium">JOB SETTINGS</a
+			>
+		</p>
+	</div>
+
 	{#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
 		{@const { jobCounts, queueStatus } = jobs[jobName]}
 		<JobTile

web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { api, JobName, SystemConfigJobDto } from '@api';
+	import { isEqual } from 'lodash-es';
+	import { fade } from 'svelte/transition';
+	import { handleError } from '../../../../utils/handle-error';
+	import SettingButtonsRow from '../setting-buttons-row.svelte';
+	import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+
+	export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
+
+	let savedConfig: SystemConfigJobDto;
+	let defaultConfig: SystemConfigJobDto;
+
+	const ignoredJobs = [JobName.BackgroundTask, JobName.Search] as JobName[];
+	const jobNames = Object.values(JobName).filter(
+		(jobName) => !ignoredJobs.includes(jobName as JobName)
+	);
+
+	async function getConfigs() {
+		[savedConfig, defaultConfig] = await Promise.all([
+			api.systemConfigApi.getConfig().then((res) => res.data.job),
+			api.systemConfigApi.getDefaults().then((res) => res.data.job)
+		]);
+	}
+
+	async function saveSetting() {
+		try {
+			const { data: configs } = await api.systemConfigApi.getConfig();
+
+			const result = await api.systemConfigApi.updateConfig({
+				systemConfigDto: {
+					...configs,
+					job: jobConfig
+				}
+			});
+
+			jobConfig = { ...result.data.job };
+			savedConfig = { ...result.data.job };
+
+			notificationController.show({ message: 'Job settings saved', type: NotificationType.Info });
+		} catch (error) {
+			handleError(error, 'Unable to save settings');
+		}
+	}
+
+	async function reset() {
+		const { data: resetConfig } = await api.systemConfigApi.getConfig();
+
+		jobConfig = { ...resetConfig.job };
+		savedConfig = { ...resetConfig.job };
+
+		notificationController.show({
+			message: 'Reset Job settings to the recent saved settings',
+			type: NotificationType.Info
+		});
+	}
+
+	async function resetToDefault() {
+		const { data: configs } = await api.systemConfigApi.getDefaults();
+
+		jobConfig = { ...configs.job };
+		defaultConfig = { ...configs.job };
+
+		notificationController.show({
+			message: 'Reset Job settings to default',
+			type: NotificationType.Info
+		});
+	}
+</script>
+
+<div>
+	{#await getConfigs() then}
+		<div in:fade={{ duration: 500 }}>
+			<form autocomplete="off" on:submit|preventDefault>
+				{#each jobNames as jobName}
+					<div class="flex flex-col gap-4 ml-4 mt-4">
+						<SettingInputField
+							inputType={SettingInputFieldType.NUMBER}
+							label="{api.getJobName(jobName)} Concurrency"
+							desc=""
+							bind:value={jobConfig[jobName].concurrency}
+							required={true}
+							isEdited={!(jobConfig[jobName].concurrency == savedConfig[jobName].concurrency)}
+						/>
+					</div>
+				{/each}
+
+				<div class="ml-4">
+					<SettingButtonsRow
+						on:reset={reset}
+						on:save={saveSetting}
+						on:reset-to-default={resetToDefault}
+						showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+					/>
+				</div>
+			</form>
+		</div>
+	{/await}
+</div>

web/src/lib/components/admin-page/settings/setting-input-field.svelte

@@ -21,6 +21,9 @@
 
 	const handleInput = (e: Event) => {
 		value = (e.target as HTMLInputElement).value;
+		if (inputType === SettingInputFieldType.NUMBER) {
+			value = Number(value) || 0;
+		}
 	};
 </script>