Skip to content

Commit 431c197

Browse files
Karakatiza666Karakatiza666
committed
Implement Pipeline Events UI
Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
1 parent 8959912 commit 431c197

File tree

14 files changed

+847
-310
lines changed

14 files changed

+847
-310
lines changed

‎js-packages/web-console/src/lib/components/health/HealthEventDetails.svelte‎

Lines changed: 0 additions & 116 deletions
This file was deleted.

‎js-packages/web-console/src/lib/components/health/HealthEventList.svelte‎

Lines changed: 28 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
<script lang="ts">
22
import { Progress } from '@skeletonlabs/skeleton-svelte'
33
import { slide } from 'svelte/transition'
4-
import { match } from 'ts-pattern'
54
import InlineDropdown from '$lib/components/common/InlineDropdown.svelte'
6-
import { usePipelineManager } from '$lib/compositions/usePipelineManager.svelte'
75
import { formatDateTime } from '$lib/functions/format'
86
import type { HealthEventBucket } from '$lib/functions/pipelines/health'
97
108
let {
119
eventParts,
1210
onClose,
1311
onNavigatePrevious,
14-
onNavigateNext
12+
onNavigateNext,
13+
loadEventDetail
1514
}: {
1615
eventParts: HealthEventBucket
1716
onClose: () => void
1817
onNavigatePrevious?: () => void
1918
onNavigateNext?: () => void
19+
loadEventDetail: (eventId: string) => Promise<{ timestamp: Date; description: string } | null>
2020
} = $props()
2121
22-
const api = usePipelineManager()
23-
2422
// Track loaded event details and loading states
2523
let fullEvents: (null | {
2624
timestamp: Date
@@ -52,30 +50,13 @@
5250
}
5351
5452
loadingStates[index] = true
55-
api.getClusterEvent(event.id).then(
56-
(e) => {
57-
if (!e) {
53+
loadEventDetail(event.id).then(
54+
(detail) => {
55+
if (!detail) {
5856
loadingStates[index] = false
5957
return
6058
}
61-
if (eventParts === null) {
62-
// Handle the case when the component was unmounted before the request completed
63-
return
64-
}
65-
fullEvents[index] = {
66-
timestamp: new Date(e.recorded_at),
67-
description: match(eventParts.tag)
68-
.with('api', () => (e.api_self_info || '') + '\n' + (e.api_resources_info || ''))
69-
.with(
70-
'compiler',
71-
() => (e.compiler_self_info || '') + '\n' + (e.compiler_resources_info || '')
72-
)
73-
.with(
74-
'runner',
75-
() => (e.runner_self_info || '') + '\n' + (e.runner_resources_info || '')
76-
)
77-
.exhaustive()
78-
}
59+
fullEvents[index] = detail
7960
loadingStates[index] = false
8061
},
8162
() => {
@@ -140,7 +121,7 @@
140121
</div>
141122

142123
<div class="flex flex-nowrap items-center gap-2">
143-
<div class="text-surface-600-300 w-66 text-sm">
124+
<div class="w-66 text-sm">
144125
{formatDateTime(eventParts.timestampFrom)} - {formatDateTime(eventParts.timestampTo)}
145126
</div>
146127
<button
@@ -182,24 +163,31 @@
182163
></div>
183164
<div class="h-3 w-3 rounded-full {getStatusColor(event.status)}"></div>
184165
<span class="text-sm">
185-
{formatDateTime(event.timestamp)}
166+
{formatDateTime(event.timestamp, 'h:mm:ss A')}
186167
</span>
168+
{#if event.thumb}
169+
<span>
170+
{event.thumb}
171+
</span>
172+
{/if}
187173
</div>
188174
{/snippet}
189175
{#snippet content()}
190-
{#if fullEvents[i]}
191-
<div transition:slide={{ duration: 150 }} class="px-2 pb-2">
192-
<div class="rounded font-dm-mono text-sm whitespace-pre-wrap">
193-
{fullEvents[i]?.description || ''}
176+
<div transition:slide={{ duration: 150 }}>
177+
{#if fullEvents[i]}
178+
<div class="px-2 pb-2">
179+
<div class="rounded font-dm-mono text-sm whitespace-pre-wrap">
180+
{fullEvents[i]?.description || ''}
181+
</div>
194182
</div>
195-
</div>
196-
{:else if loadingStates[i]}
197-
<Progress class="-mt-2 -mb-1 h-1" value={null}>
198-
<Progress.Track>
199-
<Progress.Range class="bg-primary-500" />
200-
</Progress.Track>
201-
</Progress>
202-
{/if}
183+
{:else if loadingStates[i]}
184+
<Progress class="-mt-2 -mb-1 h-1" value={null}>
185+
<Progress.Track>
186+
<Progress.Range class="bg-primary-500" />
187+
</Progress.Track>
188+
</Progress>
189+
{/if}
190+
</div>
203191
{/snippet}
204192
</InlineDropdown>
205193
{/each}

‎js-packages/web-console/src/lib/components/health/StatusTimeline.svelte‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
/**
2121
* The text label for the timeline
2222
*/
23-
label: string
23+
label?: string
2424
/**
2525
* The list of events to display
2626
*/
@@ -360,7 +360,11 @@
360360
<div class="">
361361
{label}
362362
{#if healthStatus}
363-
{@const style = getStyle(healthStatus)} - <span class={style.text}>{style.label}</span>
363+
{@const style = getStyle(healthStatus)}
364+
{label ? ' - ' : ''}
365+
<span class={style.text}>
366+
{style.label}
367+
</span>
364368
{/if}
365369
</div>
366370
<div class="relative {className}">
@@ -396,12 +400,12 @@
396400
{@const style = getStyle(status)}
397401
<div class="flex items-center gap-1.5">
398402
<div class="h-3 w-3 rounded-sm {style.bg}"></div>
399-
<span class="text-surface-600-300">{style.label}</span>
403+
<span class="">{style.label}</span>
400404
</div>
401405
{/each}
402406
<div class="flex items-center gap-1.5">
403407
<div class="h-3 w-3 rounded-sm bg-surface-300-700"></div>
404-
<span class="text-surface-600-300">No data</span>
408+
<span class="">No data</span>
405409
</div>
406410
</div>
407411
{/if}

‎js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
import PanelPipelineErrors from '$lib/components/pipelines/editor/TabPipelineErrors.svelte'
1111
import * as TabProfileVisualizer from '$lib/components/pipelines/editor/TabProfileVisualizer.svelte'
1212
import * as TabSamplyProfile from '$lib/components/pipelines/editor/TabSamplyProfile.svelte'
13+
import * as TabPipelineEvents from '$lib/components/pipelines/editor/TabPipelineEvents.svelte'
1314
import PanelLogs from '$lib/components/pipelines/editor/TabLogs.svelte'
1415
import { tuple } from '$lib/functions/common/tuple'
1516
import type { ExtendedPipeline } from '$lib/services/pipelineManager'
@@ -52,7 +53,8 @@
5253
true
5354
),
5455
tuple('Samply' as const, TabSamplyProfile.Label, TabSamplyProfile.default, false),
55-
tuple('Logs' as const, TabLogs, PanelLogs, false)
56+
tuple('Logs' as const, TabLogs, PanelLogs, false),
57+
tuple('Pipeline Health' as const, TabPipelineEvents.Label, TabPipelineEvents.default, true)
5658
].filter((tab) => tab[0] !== currentInteractionTab)
5759
)
5860
let currentTab = $derived(

0 commit comments

Comments
 (0)