mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-04 00:03:02 +00:00
wendrul
3a9a0660a6
* WIP * Add endpoint to cancel jobs * Fix endpoints and add modal to cancel jobs * Add useful tooltips and warnings * Fix openapi.yml * Prepare sqlx * Prepare sqlx * Select jobs to cancel * Prepare sqlx * Remove unused variable * Make small fixes - gap between buttons - dropdown in one button with chevron instead of two buttons - filters shown on the cancel filtered modal
86 lines
2.9 KiB
Svelte
86 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import Popover from '$lib/components/Popover.svelte'
|
|
import { msToSec } from '$lib/utils'
|
|
import { AlertTriangle, Hourglass } from 'lucide-svelte'
|
|
import Badge from '../badge/Badge.svelte'
|
|
|
|
export let self_wait_time_ms: number | undefined = undefined
|
|
export let aggregate_wait_time_ms: number | undefined = undefined
|
|
export let variant: 'icon' | 'alert' | 'badge' | 'badge-self-wait' = 'icon'
|
|
|
|
$: total_wait = (self_wait_time_ms ?? 0) + (aggregate_wait_time_ms ?? 0)
|
|
|
|
function classFromColorName(color: string): string | undefined {
|
|
const colors: Record<string, string> = {
|
|
gray: 'text-gray-400 dark:text-gray-300',
|
|
red: 'text-red-400 dark:text-red-500',
|
|
yellow: 'text-yellow-500 dark:text-yellow-500',
|
|
orange: 'text-orange-500 dark:text-orange-500'
|
|
}
|
|
|
|
return colors[color]
|
|
}
|
|
|
|
function waitColorTresholds(waiting_time_ms: number): any {
|
|
if (waiting_time_ms > 300_000) {
|
|
return 'red'
|
|
}
|
|
if (waiting_time_ms > 30_000) {
|
|
return 'orange'
|
|
}
|
|
if (waiting_time_ms > 5_000) {
|
|
return 'yellow'
|
|
}
|
|
return 'gray'
|
|
}
|
|
</script>
|
|
|
|
<Popover notClickable>
|
|
<svelte:fragment slot="text">
|
|
<div class="mb-5">
|
|
{#if self_wait_time_ms != undefined}
|
|
<div>
|
|
Time spent waiting for an executor: <span class="font-bold"
|
|
>{msToSec(self_wait_time_ms)}s</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
{#if aggregate_wait_time_ms != undefined}
|
|
<div>
|
|
Child jobs' time spent waiting for an executor: <span class="font-bold"
|
|
>{msToSec(aggregate_wait_time_ms)}s</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{#if self_wait_time_ms != undefined && aggregate_wait_time_ms != undefined}
|
|
The top level job and its children (e.g. flow steps) had to wait a for an unexpected amount of
|
|
time before starting. The first value is the top level job's time spent waiting for a worker
|
|
and the second is the cumulative wait time for its children.
|
|
{:else if self_wait_time_ms}
|
|
<div> This job spent an unexpected amount of time waiting for a worker before starting. </div>
|
|
{:else if aggregate_wait_time_ms != undefined}
|
|
<div>
|
|
This job's children spent an unexpected amount of time waiting for a worker before starting.
|
|
The value is an aggregate of their individual waiting times.
|
|
</div>
|
|
{/if}
|
|
<div> In a healthy queue, jobs are expected to start in under 50ms. </div>
|
|
</svelte:fragment>
|
|
{#if variant === 'icon'}
|
|
<Hourglass class={classFromColorName(waitColorTresholds(total_wait))} size={14} />
|
|
{:else if variant === 'badge'}
|
|
<Badge large icon={{ icon: Hourglass, position: 'left' }} color={waitColorTresholds(total_wait)}
|
|
>{msToSec(total_wait)}s</Badge
|
|
>
|
|
{:else if variant === 'badge-self-wait'}
|
|
{#if self_wait_time_ms}
|
|
<Badge
|
|
color={waitColorTresholds(self_wait_time_ms)}>+{msToSec(self_wait_time_ms)}s</Badge
|
|
>
|
|
{/if}
|
|
{:else if variant === 'alert'}
|
|
<AlertTriangle class={classFromColorName(waitColorTresholds(total_wait))} size={14} />
|
|
{/if}
|
|
</Popover>
|