mirror of
https://github.com/immich-app/immich.git
synced 2024-11-28 09:33:27 +02:00
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>
This commit is contained in:
Michel Heusschen
GitHub
parent
23e4449f27
commit
aaaf1a6cf8
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
28
web/src/lib/components/elements/badge.svelte
Normal file
28
web/src/lib/components/elements/badge.svelte
Normal file
@ -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>
|
||||
@ -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;
|
||||
|
||||
@ -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} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user