det101 commented on issue #11666:
URL: https://github.com/apache/seatunnel/issues/11666#issuecomment-5210832660
## Design proposal (for discussion on this issue)
Following feedback on #11672 (@nzw921rx, @DanielLeens): keep
pre-implementation design alignment here on the issue. User-facing docs
(`web-ui.md` / Zeta user-guide sidebar) will be updated only together with the
implementation PR once the feature ships. Docs PR #11672 will be closed
accordingly.
### Intent
V1 turns the existing Job Detail realtime time-series into a selectable live
chart:
- capability alignment with Flink-style "pick metrics and keep watching"
- **not** a Flink Metrics page layout rewrite
- **not** a new metrics pipeline
### Existing foundation
| Area | Existing contract |
|---|---|
| Vertex series | `GET /metrics/realtime/jobs/{jobId}/vertices?windowMs=` |
| Edge series | `GET /metrics/realtime/jobs/{jobId}/edges?windowMs=` |
| UI polling | Job Detail Overview already polls both endpoints every 2s
while the job is running |
| Window | Default 3 minutes, capped at 10 minutes |
| Drawer | Click vertex/edge → key-field summary above divider, raw series
table below |
### Goals
1. Render realtime series as a line chart in the drawer (replace or augment
the bottom series table only).
2. Let users pin one or more numeric metrics so the chart remains visible
after the drawer closes.
3. Compare pinned metrics from multiple vertices/edges on one chart.
4. Expose a shared chart component contract reusable by #11351 / #11352.
5. Keep client cost bounded regardless of pin count.
### Non-goals
- Long-term historical metrics storage or export
- Alerting / threshold notifications
- Custom derived metric expressions
- Redesigning Job Detail into a Flink-like Metrics tab
- A second polling loop per pinned metric
### UX placement
```text
Overview
├─ DAG
├─ Pinned live metrics chart panel ← new
└─ Existing summary metrics table
```
- **Drawer**: keep the key-field summary above the divider; change only the
bottom series table into a live line chart with pin controls.
- **Pinned panel**: between the DAG and the existing Overview summary table.
- **Layout**: keep current SeaTunnel Web UI structure; no separate Metrics
tab required.
### Shared chart component contract
Request-agnostic; pages inject already-fetched series:
```text
series item:
- id: stable id, e.g. vertex:12:sourceReadRatio
- name: display label
- points: [{ ts: number, value: number }, ...]
chart props:
- series: series item[]
- windowMs: number
- emptyText?: string
```
Behavior: one line per series over the bounded window; sort by ascending
`ts`; tolerate repeated buckets; empty state when no points; component does not
fetch.
### Chart library
| Item | Decision |
|---|---|
| Library | Apache ECharts |
| License | Apache License 2.0 (ASF project) |
| Scope | Rendering only in `seatunnel-engine-ui`; pages own polling and
series mapping |
Implementation PR must call out the ECharts npm dependency and must not add
a second chart library.
### Pin model
Session-scoped to the current Job Detail visit:
| Event | Behavior |
|---|---|
| Pin from drawer | Add series to Overview pinned panel |
| Close drawer | Keep pinned series |
| Switch tabs on the same job page | Keep pinned series |
| Leave Job Detail | Clear |
| Job reaches terminal state | Clear |
| Exceed pin limit | Reject with a short message |
Default pin limit: **6** series.
Pinned series consume the same Overview realtime response already polled for
the DAG — no extra REST traffic.
### Refresh / retention / cost
Keep the existing model: one job-level poll for vertices + edges every 2s
while Overview is open and the job is running; default window 3 minutes (max
10); no chart data on disk.
### Acceptance criteria
- Pin at least one metric and see a live-updating chart without keeping the
drawer open.
- Multiple metrics/vertices can be compared on the same chart.
- Documented pin limit and shared polling keep cost bounded.
- Update English and Chinese user docs together with the implementation PR
(not before).
Feedback welcome on this issue. After alignment, I will open an
implementation PR against `seatunnel-engine-ui`.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
