Skip to content

Add a refresh control to the header - #2389

Merged
jage merged 2 commits into
mainfrom
ui/poller-control
Oct 12, 2026
Merged

Add a refresh control to the header#2389
jage merged 2 commits into
mainfrom
ui/poller-control

Conversation

@jage

@jage jage commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Why

The UI refreshed every five seconds with no way to pause it, which makes a changing value hard to read, and no way to slow it down on a large broker.

What

  • a pause/resume button and a 5, 10, 30 or 60 second rate select next to the theme switcher
  • the paused state is kept per tab, the rate across sessions
  • a ring around the button fills up until the next refresh, in steps when reduced motion is preferred
  • charts treat a gap as twice the refresh rate rather than a fixed 10 seconds, so lines stay connected at slower rates

Screenshots

Screenshots from a local build (Chromium, light theme).

Live, the ring fills up until the next refresh:

Refresh control while live

Paused:

Refresh control while paused

@jage jage added the UI/UX label Oct 8, 2026
@jage
jage added this pull request to stack #2392 October 8, 2026 13:38
@jage
jage requested a review from Bianka2112 October 8, 2026 13:38
@claude

claude Bot commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown
  • Missing CHANGELOG.md entry. AGENTS.md asks for a short entry that links the PR, and users will see this change: the header gets a pause/resume button and a refresh-rate select.

@jage

jage commented Oct 8, 2026

Copy link
Copy Markdown
Member Author

The changelog entry for the whole stack lives in #2391, so this PR leaves CHANGELOG.md alone on purpose.

@jage

jage commented Oct 8, 2026

Copy link
Copy Markdown
Member Author

Need to look at the mobile view.

@jage
jage force-pushed the ui/poller-control branch from 37f4572 to 282f143 Compare October 9, 2026 09:10
@jage
jage marked this pull request as ready for review October 9, 2026 09:10
@jage
jage requested a review from a team as a code owner October 9, 2026 09:10
@Bianka2112

Bianka2112 commented Oct 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

The 10/30/60 s rates break the live part of the charts. chart.js on main still has POLLING_RATE = 5000, and fillDatasetVoids inserts a null point whenever two points are ≥ 2 × POLLING_RATE apart (static/js/chart.js:164). At a 10 s poll every new point lands between two nulls, and with pointRadius: 0 nothing is drawn. Only the backfill from the first response shows a line.

Suggestion: chart.js could read its spacing from Poller.getRate() in the meantime.

@jage

jage commented Oct 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Member Author

Yeah, this is fixed in later PRs with the uPlot graphs, but lets do a workaround like you suggested here to get it going.
EDIT: fixed

@jage
jage force-pushed the ui/poller-control branch from 1f552a9 to 948b5c0 Compare October 9, 2026 12:43
spuun
spuun approved these changes Oct 9, 2026
View reviewed changes

@spuun spuun left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe comments can be handled after merged, if any action should be taken at all.

Comment thread views/partials/header.shtml
Comment on lines +45 to +50
<svg class="icon-pause" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M9 5V19M15 5V19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<svg class="icon-play" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M8 5.5V18.5C8 19.3 8.87 19.78 9.54 19.35L19.6 12.85C20.21 12.45 20.21 11.55 19.6 11.15L9.54 4.65C8.87 4.22 8 4.7 8 5.5Z"/>
</svg>

@spuun spuun Oct 9, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should these be their own files? @bengtmagnus WDYT?

Comment thread static/main.css
display: none;
}

.refresh-pill {

@spuun spuun Oct 9, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This .refresh-pill and #theme-switcher has a similar appearance. Maybe they should share some css? @bengtmagnus

@Bianka2112 Bianka2112 mentioned this pull request Oct 9, 2026
Merged
@jage
jage force-pushed the ui/poller-control branch from 2381aea to 87eeeb2 Compare October 12, 2026 09:53
Base automatically changed from ui/poller-core to main October 12, 2026 10:33
jage added 2 commits October 12, 2026 12:33
@jage
Add a refresh control to the header
1cd1f90 
- pause/resume button and a 5-60s rate select
- paused state per tab, rate kept across sessions
- ring around the button fills up until the next refresh
- stepped ring when reduced motion is preferred
@jage
Keep chart lines connected at slower refresh rates
84b6224 
The charts broke the line wherever two points were more than twice
the old fixed 5s poll apart. At 10s, 30s or 60s every live point was
treated as a gap, so only the backfilled history drew a line.

- a gap is now twice the refresh rate, or twice the previous rate
  right after the rate changes
- a gap gets one null point instead of one per missed 5s
- the backfilled history keeps the server's 5s sample interval
@jage
jage force-pushed the ui/poller-control branch 2 times, most recently from 87eeeb2 to 84b6224 Compare October 12, 2026 10:33
@jage
jage merged commit fcbe603 into main Oct 12, 2026
63 of 66 checks passed
@jage
jage deleted the ui/poller-control branch October 12, 2026 10:51
@jage jage added this to the 2.11.0 milestone Oct 12, 2026
This was referenced Oct 12, 2026
Merged
Merged
carlhoerberg pushed a commit that referenced this pull request Oct 15, 2026
@jage
Link the mobile header fix from the refresh control changelog entry (#…
9317311 
…2435)

The refresh control changelog entry links #2389, #2390 and #2391; this
adds #2417, which made the control work in the mobile header.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@spuun spuun spuun approved these changes
@Bianka2112 Bianka2112 Bianka2112 approved these changes

Assignees

@jage jage

Labels

UI/UX

Projects

None yet

Milestone

2.11.0

Development

Successfully merging this pull request may close these issues.

3 participants

@jage @Bianka2112 @spuun