fix(observability): refresh button feedback (v0.11.3)#18
Merged
Conversation
Clicking the toolbar Refresh button used to give zero visible response —
no spinner, no label change, no acknowledgement that the click registered.
This wires up two ambient signals that match the v0.11.2 loader-message
vibe:
(1) While a fetch is in flight, the button disables itself and re-labels
to "Refreshing…" (`aria-busy` + cursor: progress + muted background).
(2) On every fetch completion (success OR error), an "Updated HH:MM:SS"
caption appears under the button in --text-secondary at 11px so it
reads as a quiet receipt, not a banner.
DetailHeader gains two new props (`isRefreshing`, `lastUpdatedAt`) and
ObservabilityPage hoists per-tab fetch state via an `onFetchStateChange`
callback passed to MetricsTab / LogsTab / TracesTab. Each tab reports
loading/completion at its main fetch boundary.
Manual clicks AND auto-refresh ticks share the same path: both bump
`refreshKey`, which propagates through each tab's fetch effect, so the
"Refreshing… → Updated 14:23:15" cycle fires identically whether the
user clicked the button or the 5s/10s/30s/1m/5m interval ticked.
Per-tab state survives tab switches — flipping back to Logs still shows
its prior "Updated …" stamp instead of a blank header.
Co-Authored-By: arun <arun@infrawatchlabs.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Toolbar Refresh button used to give zero visible feedback — MGupta couldn't tell if the click registered. This wires up two ambient signals matching the v0.11.2 loader-message vibe:
Refreshing…(aria-busy,cursor: progress, muted background).Updated HH:MM:SScaption appears under the button in--text-secondaryat 11px — quiet receipt, not banner.DetailHeadergains two new props (isRefreshing,lastUpdatedAt).ObservabilityPagehoists per-tab fetch state via anonFetchStateChangecallback passed to MetricsTab / LogsTab / TracesTab. Each tab reports loading/completion at its main fetch boundary.Manual click + auto-refresh tick share the same path — both bump
refreshKey, which propagates through each tab's fetch effect, so theRefreshing… → Updated 14:23:15cycle fires identically whether the user clicked the button or the 5s/10s/30s/1m/5m interval ticked.Per-tab state survives tab switches — flipping back to Logs still shows its prior
Updated …stamp instead of a blank header.Files touched
metrics/components/DetailHeader.jsx— new props + UI;formatRefreshTimestampexported helpermetrics/ObservabilityPage.jsx— per-tab fetch-state map +handleTabFetchStateChangemetrics/components/MetricsTab.jsx,LogsTab.jsx,TracesTab.jsx— callonFetchStateChange({loading, lastUpdatedAt})at fetch boundariesmetrics/observability.css—.iw-obs-refresh-wrap,.iw-obs-refresh-stamp, disabled-button stylingmetrics/components/ux.test.js— 6 new tests forformatRefreshTimestamp(default + full form, error inputs, race-tick scenario)Test plan
npx react-scripts test --watchAll=false --testPathPattern="metrics"— 153 passed (was 147)npx react-scripts build— compiled successfully (+667B JS, +107B CSS)