[bugfix] fix monitor chart layout and locale formatting by butterfly-520-boy · Pull Request #4467 · apache/hertzbeat · GitHub
Skip to content

[bugfix] fix monitor chart layout and locale formatting - #4467

Open
butterfly-520-boy wants to merge 1 commit into
apache:masterfrom
butterfly-520-boy:codex/react-monitor-chart-locale
Open

butterfly-520-boy wants to merge 1 commit into
apache:masterfrom
butterfly-520-boy:codex/react-monitor-chart-locale

Conversation

@butterfly-520-boy

Copy link
Copy Markdown
Contributor

What's changed?

Fixes #4466.

Fix two display issues on the React 2.0 monitor detail page:

  • Reserve a separate row for the y-axis unit below the scroll legend when a history chart has both a unit and multiple series. Keep the existing compact layout when either is absent.
  • Pass the selected interface locale to chart numbers and monitor-detail date/number formatters. Update the existing chart when the language changes, without requiring a page reload. Collection timestamps, investigation-window dates, alert dates and selected-history statistics follow the selected language.

Underlying values, timestamps and investigation timezone are unchanged. The shared chart locale is optional for existing consumers. No backend, API, dependency or lockfile changes; no Angular backport or pagination changes.

Validation

  • Added 11 regression cases. The initial 10-case negative control fails seven assertions on the original formatting/layout code, with three compatibility cases passing.
  • Focused chart, locale, collection evidence and workbench tests: 49 passed across five files.
  • Full frontend suite: 1,065 files / 8,969 tests passed (pnpm test).
  • All original frontend gates passed: pnpm toolchain:check, pnpm architecture, pnpm i18n:check, pnpm format:check, pnpm lint, pnpm typecheck, pnpm build, pnpm budget, pnpm dead-code and pnpm diff:check.
  • Native Windows TypeScript and production builds passed. The full isolated Linux run used LF-normalized baseline sources with upstream patch bytes preserved and a temporary 4 GB Node heap; no project verification rules were disabled.
  • Production frontend connected to a real HertzBeat backend and actual process metrics: checked the unit/legend gap, Chinese-English-Chinese changes, English formatting after reload, and desktop/narrow layouts. The investigation timezone remained Asia/Shanghai.

The original reproduction screenshot is included in #4466. Local production checks confirmed the unit below the legend and English chart/date formatting after switching languages.

AI assistance

AI assisted with implementation, regression tests and automated/browser checks.

Human validation

The contributor ran this revision through their local IDEA workflow and confirmed that both fixes work. All ten source-file hashes match the validated Windows checkout and Linux verification inputs; no source changes followed that confirmation.

Risk notes

Automated cases cover all five supported chart locales and explicit Shanghai/New York timestamp formatting. Live browser checks cover Chinese and English with the existing Shanghai investigation timezone; they are not claimed as live checks for every locale/timezone combination. A pre-existing unrelated CSS highlight minifier warning remains visible in the Windows build.

Checklist

  • I have read the Contributing Guide.
  • I have written the necessary comment explaining the axis-unit layout invariant.
  • I have added the necessary unit tests and all cases have passed.

Add or update API

Not applicable: no API changes. No repository E2E suite was added or run; real-backend production-browser verification is described above.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Layout and localization issues on the React monitor detail page

1 participant