ydb-embedded-ui 1.10.3 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [1.11.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.3...v1.11.0) (2022-08-23)
+
+
+### Features
+
+* **Stack:** new component for stacked elements ([c42ba37](https://github.com/ydb-platform/ydb-embedded-ui/commit/c42ba37fafdd9dedc4be9d625d7e756a83c01fe3))
+* **Storage:** display donor disks ([b808fe9](https://github.com/ydb-platform/ydb-embedded-ui/commit/b808fe951987c615f797af56017f8045a1ed852f))
+* **VDisk:** display label for donors ([bba5ae8](https://github.com/ydb-platform/ydb-embedded-ui/commit/bba5ae8e44347a5b1d9cb72424f5a963a6848e59))
+
+
+### Bug Fixes
+
+* **InfoViewer:** add size_s ([fc06451](https://github.com/ydb-platform/ydb-embedded-ui/commit/fc0645118f64a79f660d734c2ff43c42c738fd40))
+* **PDisk:** new popup design ([9c0355d](https://github.com/ydb-platform/ydb-embedded-ui/commit/9c0355d4d9ccf69d43a5287b0e78d7c7993c4a18))
+* **PDisk:** restrict component interface ([328efa9](https://github.com/ydb-platform/ydb-embedded-ui/commit/328efa90d214eca1bceeeb5bd9099aab36a3ddb0))
+* **Storage:** shrink tooltip active area on Pool Name ([30a2b92](https://github.com/ydb-platform/ydb-embedded-ui/commit/30a2b92ff598d9caeabe17a4b8de214943945a91))
+* **VDisk:** add a missing prop type ([39b6cf3](https://github.com/ydb-platform/ydb-embedded-ui/commit/39b6cf38811cab6c4374c77d3eb63c11fa7b83d5))
+* **VDisk:** don't paint donors blue ([6b148b9](https://github.com/ydb-platform/ydb-embedded-ui/commit/6b148b914663a74e528a01a35f575f87ed6e9f09))
+* **VDisk:** new popup design ([107b139](https://github.com/ydb-platform/ydb-embedded-ui/commit/107b13900b08631ea42034a6a2f7961c49c86556))
+
 ## [1.10.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.2...v1.10.3) (2022-08-23)
 
 

package/dist/components/IndexInfoViewer/IndexInfoViewer.tsx

@@ -1,5 +1,5 @@
 import type {TEvDescribeSchemeResult, TIndexDescription} from '../../types/api/schema';
-import {InfoViewer, createInfoFormatter} from '../InfoViewer';
+import {InfoViewer, createInfoFormatter, InfoViewerItem} from '../InfoViewer';
 
 const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
     'Type',
@@ -34,7 +34,7 @@ export const IndexInfoViewer = ({data}: IndexInfoViewerProps) => {
     }
 
     const TableIndex = data.PathDescription?.TableIndex;
-    const info: Array<{label?: string, value?: unknown}> = [];
+    const info: Array<InfoViewerItem> = [];
 
     let key: keyof TIndexDescription;
     for (key in TableIndex) {

package/dist/components/InfoViewer/InfoViewer.scss

@@ -1,18 +1,23 @@
 .info-viewer {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    --ydb-info-viewer-font-size: var(--yc-text-body-2-font-size);
+    --ydb-info-viewer-line-height: var(--yc-text-body-2-line-height);
+    --ydb-info-viewer-title-font-weight: 600;
+    --ydb-info-viewer-title-margin: 15px 0 10px;
+    --ydb-info-viewer-items-gap: 7px;
+
+    font-size: var(--ydb-info-viewer-font-size);
+    line-height: var(--ydb-info-viewer-line-height);
+
     &__title {
-        margin: 15px 0 10px;
+        margin: var(--ydb-info-viewer-title-margin);
 
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
+        font-weight: var(--ydb-info-viewer-title-font-weight);
     }
 
     &__items {
         display: flex;
         flex-direction: column;
-        gap: 7px;
+        gap: var(--ydb-info-viewer-items-gap);
 
         max-width: 100%;
     }
@@ -51,4 +56,24 @@
 
         white-space: nowrap;
     }
+
+    &_size {
+        &_s {
+            --ydb-info-viewer-font-size: var(--yc-text-body-1-font-size);
+            --ydb-info-viewer-line-height: var(--yc-text-body-1-line-height);
+            --ydb-info-viewer-title-font-weight: 500;
+            --ydb-info-viewer-title-margin: 0 0 4px;
+            --ydb-info-viewer-items-gap: 4px;
+
+            .info-viewer {
+                &__row {
+                    height: auto;
+                }
+
+                &__label {
+                    min-width: 85px;
+                }
+            }
+        }
+    }
 }

package/dist/components/InfoViewer/InfoViewer.tsx

@@ -0,0 +1,43 @@
+import type {ReactNode} from 'react';
+import cn from 'bem-cn-lite';
+
+import './InfoViewer.scss';
+
+export interface InfoViewerItem {
+    label: string;
+    value: ReactNode;
+}
+
+interface InfoViewerProps {
+    title?: string;
+    info?: InfoViewerItem[];
+    dots?: boolean;
+    size?: 's';
+    className?: string;
+}
+
+const b = cn('info-viewer');
+
+const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps) => (
+    <div className={b({size}, className)}>
+        {title && <div className={b('title')}>{title}</div>}
+        {info && info.length > 0 ? (
+            <div className={b('items')}>
+                {info.map((data, infoIndex) => (
+                    <div className={b('row')} key={data.label + infoIndex}>
+                        <div className={b('label')}>
+                            {data.label}
+                            {dots && <div className={b('dots')} />}
+                        </div>
+
+                        <div className={b('value')}>{data.value}</div>
+                    </div>
+                ))}
+            </div>
+        ) : (
+            <>no {title} data</>
+        )}
+    </div>
+);
+
+export default InfoViewer;

package/dist/components/InfoViewer/index.ts

@@ -2,3 +2,4 @@ import InfoViewer from './InfoViewer';
 
 export {InfoViewer};
 export * from './utils';
+export type {InfoViewerItem} from './InfoViewer';

package/dist/components/InfoViewer/utils.ts

@@ -1,9 +1,11 @@
+import type {ReactNode} from "react";
+
 type LabelMap<T> = {
     [label in keyof T]?: string;
 }
 
 type ValueFormatters<T> = {
-    [label in keyof T]?: (value: T[label]) => string | undefined;
+    [label in keyof T]?: (value: T[label]) => ReactNode;
 }
 
 function formatLabel<Shape>(label: keyof Shape, map: LabelMap<Shape>) {
@@ -14,18 +16,18 @@ function formatValue<Shape, Key extends keyof Shape>(
     label: Key,
     value: Shape[Key],
     formatters: ValueFormatters<Shape>,
-    defaultFormatter?: (value: Shape[Key]) => string | undefined,
+    defaultFormatter?: (value: Shape[Key]) => ReactNode,
 ) {
     const formatter = formatters[label] || defaultFormatter;
     const formattedValue = formatter ? formatter(value) : value;
 
-    return String(formattedValue ?? '');
+    return formattedValue;
 }
 
 interface CreateInfoFormatterOptions<Shape> {
     values?: ValueFormatters<Shape>,
     labels?: LabelMap<Shape>,
-    defaultValueFormatter?: (value: Shape[keyof Shape]) => string | undefined,
+    defaultValueFormatter?: (value: Shape[keyof Shape]) => ReactNode,
 }
 
 export function createInfoFormatter<Shape extends Record<string, any>>({

package/dist/components/Stack/Stack.scss

@@ -0,0 +1,55 @@
+.stack {
+    --ydb-stack-base-z-index: 100;
+    --ydb-stack-offset-x: 4px;
+    --ydb-stack-offset-y: 4px;
+    --ydb-stack-offset-x-hover: 4px;
+    --ydb-stack-offset-y-hover: 8px;
+
+    position: relative;
+
+    &__layer {
+        transition: transform 0.1s ease-out;
+
+        &:first-child {
+            position: relative;
+            z-index: var(--ydb-stack-base-z-index);
+        }
+
+        & + & {
+            position: absolute;
+            z-index: calc(var(--ydb-stack-base-z-index) - var(--ydb-stack-level));
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+
+            transform: translate(
+                calc(var(--ydb-stack-level) * var(--ydb-stack-offset-x)),
+                calc(var(--ydb-stack-level) * var(--ydb-stack-offset-y))
+            );
+        }
+    }
+
+    &:hover {
+        .stack__layer:first-child {
+            transform: translate(
+                calc(-1 * var(--ydb-stack-offset-x-hover)),
+                calc(-1 * var(--ydb-stack-offset-y-hover))
+            );
+        }
+
+        .stack__layer + .stack__layer {
+            transform: translate(
+                calc(
+                    var(--ydb-stack-level) * (var(--ydb-stack-offset-x-hover) * 2) -
+                        var(--ydb-stack-offset-x-hover)
+                ),
+                calc(
+                    var(--ydb-stack-level) * (var(--ydb-stack-offset-y-hover) * 2) -
+                        var(--ydb-stack-offset-y-hover)
+                )
+            );
+        }
+    }
+}

package/dist/components/Stack/Stack.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+
+import './Stack.scss';
+
+interface StackProps {
+    className?: string;
+}
+
+const LAYER_CSS_VAR = '--ydb-stack-level';
+
+const b = cn('stack');
+
+export const Stack: React.FC<StackProps> = ({children, className}) => (
+    <div className={b(null, className)}>
+        {
+            React.Children.map(children, (child, index) => {
+                if (!React.isValidElement(child)) {
+                    return null;
+                }
+
+                return (
+                    <div
+                        className={b('layer')}
+                        style={{
+                            [LAYER_CSS_VAR]: index,
+                        } as React.CSSProperties}
+                    >
+                        {child}
+                    </div>
+                );
+            })
+        }
+    </div>
+);

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -7,6 +7,8 @@
     width: 100%;
     height: var(--yc-text-body-2-line-height);
 
+    vertical-align: top;
+
     border: 1px solid var(--yc-color-infographics-misc-medium);
     border-radius: 2px;
     background-color: var(--yc-color-infographics-misc-light);

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -46,6 +46,11 @@ function DiskStateProgressBar({
                     ? b({[diskProgressColors[severity].toLowerCase()]: true})
                     : undefined
             }
+            role="meter"
+            aria-label="Disk allocated space"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={diskAllocatedPercent}
         >
             {href ? (
                 <InternalLink to={href} className={b('link')}>

package/dist/containers/Storage/Pdisk/Pdisk.scss

@@ -11,25 +11,8 @@
     &:last-child {
         margin-right: 0px;
     }
-    &__popup-wrapper {
-        padding: 5px 10px;
-    }
-    &__popup-content {
-        display: grid;
-        justify-items: stretch;
-        column-gap: 5px;
-    }
-    &__popup-section-name {
-        grid-column: 1 / 3;
-
-        margin: 5px 0;
 
-        font-weight: 500;
-        text-align: center;
-
-        border-bottom: 1px solid var(--yc-color-line-generic);
-    }
-    &__property {
-        text-align: right;
+    &__popup-wrapper {
+        padding: 12px;
     }
 }

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -1,7 +1,8 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
 import {Popup} from '@yandex-cloud/uikit';
+
+import type {RequiredField} from '../../../types';
 //@ts-ignore
 import {bytesToGB} from '../../../utils/utils';
 //@ts-ignore
@@ -10,6 +11,7 @@ import routes, {createHref} from '../../../routes';
 import {getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
+import {InfoViewer} from '../../../components/InfoViewer';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -38,7 +40,7 @@ const stateSeverity = {
     [TPDiskState.DeviceIoError]: 5,
 };
 
-type PDiskProps = TPDiskStateInfo;
+type PDiskProps = RequiredField<TPDiskStateInfo, 'NodeId'>;
 
 const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
     key !== undefined && key in stateSeverity;
@@ -76,51 +78,46 @@ function Pdisk(props: PDiskProps) {
             diskProgressColors[colorSeverity.Yellow as keyof typeof diskProgressColors],
         ];
 
-        const pdiskData: {property: string; value: string | number}[] = [
-            {property: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
+        const pdiskData: {label: string; value: string | number}[] = [
+            {label: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
         ];
 
-        pdiskData.push({property: 'State', value: State || 'not available'});
-        pdiskData.push({property: 'Type', value: getPDiskType(props) || 'unknown'});
-        NodeId && pdiskData.push({property: 'Node Id', value: NodeId});
+        pdiskData.push({label: 'State', value: State || 'not available'});
+        pdiskData.push({label: 'Type', value: getPDiskType(props) || 'unknown'});
+        NodeId && pdiskData.push({label: 'Node Id', value: NodeId});
 
-        Path && pdiskData.push({property: 'Path', value: Path});
+        Path && pdiskData.push({label: 'Path', value: Path});
         pdiskData.push({
-            property: 'Available',
+            label: 'Available',
             value: `${bytesToGB(AvailableSize)} of ${bytesToGB(TotalSize)}`,
         });
         Realtime &&
             errorColors.includes(Realtime) &&
-            pdiskData.push({property: 'Realtime', value: Realtime});
+            pdiskData.push({label: 'Realtime', value: Realtime});
         Device &&
             errorColors.includes(Device) &&
-            pdiskData.push({property: 'Device', value: Device});
+            pdiskData.push({label: 'Device', value: Device});
         return pdiskData;
     };
     /* eslint-enable */
 
-    const renderPopup = () => {
-        const pdiskData = preparePdiskData();
-        return (
-            <Popup
-                className={b('popup-wrapper')}
-                anchorRef={anchor}
-                open={isPopupVisible}
-                placement={['top', 'bottom']}
-                hasArrow
-            >
-                <div className={b('popup-content')}>
-                    <div className={b('popup-section-name')}>PDisk</div>
-                    {_.map(pdiskData, (row) => (
-                        <React.Fragment key={row.property}>
-                            <div className={b('property')}>{row.property}</div>
-                            <div className={b('value')}>{row.value}</div>
-                        </React.Fragment>
-                    ))}
-                </div>
-            </Popup>
-        );
-    };
+    const renderPopup = () => (
+        <Popup
+            className={b('popup-wrapper')}
+            anchorRef={anchor}
+            open={isPopupVisible}
+            placement={['top', 'bottom']}
+            // bigger offset for easier switching to neighbour nodes
+            // matches the default offset for popup with arrow out of a sense of beauty
+            offset={[0, 12]}
+        >
+            <InfoViewer
+                title="PDisk"
+                info={preparePdiskData()}
+                size="s"
+            />
+        </Popup>
+    );
 
     const pdiskAllocatedPercent = useMemo(() => {
         const {AvailableSize, TotalSize} = props;

package/dist/containers/Storage/Pdisk/__tests__/colors.tsx

@@ -0,0 +1,40 @@
+import {render} from '@testing-library/react'
+import {MemoryRouter} from 'react-router-dom';
+
+import {TPDiskState} from '../../../../types/api/storage'
+
+import PDisk from '../Pdisk'
+
+describe('PDisk state', () => {
+    it('Should determine severity based on State', () => {
+        const {getAllByRole} = render(
+            <MemoryRouter>
+                <PDisk
+                    NodeId={1}
+                    State={TPDiskState.Normal}
+                />
+                <PDisk
+                    NodeId={2}
+                    State={TPDiskState.ChunkQuotaError}
+                />
+            </MemoryRouter>
+        );
+
+        const [normalDisk, erroredDisk] = getAllByRole('meter');
+
+        expect(normalDisk.className).not.toBe(erroredDisk.className);
+    });
+
+    it('Should display as unavailabe when no State is provided', () => {
+        const {getByRole} = render(
+            <MemoryRouter>
+                <PDisk NodeId={1} />
+            </MemoryRouter>
+        );
+
+        const disk = getByRole('meter');
+
+        // unavailable disks display with the highest severity
+        expect(disk.className).toMatch(/_red\b/i);
+    });
+});

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -1,23 +1,45 @@
 .global-storage-groups {
+    &__vdisks-column {
+        overflow: visible; // to enable stacked disks overflow the row
+    }
+
     &__vdisks-wrapper {
         display: flex;
-        overflow-x: auto;
-        overflow-y: hidden;
         justify-content: center;
 
         min-width: 500px;
     }
+    &__vdisks-item {
+        flex-grow: 1;
+
+        max-width: 200px;
+        margin-right: 10px;
+
+        &: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;
         align-items: flex-end;
+
+        width: 230px;
     }
     &__pool-name {
         display: inline-block;
         overflow: hidden;
 
-        width: 230px;
         max-width: 230px;
 
+        vertical-align: top;
         text-overflow: ellipsis;
     }
     &__group-id {

package/dist/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,16 +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) => (
-                        <Vdisk
-                            key={stringifyVdiskId(el.VDiskId)}
-                            {...el}
-                            PoolName={row[TableColumnsIds.PoolName]}
-                            nodes={nodes}
-                        />
+                    {_.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>
             ),

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -1,13 +1,13 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
-import {Popup} from '@yandex-cloud/uikit';
+import {Label, Popup} from '@yandex-cloud/uikit';
 
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';
 import {stringifyVdiskId, getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
+import {InfoViewer} from '../../../components/InfoViewer';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -26,6 +26,9 @@ const propTypes = {
     FrontQueues: PropTypes.string,
     Replicated: PropTypes.bool,
     PoolName: PropTypes.string,
+    VDiskId: PropTypes.object,
+    DonorMode: PropTypes.bool,
+    nodes: PropTypes.object,
 };
 
 const stateSeverity = {
@@ -53,7 +56,7 @@ function Vdisk(props) {
 
     // determine disk status severity
     useEffect(() => {
-        const {DiskSpace, VDiskState, FrontQueues, Replicated} = props;
+        const {DiskSpace, VDiskState, FrontQueues, Replicated, DonorMode} = props;
 
         // if the disk is not available, this determines its status severity regardless of other features
         if (!VDiskState) {
@@ -66,7 +69,10 @@ function Vdisk(props) {
         const FrontQueuesSeverity = Math.min(colorSeverity.Orange, getColorSeverity(FrontQueues));
 
         let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
-        if (!Replicated && newSeverity === colorSeverity.Green) {
+
+        // donors are always in the not replicated state since they are leftovers
+        // painting them blue is useless
+        if (!Replicated && !DonorMode && newSeverity === colorSeverity.Green) {
             newSeverity = colorSeverity.Blue;
         }
 
@@ -95,62 +101,62 @@ function Vdisk(props) {
             ReadThroughput,
             WriteThroughput,
         } = props;
-        const vdiskData = [{property: 'VDisk', value: stringifyVdiskId(VDiskId)}];
-        vdiskData.push({property: 'State', value: VDiskState ?? 'not available'});
-        PoolName && vdiskData.push({property: 'StoragePool', value: PoolName});
+        const vdiskData = [{label: 'VDisk', value: stringifyVdiskId(VDiskId)}];
+        vdiskData.push({label: 'State', value: VDiskState ?? 'not available'});
+        PoolName && vdiskData.push({label: 'StoragePool', value: PoolName});
 
         SatisfactionRank &&
             SatisfactionRank.FreshRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
             vdiskData.push({
-                property: 'Fresh',
+                label: 'Fresh',
                 value: SatisfactionRank.FreshRank.Flag,
             });
 
         SatisfactionRank &&
             SatisfactionRank.LevelRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
             vdiskData.push({
-                property: 'Level',
+                label: 'Level',
                 value: SatisfactionRank.LevelRank.Flag,
             });
 
         SatisfactionRank &&
             SatisfactionRank.FreshRank?.RankPercent &&
             vdiskData.push({
-                property: 'Fresh',
+                label: 'Fresh',
                 value: SatisfactionRank.FreshRank.RankPercent,
             });
 
         SatisfactionRank &&
             SatisfactionRank.LevelRank?.RankPercent &&
             vdiskData.push({
-                property: 'Level',
+                label: 'Level',
                 value: SatisfactionRank.LevelRank.RankPercent,
             });
 
         DiskSpace &&
             DiskSpace !== diskProgressColors[colorSeverity.Green] &&
-            vdiskData.push({property: 'Space', value: DiskSpace});
+            vdiskData.push({label: 'Space', value: DiskSpace});
 
         FrontQueues &&
             FrontQueues !== diskProgressColors[colorSeverity.Green] &&
-            vdiskData.push({property: 'FrontQueues', value: FrontQueues});
+            vdiskData.push({label: 'FrontQueues', value: FrontQueues});
 
-        !Replicated && vdiskData.push({property: 'Replicated', value: 'NO'});
+        !Replicated && vdiskData.push({label: 'Replicated', value: 'NO'});
 
-        UnsyncedVDisks && vdiskData.push({property: 'UnsyncVDisks', value: UnsyncedVDisks});
+        UnsyncedVDisks && vdiskData.push({label: 'UnsyncVDisks', value: UnsyncedVDisks});
 
         Boolean(Number(AllocatedSize)) &&
             vdiskData.push({
-                property: 'Allocated',
+                label: 'Allocated',
                 value: bytesToGB(AllocatedSize),
             });
 
         Boolean(Number(ReadThroughput)) &&
-            vdiskData.push({property: 'Read', value: bytesToSpeed(ReadThroughput)});
+            vdiskData.push({label: 'Read', value: bytesToSpeed(ReadThroughput)});
 
         Boolean(Number(WriteThroughput)) &&
             vdiskData.push({
-                property: 'Write',
+                label: 'Write',
                 value: bytesToSpeed(WriteThroughput),
             });
 
@@ -165,61 +171,54 @@ function Vdisk(props) {
             diskProgressColors[colorSeverity.Yellow],
         ];
         if (PDisk && nodes) {
-            const pdiskData = [{property: 'PDisk', value: getPDiskId(PDisk)}];
+            const pdiskData = [{label: 'PDisk', value: getPDiskId(PDisk)}];
             pdiskData.push({
-                property: 'State',
+                label: 'State',
                 value: PDisk.State || 'not available',
             });
-            pdiskData.push({property: 'Type', value: getPDiskType(PDisk) || 'unknown'});
-            PDisk.NodeId && pdiskData.push({property: 'Node Id', value: PDisk.NodeId});
+            pdiskData.push({label: 'Type', value: getPDiskType(PDisk) || 'unknown'});
+            PDisk.NodeId && pdiskData.push({label: 'Node Id', value: PDisk.NodeId});
             PDisk.NodeId &&
                 nodes[PDisk.NodeId] &&
-                pdiskData.push({property: 'Host', value: nodes[PDisk.NodeId]});
-            PDisk.Path && pdiskData.push({property: 'Path', value: PDisk.Path});
+                pdiskData.push({label: 'Host', value: nodes[PDisk.NodeId]});
+            PDisk.Path && pdiskData.push({label: 'Path', value: PDisk.Path});
             pdiskData.push({
-                property: 'Available',
+                label: 'Available',
                 value: `${bytesToGB(PDisk.AvailableSize)} of ${bytesToGB(PDisk.TotalSize)}`,
             });
             errorColors.includes(PDisk.Realtime) &&
-                pdiskData.push({property: 'Realtime', value: PDisk.Realtime});
+                pdiskData.push({label: 'Realtime', value: PDisk.Realtime});
             errorColors.includes(PDisk.Device) &&
-                pdiskData.push({property: 'Device', value: PDisk.Device});
+                pdiskData.push({label: 'Device', value: PDisk.Device});
             return pdiskData;
         }
         return null;
     };
     /* eslint-enable */
 
-    const renderPopup = () => {
-        const vdiskData = prepareVdiskData();
-        const pdiskData = preparePdiskData();
-        return (
-            <Popup
-                className={b('popup-wrapper')}
-                anchorRef={anchor}
-                open={isPopupVisible}
-                placement={['top', 'bottom']}
-                hasArrow
-            >
-                <div className={b('popup-content')}>
-                    <div className={b('popup-section-name')}>VDisk</div>
-                    {_.map(vdiskData, (row) => (
-                        <React.Fragment key={row.property}>
-                            <div className={b('property')}>{row.property}</div>
-                            <div className={b('value')}>{row.value}</div>
-                        </React.Fragment>
-                    ))}
-                    <div className={b('popup-section-name')}>PDisk</div>
-                    {_.map(pdiskData, (row) => (
-                        <React.Fragment key={row.property}>
-                            <div className={b('property')}>{row.property}</div>
-                            <div className={b('value')}>{row.value}</div>
-                        </React.Fragment>
-                    ))}
-                </div>
-            </Popup>
-        );
-    };
+    const renderPopup = () => (
+        <Popup
+            className={b('popup-wrapper')}
+            anchorRef={anchor}
+            open={isPopupVisible}
+            placement={['top', 'bottom']}
+            // bigger offset for easier switching to neighbour nodes
+            // matches the default offset for popup with arrow out of a sense of beauty
+            offset={[0, 12]}
+        >
+            {props.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
+            <InfoViewer
+                title="VDisk"
+                info={prepareVdiskData()}
+                size="s"
+            />
+            <InfoViewer
+                title="PDisk"
+                info={preparePdiskData()}
+                size="s"
+            />
+        </Popup>
+    );
 
     const vdiskAllocatedPercent = useMemo(() => {
         const {AvailableSize, AllocatedSize, PDisk} = props;
@@ -243,13 +242,13 @@ function Vdisk(props) {
                     href={
                         props.NodeId
                             ? createHref(
-                                  routes.node,
-                                  {id: props.NodeId, activeTab: STRUCTURE},
-                                  {
-                                      pdiskId: props.PDisk?.PDiskId,
-                                      vdiskId: stringifyVdiskId(props.VDiskId),
-                                  },
-                              )
+                                routes.node,
+                                {id: props.NodeId, activeTab: STRUCTURE},
+                                {
+                                    pdiskId: props.PDisk?.PDiskId,
+                                    vdiskId: stringifyVdiskId(props.VDiskId),
+                                },
+                            )
                             : undefined
                     }
                 />

package/dist/containers/Storage/Vdisk/Vdisk.scss

@@ -1,35 +1,16 @@
 .vdisk-storage {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-
-    max-width: 200px;
-    margin-right: 10px;
-
-    cursor: pointer;
-
-    &:last-child {
-        margin-right: 0px;
-    }
     &__popup-wrapper {
-        padding: 5px 10px;
-    }
-    &__popup-content {
-        display: grid;
-        justify-items: stretch;
-        column-gap: 5px;
-    }
-    &__popup-section-name {
-        grid-column: 1 / 3;
+        padding: 12px;
 
-        margin: 5px 0;
+        .info-viewer + .info-viewer {
+            margin-top: 8px;
+            padding-top: 8px;
 
-        font-weight: 500;
-        text-align: center;
-
-        border-bottom: 1px solid var(--yc-color-line-generic);
+            border-top: 1px solid var(--yc-color-line-generic);
+        }
     }
-    &__property {
-        text-align: right;
+
+    &__donor-label {
+        margin-bottom: 8px;
     }
 }

package/dist/containers/Storage/Vdisk/__tests__/colors.tsx

@@ -0,0 +1,163 @@
+import {render} from '@testing-library/react'
+
+import VDisk from '../Vdisk'
+
+describe('VDisk state', () => {
+    it('Should determine severity based on the highest value among VDiskState, DiskSpace and FrontQueues', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="OK" // severity 1, green
+                    DiskSpace="Yellow" // severity 3, yellow
+                    FrontQueues="Green" // severity 1, green
+                />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="PDiskError" // severity 5, red
+                    DiskSpace="Yellow" // severity 3, yellow
+                    FrontQueues="Green" // severity 1, green
+                />
+                <VDisk
+                    VDiskId={{Domain: 3}}
+                    VDiskState="OK" // severity 1, green
+                    DiskSpace="Yellow" // severity 3, yellow
+                    FrontQueues="Orange" // severity 4, orange
+                />
+            </>
+        );
+
+        const [disk1, disk2, disk3] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_yellow\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+        expect(disk3.className).toMatch(/_orange\b/i);
+    });
+
+    it('Should not pick the highest severity based on FrontQueues value', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="OK" // severity 1, green
+                    DiskSpace="Green" // severity 1, green
+                    FrontQueues="Red" // severity 5, red
+                />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="OK" // severity 1, green
+                    DiskSpace="Red" // severity 5, red
+                    FrontQueues="Red" // severity 5, red
+                />
+            </>
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).not.toMatch(/_red\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+    });
+
+    it('Should display as unavailable when no VDiskState is provided', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk VDiskId={{Domain: 1}} />
+                <VDisk VDiskId={{Domain: 2}} VDiskState="OK" />
+                <VDisk VDiskId={{Domain: 3}}                 DiskSpace="Green" />
+                <VDisk VDiskId={{Domain: 4}}                                   FrontQueues="Green" />
+                <VDisk VDiskId={{Domain: 5}} VDiskState="OK" DiskSpace="Green" />
+                <VDisk VDiskId={{Domain: 6}} VDiskState="OK"                   FrontQueues="Green" />
+                <VDisk VDiskId={{Domain: 7}}                 DiskSpace="Green" FrontQueues="Green" />
+                <VDisk VDiskId={{Domain: 8}} VDiskState="OK" DiskSpace="Green" FrontQueues="Green" />
+            </>
+        );
+
+        const [disk1, disk2, disk3, disk4, disk5, disk6, disk7, disk8] = getAllByRole('meter');
+
+        // unavailable disks display with the highest severity
+        expect(disk1.className).toMatch(/_red\b/i);
+        expect(disk2.className).not.toMatch(/_red\b/i);
+        expect(disk3.className).toMatch(/_red\b/i);
+        expect(disk4.className).toMatch(/_red\b/i);
+        expect(disk5.className).not.toMatch(/_red\b/i);
+        expect(disk6.className).not.toMatch(/_red\b/i);
+        expect(disk7.className).toMatch(/_red\b/i);
+        expect(disk8.className).not.toMatch(/_red\b/i);
+    });
+
+    it('Should display replicating VDisks in OK state with a distinct color', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="OK" // severity 1, green
+                    Replicated={false}
+                />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="OK" // severity 1, green
+                    Replicated={true}
+                />
+            </>
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_blue\b/i);
+        expect(disk2.className).not.toMatch(/_blue\b/i);
+    });
+
+    it('Should display replicating VDisks in a not-OK state with a regular color', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="Initial" // severity 3, yellow
+                    Replicated={false}
+                    />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="PDiskError" // severity 5, red
+                    Replicated={false}
+                />
+            </>
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_yellow\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+    });
+
+    it('Should always display donor VDisks with a regular color', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="OK" // severity 1, green
+                    Replicated={false} // donors are always in the not replicated state since they are leftovers
+                    DonorMode
+                />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="Initial" // severity 3, yellow
+                    Replicated={false}
+                    DonorMode
+                />
+                <VDisk
+                    VDiskId={{Domain: 3}}
+                    VDiskState="PDiskError" // severity 5, red
+                    Replicated={false}
+                    DonorMode
+                />
+            </>
+        );
+
+        const [disk1, disk2, disk3] = getAllByRole('meter');
+
+        expect(disk1.className).not.toMatch(/_blue\b/i);
+        expect(disk1.className).toMatch(/_green\b/i);
+        expect(disk2.className).toMatch(/_yellow\b/i);
+        expect(disk3.className).toMatch(/_red\b/i);
+    });
+});

package/dist/setupTests.js

@@ -3,3 +3,11 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+import {configure as configureUiKit} from '@yandex-cloud/uikit';
+import {configure as configureYdbUiComponents} from 'ydb-ui-components';
+import {i18n, Lang} from '../src/utils/i18n';
+
+i18n.setLang(Lang.En);
+configureYdbUiComponents({lang: Lang.En});
+configureUiKit({lang: Lang.En});

package/dist/types/api/storage.ts

@@ -52,3 +52,124 @@ export interface TPDiskStateInfo {
     Overall?: EFlag;
     SerialNumber?: string;
 }
+
+export enum EVDiskState {
+    Initial = 'Initial',
+    LocalRecoveryError = 'LocalRecoveryError',
+    SyncGuidRecovery = 'SyncGuidRecovery',
+    SyncGuidRecoveryError = 'SyncGuidRecoveryError',
+    OK = 'OK',
+    PDiskError = 'PDiskError',
+}
+
+interface TRank {
+    /**
+     * uint32
+     * Rank in percents; 0-100% is good; >100% is bad.
+     * Formula for rank calculation is the following:
+     * Rank = actual_value / max_allowed_value * 100
+     */
+    RankPercent?: string;
+
+    /**
+     * Flag is the Rank transformed to something simple
+     * to understand: Green, Yellow or Red
+     */
+    Flag?: EFlag;
+}
+
+interface TVDiskSatisfactionRank {
+    FreshRank?: TRank;
+    LevelRank?: TRank;
+}
+
+interface TVDiskID {
+    /** uint32 */
+    GroupID?: string;
+    /** uint32 */
+    GroupGeneration?: string;
+    /** uint32 */
+    Ring?: string;
+    /** uint32 */
+    Domain?: string;
+    /** uint32 */
+    VDisk?: string;
+}
+
+export interface TVDiskStateInfo {
+    VDiskId?: TVDiskID;
+    /** uint64 */
+    CreateTime?: string;
+    /** uint64 */
+    ChangeTime?: string;
+    /** uint32 */
+    PDiskId?: string;
+    /** uint32 */
+    VDiskSlotId?: string;
+    /** uint64 */
+    Guid?: string;
+    /** uint64 */
+    Kind?: string;
+    /** uint32 */
+    NodeId?: string;
+    /** uint32 */
+    Count?: string;
+
+    Overall?: EFlag;
+
+    /** Current state of VDisk */
+    VDiskState?: EVDiskState;
+    /** Disk space flags */
+    DiskSpace?: EFlag;
+    /** Compaction satisfaction rank */
+    SatisfactionRank?: TVDiskSatisfactionRank;
+    /** Is VDisk replicated? (i.e. contains all blobs it must have) */
+    Replicated?: boolean;
+    /** Does this VDisk has any yet unreplicated phantom-like blobs? */
+    UnreplicatedPhantoms?: boolean;
+    /** The same for the non-phantom-like blobs. */
+    UnreplicatedNonPhantoms?: boolean;
+    /**
+     * uint64
+     * How many unsynced VDisks from current BlobStorage group we see
+     */
+    UnsyncedVDisks?: string;
+    /**
+     * uint64
+     * How much this VDisk have allocated on corresponding PDisk
+     */
+    AllocatedSize?: string;
+    /**
+     * uint64
+     * How much space is available for VDisk corresponding to PDisk's hard space limits
+     */
+    AvailableSize?: string;
+    /** Does this disk has some unreadable but not yet restored blobs? */
+    HasUnreadableBlobs?: boolean;
+    /** fixed64 */
+    IncarnationGuid?: string;
+    DonorMode?: boolean;
+    /**
+     * fixed64
+     * VDisk actor instance guid
+     */
+    InstanceGuid?: string;
+    Donors?: TVDiskStateInfo[];
+
+    /** VDisk (Skeleton) Front Queue Status */
+    FrontQueues?: EFlag;
+
+    /** VDisk storage pool label */
+    StoragePoolName?: string;
+
+    /**
+     * uint64
+     * Read bytes per second from PDisk for TEvVGet blobs only
+     */
+    ReadThroughput?: string;
+    /**
+     * uint64
+     * Write bytes per second to PDisk for TEvVPut blobs and replication bytes only
+     */
+    WriteThroughput?: string;
+}

package/dist/types/index.ts

@@ -0,0 +1 @@
+export type RequiredField<Src, Fields extends keyof Src> = Src & Required<Pick<Src, Fields>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "files": [
     "dist"
   ],
@@ -9,10 +9,6 @@
     "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "5.15.0",
-    "@testing-library/react": "11.2.7",
-    "@testing-library/user-event": "12.8.3",
-    "@types/qs": "6.9.7",
     "@yandex-cloud/i18n": "0.6.0",
     "@yandex-cloud/paranoid": "1.0.0",
     "@yandex-cloud/react-data-table": "0.2.1",
@@ -63,6 +59,27 @@
       "eslint --fix --quiet"
     ]
   },
+  "jest": {
+    "verbose": true,
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts",
+      "tsx"
+    ],
+    "rootDir": ".",
+    "transform": {
+      "^.+\\.[jt]sx?$": "ts-jest"
+    },
+    "coverageDirectory": "./coverage",
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx,js,jsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "moduleNameMapper": {
+      "\\.(css|less|scss|sass)$": "jest-transform-css"
+    }
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -78,7 +95,11 @@
   "devDependencies": {
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
     "@types/lodash": "^4.14.178",
+    "@types/qs": "^6.9.7",
     "@types/react": "^17.0.44",
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.17",
@@ -95,6 +116,7 @@
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",
+    "jest-transform-css": "^4.0.1",
     "lint-staged": "^12.3.7",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",
@@ -102,6 +124,7 @@
     "react-app-rewired": "^2.1.11",
     "react-dom": "^17.0.2",
     "stylelint": "^14.3.0",
+    "ts-jest": "^28.0.7",
     "typescript": "^4.5.5"
   },
   "peerDependencies": {

package/dist/components/InfoViewer/InfoViewer.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import './InfoViewer.scss';
-
-const b = cn('info-viewer');
-
-class InfoViewer extends React.Component {
-    render() {
-        const {info, className, title} = this.props;
-
-        return (
-            <div className={`${b()} ${className}`}>
-                {title && <div className={b('title')}>{title}</div>}
-                {info && info.length > 0 ? (
-                    <div className={b('items')}>
-                        {info.map((data, infoIndex) => (
-                            <div className={b('row')} key={infoIndex}>
-                                <div className={b('label')}>
-                                    {data.label}
-                                    <div className={b('dots')}></div>
-                                </div>
-
-                                <div className={b('value')}>{data.value}</div>
-                            </div>
-                        ))}
-                    </div>
-                ) : (
-                    <div>no {title} data</div>
-                )}
-            </div>
-        );
-    }
-}
-
-InfoViewer.propTypes = {
-    className: PropTypes.string,
-    info: PropTypes.array.isRequired,
-    title: PropTypes.string,
-    dots: PropTypes.bool,
-};
-
-InfoViewer.defaultProps = {
-    className: '',
-};
-
-export default InfoViewer;

package/dist/index.test.js

@@ -1,5 +0,0 @@
-describe('Fake tests', () => {
-    it('A fake test', () => {
-        expect(true).toBe(true);
-    });
-});