helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Alex 2022-10-06 11:25:54 -05:00 • committed by GitHub
parent 854c214bc0
commit 7587f858ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
75 changed files with 3052 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

52
web/src/lib/components/admin-page/jobs/job-tile.svelte Normal file
View file

@ -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>

138
web/src/lib/components/admin-page/jobs/jobs-panel.svelte Normal file
View file

@ -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>