ydb-embedded-ui 3.4.4 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## [3.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.5...v3.5.0) (2023-04-18)
+
+
+### Features
+
+* **TableInfo:** extend Table and ColumnTable info ([89e54aa](https://github.com/ydb-platform/ydb-embedded-ui/commit/89e54aa97d7bcbabfd5100daeb1dc0c03608e86e))
+* **TopQueries:** add columns ([b49b98d](https://github.com/ydb-platform/ydb-embedded-ui/commit/b49b98db2da08c355b23f4a33bf05247530543db))
+
+
+### Bug Fixes
+
+* **settings:** use system theme by default ([726c9cb](https://github.com/ydb-platform/ydb-embedded-ui/commit/726c9cb14d7f87cc9248340d1ebebfc8bf0d0384))
+* **Storage:** fix incorrect usage on zero available space ([2704cd7](https://github.com/ydb-platform/ydb-embedded-ui/commit/2704cd7c696d337cc8e3af68941cf444f8dfae81))
+* **TableInfo:** add default format for FollowerGroup fields ([961334a](https://github.com/ydb-platform/ydb-embedded-ui/commit/961334aabe89672994f0f3440e20602e180b3394))
+* **Tablet:** fix dialog type enum ([c477042](https://github.com/ydb-platform/ydb-embedded-ui/commit/c477042cacc2e777cae4bd6981381a8042c603ed))
+* **TopQueries:** enable go back to TopQueries from Query tab ([bbdfe72](https://github.com/ydb-platform/ydb-embedded-ui/commit/bbdfe726c9081f01422dca787b83399ea44b3956))
+* **TopShards:** fix table crash on undefined values ([604e99a](https://github.com/ydb-platform/ydb-embedded-ui/commit/604e99a9427021c61ceb8ea366e316e629032b84))
+* **TruncatedQuery:** wrap message ([f41b7ff](https://github.com/ydb-platform/ydb-embedded-ui/commit/f41b7ff33ac0145446ca89aab031036247f3ddf8))
+
+## [3.4.5](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.4...v3.4.5) (2023-03-30)
+
+
+### Bug Fixes
+
+* **Consumers:** fix typo ([aaa9dbd](https://github.com/ydb-platform/ydb-embedded-ui/commit/aaa9dbda1f28702917793a61bae2813f6ef018bb))
+* **PDisk:** add display block to content ([130dab2](https://github.com/ydb-platform/ydb-embedded-ui/commit/130dab20ffdc9da77225c94a6e6064f0308a1c2a))
+* **Storage:** get nodes hosts from /nodelist ([cc82dd9](https://github.com/ydb-platform/ydb-embedded-ui/commit/cc82dd93808133b0d1dcd21b31ee3744df4f7383))
+* **StorageNodes:** make fqdn similar to nodes page ([344298a](https://github.com/ydb-platform/ydb-embedded-ui/commit/344298a9a29380f1068b002fa304cdcc221ce0d4))
+* **TopicInfo:** do not display /s when speed is undefined ([2d41832](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d4183247ec33acdfa45be72a93f0dbd93b716e0))
+* **TopicStats:** use prepared stats, update fields ([a614a8c](https://github.com/ydb-platform/ydb-embedded-ui/commit/a614a8caa2744b844d97f23f25e5385387367d6b))
+
 ## [3.4.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.3...v3.4.4) (2023-03-22)
 
 

package/dist/components/Icon/Icon.tsx

@@ -31,3 +31,9 @@ export const Icon = ({
         />
     );
 };
+
+// When used with uikit components Icon is considered as text element and corresponding styles are applied
+// IconWrapper overrides displayName to 'Icon', so it will be considered as an icon with right styles
+export const IconWrapper = (props: IconProps) => <Icon {...props} />;
+
+IconWrapper.displayName = 'Icon';

package/dist/components/InfoViewer/InfoViewer.tsx

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 import './InfoViewer.scss';
 
 export interface InfoViewerItem {
-    label: string;
+    label: ReactNode;
     value: ReactNode;
 }
 
@@ -39,7 +39,7 @@ const InfoViewer = ({
             {info && info.length > 0 ? (
                 <div className={b('items')}>
                     {info.map((data, infoIndex) => (
-                        <div className={b('row')} key={data.label + infoIndex}>
+                        <div className={b('row')} key={infoIndex}>
                             <div className={b('label')}>
                                 <div className={b('label-text', {multiline: multilineLabels})}>
                                     {data.label}

package/dist/components/InfoViewer/formatters/index.ts

@@ -1,6 +1,5 @@
 export * from './common';
 export * from './schema';
-export * from './topicStats';
 export * from './pqGroup';
 export * from './cdcStream';
 export * from './table';

package/dist/components/InfoViewer/formatters/table.ts

@@ -20,6 +20,12 @@ export const formatFollowerGroupItem = createInfoFormatter<TFollowerGroup>({
     values: {
         FollowerCount: formatNumber,
     },
+    labels: {
+        // Make it shorter to fit label width
+        FollowerCountPerDataCenter: 'FollowerCountPerDC',
+    },
+    // Most of the FollowerGroup fields are arrays or boolean
+    defaultValueFormatter: (value) => value && String(value),
 });
 
 export const formatPartitionConfigItem = createInfoFormatter<TPartitionConfig>({

package/dist/components/LabelWithPopover/LabelWithPopover.tsx

@@ -3,18 +3,14 @@ import type {ReactNode} from 'react';
 import {HelpPopover} from '@gravity-ui/uikit';
 
 interface LabelWithPopoverProps {
-    headerText: string;
+    text: string;
     popoverContent: ReactNode;
     className?: string;
 }
 
-export const LabelWithPopover = ({
-    headerText,
-    popoverContent,
-    className,
-}: LabelWithPopoverProps) => (
+export const LabelWithPopover = ({text, popoverContent, className}: LabelWithPopoverProps) => (
     <div className={className}>
-        {headerText}
+        {text}
         <HelpPopover content={popoverContent} />
     </div>
 );

package/dist/components/LagPopoverContent/LagPopoverContent.scss

@@ -0,0 +1,13 @@
+.ydb-lag-popover-content {
+    &__text {
+        margin-bottom: 10px;
+    }
+
+    &_type_read {
+        max-width: 280px;
+    }
+
+    &_type_write {
+        max-width: 220px;
+    }
+}

package/dist/components/LagPopoverContent/LagPopoverContent.tsx

@@ -0,0 +1,19 @@
+import block from 'bem-cn-lite';
+
+import {ReadLagImage, WriteLagImage} from '../LagImages';
+
+import './LagPopoverContent.scss';
+
+const b = block('ydb-lag-popover-content');
+
+interface LagPopoverContentProps {
+    text: string;
+    type: 'read' | 'write';
+}
+
+export const LagPopoverContent = ({text, type}: LagPopoverContentProps) => (
+    <div className={b({type})}>
+        <div className={b('text')}>{text}</div>
+        <div>{type === 'read' ? <ReadLagImage /> : <WriteLagImage />}</div>
+    </div>
+);

package/dist/components/LagPopoverContent/index.ts

@@ -0,0 +1 @@
+export * from './LagPopoverContent';

package/dist/components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip.scss

@@ -0,0 +1,5 @@
+.ydb-node-endpoints-tooltip {
+    .info-viewer__value {
+        min-width: 70px;
+    }
+}

package/dist/components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip.tsx

@@ -0,0 +1,31 @@
+import block from 'bem-cn-lite';
+
+import type {TSystemStateInfo} from '../../../types/api/nodes';
+
+import {InfoViewer, InfoViewerItem} from '../../InfoViewer';
+
+import './NodeEndpointsTooltip.scss';
+
+const b = block('ydb-node-endpoints-tooltip');
+
+interface NodeEdpointsTooltipProps {
+    data?: TSystemStateInfo;
+}
+
+export const NodeEndpointsTooltip = ({data}: NodeEdpointsTooltipProps) => {
+    const info: InfoViewerItem[] = [];
+
+    if (data?.Rack) {
+        info.push({label: 'Rack', value: data.Rack});
+    }
+
+    if (data?.Endpoints && data.Endpoints.length) {
+        data.Endpoints.forEach(({Name, Address}) => {
+            if (Name && Address) {
+                info.push({label: Name, value: Address});
+            }
+        });
+    }
+
+    return <InfoViewer className={b(null)} info={info} dots={false} size={'s'} />;
+};

package/dist/components/TruncatedQuery/TruncatedQuery.js

@@ -16,7 +16,7 @@ function TruncatedQuery({value, maxQueryHeight}) {
         return (
             <React.Fragment>
                 <span className={b()}>{content}</span>
-                <span className={b({color: 'secondary'})}>{message}</span>
+                <span className={b('message', {color: 'secondary'})}>{message}</span>
             </React.Fragment>
         );
     }

package/dist/components/TruncatedQuery/TruncatedQuery.scss

@@ -5,9 +5,13 @@
     white-space: pre;
     word-break: break-word;
 
-    &_color {
-        &_secondary {
-            color: var(--yc-color-text-secondary);
+    &__message {
+        white-space: pre-wrap;
+
+        &_color {
+            &_secondary {
+                color: var(--yc-color-text-secondary);
+            }
         }
     }
 }

package/dist/containers/Node/{NodePages.js → NodePages.ts}

@@ -21,7 +21,7 @@ export const NODE_PAGES = [
     },
 ];
 
-export function getDefaultNodePath(nodeId) {
+export function getDefaultNodePath(nodeId: string | number) {
     return createHref(routes.node, {
         id: nodeId,
         activeTab: OVERVIEW,

package/dist/containers/Nodes/Nodes.tsx

@@ -22,7 +22,7 @@ import {
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-import {isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
+import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
 import {setHeader} from '../../store/reducers/header';
 import {
@@ -46,15 +46,11 @@ import i18n from './i18n';
 
 const b = cn('ydb-nodes');
 
-interface IAdditionalNodesInfo extends Record<string, unknown> {
-    getNodeRef?: Function;
-}
-
 interface NodesProps {
     path?: string;
     type?: EPathType;
     className?: string;
-    additionalNodesInfo?: IAdditionalNodesInfo;
+    additionalNodesInfo?: AdditionalNodesInfo;
 }
 
 export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesProps) => {

package/dist/containers/Nodes/NodesTable.scss

@@ -1,22 +1,23 @@
 .ydb-nodes-table {
-    &__host-name-wrapper {
+    &__host-field-wrapper {
         display: flex;
     }
 
-    &__external-button {
-        display: none;
-        align-items: center;
-
-        margin-left: 4px;
+    &__host-wrapper {
+        display: flex;
 
-        .yc-button__text {
-            margin: 0 4px;
-        }
+        max-width: 330px;
     }
 
-    &__host-name {
+    &__host {
         overflow: hidden;
     }
+
+    &__external-button {
+        display: none;
+
+        margin-left: 4px;
+    }
 }
 
 .data-table__row:hover {

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -1,12 +1,13 @@
 import cn from 'bem-cn-lite';
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Button, Popover} from '@gravity-ui/uikit';
+import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-import {Icon} from '../../components/Icon';
+import {IconWrapper} from '../../components/Icon';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
+import {NodeEndpointsTooltip} from '../../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
 
 import {formatBytesToGigabyte} from '../../utils/index';
 import {INodesPreparedEntity} from '../../types/store/nodes';
@@ -46,28 +47,32 @@ export function getNodesColumns({
                     return <span>—</span>;
                 }
                 return (
-                    <div className={b('host-name-wrapper')}>
-                        <EntityStatus
-                            name={row.Host}
-                            onNameMouseEnter={(e: MouseEvent) =>
-                                showTooltip(e.target, row, 'nodeEndpoints')
-                            }
-                            onNameMouseLeave={hideTooltip}
-                            status={row.SystemState}
-                            path={getDefaultNodePath(row.NodeId)}
-                            hasClipboardButton
-                            className={b('host-name')}
-                        />
-                        {nodeRef && (
-                            <Button
-                                size="s"
-                                href={nodeRef}
-                                className={b('external-button')}
-                                target="_blank"
-                            >
-                                <Icon name="external" />
-                            </Button>
-                        )}
+                    <div className={b('host-field-wrapper')}>
+                        <Popover
+                            content={<NodeEndpointsTooltip data={row} />}
+                            placement={['top', 'bottom']}
+                            behavior={PopoverBehavior.Immediate}
+                        >
+                            <div className={b('host-wrapper')}>
+                                <EntityStatus
+                                    name={row.Host}
+                                    status={row.SystemState}
+                                    path={getDefaultNodePath(row.NodeId)}
+                                    hasClipboardButton
+                                    className={b('host')}
+                                />
+                                {nodeRef && (
+                                    <Button
+                                        size="s"
+                                        href={nodeRef}
+                                        className={b('external-button')}
+                                        target="_blank"
+                                    >
+                                        <IconWrapper name="external" />
+                                    </Button>
+                                )}
+                            </div>
+                        </Popover>
                     </div>
                 );
             },

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -6,6 +6,8 @@
     &__content {
         position: relative;
 
+        display: block;
+
         border-radius: 4px; // to match interactive area with disk shape
     }
 

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -3,6 +3,8 @@ import cn from 'bem-cn-lite';
 
 import {Popup, PopupProps} from '@gravity-ui/uikit';
 
+import type {NodesMap} from '../../../types/store/nodesList';
+
 import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
@@ -17,12 +19,7 @@ const b = cn('pdisk-storage-popup');
 
 const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
 
-export type NodesHosts = {
-    // NodeId => Host
-    [nodeId: number]: string;
-}
-
-export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesHosts) => {
+export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesMap) => {
     const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = data;
 
     const pdiskData: InfoViewerItem[] = [
@@ -35,8 +32,8 @@ export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesHosts) => {
         pdiskData.push({label: 'Node Id', value: NodeId});
     }
 
-    if (nodes && NodeId && nodes[NodeId]) {
-        pdiskData.push({label: 'Host', value: nodes[NodeId]});
+    if (nodes && NodeId && nodes.get(NodeId)) {
+        pdiskData.push({label: 'Host', value: nodes.get(NodeId)});
     }
 
     if (Path) {
@@ -61,7 +58,7 @@ export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesHosts) => {
 
 interface PDiskPopupProps extends PopupProps {
     data: TPDiskStateInfo;
-    nodes?: NodesHosts;
+    nodes?: NodesMap;
 }
 
 export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {

package/dist/containers/Storage/Storage.js

@@ -22,7 +22,6 @@ import {
     setVisibleEntities,
     setStorageFilter,
     setUsageFilter,
-    getNodesObject,
     StorageTypes,
     setStorageType,
     setNodesUptimeFilter,
@@ -32,7 +31,7 @@ import {
     getStorageNodesCount,
     getUsageFilterOptions,
 } from '../../store/reducers/storage';
-import {getNodesList} from '../../store/reducers/nodesList';
+import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
 import StorageGroups from './StorageGroups/StorageGroups';
 import StorageNodes from './StorageNodes/StorageNodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
@@ -74,6 +73,7 @@ class Storage extends React.Component {
         nodesUptimeFilter: PropTypes.string,
         setNodesUptimeFilter: PropTypes.func,
         setDataWasNotLoaded: PropTypes.func,
+        additionalNodesInfo: PropTypes.object,
     };
 
     componentDidMount() {
@@ -181,8 +181,14 @@ class Storage extends React.Component {
     }
 
     renderDataTable() {
-        const {flatListStorageEntities, visibleEntities, nodesUptimeFilter, nodes, storageType} =
-            this.props;
+        const {
+            flatListStorageEntities,
+            visibleEntities,
+            nodesUptimeFilter,
+            nodes,
+            storageType,
+            additionalNodesInfo,
+        } = this.props;
 
         return (
             <div className={b('table-wrapper')}>
@@ -202,6 +208,7 @@ class Storage extends React.Component {
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
                         onShowAll={this.onShowAllNodes}
+                        additionalNodesInfo={additionalNodesInfo}
                     />
                 )}
             </div>
@@ -345,7 +352,7 @@ function mapStateToProps(state) {
         flatListStorageEntities: getFilteredEntities(state),
         groupsCount: getStoragePoolsGroupsCount(state),
         autorefresh: state.schema.autorefresh,
-        nodes: getNodesObject(state),
+        nodes: selectNodesMap(state),
         nodesCount: getStorageNodesCount(state),
         loading,
         wasLoaded,

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -3,6 +3,8 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
+import type {NodesMap} from '../../../types/store/nodesList';
+
 import shieldIcon from '../../../assets/icons/shield.svg';
 
 import {Stack} from '../../../components/Stack/Stack';
@@ -45,7 +47,7 @@ type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
 interface StorageGroupsProps {
     data: any;
-    nodes: any;
+    nodes: NodesMap;
     tableSettings: Settings;
     visibleEntities: keyof typeof VisibleEntities;
     onShowAll?: VoidFunction;

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -20,18 +20,19 @@
             margin-right: 0px;
         }
     }
-    &__fqdn-wrapper {
+    &__fqdn-field-wrapper {
         width: 330px;
     }
-    &__fqdn {
-        display: inline-block;
-        overflow: hidden;
+    &__fqdn-wrapper {
+        display: flex;
+        align-items: center;
 
         max-width: 330px;
-
-        vertical-align: top;
-        text-overflow: ellipsis;
     }
+    &__fqdn {
+        overflow: hidden;
+    }
+
     &__group-id {
         font-weight: 500;
     }
@@ -39,4 +40,16 @@
     &__node_unavailable {
         opacity: 0.6;
     }
+
+    &__external-button {
+        display: none;
+
+        margin-left: 4px;
+    }
+}
+
+.data-table__row:hover {
+    .global-storage-nodes__external-button {
+        display: inline-flex;
+    }
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -2,10 +2,20 @@ import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
-import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
+import {NodeEndpointsTooltip} from '../../../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import {IconWrapper} from '../../../components/Icon';
 
 import {VisibleEntities} from '../../../store/reducers/storage';
-import {isUnavailableNode, NodesUptimeFilterValues} from '../../../utils/nodes';
+import {
+    AdditionalNodesInfo,
+    isUnavailableNode,
+    NodesUptimeFilterValues,
+} from '../../../utils/nodes';
+
+import {getDefaultNodePath} from '../../Node/NodePages';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {PDisk} from '../PDisk';
@@ -33,6 +43,7 @@ interface StorageNodesProps {
     visibleEntities: keyof typeof VisibleEntities;
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
+    additionalNodesInfo?: AdditionalNodesInfo;
 }
 
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
@@ -73,7 +84,10 @@ function StorageNodes({
     visibleEntities,
     onShowAll,
     nodesUptimeFilter,
+    additionalNodesInfo,
 }: StorageNodesProps) {
+    const getNodeRef = additionalNodesInfo?.getNodeRef;
+
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.NodeId,
@@ -85,15 +99,37 @@ function StorageNodes({
             name: TableColumnsIds.FQDN,
             header: tableColumnsNames[TableColumnsIds.FQDN],
             width: 350,
-            render: ({value}) => {
+            render: ({row}) => {
+                const nodeRef = getNodeRef ? getNodeRef(row) + 'internal' : undefined;
+                if (!row.Host) {
+                    return <span>—</span>;
+                }
                 return (
-                    <div className={b('fqdn-wrapper')}>
+                    <div className={b('fqdn-field-wrapper')}>
                         <Popover
-                            content={value as string}
-                            placement={['right']}
+                            content={<NodeEndpointsTooltip data={row} />}
+                            placement={['top', 'bottom']}
                             behavior={PopoverBehavior.Immediate}
                         >
-                            <span className={b('fqdn')}>{value as string}</span>
+                            <div className={b('fqdn-wrapper')}>
+                                <EntityStatus
+                                    name={row.Host}
+                                    showStatus={false}
+                                    path={getDefaultNodePath(row.NodeId)}
+                                    hasClipboardButton
+                                    className={b('fqdn')}
+                                />
+                                {nodeRef && (
+                                    <Button
+                                        size="s"
+                                        href={nodeRef}
+                                        className={b('external-button')}
+                                        target="_blank"
+                                    >
+                                        <IconWrapper name="external" />
+                                    </Button>
+                                )}
+                            </div>
                         </Popover>
                     </div>
                 );

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -1,6 +1,8 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
+import type {NodesMap} from '../../../types/store/nodesList';
+
 import {InternalLink} from '../../../components/InternalLink';
 
 import routes, {createHref} from '../../../routes';
@@ -12,7 +14,6 @@ import {isFullVDiskData} from '../../../utils/storage';
 import {STRUCTURE} from '../../Node/NodePages';
 
 import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
-import type {NodesHosts} from '../PDiskPopup';
 import {VDiskPopup} from '../VDiskPopup';
 
 import type {IUnavailableDonor} from '../utils/types';
@@ -50,7 +51,7 @@ const getColorSeverity = (color?: EFlag) => {
 interface VDiskProps {
     data?: TVDiskStateInfo | IUnavailableDonor;
     poolName?: string;
-    nodes?: NodesHosts;
+    nodes?: NodesMap;
     compact?: boolean;
 }