Nicer uptime tooltips; optional service description#99
Merged
Conversation
Replace the plain native `title` on each uptime bar with a styled hover tooltip (a floating card matching the app's tokens: canvas surface, border, shadow, a status dot, and a caret). It now also reports minutes down on a degraded day, derived from the day's uptime fraction — e.g. "Jun 15 · 99.93% uptime · 1 min down". The bar keeps an aria-label so screen readers still get the text. Also make a service's description truly optional: read it via `try` so the public page renders even when no service defines one, and drop the sample descriptions from the dummy app to cover that path. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR improves the Upright public status page UX by replacing native title-based uptime tooltips with a styled, CSS-only tooltip and by making Service#description truly optional (avoiding NoMethodError when the attribute is absent across all FrozenRecord entries).
Changes:
- Replace native title tooltips with an inline tooltip card for each uptime bar, and add tooltip styling to
public_status.css. - Enhance
Upright::Service::DailyStatuswithdetail/aria_labeland downtime-in-minutes formatting derived fromuptime_fraction. - Make service descriptions optional via
try(:description)and remove dummy-app sample descriptions to exercise the no-description path.
Tip
If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| test/models/upright/service/daily_status_test.rb | Adds unit coverage for DailyStatus#detail and #aria_label, including downtime formatting cases. |
| test/dummy/config/services.yml | Removes descriptions from dummy services to validate optional-description rendering. |
| app/views/upright/public/services/_uptime_bar.html.erb | Renders the new tooltip markup and per-day aria-label on uptime bars. |
| app/views/upright/public/services/_service.html.erb | Uses service.try(:description).presence to safely handle missing description accessors. |
| app/models/upright/service/daily_status.rb | Introduces date_label, detail, aria_label, and downtime formatting logic. |
| app/assets/stylesheets/upright/public_status.css | Styles the CSS-only tooltip card, caret, and status dot; positions bars for absolute tooltip placement. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -1 +1,9 @@ | |||
| <span class="uptime__bar <%= "uptime__bar--#{day.status}" %>" title="<%= day.tooltip %>"></span> | |||
| <span class="uptime__bar uptime__bar--<%= day.status %>" aria-label="<%= day.aria_label %>"> | |||
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
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.
Nicer tooltips
The uptime bars used a plain native
titleattribute — basic, delayed, unstyled. Replaced with a CSS-only hover tooltip (no JS; performant across 90 bars per service) styled as a floating card using the app's design tokens — canvas surface,--border,--shadow, a status-colored dot, and a caret.It also now shows minutes down on a degraded day, derived from the stored uptime fraction:
Sub-minute outages read as
<1 min down; whole minutes pluralize (5 mins down). The bar keeps anaria-labelwith the same text so screen readers aren't regressed.Optional description
Service#descriptionwas rendered behind anif present?guard, but FrozenRecord only defines the accessor when some record has the attribute — so dropping it from every service wouldNoMethodError. Read it viatryso the page renders cleanly with no descriptions anywhere, and drop the sample descriptions from the dummy app to exercise that path.Tests
Upright::Service::DailyStatusTestcovers the detail string (operational, whole/singular/sub-minute downtime, live-today, no-data) andaria_label. Public services integration test now renders description-free. All green; rubocop clean.🤖 Generated with Claude Code