Implement Cluster Health page #5336

Karakatiza666 · 2025-12-24T18:05:09Z

Update the design of user popup

Add health indicator to user popup

Karakatiza666 · 2026-01-05T16:44:22Z

Copilot

Pull request overview

This PR implements a Cluster Health monitoring page and updates the user profile popup design. The changes include a new health monitoring dashboard with event timeline visualization, health status indicators in the user popup menu, and various UI refinements.

Key changes:

New Cluster Health page (/health) with event timeline and incident tracking
Health status indicator added to user popup with visual indicators for API, compiler, and runner status
Updated user popup design with reorganized menu structure and health navigation

Reviewed changes

Copilot reviewed 23 out of 34 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`+page.svelte` (health)	New health monitoring page with event timeline, filtering tabs, and incident logging
`pipelineManager.ts`	Added API endpoints for cluster event retrieval
`health.ts`	Core health event processing logic including event grouping and status conversion
`date.ts`	Added `ceilToHour` utility for time calculations
`array.ts`	Extended comparison and groupBy functions to support Date types
`usePipelineManager.svelte.ts`	Integrated cluster event API methods
`useClusterHealth.svelte.ts`	New composition for polling and managing cluster health status
`VersionDisplay.svelte`	Updated styling with logo integration
`TabPerformance.svelte`	Minor formatting cleanup
`DarkModeSwitch.svelte`	Added className prop for styling flexibility
`PipelineConfigurationsPopup.svelte`	Refactored inline handler to named function
`AppHeader.svelte`	Integrated health status display
`HealthEventDetails.svelte`	New component for displaying detailed health event information
`EventLogList.svelte`	New component for incident log display with filtering
`DangerDialog.svelte`	Minor color adjustment
`ProfilePopupMenu.svelte`	Removed (functionality consolidated into ProfileButton)
`ProfileButton.svelte`	Redesigned with health indicator, reorganized menu, and consolidated profile display
`CurrentTenant.svelte`	Enhanced to handle single-tenant display differently
`StatusTimeline.svelte`	New component for visual timeline representation of health events
`CLAUDE.md`	New documentation placeholder
SVG/font files	Added new icons (log-out, key, chevron-left) and updated icon fonts
`cluster-monitoring.md`	Updated documentation to clarify event sorting order

Comments suppressed due to low confidence (3)

js-packages/web-console/src/routes/(system)/(authenticated)/health/+page.svelte:1

Commented-out filter code should either be removed or properly documented if it's intended for future use. Leaving commented code can cause confusion.
js-packages/web-console/src/lib/functions/pipelines/health.ts:1
Corrected spelling of 'abscence' to 'absence'.
js-packages/web-console/src/routes/(system)/(authenticated)/health/+page.svelte:1
Events are being filtered twice - once in the StatusTimeline component and once in splitClusterEvents. Consider filtering once and passing the filtered results to both components to avoid redundant computation.

js-packages/web-console/src/lib/compositions/health/useClusterHealth.svelte.ts

js-packages/web-console/src/lib/components/auth/ProfileButton.svelte

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

Karakatiza666 · 2026-01-05T17:23:20Z

mihaibudiu

Are we trying to replace datadog or some other similar tools?
I hope we can avoid doing that.

mihaibudiu · 2026-01-05T22:35:40Z

js-packages/web-console/src/lib/services/pipelineManager.ts

+
+export interface PipelineEvent {
+  type: PipelineEventType
+  timestamp: string // ISO 8601 date string


could you define a type for this?

I will remove this type, it is actually not needed currently

mihaibudiu · 2026-01-05T22:38:17Z

js-packages/web-console/src/routes/(system)/(authenticated)/+layout.svelte

      return { ...message, text }
    })
  )
+  const healthMessage = $derived(


What if there are multiple issues? Why is only the first one important?

You will want to visit the health page if there are any issues with the cluster components. I figured just displaying one of them is sufficient - simpler UX (multiple things don't scream at you at the same time) and (slightly) code.

mihaibudiu · 2026-01-05T22:41:36Z

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

+  }
+
+  export interface TimelineGroup {
+    startTime: number


what are these times? How do they differ from the timestamps in the events?

If multiple non-healthy events are reported back-to-back they are visually grouped in a single prolonged event with startTime and endTime, while you can still click through the individual events in a group

mihaibudiu · 2026-01-05T22:41:56Z

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

+    events: TimelineEvent[]
+  }
+
+  interface Props {


what does Props mean?

Common abbreviation in Svelte ecosystem meaning Svelte Component Properties - passed from parent component

mihaibudiu · 2026-01-05T22:42:26Z

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

+    events: TimelineEvent[]
+    startAt: Date
+    endAt: Date
+    unitDurationMs: number // milliseconds


can you document these fields?

mihaibudiu · 2026-01-05T23:30:38Z

js-packages/web-console/src/lib/functions/pipelines/health.ts

+      type: toEventType(e.api_status),
+      description:
+        e.api_status === 'Healthy'
+          ? 'The API server is healthy.'


"is" or "was"? This may be in the past

Here specifically we expect a non-healthy event to be ongoing, so the wording reflects that

mihaibudiu · 2026-01-05T23:30:59Z

js-packages/web-console/src/lib/functions/pipelines/health.ts

+}
+
+/**
+ * Groups sequential unhealthy events with the same tag as a single incident based on the abscence of healthy events between them


mihaibudiu · 2026-01-05T23:31:45Z

js-packages/web-console/src/lib/functions/pipelines/health.ts

+    // segment that can be "open". So: active = (we ended with a non-empty current).
+    //
+    // Implementation detail: we already pushed current if non-empty. To know if last segment is open,
+    // we can re-check whether the last event in sorted is non-healthy.


in sorted order

mihaibudiu · 2026-01-05T23:32:26Z

js-packages/web-console/src/lib/functions/pipelines/health.ts

+  }
+
+  // 6) Global sort by timestampFrom
+  allGroups.sort((a, b) => a.timestampFrom.getTime() - b.timestampFrom.getTime())


why aren't they sorted by construction?

mihaibudiu · 2026-01-05T23:35:44Z

js-packages/web-console/src/routes/(system)/(authenticated)/health/+page.svelte

+      <button
+        onclick={() => (drawer.value = !drawer.value)}
+        class="fd fd-book-open btn-icon flex preset-tonal-surface text-[20px]"
+        aria-label="Open extras drawer"


what does this do?

aria-label? It is a recommended feature to enhance accessibility - it provides a human-readable description to narration tools for interactive UI elements that don't have visually readable text

"open extras drawer" does not strike me as something that helps blind users

snkas · 2026-01-06T12:52:29Z

Are we trying to replace datadog or some other similar tools? I hope we can avoid doing that.

@mihaibudiu We are limiting the scope of this as much as possible -- the goal is to have the user be made aware of whether any of the components are operational, and whether they have been in the recent past.

@Karakatiza666 Thanks for the updates, I think with the individual bars it looks clearer.

The incident popup on the right looks really great, it's a satisfying slide to investigate further
The most important in terms of functionality is that all events are shown, and they can be individually investigated. This needs to be a direct mapping, without any filtering done client side. We want to prevent that some events cannot be find. I would suggest either keeping the current bucketing, but when you hover over it you see the timestamps of all the events in the bucket.
Each bucket can be 1h, so there would be 72 bars. If there is no event in the bucket, it should be gray but still be there.
Also healthy events are interesting to investigate
When I trigger an error in the compiler (e.g., just adding panic!("") in src/compiler/main.rs), and then restart again without it it to recover, it does not show the new event. This indicates there is some logic doing filtering, which we want to avoid.
Event timestamps should just be their exact timestamps, not ranges. On the bar x-axis legend, there could be on the left "72h ago" and on the right "Today"

Karakatiza666 · 2026-01-06T16:57:41Z

We discussed the UX with Simon at length, but did not come to a single conclusion.

The most straightforward adjustments for the current PR are:

Show gray bars when data is missing
Add a toggle (off by default) to display healthy intervals in the events log list
Add per-hour bucketing of both healthy and non-healthy intervals
Highlight the incidents related to the selected bar in the time series

Update the design of user popup Add health indicator to user popup Signed-off-by: Karakatiza666 <[email protected]>

Signed-off-by: Karakatiza666 <[email protected]>

… cross-selection between timeline and incidents Signed-off-by: Karakatiza666 <[email protected]>

snkas

I'm not familiar enough with Web Console code to review it, but the UI looks great and works well as far as I can test. Only one request: instead of "No telemetry" for the gray bars label, can it be "No data"?

Karakatiza666 · 2026-01-09T15:52:22Z

Screencast.from.2026-01-09.19-50-15.webm

…ack navigation Signed-off-by: Karakatiza666 <[email protected]>

gz · 2026-01-09T16:13:39Z

I can't see the mouse in the video but it made me wonder what those progress bars that pop up and disappear on the right frame represent?

How do we distinguish between service degradation and major issue?

Karakatiza666 · 2026-01-09T16:43:13Z

those progress bars that pop up and disappear

They indicate on-demand loading of per-event data. Once the content loads, the progress bar disappears and the text content is shown (blank space in the video)

Karakatiza666 · 2026-01-09T16:43:42Z

How do we distinguish between service degradation and major issue?

We don't really yet, once we do it'll be backend-driven

Signed-off-by: Karakatiza666 <[email protected]>

Karakatiza666 requested a review from snkas December 24, 2025 18:05

Karakatiza666 force-pushed the monitoring-ui branch from d20178c to 8d73e8c Compare January 5, 2026 13:27

Karakatiza666 requested review from mihaibudiu and removed request for snkas January 5, 2026 16:44

Karakatiza666 marked this pull request as ready for review January 5, 2026 16:44

Copilot AI review requested due to automatic review settings January 5, 2026 16:44

Copilot AI reviewed Jan 5, 2026

View reviewed changes

Karakatiza666 force-pushed the monitoring-ui branch from ffb9c3d to 75c4fa5 Compare January 5, 2026 17:23

Karakatiza666 force-pushed the monitoring-ui branch 2 times, most recently from d5e70c6 to 34186a4 Compare January 5, 2026 17:29

mihaibudiu approved these changes Jan 5, 2026

View reviewed changes

Karakatiza666 added 4 commits January 9, 2026 11:03

Implement Cluster Health page

359fafb

Update the design of user popup Add health indicator to user popup Signed-off-by: Karakatiza666 <[email protected]>

[WebConsole] Monitoring UI review and UX fixes

f9c5689

Signed-off-by: Karakatiza666 <[email protected]>

[WebConsole] Cluster health UI Review fixes

e07b0bc

Signed-off-by: Karakatiza666 <[email protected]>

Cluster HEalth UI v2 - three timelines, list of events in the drawer,…

64b4e4c

… cross-selection between timeline and incidents Signed-off-by: Karakatiza666 <[email protected]>

Karakatiza666 force-pushed the monitoring-ui branch from 34186a4 to 64b4e4c Compare January 9, 2026 11:03

snkas approved these changes Jan 9, 2026

View reviewed changes

[web-console] Cluster health UI: implement details list forward-and-b…

fc41742

…ack navigation Signed-off-by: Karakatiza666 <[email protected]>

Karakatiza666 enabled auto-merge January 9, 2026 16:46

Karakatiza666 added this pull request to the merge queue Jan 9, 2026

[WebConsole] Cluster health UI - improve initial loading transition

c44a923

Signed-off-by: Karakatiza666 <[email protected]>

Karakatiza666 removed this pull request from the merge queue due to a manual request Jan 9, 2026

Karakatiza666 force-pushed the monitoring-ui branch from b8cccb0 to c44a923 Compare January 9, 2026 16:59

Karakatiza666 enabled auto-merge January 9, 2026 16:59

Karakatiza666 added this pull request to the merge queue Jan 9, 2026

Merged via the queue into main with commit 977bdd1 Jan 9, 2026
1 check passed

Karakatiza666 deleted the monitoring-ui branch January 9, 2026 18:10

Implement Cluster Health page #5336

Implement Cluster Health page #5336

Uh oh!

Conversation

Karakatiza666 commented Dec 24, 2025

Uh oh!

Karakatiza666 commented Jan 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Karakatiza666 commented Jan 5, 2026

Uh oh!

mihaibudiu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snkas commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Karakatiza666 commented Jan 6, 2026

Uh oh!

snkas left a comment

Choose a reason for hiding this comment

Uh oh!

Karakatiza666 commented Jan 9, 2026

Uh oh!

gz commented Jan 9, 2026

Uh oh!

Karakatiza666 commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Karakatiza666 commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

snkas commented Jan 6, 2026 •

edited

Loading

Karakatiza666 commented Jan 9, 2026 •

edited

Loading

Karakatiza666 commented Jan 9, 2026 •

edited

Loading