self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

feat(web): job tile icons (#2546)

Browse Source
This commit is contained in:
Jason Rasmussen 2023-05-23 16:04:24 -04:00 committed by GitHub
parent 11a5a990d0
commit e2bd7e1e08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
<script lang="ts">
import type Icon from 'svelte-material-icons/AbTesting.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';
@ -17,6 +18,7 @@
export let jobCounts: JobCountsDto;
export let queueStatus: QueueStatusDto;
export let allowForceCommand = true;
export let icon: typeof Icon;
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
@ -37,7 +39,10 @@
<div
class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
>
<span>{title.toUpperCase()}</span>
<span class="flex gap-2 items-center">
<svelte:component this={icon} size="1.25em" class="shrink-0 hidden sm:block" />
{title.toUpperCase()}
</span>
<div class="flex gap-2">
{#if jobCounts.failed > 0}
<Badge color="primary">

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

@ -6,15 +6,24 @@
import { handleError } from '$lib/utils/handle-error';
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
import type { ComponentType } from 'svelte';
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 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 ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
export let jobs: AllJobStatusResponseDto;
interface JobDetails {
title: string;
subtitle?: string;
icon: typeof Icon;
allowForceCommand?: boolean;
component?: ComponentType;
handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
@ -38,32 +47,39 @@
const jobDetails: Partial<Record<JobName, JobDetails>> = {
[JobName.ThumbnailGenerationQueue]: {
icon: FileJpgBox,
title: 'Generate Thumbnails',
subtitle: 'Regenerate JPEG and WebP thumbnails'
},
[JobName.MetadataExtractionQueue]: {
icon: Table,
title: 'Extract Metadata',
subtitle: 'Extract metadata information i.e. GPS, resolution...etc'
},
[JobName.ObjectTaggingQueue]: {
icon: TagMultiple,
title: 'Tag Objects',
subtitle:
'Run machine learning to tag objects\nNote that some assets may not have any objects detected'
},
[JobName.ClipEncodingQueue]: {
icon: VectorCircle,
title: 'Encode Clip',
subtitle: 'Run machine learning to generate clip embeddings'
},
[JobName.RecognizeFacesQueue]: {
icon: FaceRecognition,
title: 'Recognize Faces',
subtitle: 'Run machine learning to recognize faces',
handleCommand: handleFaceCommand
},
[JobName.VideoConversionQueue]: {
icon: Video,
title: 'Transcode Videos',
subtitle: 'Transcode videos not in the desired format'
},
[JobName.StorageTemplateMigrationQueue]: {
icon: FolderMove,
title: 'Storage Template Migration',
allowForceCommand: false,
component: StorageMigrationDescription
@ -102,9 +118,10 @@
{/if}
<div class="flex flex-col gap-7">
{#each jobDetailsArray as [jobName, { title, subtitle, allowForceCommand, component, handleCommand: handleCommandOverride }]}
{#each jobDetailsArray as [jobName, { title, subtitle, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
{@const { jobCounts, queueStatus } = jobs[jobName]}
<JobTile
{icon}
{title}
{subtitle}
{allowForceCommand}