feat(manager): add binary unit (KiB/MiB/GiB) tooltips to bandwidth and data displays #2653
Conversation
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
Add formatBinaryBytes() and related utilities to format byte values using binary units (base-1024) alongside existing SI units (base-1000). - Add getBinaryDataFormattingParams() for unit selection - Add formatBinaryBytesParts() for separated value/unit - Add formatBinaryBytes() for complete formatted strings - Define binary unit constants (KIBIBYTE, MEBIBYTE, GIBIBYTE, TEBIBYTE) Functions use Intl.NumberFormat for proper i18n support.
Add optional highlightTooltip property to server-metrics-row-subcard for displaying additional information via icon-tooltip. - Add highlightTooltip property to subcard component - Render icon-tooltip inside highlight box when provided - Pass highlightTooltip through parent server-metrics-row component - Update CSS for flexbox alignment Backward compatible. Existing usage continues to work unchanged.
Add icon-tooltips showing binary units (KiB/s, MiB/s, GiB/s) for all bandwidth displays. SI units remain primary display format. - Add formatBandwidthBinaryTooltip() for rates with "/s" suffix - Add formatDataAmountBinaryTooltip() for data amounts - Add tooltips to current/peak bandwidth, data fractions, ASN subcards Icon-tooltip used instead of native tooltips due to Electron limitations.
Add icon-tooltip to access key usage meter showing binary units (KiB/MiB/GiB) alongside SI unit display. - Add formatBinaryTooltip() for usage/limit formatting - Wrap label with icon-tooltip in flex container - Update CSS selectors for warning state compatibility
Add position property to icon-tooltip to control tooltip placement and prevent UI overlap issues. Includes auto-adjustment when tooltip would render off-screen. - Add TooltipPosition type for position options (bottom/right/left/top) - Add position property with 'bottom' default (preserves existing behavior) - Add calculatePosition() method with auto-adjustment logic - Apply position="right" to bandwidth metrics and ASN subcards to prevent overlap Tooltips now intelligently position themselves based on available screen space while respecting the preferred position parameter.
Collaborator
|
I have a few concerns:
Perhaps removing the (i) and have the tooltip over the number is a good compromise. |
Replace icon-based tooltips with clickable text based. Extend icon-tooltip to wrap content via slots, making numbers directly clickable. - Add slot support to icon-tooltip component - Wrap bandwidth values, ASN highlights, and access key usage fractions - Rename formatBinaryTooltip in `access_key_usage_meter/index.ts` to formatDataUsageFractionBinaryTooltip Tooltip component now supports two modes: icon button (existing) or wrapped content (new), keeping all tooltip logic centralized.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Fixes #2150
Summary
Adds icon-tooltips showing binary units (KiB, MiB, GiB) alongside SI units (KB, MB, GB) throughout the Manager UI. Users familiar with binary units can now view data in their preferred format without changing the primary display.
Changes
Core Utilities (
data_formatting.ts)formatBinaryBytes()with i18n support viaIntl.NumberFormatTooltip Infrastructure (
icon_tooltip/index.ts)positionproperty (bottom/right/left/top)UI Components
server-metrics-row-subcardwith optionalhighlightTooltippropertyNote: Uses
icon-tooltipcomponent like existing patterns in table headers instead of nativetitleattribute due to Electron Shadow DOM limitations that prevent native tooltips from displaying.Screenshots
Bandwidth Metrics - Main Display
Tooltip positions for this panel:
ASN Breakdown Inline Tooltips
Info icons next to bandwidth values inside highlight chip for each AS.
Access Keys Data Usage
Binary value as tooltips for usage fractions (e.g., "403.42 MiB / 762.94 MiB")*
Key Design Decisions
bottomposition (existing behavior)rightposition for inline values to prevent overlapTesting
Known Issues
Intl.NumberFormattranslations. Numbers have been internationalized and units hardcoded. Suggestions for a better way to handle this would be really helpful!