feat(server/web) Add manual job trigger mechanism to the web (#767)

web/src/api/api.ts

@@ -4,6 +4,7 @@ import {
 	AuthenticationApi,
 	Configuration,
 	DeviceInfoApi,
+	JobApi,
 	ServerInfoApi,
 	UserApi
 } from './open-api';
@@ -15,6 +16,8 @@ class ImmichApi {
 	public authenticationApi: AuthenticationApi;
 	public deviceInfoApi: DeviceInfoApi;
 	public serverInfoApi: ServerInfoApi;
+	public jobApi: JobApi;
+
 	private config = new Configuration({ basePath: '/api' });
 
 	constructor() {
@@ -24,6 +27,7 @@ class ImmichApi {
 		this.authenticationApi = new AuthenticationApi(this.config);
 		this.deviceInfoApi = new DeviceInfoApi(this.config);
 		this.serverInfoApi = new ServerInfoApi(this.config);
+		this.jobApi = new JobApi(this.config);
 	}
 
 	public setAccessToken(accessToken: string) {

web/src/api/open-api/api.ts

@@ -170,6 +170,61 @@ export interface AlbumResponseDto {
      */
     'assets': Array<AssetResponseDto>;
 }
+/**
+ * 
+ * @export
+ * @interface AllJobStatusResponseDto
+ */
+export interface AllJobStatusResponseDto {
+    /**
+     * 
+     * @type {JobCounts}
+     * @memberof AllJobStatusResponseDto
+     */
+    'thumbnailGenerationQueueCount': JobCounts;
+    /**
+     * 
+     * @type {JobCounts}
+     * @memberof AllJobStatusResponseDto
+     */
+    'metadataExtractionQueueCount': JobCounts;
+    /**
+     * 
+     * @type {JobCounts}
+     * @memberof AllJobStatusResponseDto
+     */
+    'videoConversionQueueCount': JobCounts;
+    /**
+     * 
+     * @type {JobCounts}
+     * @memberof AllJobStatusResponseDto
+     */
+    'machineLearningQueueCount': JobCounts;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AllJobStatusResponseDto
+     */
+    'isThumbnailGenerationActive': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AllJobStatusResponseDto
+     */
+    'isMetadataExtractionActive': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AllJobStatusResponseDto
+     */
+    'isVideoConversionActive': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AllJobStatusResponseDto
+     */
+    'isMachineLearningActive': boolean;
+}
 /**
  * 
  * @export
@@ -683,10 +738,16 @@ export type DeviceTypeEnum = typeof DeviceTypeEnum[keyof typeof DeviceTypeEnum];
 export interface ExifResponseDto {
     /**
      * 
-     * @type {string}
+     * @type {number}
      * @memberof ExifResponseDto
      */
-    'id'?: string | null;
+    'id'?: number | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'fileSizeInByte'?: number | null;
     /**
      * 
      * @type {string}
@@ -717,12 +778,6 @@ export interface ExifResponseDto {
      * @memberof ExifResponseDto
      */
     'exifImageHeight'?: number | null;
-    /**
-     * 
-     * @type {number}
-     * @memberof ExifResponseDto
-     */
-    'fileSizeInByte'?: number | null;
     /**
      * 
      * @type {string}
@@ -828,6 +883,105 @@ export interface GetAssetCountByTimeBucketDto {
      */
     'timeGroup': TimeGroupEnum;
 }
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const JobCommand = {
+    Start: 'start',
+    Stop: 'stop'
+} as const;
+
+export type JobCommand = typeof JobCommand[keyof typeof JobCommand];
+
+
+/**
+ * 
+ * @export
+ * @interface JobCommandDto
+ */
+export interface JobCommandDto {
+    /**
+     * 
+     * @type {JobCommand}
+     * @memberof JobCommandDto
+     */
+    'command': JobCommand;
+}
+/**
+ * 
+ * @export
+ * @interface JobCounts
+ */
+export interface JobCounts {
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCounts
+     */
+    'active': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCounts
+     */
+    'completed': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCounts
+     */
+    'failed': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCounts
+     */
+    'delayed': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCounts
+     */
+    'waiting': number;
+}
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const JobId = {
+    ThumbnailGeneration: 'thumbnail-generation',
+    MetadataExtraction: 'metadata-extraction',
+    VideoConversion: 'video-conversion',
+    MachineLearning: 'machine-learning'
+} as const;
+
+export type JobId = typeof JobId[keyof typeof JobId];
+
+
+/**
+ * 
+ * @export
+ * @interface JobStatusResponseDto
+ */
+export interface JobStatusResponseDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof JobStatusResponseDto
+     */
+    'isActive': boolean;
+    /**
+     * 
+     * @type {object}
+     * @memberof JobStatusResponseDto
+     */
+    'queueCount': object;
+}
 /**
  * 
  * @export
@@ -3682,6 +3836,247 @@ export class DeviceInfoApi extends BaseAPI {
 }
 
 
+/**
+ * JobApi - axios parameter creator
+ * @export
+ */
+export const JobApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllJobsStatus: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/jobs`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {JobId} jobId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getJobStatus: async (jobId: JobId, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'jobId' is not null or undefined
+            assertParamExists('getJobStatus', 'jobId', jobId)
+            const localVarPath = `/jobs/{jobId}`
+                .replace(`{${"jobId"}}`, encodeURIComponent(String(jobId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {JobId} jobId 
+         * @param {JobCommandDto} jobCommandDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        sendJobCommand: async (jobId: JobId, jobCommandDto: JobCommandDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'jobId' is not null or undefined
+            assertParamExists('sendJobCommand', 'jobId', jobId)
+            // verify required parameter 'jobCommandDto' is not null or undefined
+            assertParamExists('sendJobCommand', 'jobCommandDto', jobCommandDto)
+            const localVarPath = `/jobs/{jobId}`
+                .replace(`{${"jobId"}}`, encodeURIComponent(String(jobId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(jobCommandDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * JobApi - functional programming interface
+ * @export
+ */
+export const JobApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = JobApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAllJobsStatus(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AllJobStatusResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllJobsStatus(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {JobId} jobId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getJobStatus(jobId: JobId, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<JobStatusResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getJobStatus(jobId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {JobId} jobId 
+         * @param {JobCommandDto} jobCommandDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async sendJobCommand(jobId: JobId, jobCommandDto: JobCommandDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<number>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.sendJobCommand(jobId, jobCommandDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * JobApi - factory interface
+ * @export
+ */
+export const JobApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = JobApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllJobsStatus(options?: any): AxiosPromise<AllJobStatusResponseDto> {
+            return localVarFp.getAllJobsStatus(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {JobId} jobId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getJobStatus(jobId: JobId, options?: any): AxiosPromise<JobStatusResponseDto> {
+            return localVarFp.getJobStatus(jobId, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {JobId} jobId 
+         * @param {JobCommandDto} jobCommandDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        sendJobCommand(jobId: JobId, jobCommandDto: JobCommandDto, options?: any): AxiosPromise<number> {
+            return localVarFp.sendJobCommand(jobId, jobCommandDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * JobApi - object-oriented interface
+ * @export
+ * @class JobApi
+ * @extends {BaseAPI}
+ */
+export class JobApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof JobApi
+     */
+    public getAllJobsStatus(options?: AxiosRequestConfig) {
+        return JobApiFp(this.configuration).getAllJobsStatus(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {JobId} jobId 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof JobApi
+     */
+    public getJobStatus(jobId: JobId, options?: AxiosRequestConfig) {
+        return JobApiFp(this.configuration).getJobStatus(jobId, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {JobId} jobId 
+     * @param {JobCommandDto} jobCommandDto 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof JobApi
+     */
+    public sendJobCommand(jobId: JobId, jobCommandDto: JobCommandDto, options?: AxiosRequestConfig) {
+        return JobApiFp(this.configuration).sendJobCommand(jobId, jobCommandDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
 /**
  * ServerInfoApi - axios parameter creator
  * @export

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	export let title: string;
+	export let subtitle: string;
+	export let buttonTitle = 'Run';
+	export let jobStatus: boolean;
+	export let waitingJobCount: number;
+	export let activeJobCount: number;
+	const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex border p-6 rounded-2xl bg-white">
+	<div class="w-[70%]">
+		<h1 class="font-medium text-immich-primary">{title}</h1>
+		<p class="text-sm mt-1 font-medium">{subtitle}</p>
+		<p class="text-sm">
+			<slot />
+		</p>
+		<table class="text-left w-full mt-4">
+			<!-- table header -->
+			<thead class="border rounded-md mb-2 bg-gray-50 flex text-immich-primary w-full h-12">
+				<tr class="flex w-full place-items-center">
+					<th class="text-center w-1/3 font-medium text-sm">Status</th>
+					<th class="text-center w-1/3 font-medium text-sm">Active</th>
+					<th class="text-center w-1/3 font-medium text-sm">Waiting</th>
+				</tr>
+			</thead>
+			<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border">
+				<tr class="text-center flex place-items-center w-full h-[40px]">
+					<td class="text-sm px-2 w-1/3 text-ellipsis">{jobStatus ? 'Active' : 'Idle'}</td>
+					<td class="text-sm px-2 w-1/3 text-ellipsis">{activeJobCount}</td>
+					<td class="text-sm px-2 w-1/3 text-ellipsis">{waitingJobCount}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+	<div class="w-[30%] flex place-items-center place-content-end">
+		<button
+			on:click={() => dispatch('click')}
+			class="border px-6 py-3 text-sm bg-gray-50 font-medium rounded-2xl hover:bg-immich-primary/10 transition-all hover:cursor-pointer disabled:cursor-not-allowed"
+			disabled={jobStatus}
+		>
+			{#if jobStatus}
+				<LoadingSpinner />
+			{:else}
+				{buttonTitle}
+			{/if}
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { AllJobStatusResponseDto, api, JobCommand, JobId } from '@api';
+	import { onDestroy, onMount } from 'svelte';
+	import JobTile from './job-tile.svelte';
+
+	let allJobsStatus: AllJobStatusResponseDto;
+	let setIntervalHandler: NodeJS.Timer;
+	onMount(async () => {
+		const { data } = await api.jobApi.getAllJobsStatus();
+		allJobsStatus = data;
+
+		setIntervalHandler = setInterval(async () => {
+			const { data } = await api.jobApi.getAllJobsStatus();
+			allJobsStatus = data;
+		}, 1000);
+	});
+	1;
+
+	onDestroy(() => {
+		clearInterval(setIntervalHandler);
+	});
+
+	const runThumbnailGeneration = async () => {
+		try {
+			const { data } = await api.jobApi.sendJobCommand(JobId.ThumbnailGeneration, {
+				command: JobCommand.Start
+			});
+
+			if (data) {
+				notificationController.show({
+					message: `Thumbnail generation job started for ${data} asset`,
+					type: NotificationType.Info
+				});
+			} else {
+				notificationController.show({
+					message: `No missing thumbnails found`,
+					type: NotificationType.Info
+				});
+			}
+		} catch (e) {
+			console.log('[ERROR] runThumbnailGeneration', e);
+
+			notificationController.show({
+				message: `Error running thumbnail generation job, check console for more detail`,
+				type: NotificationType.Error
+			});
+		}
+	};
+
+	const runExtractEXIF = async () => {
+		try {
+			const { data } = await api.jobApi.sendJobCommand(JobId.MetadataExtraction, {
+				command: JobCommand.Start
+			});
+
+			if (data) {
+				notificationController.show({
+					message: `Extract EXIF job started for ${data} asset`,
+					type: NotificationType.Info
+				});
+			} else {
+				notificationController.show({
+					message: `No missing EXIF found`,
+					type: NotificationType.Info
+				});
+			}
+		} catch (e) {
+			console.log('[ERROR] runExtractEXIF', e);
+
+			notificationController.show({
+				message: `Error running extract EXIF job, check console for more detail`,
+				type: NotificationType.Error
+			});
+		}
+	};
+
+	const runMachineLearning = async () => {
+		try {
+			const { data } = await api.jobApi.sendJobCommand(JobId.MachineLearning, {
+				command: JobCommand.Start
+			});
+
+			if (data) {
+				notificationController.show({
+					message: `Object detection job started for ${data} asset`,
+					type: NotificationType.Info
+				});
+			} else {
+				notificationController.show({
+					message: `No missing object detection found`,
+					type: NotificationType.Info
+				});
+			}
+		} catch (e) {
+			console.log('[ERROR] runMachineLearning', e);
+
+			notificationController.show({
+				message: `Error running machine learning job, check console for more detail`,
+				type: NotificationType.Error
+			});
+		}
+	};
+</script>
+
+<div class="flex flex-col gap-6">
+	<JobTile
+		title={'Generate thumbnails'}
+		subtitle={'Regenerate missing thumbnail (JPEG, WEBP)'}
+		on:click={runThumbnailGeneration}
+		jobStatus={allJobsStatus?.isThumbnailGenerationActive}
+		waitingJobCount={allJobsStatus?.thumbnailGenerationQueueCount.waiting}
+		activeJobCount={allJobsStatus?.thumbnailGenerationQueueCount.active}
+	/>
+
+	<JobTile
+		title={'Extract EXIF'}
+		subtitle={'Extract missing EXIF information'}
+		on:click={runExtractEXIF}
+		jobStatus={allJobsStatus?.isMetadataExtractionActive}
+		waitingJobCount={allJobsStatus?.metadataExtractionQueueCount.waiting}
+		activeJobCount={allJobsStatus?.metadataExtractionQueueCount.active}
+	/>
+
+	<JobTile
+		title={'Detect objects'}
+		subtitle={'Run machine learning process to detect and classify objects'}
+		on:click={runMachineLearning}
+		jobStatus={allJobsStatus?.isMachineLearningActive}
+		waitingJobCount={allJobsStatus?.machineLearningQueueCount.waiting}
+		activeJobCount={allJobsStatus?.machineLearningQueueCount.active}
+	>
+		Note that some asset does not have any object detected, this is normal.
+	</JobTile>
+</div>

web/src/lib/components/shared-components/scrollbar/scrollbar.svelte

@@ -94,7 +94,7 @@
 
 <div
 	id="immich-scrubbable-scrollbar"
-	class="fixed right-0 bg-immich-bg z-10 hover:cursor-row-resize select-none"
+	class="fixed right-0 bg-immich-bg z-[999] hover:cursor-row-resize select-none "
 	style:width={isDragging ? '100vw' : '60px'}
 	style:background-color={isDragging ? 'transparent' : 'transparent'}
 	on:mouseenter={() => (isHover = true)}

web/src/lib/models/admin-sidebar-selection.ts

@@ -1,5 +1,7 @@
 export enum AdminSideBarSelection {
-	USER_MANAGEMENT = 'User management'
+	USER_MANAGEMENT = 'User management',
+	JOBS = 'Jobs',
+	SETTINGS = 'Settings'
 }
 
 export enum AppSideBarSelection {

web/src/routes/admin/+layout.svelte

@@ -0,0 +1,3 @@
+<main>
+	<slot />
+</main>

web/src/routes/admin/+page.svelte

@@ -4,6 +4,7 @@
 	import { AdminSideBarSelection } from '$lib/models/admin-sidebar-selection';
 	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
+	import Cog from 'svelte-material-icons/Cog.svelte';
 	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
 	import UserManagement from '$lib/components/admin-page/user-management.svelte';
 	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@@ -12,6 +13,7 @@
 	import StatusBox from '$lib/components/shared-components/status-box.svelte';
 	import type { PageData } from './$types';
 	import { api, UserResponseDto } from '@api';
+	import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
 
 	let selectedAction: AdminSideBarSelection = AdminSideBarSelection.USER_MANAGEMENT;
 
@@ -104,14 +106,21 @@
 {/if}
 
 <section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
-	<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col">
+	<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col gap-1">
 		<SideBarButton
-			title="User"
+			title="Users"
 			logo={AccountMultipleOutline}
 			actionType={AdminSideBarSelection.USER_MANAGEMENT}
 			isSelected={selectedAction === AdminSideBarSelection.USER_MANAGEMENT}
 			on:selected={onButtonClicked}
 		/>
+		<SideBarButton
+			title="Jobs"
+			logo={Cog}
+			actionType={AdminSideBarSelection.JOBS}
+			isSelected={selectedAction === AdminSideBarSelection.JOBS}
+			on:selected={onButtonClicked}
+		/>
 
 		<div class="mb-6 mt-auto">
 			<StatusBox />
@@ -132,6 +141,9 @@
 						on:edit-user={editUserHandler}
 					/>
 				{/if}
+				{#if selectedAction === AdminSideBarSelection.JOBS}
+					<JobsPanel />
+				{/if}
 			</section>
 		</section>
 	</section>