feat(ui): update Disk indicators visual design across console #3142
Conversation
DaryaVorontsova
requested review from
Raubzeug,
adameat,
artemmufazalov and
astandrik
as code owners
|
Please check border-radius for vdisks column. As a see in figma, for all disks border-radius should be 
|
|
ToDo: Fix pdisks page and dimming disks for one vdisk page |
There was a problem hiding this comment.
Pull request overview
This PR updates the visual design of disk indicators throughout the console with improved styling, hover states, and more compact layouts. The changes modernize the appearance of PDisk and VDisk progress bars while making their interactive states more visually clear.
- Updated entity state colors with hover/highlighted states and adjusted border colors for better visual hierarchy
- Modified donor disk logic to display donor indicators regardless of replication state
- Adjusted component widths and spacing for more compact, consistent layouts
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/disks/helpers.ts | Simplified donor icon logic to show for all donors, not just replicating ones |
| src/styles/mixins.scss | Enhanced entity-state-colors mixin with hover/highlighted states and adjusted color values |
| src/containers/Storage/utils/useStorageColumnsSettings.ts | Increased minimum PDisk width from 120px to 165px |
| src/containers/Storage/VDisks/VDisks.scss | Reduced VDisk item width from 90px to 55px and updated margins |
| src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx | Reduced VDisks and Disks column widths for more compact layout |
| src/containers/Storage/PDisk/PDisk.tsx | Added highlighted state when popup is shown |
| src/containers/Storage/Disks/Disks.tsx | Updated VDisks container width constant |
| src/containers/Storage/Disks/Disks.scss | Updated spacing, sizing, and border-radius values |
| src/components/YDBDefinitionList/YDBDefinitionList.scss | Removed max-width constraint from properties list |
| src/components/VDiskPopup/VDiskPopup.tsx | Changed label logic to show donor OR replication label (not both) |
| src/components/VDisk/VDisk.tsx | Updated donor display logic and added highlighted state |
| src/components/DiskStateProgressBar/DiskStateProgressBar.tsx | Added highlighted prop to component interface |
| src/components/DiskStateProgressBar/DiskStateProgressBar.scss | Added opacity states, hover effects, overflow handling, and updated typography |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
src/containers/Storage/PaginatedStorageNodesTable/columns/StorageNodesColumns.scss
Outdated
Show resolved
Hide resolved
| () => debounce(hidePopup, delayClose), | ||
| () => | ||
| debounce(() => { | ||
| hidePopup(); |
There was a problem hiding this comment.
looks like we could just debounce(hidePopup)
| NodeId: 224, | ||
|
|
||
| Severity: 0, | ||
| Severity: 5, |
There was a problem hiding this comment.
How will Severity 0 be displayed?
There was a problem hiding this comment.
Severity 0 - is "grey" disks (disks with no available information).
We decided to show and consider Vdisk with no state information like error Vdisk, so I want to color such disks in red. (But this requirement is only about Vdisk, Pdisk with no state information should be grey)
There was a problem hiding this comment.
I meant we changed tests here - but do we test Severity: 0 case?
There was a problem hiding this comment.
To be honest, for vdisk - no. I can explain:
If we don't have VDiskState - we consider VDisk as a wrong disk and color it in red (tests: Should display as unavailable when no VDiskState is provided)
Cases with Severity: 0 (grey) are possible for VDisks only as a fallback for unsupported vDiskState - I don't know, should we really test this behaviour (or maybe I didn't understand the question)))?
P.S. For PDisk tests include case with Severity: 0 case
3 participants
Stand: https://nda.ya.ru/t/msLLFRr57PEHGX
CI Results
Test Status:⚠️ FLAKY
📊 Full Report
Test Changes Summary ⏭️2
⏭️ Skipped Tests (2)
Bundle Size: 🔺
Current: 62.51 MB | Main: 62.50 MB
Diff: +0.02 MB (0.02%)
ℹ️ CI Information
var(--g-border-radius-m),var(--g-spacing-*), etc.)HoverPopupcomponent to useuseEffectfor callback timing, preventing stale closures and improving debounce behavior when moving between adjacent disksuseStorageGroupsSelectedColumns,useStorageNodesSelectedColumns) enabling coordinated highlighting across disk collectionsisTopLevelStorageContexthelper to only enable hover highlighting on storage overview pages, not on detail pages focused on specific nodes/diskshover-dim-column-classmixin that uses:has()selector to dim non-highlighted disks when any disk in the column is hoveredDesign System Improvements
The PR consistently migrates from hardcoded values to design tokens, improving maintainability and visual consistency across the console.
Confidence Score: 5/5
HoverPopupto useuseEffectfor callbacks is a correct fix for potential stale closure issues. Code follows existing patterns and uses TypeScript properly throughout.VDisks.scssabout using design tokens consistentlyImportant Files Changed
File Analysis
entity-state-colorsmixin to support highlighted states with hover colors, addedhover-dim-column-classmixin for hover interactionshighlightedanddarkenedprops for interactive hover statesdarkenedstate for hover effectsSequence Diagram
sequenceDiagram participant User participant Table as Storage Table participant Column as Column Component participant Disks as Disks/VDisks Component participant Item as VDisk/PDisk Item participant HoverPopup participant ProgressBar as DiskStateProgressBar User->>Item: Hover over disk Item->>HoverPopup: onMouseEnter HoverPopup->>HoverPopup: debouncedHandleShowPopup Note over HoverPopup: Delay (delayOpen) HoverPopup->>HoverPopup: setIsPopupVisible(true) HoverPopup->>HoverPopup: useEffect detects internalOpen change HoverPopup->>Item: onShowPopup callback Item->>Column: setHighlightedVDisk(id) Column->>Disks: highlightedVDisk={id} Disks->>Item: highlighted={true} Disks->>Item: darkened={false} (for current disk) Disks->>Item: darkened={true} (for other disks) Item->>ProgressBar: highlighted={true/false}, darkened={true/false} ProgressBar->>ProgressBar: Apply CSS classes with hover colors Note over Table,ProgressBar: CSS hover-dim-column-class mixin<br/>dims non-highlighted disks HoverPopup->>User: Show popup content User->>Item: Mouse leaves disk Item->>HoverPopup: onMouseLeave HoverPopup->>HoverPopup: debouncedHandleHidePopup Note over HoverPopup: Delay (delayClose) HoverPopup->>HoverPopup: setIsPopupVisible(false) HoverPopup->>HoverPopup: useEffect detects internalOpen change HoverPopup->>Item: onHidePopup callback Item->>Column: setHighlightedVDisk(undefined) Column->>Disks: highlightedVDisk={undefined} Disks->>Item: highlighted={false}, darkened={false} Item->>ProgressBar: highlighted={false}, darkened={false} ProgressBar->>ProgressBar: Remove highlight CSS classesGreptile Overview
Greptile Summary
This PR updates the visual design of disk indicators across the console with modern design tokens and implements a sophisticated hover interaction system.
Key Changes:
var(--g-border-radius-*),var(--g-spacing-*), etc.) for better maintainabilityHoverPopupto useuseEffectfor callbacks, preventing stale closures when moving between adjacent disksisTopLevelStorageContexthelper to only enable hover on storage overview pages, not on detail pageshover-dim-column-classmixin using:has()selector for dimming non-highlighted disksCode Quality:
The changes follow existing patterns, use TypeScript properly, and maintain good separation of concerns with state management lifted appropriately.
Confidence Score: 5/5
HoverPopupto useuseEffectfor callbacks is a correct fix for potential stale closure issues. Code follows existing patterns and uses TypeScript properly throughout.VDisks.scssabout using design tokens consistentlyImportant Files Changed
File Analysis
highlightedanddarkenedprops for interactive hover statesdarkenedstateentity-state-colorsand newhover-dim-column-classmixinSequence Diagram
sequenceDiagram participant User participant Table as Storage Table participant Column as Column Component participant Disks as Disks/VDisks Component participant Item as VDisk/PDisk Item participant HoverPopup participant ProgressBar as DiskStateProgressBar User->>Item: Hover over disk Item->>HoverPopup: onMouseEnter HoverPopup->>HoverPopup: debouncedHandleShowPopup Note over HoverPopup: Delay (delayOpen) HoverPopup->>HoverPopup: setIsPopupVisible(true) HoverPopup->>HoverPopup: useEffect detects internalOpen change HoverPopup->>Item: onShowPopup callback Item->>Column: setHighlightedVDisk(id) Column->>Disks: highlightedVDisk={id} Disks->>Item: highlighted={true} Disks->>Item: darkened={false} (for current disk) Disks->>Item: darkened={true} (for other disks) Item->>ProgressBar: highlighted={true/false}, darkened={true/false} ProgressBar->>ProgressBar: Apply CSS classes with hover colors Note over Table,ProgressBar: CSS hover-dim-column-class mixin<br/>dims non-highlighted disks HoverPopup->>User: Show popup content User->>Item: Mouse leaves disk Item->>HoverPopup: onMouseLeave HoverPopup->>HoverPopup: debouncedHandleHidePopup Note over HoverPopup: Delay (delayClose) HoverPopup->>HoverPopup: setIsPopupVisible(false) HoverPopup->>HoverPopup: useEffect detects internalOpen change HoverPopup->>Item: onHidePopup callback Item->>Column: setHighlightedVDisk(undefined) Column->>Disks: highlightedVDisk={undefined} Disks->>Item: highlighted={false}, darkened={false} Item->>ProgressBar: highlighted={false}, darkened={false} ProgressBar->>ProgressBar: Remove highlight CSS classes