PMM-15351: Paginate state timeline panels - #5865
Conversation
A state timeline splits the panel height across every series it draws, so once the row count passes about a dozen each row is a few pixels tall and the Y axis labels print over each other. On these seven panels the row count follows the number of users, servers, endpoints, hosts or nodes, so any large environment hits that wall. Page size bounds the rows per page, which holds the row height fixed whatever the series count. Checked with 40 HAProxy servers: page one still draws 10 rows at the same height as it did with 12.
Router Status is 6 grid rows tall and Replication Members State is 7, so once paginated they fit only 4 to 6 rows and each row still came out under 20px. Giving the legend space back to the rows takes Router Status from 18px to 28px per row, and Replication Members State from 19px to 25px. Nothing is lost: both panels print the state inside the bar, so the legend only repeated what every row already says. Router Status in a healthy cluster showed a single UP chip.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5865 +/- ##
==========================================
- Coverage 43.59% 37.15% -6.44%
==========================================
Files 415 215 -200
Lines 43134 7186 -35948
Branches 0 585 +585
==========================================
- Hits 18804 2670 -16134
+ Misses 22454 4321 -18133
+ Partials 1876 195 -1681 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review. WalkthroughUpdated six Grafana state-timeline panels across MongoDB, MySQL, and PostgreSQL dashboards. The changes add Merge Risk: ⚪ Minimal · up to The change localizes crowded state-timeline rows through pagination and selective legend removal without altering queries or layout; no actionable merge-blocking risk remains after normal checks and review. 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Full details: Description checkExplanation The description includes the ticket number, feature build, affected panels, implementation details, validation notes, and screenshots. The optional related-work section is not needed, and the API documentation section does not apply because no API endpoints changed. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@mattiasimonato seems good, can we just have some screenshots (one panel is enough)? |
@fabio-silva, I added a before/after of the Users Activity panel to the PR description 👍 |
2 participants
Ticket number: PMM-15351
Feature build: SUBMODULES-4552
A state timeline shares the panel height between all of its rows. The more rows, the thinner each one gets, until the names on the left print on top of each other and the panel is unreadable.
Seven panels grow like that, because they draw one row per user, server, endpoint, host or node:
The fix
Each panel now sets Grafana's Page size, the same option PMM-15060 used on the Uptime panel. It caps how many rows one page shows, so the rows keep their height however many series show up. The caps are 20, 10, 10, 8, 8, 6 and 4, based on how tall each panel is and checked on a live server.
Router Status and Replication Members State are short panels, so even split into pages their rows stayed under 20px. Hiding the legend hands that space to the rows: 18px to 28px on Router Status, 19px to 25px on Replication Members State. Neither panel needs the legend, because both already write the state inside the bar. The other five keep theirs.
No query, layout or panel changes.
before:
after:
