Skip to content

[web-console] Add connector errors list#5784

Merged
ryzhyk merged 1 commit intomainfrom
connector-errors-ui
Mar 10, 2026
Merged

[web-console] Add connector errors list#5784
ryzhyk merged 1 commit intomainfrom
connector-errors-ui

Conversation

@Karakatiza666
Copy link
Copy Markdown
Contributor

@Karakatiza666 Karakatiza666 commented Mar 9, 2026

For both input and putput connectors

Show input records buffered - Fix #5778

Show end-of-input - Fix #5772

Screencast.from.2026-03-10.03-30-21.webm

Show input records buffered

Show end-of-input

Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
@ryzhyk
Copy link
Copy Markdown
Contributor

ryzhyk commented Mar 9, 2026

Thanks, it works for me. Needs a proper review though.

Copy link
Copy Markdown

@mythical-fred mythical-fred left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No tests. This PR changes meaningful behavior — connector errors move out of the global tab and into an inline drawer, the error icon becomes clickable, end-of-input indicator is added, and extractPipelineXgressErrors is removed from the global errors list.

The pure functions in the new code are unit-testable without rendering anything:

  • numConnectorsWithErrors in systemErrors.ts
  • withGaps in ConnectorErrors.svelte
  • getErrorArrays in ConnectorErrors.svelte

Vitest + @testing-library/svelte is the right tool here (not Playwright/screenshot tests). These three functions alone would give meaningful coverage of the core logic.

{#if isXl.current}
<div class="flex flex-col">
<div class="text-start text-sm">
Deployment age -
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some of these are @render functions, some are not... what's the rule?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Svelte 5, { ... } syntax in HTML markup evaluates a plain JavaScript expression, converts it to string, sanitizes it and inserts into HTML.
{@render snippet_name(..)} inserts a "Snippet" - a UI component that is defined with

{#snippet snippet_name(...)}
   ...
{/snippet}

Snippets are simpler than true components; they have arguments that are passed as a function call when "render"-ing the snippet.

const connectorsWithErrorsCount = $derived(numConnectorsWithErrors(metrics.current))
</script>

{#snippet TabControlPerformance()}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does "Control" mean here?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a part of "Tab Control", what the UI library calls the label of the tab in the list of tabs

tabindex="0"
onkeydown={(e) => e.key === 'Enter' && onErrorClick?.(e)}
></span>
<Tooltip placement="top">Parse or transport errors occurred — click to view</Tooltip>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if onErrorClick is undefined, is this text still displayed?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. I tried to keep it simpler but I overlooked I do need a separate case. Will fix in a follow-up

tabindex="0"
onkeydown={(e) => e.key === 'Enter' && onErrorClick?.(e)}
></span>
<Tooltip placement="top">Encode or transport errors occurred — click to view</Tooltip>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same question

<th class="font-normal 2xl:text-nowrap" rowspan="2">Parse errors</th>
<th class="font-normal 2xl:text-nowrap" rowspan="2">Transport errors</th>
</tr>
<tr>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these aligned under "Ingested/buffered"? I don't see why from the code.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No; here the header of the table is defined that consists of two rows. HTML exposes a mechanism to "merge" cells in the table: rowspan=2 means the cell takes up two rows - it's own and the next one (under it), colspan=2 - the cell takes up two columns.

}}>{formatQty(m.num_parse_errors)}</button
>
{:else}
{formatQty(m.num_parse_errors)}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this for backward compatibility?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's to avoid button-like behavior for num errors = 0. I could have as well just hard-coded "0"

@ryzhyk ryzhyk added this pull request to the merge queue Mar 10, 2026
Merged via the queue into main with commit 674f287 Mar 10, 2026
1 check passed
@ryzhyk ryzhyk deleted the connector-errors-ui branch March 10, 2026 02:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[WebConsoler] Show the number of buffered records/byte per input connector. [WebConsole] end-of-input is not reflected in the connector status

4 participants