lizhimins opened a new pull request, #6533:
URL: https://github.com/apache/rocketmq-dashboard/pull/6533
## What this fixes
Two classes of frontend layout defect. Every number below was measured
against a deployed build with a real browser, not estimated — the two places
where I estimated first are called out under *Measurement traps*, because both
produced plausible-looking wrong answers.
### 1. Thirteen table columns wrap their tags
Thirteen columns render an array of antd `Tag`s inside a wrapping
`Space`/`Flex`. Two things made them wrap:
- `.ant-tag` carries its own `margin-inline-end: 8px`, which stacks on top
of the container's `gap: 4`. The rendered spacing is 12px, not the 4px the code
asks for.
- The declared column widths were sized without accounting for that margin.
`AuditRiskInsights` had already hand-written `marginInlineEnd: 0` on its
tags — the same trap, fixed locally once and never generalised.
This adds `web/src/components/TagList.tsx` and routes all thirteen columns
through it:
- the tag margin is cancelled, so the container `gap` is the single source
of truth for spacing;
- `wrap={false}`, so wrapping is impossible rather than merely unlikely;
- `max` collapses the overflow into a `+N` tag that lists the hidden labels
on hover;
- `tagMaxWidth` clips one long label with a native `title`, matching the
existing convention for long text in table cells;
- `fontSize: 14`. `Tag` defaults to **12px**, below this project's 14px
floor; the covered columns were a mix of 12px and hand-set 14px.
`AuditRiskInsights` previously did `operationTypes.slice(0, 3)`, which
dropped the fourth token with no indication. It now shows `+1`.
Widths were re-derived from measured tag widths. Bounded value sets are
sized to fit every value; unbounded ones (Grafana tags, ACL topic/group perms,
associated clusters, broker topology, config-diff values, audit detail tokens)
keep their width and bound the content with `max` + `tagMaxWidth` instead,
since no width can fit an arbitrary array.
`audit.tsx` additionally needed `width` rather than `minWidth`. antd only
emits a `<col>` for `width`, so under `table-layout: fixed` a column carrying
only `minWidth` just shares the leftover space with the other unsized columns.
That table has two of them, so the detail column stayed at 290px no matter what
`minWidth` said — and with `nowrap` now in effect, the third tag was clipped
mid-word (`type: CL`), which is worse than the wrap it replaced.
### 2. Six one-off layout mismatches
| where | before | after |
|:--|:--|:--|
| group detail modal, health tab | 1080px wide for a table that needs 384;
four `span={6}` `Statistic` cards | 800px, one `#fafafa` summary bar matching
the progress tab's existing idiom |
| group detail modal, settings tab | 480×548 vertical form, each of three
switches on its own row | 752×204, three-column grid |
| message query, by-key input | 240px sitting beside the by-message-id
input's 400px | 400px |
| client diagnostics table | resource name and type stacked in one cell — 2
lines, 61px | type in its own column — 1 line, 40px |
| system alerts filter bar | control heights mixed 24 / 26 / 22px; four
independent buttons for one mutually-exclusive filter | all 32px; `Segmented`,
the idiom the message page and settings already use |
| dashboard cluster health card | `body` padding `0 20px 16px`, table top
edge 1px *above* the head border | `16px 20px`, 15px clear |
Two details that only showed up after measuring:
- The `datetime-local` inputs need an explicit `height: 32`. Dropping
`size="small"` brings every other control to 32px but leaves the native picker
at 34px.
- The filter `Select`s use `minWidth`, not `width`: `All delivery statuses`
is ~204px in English and a fixed 160px truncates it. `minWidth` renders at
exactly the declared value in Chinese (content is shorter) and grows in English.
The health tab's modal width was 1080 because the condition grouped it with
the progress tab. The progress table genuinely needs 1080 (`queueColumns` sums
to 940); the health table needs 384 (`healthIssueColumns`: 84 + 180 + the 120
fallback for the one unsized column). The 696px of slack went into that unsized
column and stretched the four `Statistic` cards.
## Measurement traps
Both cost me a wrong fix that only surfaced after deploying:
1. **Injecting a bare `<span class="ant-tag">` to measure tag width returns
the text width, not the tag width.** antd 5's component styles are scoped to
`:where(.css-hash).ant-tag`, so an element without the hash class gets no
padding, no border, and reads `margin-inline-end: 0px`. Clone a tag that is
already rendered instead.
2. **`getBoundingClientRect().width` on a tag inside a constrained flex
container returns the shrunk width.** Flex items shrink to fit; the natural
width is `scrollWidth`. Sizing a container from the shrunk width of its own
contents is circular. This is how the audit detail column came out 30px short
on the first attempt.
## Verification
| check | result |
|:--|:--|
| `tsc -b` | clean |
| `eslint src/` | 0 errors; the 10 warnings are pre-existing and all in
files this PR does not touch semantically (`ops/alerts.tsx`,
`ops/systemAlerts.tsx`, `studio/LiteTopic.tsx`) |
| `vitest run` | 160 files / 1612 tests green, including 8 new ones for
`TagList` |
| deployed build, re-measured | every row of both tables above; tag columns
report `margin-inline-end: 0px`, one line per cell, and no table gained a
horizontal scrollbar |
One existing test needed updating: `Segmented`'s radio input carries
`pointer-events: none`, so `user.click` refuses it. The test now clicks the
wrapping `.ant-segmented-item`. It cannot use `getByText('严重')` — the alert
cards render the same word.
## Not addressed here
Three pre-existing gaps I found while measuring and deliberately left alone,
since each changes behaviour beyond this PR's scope:
- `AlertRuleAssetList`, `GrafanaDashboardList` and the ACL `plainColumns`
table have neither `tableLayout="fixed"` nor `scroll.x`. Per the comment in
`utils/table.ts`, declared widths are only advisory without them.
- `audit.tsx`'s single-tag 操作类型 column is `align: 'center'` but the tag's
8px right margin pushes it ~4px off centre.
- `utils/table.ts` documents giving the primary text column `minWidth` so
surplus collects in one place. That holds only while it is the *sole* unsized
column; the audit table has two, and there `minWidth` does nothing. Worth a
caveat in that comment.
--
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]
