mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(server/web): jobs clear button + queue status (#2144)
* feat(server/web): jobs clear button + queue status * adjust design and colors * Adjust some styling * show status next to buttons instead of on top * Update rounded corner for badge --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Michel Heusschen
GitHub
parent
d04f340b5b
commit
b06ddec2d5
32 changed files with 722 additions and 242 deletions
|
|
@ -0,0 +1,21 @@
|
|||
<script lang="ts" context="module">
|
||||
export type Colors = 'light-gray' | 'gray';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
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'
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="h-full 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 />
|
||||
</button>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts" context="module">
|
||||
export type Color = 'success' | 'warning';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
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'
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="w-full text-center text-sm p-2 {colorClasses[color]}">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -4,40 +4,49 @@
|
|||
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 } from '@api';
|
||||
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;
|
||||
|
||||
$: isRunning = jobCounts.active > 0 || jobCounts.waiting > 0;
|
||||
$: waitingCount = jobCounts.waiting + jobCounts.paused;
|
||||
$: isPause = jobCounts.paused > 0;
|
||||
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
|
||||
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
|
||||
|
||||
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
|
||||
</script>
|
||||
|
||||
<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 bg-gray-100 dark:bg-immich-dark-gray rounded-3xl 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-9">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
|
|
@ -69,43 +78,54 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
|
||||
>
|
||||
<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>
|
||||
<div class="flex flex-col w-32 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}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
|
||||
>
|
||||
{@const size = waitingCount > 0 ? '24' : '48'}
|
||||
|
||||
<!-- 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}
|
||||
<button
|
||||
class="job-play-button bg-gray-300 dark:bg-gray-600"
|
||||
<JobTileButton
|
||||
color="gray"
|
||||
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"
|
||||
<AllInclusive size="24" /> ALL
|
||||
</JobTileButton>
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<SelectionSearch size="18" /> MISSING
|
||||
</button>
|
||||
<SelectionSearch size="24" /> MISSING
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<button
|
||||
class="job-play-button bg-gray-300/90 dark:bg-gray-600/90"
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<Play size="48" /> START
|
||||
</button>
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
|
||||
import type { ComponentType } from 'svelte';
|
||||
|
|
@ -49,21 +53,15 @@
|
|||
const title = jobDetails[jobId]?.title;
|
||||
|
||||
try {
|
||||
await api.jobApi.sendJobCommand(jobId, jobCommand);
|
||||
const { data } = await api.jobApi.sendJobCommand(jobId, jobCommand);
|
||||
jobs[jobId] = data;
|
||||
|
||||
// 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;
|
||||
case JobCommand.Empty:
|
||||
notificationController.show({
|
||||
message: `Cleared jobs for: ${title}`,
|
||||
type: NotificationType.Info
|
||||
});
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -74,12 +72,14 @@
|
|||
|
||||
<div class="flex flex-col gap-7">
|
||||
{#each jobDetailsArray as [jobName, { title, subtitle, allowForceCommand, component }]}
|
||||
{@const { jobCounts, queueStatus } = jobs[jobName]}
|
||||
<JobTile
|
||||
{title}
|
||||
{subtitle}
|
||||
{allowForceCommand}
|
||||
{jobCounts}
|
||||
{queueStatus}
|
||||
on:command={({ detail }) => runJob(jobName, detail)}
|
||||
jobCounts={jobs[jobName]}
|
||||
>
|
||||
<svelte:component this={component} />
|
||||
</JobTile>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue