Update VDisk UI Components with New Design and Enhanced Tooltips

[AlinaBelousovaUX]

To implement the updated visual design for VDisk indicators across the YDB console and enhance their tooltips to clearly display replication relationships, including donor information.

Implement the new visual design for VDisk indicators as specified in the Figma mockups.

Blue with diagonal stripe: Replicating.
Grey with diagonal stripe: Donor. +icon when sorting storage by groups

Tooltip for a replicating VDisk
Label: Replicating
Donor parameter: Display the VDisk ID of the donor disk(s)

Tooltip for a donor VDisk
Label: Donor
Recipient parameter: Display the VDisk ID of the recipient disk

Figma Mockups
Figma Components

UX Ticket: Show vdisks in donor mode correctly #2595

[DaryaVorontsova]

• Create universal approach for painting diagonal stripes

• Add logic for displaying states with new design

• Add tooltip for replicating VDisk

• Add tooltip for donor VDisk

• Red icon of danger

• Tooltip: Label - Ok and Normal instead of State: Ok

• Tooltip for pDIsk: Label for DC

21.11.2025

• Change logic of color choosing: if state and space of a disk is OK, but frontQueues are RED/ORANGE/YELLOW - final color is YELLOW.
• Label color in tooltip should depend on final severity. As for text if we have an error, we should display it, else we should choose a fallback from the map.
• FrontQueues should be displayed as a label.
• Fix problem with path to vdisk (3 params)