Skip to content

pipeline-manager: pipeline monitoring events #5446

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
snkas wants to merge 2 commits into from
Closed

pipeline-manager: pipeline monitoring events #5446

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8959912
pipeline-manager: pipeline monitoring events
snkas Feb 3, 2026
431c197
Implement Pipeline Events UI
Karakatiza666 Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Implement Pipeline Events UI 
Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
  • Loading branch information
@Karakatiza666
Karakatiza666 committed Feb 5, 2026
commit 431c197e0f991403b8a4112981e825d967342a8a
116 changes: 0 additions & 116 deletions js-packages/web-console/src/lib/components/health/HealthEventDetails.svelte
View file
Open in desktop

This file was deleted.

68 changes: 28 additions & 40 deletions js-packages/web-console/src/lib/components/health/HealthEventList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
<script lang="ts">
import { Progress } from '@skeletonlabs/skeleton-svelte'
import { slide } from 'svelte/transition'
import { match } from 'ts-pattern'
import InlineDropdown from '$lib/components/common/InlineDropdown.svelte'
import { usePipelineManager } from '$lib/compositions/usePipelineManager.svelte'
import { formatDateTime } from '$lib/functions/format'
import type { HealthEventBucket } from '$lib/functions/pipelines/health'

let {
eventParts,
onClose,
onNavigatePrevious,
onNavigateNext
onNavigateNext,
loadEventDetail
}: {
eventParts: HealthEventBucket
onClose: () => void
onNavigatePrevious?: () => void
onNavigateNext?: () => void
loadEventDetail: (eventId: string) => Promise<{ timestamp: Date; description: string } | null>
} = $props()

const api = usePipelineManager()

// Track loaded event details and loading states
let fullEvents: (null | {
timestamp: Date
Expand Down Expand Up @@ -52,30 +50,13 @@
}

loadingStates[index] = true
api.getClusterEvent(event.id).then(
(e) => {
if (!e) {
loadEventDetail(event.id).then(
(detail) => {
if (!detail) {
loadingStates[index] = false
return
}
if (eventParts === null) {
// Handle the case when the component was unmounted before the request completed
return
}
fullEvents[index] = {
timestamp: new Date(e.recorded_at),
description: match(eventParts.tag)
.with('api', () => (e.api_self_info || '') + '\n' + (e.api_resources_info || ''))
.with(
'compiler',
() => (e.compiler_self_info || '') + '\n' + (e.compiler_resources_info || '')
)
.with(
'runner',
() => (e.runner_self_info || '') + '\n' + (e.runner_resources_info || '')
)
.exhaustive()
}
fullEvents[index] = detail
loadingStates[index] = false
},
() => {
Expand Down Expand Up @@ -140,7 +121,7 @@
</div>

<div class="flex flex-nowrap items-center gap-2">
<div class="text-surface-600-300 w-66 text-sm">
<div class="w-66 text-sm">
{formatDateTime(eventParts.timestampFrom)} - {formatDateTime(eventParts.timestampTo)}
</div>
<button
Expand Down Expand Up @@ -182,24 +163,31 @@
></div>
<div class="h-3 w-3 rounded-full {getStatusColor(event.status)}"></div>
<span class="text-sm">
{formatDateTime(event.timestamp)}
{formatDateTime(event.timestamp, 'h:mm:ss A')}
</span>
{#if event.thumb}
<span>
{event.thumb}
</span>
{/if}
</div>
{/snippet}
{#snippet content()}
{#if fullEvents[i]}
<div transition:slide={{ duration: 150 }} class="px-2 pb-2">
<div class="rounded font-dm-mono text-sm whitespace-pre-wrap">
{fullEvents[i]?.description || ''}
<div transition:slide={{ duration: 150 }}>
{#if fullEvents[i]}
<div class="px-2 pb-2">
<div class="rounded font-dm-mono text-sm whitespace-pre-wrap">
{fullEvents[i]?.description || ''}
</div>
</div>
</div>
{:else if loadingStates[i]}
<Progress class="-mt-2 -mb-1 h-1" value={null}>
<Progress.Track>
<Progress.Range class="bg-primary-500" />
</Progress.Track>
</Progress>
{/if}
{:else if loadingStates[i]}
<Progress class="-mt-2 -mb-1 h-1" value={null}>
<Progress.Track>
<Progress.Range class="bg-primary-500" />
</Progress.Track>
</Progress>
{/if}
</div>
{/snippet}
</InlineDropdown>
{/each}
Expand Down
12 changes: 8 additions & 4 deletions js-packages/web-console/src/lib/components/health/StatusTimeline.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
/**
* The text label for the timeline
*/
label: string
label?: string
/**
* The list of events to display
*/
Expand Down Expand Up @@ -360,7 +360,11 @@
<div class="">
{label}
{#if healthStatus}
{@const style = getStyle(healthStatus)} - <span class={style.text}>{style.label}</span>
{@const style = getStyle(healthStatus)}
{label ? ' - ' : ''}
<span class={style.text}>
{style.label}
</span>
{/if}
</div>
<div class="relative {className}">
Expand Down Expand Up @@ -396,12 +400,12 @@
{@const style = getStyle(status)}
<div class="flex items-center gap-1.5">
<div class="h-3 w-3 rounded-sm {style.bg}"></div>
<span class="text-surface-600-300">{style.label}</span>
<span class="">{style.label}</span>
</div>
{/each}
<div class="flex items-center gap-1.5">
<div class="h-3 w-3 rounded-sm bg-surface-300-700"></div>
<span class="text-surface-600-300">No data</span>
<span class="">No data</span>
</div>
</div>
{/if}
Expand Down
4 changes: 3 additions & 1 deletion js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
import PanelPipelineErrors from '$lib/components/pipelines/editor/TabPipelineErrors.svelte'
import * as TabProfileVisualizer from '$lib/components/pipelines/editor/TabProfileVisualizer.svelte'
import * as TabSamplyProfile from '$lib/components/pipelines/editor/TabSamplyProfile.svelte'
import * as TabPipelineEvents from '$lib/components/pipelines/editor/TabPipelineEvents.svelte'
import PanelLogs from '$lib/components/pipelines/editor/TabLogs.svelte'
import { tuple } from '$lib/functions/common/tuple'
import type { ExtendedPipeline } from '$lib/services/pipelineManager'
Expand Down Expand Up @@ -52,7 +53,8 @@
true
),
tuple('Samply' as const, TabSamplyProfile.Label, TabSamplyProfile.default, false),
tuple('Logs' as const, TabLogs, PanelLogs, false)
tuple('Logs' as const, TabLogs, PanelLogs, false),
tuple('Pipeline Health' as const, TabPipelineEvents.Label, TabPipelineEvents.default, true)
].filter((tab) => tab[0] !== currentInteractionTab)
)
let currentTab = $derived(
Expand Down
Loading