feat(Storage): display donor disks

Author: ariser

src/containers/Storage/StorageGroups/StorageGroups.scss

@@ -1,4 +1,8 @@
 .global-storage-groups {
+    &__vdisks-column {
+        overflow: visible; // to enable stacked disks overflow the row
+    }
+
     &__vdisks-wrapper {
         display: flex;
         justify-content: center;
@@ -14,6 +18,14 @@
         &:last-child {
             margin-right: 0px;
         }
+
+        .stack__layer {
+            background: var(--yc-color-base-background);
+
+            .data-table__row:hover & {
+                background: var(--yc-color-base-float-hover);
+            }
+        }
     }
     &__pool-name-wrapper {
         display: flex;

src/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -4,8 +4,11 @@ import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-t
 import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
 
 import Vdisk from '../Vdisk/Vdisk';
+import {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+
+import {TVDiskStateInfo} from '../../../types/api/storage';
 //@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 //@ts-ignore
@@ -190,17 +193,37 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
         },
         {
             name: TableColumnsIds.VDisks,
+            className: b('vdisks-column'),
             header: tableColumnsNames[TableColumnsIds.VDisks],
             render: ({value, row}) => (
                 <div className={b('vdisks-wrapper')}>
-                    {_.map(value as any, (el) => (
-                        <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                            <Vdisk
-                                {...el}
-                                PoolName={row[TableColumnsIds.PoolName]}
-                                nodes={nodes}
-                            />
-                        </div>
+                    {_.map(value as TVDiskStateInfo[], (el) => (
+                        Array.isArray(el.Donors) && el.Donors.length > 0 ? (
+                            <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                                <Vdisk
+                                    {...el}
+                                    PoolName={row[TableColumnsIds.PoolName]}
+                                    nodes={nodes}
+                                />
+                                {el.Donors.map((donor) => (
+                                    <Vdisk
+                                        {...donor}
+                                        // donor and acceptor are always in the same group
+                                        PoolName={row[TableColumnsIds.PoolName]}
+                                        nodes={nodes}
+                                        key={stringifyVdiskId(donor.VDiskId)}
+                                    />
+                                ))}
+                            </Stack>
+                        ) : (
+                            <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                                <Vdisk
+                                    {...el}
+                                    PoolName={row[TableColumnsIds.PoolName]}
+                                    nodes={nodes}
+                                />
+                            </div>
+                        )
                     ))}
                 </div>
             ),

src/containers/Storage/Vdisk/Vdisk.js

@@ -27,6 +27,7 @@ const propTypes = {
     Replicated: PropTypes.bool,
     PoolName: PropTypes.string,
     VDiskId: PropTypes.object,
+    nodes: PropTypes.object,
 };
 
 const stateSeverity = {