mirror of
https://github.com/immich-app/immich.git
synced 2025-12-22 01:11:20 +03:00
Jason Rasmussen
@@ -1,21 +1,21 @@
|
||||
<script lang="ts" context="module">
|
||||
export type Colors = 'light-gray' | 'gray';
|
||||
export type Colors = 'light-gray' | 'gray';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let color: Colors;
|
||||
export let color: Colors;
|
||||
|
||||
const colorClasses: Record<Colors, string> = {
|
||||
'light-gray': 'bg-gray-300/90 dark:bg-gray-600/90',
|
||||
gray: 'bg-gray-300 dark:bg-gray-600'
|
||||
};
|
||||
const colorClasses: Record<Colors, string> = {
|
||||
'light-gray': 'bg-gray-300/90 dark:bg-gray-600/90',
|
||||
gray: 'bg-gray-300 dark:bg-gray-600',
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
|
||||
color
|
||||
]}"
|
||||
on:click
|
||||
class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
|
||||
color
|
||||
]}"
|
||||
on:click
|
||||
>
|
||||
<slot />
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<script lang="ts" context="module">
|
||||
export type Color = 'success' | 'warning';
|
||||
export type Color = 'success' | 'warning';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let color: Color;
|
||||
export let color: Color;
|
||||
|
||||
const colorClasses: Record<Color, string> = {
|
||||
success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
|
||||
warning: 'bg-orange-400/70 text-gray-900 dark:bg-orange-900 dark:text-gray-100'
|
||||
};
|
||||
const colorClasses: Record<Color, string> = {
|
||||
success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
|
||||
warning: 'bg-orange-400/70 text-gray-900 dark:bg-orange-900 dark:text-gray-100',
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="w-full text-center text-sm p-2 {colorClasses[color]}">
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -1,149 +1,141 @@
|
||||
<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';
|
||||
import FastForward from 'svelte-material-icons/FastForward.svelte';
|
||||
import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { JobCommand, JobCommandDto, JobCountsDto, QueueStatusDto } from '@api';
|
||||
import Badge from '$lib/components/elements/badge.svelte';
|
||||
import JobTileButton from './job-tile-button.svelte';
|
||||
import JobTileStatus from './job-tile-status.svelte';
|
||||
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';
|
||||
import FastForward from 'svelte-material-icons/FastForward.svelte';
|
||||
import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { JobCommand, JobCommandDto, JobCountsDto, QueueStatusDto } from '@api';
|
||||
import Badge from '$lib/components/elements/badge.svelte';
|
||||
import JobTileButton from './job-tile-button.svelte';
|
||||
import JobTileStatus from './job-tile-status.svelte';
|
||||
|
||||
export let title: string;
|
||||
export let subtitle: string | undefined = undefined;
|
||||
export let jobCounts: JobCountsDto;
|
||||
export let queueStatus: QueueStatusDto;
|
||||
export let allowForceCommand = true;
|
||||
export let icon: typeof Icon;
|
||||
export let title: string;
|
||||
export let subtitle: string | undefined = undefined;
|
||||
export let jobCounts: JobCountsDto;
|
||||
export let queueStatus: QueueStatusDto;
|
||||
export let allowForceCommand = true;
|
||||
export let icon: typeof Icon;
|
||||
|
||||
export let allText: string;
|
||||
export let missingText: string;
|
||||
export let allText: string;
|
||||
export let missingText: string;
|
||||
|
||||
const slots = $$props.$$slots;
|
||||
const slots = $$props.$$slots;
|
||||
|
||||
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
|
||||
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
|
||||
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
|
||||
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
|
||||
|
||||
const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
|
||||
const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
|
||||
|
||||
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
|
||||
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
|
||||
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
|
||||
>
|
||||
<div class="flex flex-col w-full">
|
||||
{#if queueStatus.isPaused}
|
||||
<JobTileStatus color="warning">Paused</JobTileStatus>
|
||||
{:else if queueStatus.isActive}
|
||||
<JobTileStatus color="success">Active</JobTileStatus>
|
||||
{/if}
|
||||
<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
|
||||
<div
|
||||
class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<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">
|
||||
{jobCounts.failed.toLocaleString($locale)} failed
|
||||
</Badge>
|
||||
{/if}
|
||||
{#if jobCounts.delayed > 0}
|
||||
<Badge color="secondary">
|
||||
{jobCounts.delayed.toLocaleString($locale)} delayed
|
||||
</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
{#if queueStatus.isPaused}
|
||||
<JobTileStatus color="warning">Paused</JobTileStatus>
|
||||
{:else if queueStatus.isActive}
|
||||
<JobTileStatus color="success">Active</JobTileStatus>
|
||||
{/if}
|
||||
<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
|
||||
<div class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
|
||||
<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">
|
||||
{jobCounts.failed.toLocaleString($locale)} failed
|
||||
</Badge>
|
||||
{/if}
|
||||
{#if jobCounts.delayed > 0}
|
||||
<Badge color="secondary">
|
||||
{jobCounts.delayed.toLocaleString($locale)} delayed
|
||||
</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if subtitle}
|
||||
<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
|
||||
{/if}
|
||||
{#if subtitle}
|
||||
<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
|
||||
{/if}
|
||||
|
||||
{#if slots?.description}
|
||||
<div class="text-sm dark:text-white">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if slots?.description}
|
||||
<div class="text-sm dark:text-white">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
|
||||
<div
|
||||
class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
|
||||
>
|
||||
<p>Active</p>
|
||||
<p class="text-2xl">
|
||||
{jobCounts.active.toLocaleString($locale)}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
|
||||
<div
|
||||
class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
|
||||
>
|
||||
<p>Active</p>
|
||||
<p class="text-2xl">
|
||||
{jobCounts.active.toLocaleString($locale)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
|
||||
>
|
||||
<p class="text-2xl">
|
||||
{waitingCount.toLocaleString($locale)}
|
||||
</p>
|
||||
<p>Waiting</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
|
||||
{#if !isIdle}
|
||||
{#if waitingCount > 0}
|
||||
<JobTileButton
|
||||
color="gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}
|
||||
>
|
||||
<Close size="24" /> CLEAR
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{#if queueStatus.isPaused}
|
||||
{@const size = waitingCount > 0 ? '24' : '48'}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
|
||||
>
|
||||
<!-- size property is not reactive, so have to use width and height -->
|
||||
<FastForward width={size} height={size} /> RESUME
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
|
||||
>
|
||||
<Pause size="24" /> PAUSE
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{:else if allowForceCommand}
|
||||
<JobTileButton
|
||||
color="gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}
|
||||
>
|
||||
<AllInclusive size="24" />
|
||||
{allText}
|
||||
</JobTileButton>
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<SelectionSearch size="24" />
|
||||
{missingText}
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<Play size="48" /> START
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
|
||||
>
|
||||
<p class="text-2xl">
|
||||
{waitingCount.toLocaleString($locale)}
|
||||
</p>
|
||||
<p>Waiting</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
|
||||
{#if !isIdle}
|
||||
{#if waitingCount > 0}
|
||||
<JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}>
|
||||
<Close size="24" /> CLEAR
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{#if queueStatus.isPaused}
|
||||
{@const size = waitingCount > 0 ? '24' : '48'}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
|
||||
>
|
||||
<!-- size property is not reactive, so have to use width and height -->
|
||||
<FastForward width={size} height={size} /> RESUME
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
|
||||
>
|
||||
<Pause size="24" /> PAUSE
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{:else if allowForceCommand}
|
||||
<JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}>
|
||||
<AllInclusive size="24" />
|
||||
{allText}
|
||||
</JobTileButton>
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<SelectionSearch size="24" />
|
||||
{missingText}
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<Play size="48" /> START
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,160 +1,159 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
|
||||
import type { ComponentType } from 'svelte';
|
||||
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
|
||||
import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
|
||||
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
|
||||
import FolderMove from 'svelte-material-icons/FolderMove.svelte';
|
||||
import CogIcon from 'svelte-material-icons/Cog.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 Button from '../../elements/buttons/button.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
|
||||
import type { ComponentType } from 'svelte';
|
||||
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
|
||||
import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
|
||||
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
|
||||
import FolderMove from 'svelte-material-icons/FolderMove.svelte';
|
||||
import CogIcon from 'svelte-material-icons/Cog.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 Button from '../../elements/buttons/button.svelte';
|
||||
|
||||
export let jobs: AllJobStatusResponseDto;
|
||||
export let jobs: AllJobStatusResponseDto;
|
||||
|
||||
interface JobDetails {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
allText?: string;
|
||||
missingText?: string;
|
||||
icon: typeof Icon;
|
||||
allowForceCommand?: boolean;
|
||||
component?: ComponentType;
|
||||
handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
|
||||
}
|
||||
interface JobDetails {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
allText?: string;
|
||||
missingText?: string;
|
||||
icon: typeof Icon;
|
||||
allowForceCommand?: boolean;
|
||||
component?: ComponentType;
|
||||
handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
|
||||
}
|
||||
|
||||
let faceConfirm = false;
|
||||
let faceConfirm = false;
|
||||
|
||||
const handleFaceCommand = async (jobId: JobName, dto: JobCommandDto) => {
|
||||
if (dto.force) {
|
||||
faceConfirm = true;
|
||||
return;
|
||||
}
|
||||
const handleFaceCommand = async (jobId: JobName, dto: JobCommandDto) => {
|
||||
if (dto.force) {
|
||||
faceConfirm = true;
|
||||
return;
|
||||
}
|
||||
|
||||
await handleCommand(jobId, dto);
|
||||
};
|
||||
await handleCommand(jobId, dto);
|
||||
};
|
||||
|
||||
const onFaceConfirm = () => {
|
||||
faceConfirm = false;
|
||||
handleCommand(JobName.RecognizeFaces, { command: JobCommand.Start, force: true });
|
||||
};
|
||||
const onFaceConfirm = () => {
|
||||
faceConfirm = false;
|
||||
handleCommand(JobName.RecognizeFaces, { command: JobCommand.Start, force: true });
|
||||
};
|
||||
|
||||
const jobDetails: Partial<Record<JobName, JobDetails>> = {
|
||||
[JobName.ThumbnailGeneration]: {
|
||||
icon: FileJpgBox,
|
||||
title: api.getJobName(JobName.ThumbnailGeneration),
|
||||
subtitle: 'Regenerate JPEG and WebP thumbnails'
|
||||
},
|
||||
[JobName.MetadataExtraction]: {
|
||||
icon: Table,
|
||||
title: api.getJobName(JobName.MetadataExtraction),
|
||||
subtitle: 'Extract metadata information i.e. GPS, resolution...etc'
|
||||
},
|
||||
[JobName.Sidecar]: {
|
||||
title: api.getJobName(JobName.Sidecar),
|
||||
icon: FileXmlBox,
|
||||
subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
|
||||
allText: 'SYNC',
|
||||
missingText: 'DISCOVER'
|
||||
},
|
||||
[JobName.ObjectTagging]: {
|
||||
icon: TagMultiple,
|
||||
title: api.getJobName(JobName.ObjectTagging),
|
||||
subtitle:
|
||||
'Run machine learning to tag objects\nNote that some assets may not have any objects detected'
|
||||
},
|
||||
[JobName.ClipEncoding]: {
|
||||
icon: VectorCircle,
|
||||
title: api.getJobName(JobName.ClipEncoding),
|
||||
subtitle: 'Run machine learning to generate clip embeddings'
|
||||
},
|
||||
[JobName.RecognizeFaces]: {
|
||||
icon: FaceRecognition,
|
||||
title: api.getJobName(JobName.RecognizeFaces),
|
||||
subtitle: 'Run machine learning to recognize faces',
|
||||
handleCommand: handleFaceCommand
|
||||
},
|
||||
[JobName.VideoConversion]: {
|
||||
icon: Video,
|
||||
title: api.getJobName(JobName.VideoConversion),
|
||||
subtitle: 'Transcode videos not in the desired format'
|
||||
},
|
||||
[JobName.StorageTemplateMigration]: {
|
||||
icon: FolderMove,
|
||||
title: api.getJobName(JobName.StorageTemplateMigration),
|
||||
allowForceCommand: false,
|
||||
component: StorageMigrationDescription
|
||||
}
|
||||
};
|
||||
const jobDetails: Partial<Record<JobName, JobDetails>> = {
|
||||
[JobName.ThumbnailGeneration]: {
|
||||
icon: FileJpgBox,
|
||||
title: api.getJobName(JobName.ThumbnailGeneration),
|
||||
subtitle: 'Regenerate JPEG and WebP thumbnails',
|
||||
},
|
||||
[JobName.MetadataExtraction]: {
|
||||
icon: Table,
|
||||
title: api.getJobName(JobName.MetadataExtraction),
|
||||
subtitle: 'Extract metadata information i.e. GPS, resolution...etc',
|
||||
},
|
||||
[JobName.Sidecar]: {
|
||||
title: api.getJobName(JobName.Sidecar),
|
||||
icon: FileXmlBox,
|
||||
subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
|
||||
allText: 'SYNC',
|
||||
missingText: 'DISCOVER',
|
||||
},
|
||||
[JobName.ObjectTagging]: {
|
||||
icon: TagMultiple,
|
||||
title: api.getJobName(JobName.ObjectTagging),
|
||||
subtitle: 'Run machine learning to tag objects\nNote that some assets may not have any objects detected',
|
||||
},
|
||||
[JobName.ClipEncoding]: {
|
||||
icon: VectorCircle,
|
||||
title: api.getJobName(JobName.ClipEncoding),
|
||||
subtitle: 'Run machine learning to generate clip embeddings',
|
||||
},
|
||||
[JobName.RecognizeFaces]: {
|
||||
icon: FaceRecognition,
|
||||
title: api.getJobName(JobName.RecognizeFaces),
|
||||
subtitle: 'Run machine learning to recognize faces',
|
||||
handleCommand: handleFaceCommand,
|
||||
},
|
||||
[JobName.VideoConversion]: {
|
||||
icon: Video,
|
||||
title: api.getJobName(JobName.VideoConversion),
|
||||
subtitle: 'Transcode videos not in the desired format',
|
||||
},
|
||||
[JobName.StorageTemplateMigration]: {
|
||||
icon: FolderMove,
|
||||
title: api.getJobName(JobName.StorageTemplateMigration),
|
||||
allowForceCommand: false,
|
||||
component: StorageMigrationDescription,
|
||||
},
|
||||
};
|
||||
|
||||
const jobDetailsArray = Object.entries(jobDetails) as [JobName, JobDetails][];
|
||||
const jobDetailsArray = Object.entries(jobDetails) as [JobName, JobDetails][];
|
||||
|
||||
async function handleCommand(jobId: JobName, jobCommand: JobCommandDto) {
|
||||
const title = jobDetails[jobId]?.title;
|
||||
async function handleCommand(jobId: JobName, jobCommand: JobCommandDto) {
|
||||
const title = jobDetails[jobId]?.title;
|
||||
|
||||
try {
|
||||
const { data } = await api.jobApi.sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
|
||||
jobs[jobId] = data;
|
||||
try {
|
||||
const { data } = await api.jobApi.sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
|
||||
jobs[jobId] = data;
|
||||
|
||||
switch (jobCommand.command) {
|
||||
case JobCommand.Empty:
|
||||
notificationController.show({
|
||||
message: `Cleared jobs for: ${title}`,
|
||||
type: NotificationType.Info
|
||||
});
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, `Command '${jobCommand.command}' failed for job: ${title}`);
|
||||
}
|
||||
}
|
||||
switch (jobCommand.command) {
|
||||
case JobCommand.Empty:
|
||||
notificationController.show({
|
||||
message: `Cleared jobs for: ${title}`,
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, `Command '${jobCommand.command}' failed for job: ${title}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if faceConfirm}
|
||||
<ConfirmDialogue
|
||||
prompt="Are you sure you want to reprocess all faces? This will also clear named people."
|
||||
on:confirm={onFaceConfirm}
|
||||
on:cancel={() => (faceConfirm = false)}
|
||||
/>
|
||||
<ConfirmDialogue
|
||||
prompt="Are you sure you want to reprocess all faces? This will also clear named people."
|
||||
on:confirm={onFaceConfirm}
|
||||
on:cancel={() => (faceConfirm = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-7">
|
||||
<div class="flex justify-end">
|
||||
<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
|
||||
<Button size="sm">
|
||||
<CogIcon size="18" />
|
||||
<span class="pl-2">Manage Concurrency</span>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
{#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
|
||||
{@const { jobCounts, queueStatus } = jobs[jobName]}
|
||||
<JobTile
|
||||
{icon}
|
||||
{title}
|
||||
{subtitle}
|
||||
allText={allText || 'ALL'}
|
||||
missingText={missingText || 'MISSING'}
|
||||
{allowForceCommand}
|
||||
{jobCounts}
|
||||
{queueStatus}
|
||||
on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
|
||||
>
|
||||
{#if component}
|
||||
<svelte:component this={component} slot="description" />
|
||||
{/if}
|
||||
</JobTile>
|
||||
{/each}
|
||||
<div class="flex justify-end">
|
||||
<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
|
||||
<Button size="sm">
|
||||
<CogIcon size="18" />
|
||||
<span class="pl-2">Manage Concurrency</span>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
{#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
|
||||
{@const { jobCounts, queueStatus } = jobs[jobName]}
|
||||
<JobTile
|
||||
{icon}
|
||||
{title}
|
||||
{subtitle}
|
||||
allText={allText || 'ALL'}
|
||||
missingText={missingText || 'MISSING'}
|
||||
{allowForceCommand}
|
||||
{jobCounts}
|
||||
{queueStatus}
|
||||
on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
|
||||
>
|
||||
{#if component}
|
||||
<svelte:component this={component} slot="description" />
|
||||
{/if}
|
||||
</JobTile>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { AppRoute } from '$lib/constants';
|
||||
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
|
||||
<a href={`${AppRoute.ADMIN_SETTINGS}?open=storage-template`} class="text-immich-primary dark:text-immich-dark-primary"
|
||||
>Storage template</a
|
||||
>
|
||||
to previously uploaded assets
|
||||
|
||||
Reference in New Issue
Block a user