Add an option to view per-connector metrics in Performance tab#5572
Add an option to view per-connector metrics in Performance tab#5572Karakatiza666 merged 1 commit intomainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds functionality to display per-connector metrics in the Performance tab, allowing users to view aggregated metrics alongside individual connector breakdowns for tables and views.
Changes:
- Introduced
AggregatedMetricstype to store both aggregate and per-connector metrics - Refactored metrics accumulation to group connector metrics by relation
- Created a new
MetricsTables.sveltecomponent with expandable rows for viewing individual connector metrics
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| js-packages/web-console/src/routes/+layout.svelte | Code formatting change (multi-line to single-line) |
| js-packages/web-console/src/lib/functions/pipelineMetrics.ts | Added AggregatedMetrics type and refactored metrics accumulation to support per-connector data |
| js-packages/web-console/src/lib/compositions/useAggregatePipelineStats.svelte.ts | Removed unused import |
| js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte | Replaced inline table markup with new MetricsTables component |
| js-packages/web-console/src/lib/components/pipelines/editor/MetricsTables.svelte | New component for rendering expandable metrics tables with per-connector details |
| <td class=""> | ||
| <span class="select-none"> </span | ||
| >{connector.endpointName} | ||
| </td> | ||
| <td class="text-end font-dm-mono"> | ||
| {formatQty(connector.metrics.total_records)} |
There was a problem hiding this comment.
Using non-breaking spaces for indentation is fragile and inconsistent. Consider using CSS padding or margin (e.g., pl-6 or ml-6) for consistent indentation across different font sizes and rendering contexts.
| <td class=""> | |
| <span class="select-none"> </span | |
| >{connector.endpointName} | |
| </td> | |
| <td class="text-end font-dm-mono"> | |
| {formatQty(connector.metrics.total_records)} | |
| <td class="pl-6"> | |
| {connector.endpointName} | |
| </td> | |
| <td class="text-end font-dm-mono"> | |
| {formatQty(connector.metrics.total_records)} | |
| {formatQty(connector.metrics.total_records)} |
| <td class=""> | ||
| <span class="select-none"> </span | ||
| >{connector.endpointName} | ||
| </td> | ||
| <td class="text-end font-dm-mono"> | ||
| {formatQty(connector.metrics.transmitted_records)} |
There was a problem hiding this comment.
Using non-breaking spaces for indentation is fragile and inconsistent. Consider using CSS padding or margin (e.g., pl-6 or ml-6) for consistent indentation across different font sizes and rendering contexts.
| <td class=""> | |
| <span class="select-none"> </span | |
| >{connector.endpointName} | |
| </td> | |
| <td class="text-end font-dm-mono"> | |
| {formatQty(connector.metrics.transmitted_records)} | |
| <td class="pl-6"> | |
| {connector.endpointName} | |
| </td> | |
| <td class="text-end font-dm-mono"> | |
| {formatQty(connector.metrics.transmitted_records)} | |
| {formatQty(connector.metrics.transmitted_records)} |
Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
e2026c3 to
86a819d
Compare
| {:else if data.connectors.length === 1} | ||
| {data.connectors[0].endpointName} | ||
| {:else} | ||
| — |
There was a problem hiding this comment.
I don't know what this minus is. Is it a dash?
Currently all composite rows are collapsed by default.