ydb-embedded-ui 3.4.3 → 3.4.5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* **Diagnostics:** display nodes tab for not db entities ([a542dbc](https://github.com/ydb-platform/ydb-embedded-ui/commit/a542dbc23d01138a5c1a4126cfc1836a1543b68c))
+
 ## [3.4.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.2...v3.4.3) (2023-03-17)
 
 

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/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/containers/Nodes/Nodes.tsx

@@ -4,10 +4,11 @@ import {useDispatch} from 'react-redux';
 
 import DataTable from '@gravity-ui/react-data-table';
 
+import type {EPathType} from '../../types/api/schema';
+
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
 import {Loader} from '../../components/Loader';
-
 import {Search} from '../../components/Search';
 import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
@@ -21,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 {
@@ -35,6 +36,8 @@ import {
 import {changeFilter, getSettingValue} from '../../store/reducers/settings';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 
+import {isDatabaseEntityType} from '../Tenant/utils/schema';
+
 import {getNodesColumns} from './getNodesColumns';
 
 import './Nodes.scss';
@@ -43,27 +46,24 @@ import i18n from './i18n';
 
 const b = cn('ydb-nodes');
 
-interface IAdditionalNodesInfo extends Record<string, unknown> {
-    getNodeRef?: Function;
-}
-
 interface NodesProps {
-    tenantPath?: string;
+    path?: string;
+    type?: EPathType;
     className?: string;
-    additionalNodesInfo?: IAdditionalNodesInfo;
+    additionalNodesInfo?: AdditionalNodesInfo;
 }
 
-export const Nodes = ({tenantPath, className, additionalNodesInfo = {}}: NodesProps) => {
+export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesProps) => {
     const dispatch = useDispatch();
 
-    const isClusterNodes = !tenantPath;
+    const isClusterNodes = !path;
 
     // Since Nodes component is used in several places,
     // we need to reset filters, searchValue and loading state
     // in nodes reducer when path changes
     useEffect(() => {
         dispatch(resetNodesState());
-    }, [dispatch, tenantPath]);
+    }, [dispatch, path]);
 
     const {wasLoaded, loading, error, nodesUptimeFilter, searchValue, totalNodes} =
         useTypedSelector((state) => state.nodes);
@@ -77,12 +77,14 @@ export const Nodes = ({tenantPath, className, additionalNodesInfo = {}}: NodesPr
     );
 
     const fetchNodes = useCallback(() => {
-        if (tenantPath && !JSON.parse(useNodesEndpoint)) {
-            dispatch(getComputeNodes(tenantPath));
+        // For not DB entities we always use /compute endpoint instead of /nodes
+        // since /nodes can return data only for tenants
+        if (path && (!JSON.parse(useNodesEndpoint) || !isDatabaseEntityType(type))) {
+            dispatch(getComputeNodes(path));
         } else {
-            dispatch(getNodes({tenant: tenantPath}));
+            dispatch(getNodes({tenant: path}));
         }
-    }, [dispatch, tenantPath, useNodesEndpoint]);
+    }, [dispatch, path, type, useNodesEndpoint]);
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
 

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;
 }
 

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -3,6 +3,8 @@ import cn from 'bem-cn-lite';
 
 import {Label, 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';
@@ -13,7 +15,7 @@ import {isFullVDiskData} from '../../../utils/storage';
 
 import type {IUnavailableDonor} from '../utils/types';
 
-import {NodesHosts, preparePDiskData} from '../PDiskPopup';
+import {preparePDiskData} from '../PDiskPopup';
 
 import './VDiskPopup.scss';
 
@@ -128,7 +130,7 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
 interface VDiskPopupProps extends PopupProps {
     data: TVDiskStateInfo | IUnavailableDonor;
     poolName?: string;
-    nodes?: NodesHosts;
+    nodes?: NodesMap;
 }
 
 export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) => {

package/dist/containers/Tenant/Diagnostics/Consumers/Headers/Headers.scss

@@ -2,12 +2,4 @@
     &__lags {
         white-space: nowrap;
     }
-
-    &__lags-popover-content {
-        max-width: 300px;
-
-        div:nth-child(1) {
-            margin-bottom: 10px;
-        }
-    }
 }

package/dist/containers/Tenant/Diagnostics/Consumers/Headers/Headers.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
-import {ReadLagImage} from '../../../../../components/LagImages';
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 
 import {CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES} from '../utils/constants';
 
@@ -14,14 +14,7 @@ const b = block('ydb-diagnostics-consumers-columns-header');
 export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
-        headerText={CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS]}
-        popoverContent={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.readLags')}</div>
-                <div>
-                    <ReadLagImage />
-                </div>
-            </div>
-        }
+        text={CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS]}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );

package/dist/containers/Tenant/Diagnostics/Consumers/i18n/ru.json

@@ -1,7 +1,7 @@
 {
   "noConsumersMessage.topic": "У этого топика нет читателей",
   "noConsumersMessage.stream": "У этого стрима нет читателей",
-  "lagsPopover.readLags": "Статистика лагов чтения, максимальной значение среди всех партиций читателя (формат времени дд чч:мм:сс)",
+  "lagsPopover.readLags": "Статистика лагов чтения, максимальное значение среди всех партиций читателя (формат времени дд чч:мм:сс)",
   "table.emptyDataMessage": "По заданному поиску нет читателей",
   "controls.search": "Consumer"
 }

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -131,7 +131,8 @@ function Diagnostics(props: DiagnosticsProps) {
             case GeneralPagesIds.nodes: {
                 return (
                     <Nodes
-                        tenantPath={tenantNameString}
+                        path={currentSchemaPath}
+                        type={type}
                         additionalNodesInfo={props.additionalNodesInfo}
                     />
                 );

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -89,12 +89,12 @@ export const DATABASE_PAGES = [
     describe,
 ];
 
-export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, describe];
+export const TABLE_PAGES = [overview, topShards, nodes, graph, tablets, hotKeys, describe];
 
-export const DIR_PAGES = [overview, topShards, describe];
+export const DIR_PAGES = [overview, topShards, nodes, describe];
 
-export const CDC_STREAM_PAGES = [overview, consumers, partitions, describe];
-export const TOPIC_PAGES = [overview, consumers, partitions, describe];
+export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, describe];
+export const TOPIC_PAGES = [overview, consumers, partitions, nodes, describe];
 
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx

@@ -1,16 +1,19 @@
 import cn from 'bem-cn-lite';
-import {isEmpty} from 'lodash/fp';
 
-import type {DescribeTopicResult} from '../../../../../types/api/topic';
+import type {IPreparedTopicStats} from '../../../../../types/store/topic';
 
 import {Loader} from '../../../../../components/Loader';
-import {InfoViewerItem, formatObject, InfoViewer} from '../../../../../components/InfoViewer';
-
-import {formatTopicStats} from '../../../../../components/InfoViewer/formatters';
+import {InfoViewerItem, InfoViewer} from '../../../../../components/InfoViewer';
+import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
-import {convertBytesObjectToSpeed} from '../../../../../utils/bytesParsers';
-import {formatBps} from '../../../../../utils';
+import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
+import {formatBps, formatBytes} from '../../../../../utils';
+
+import {selectPreparedTopicStats} from '../../../../../store/reducers/topic';
 
 import i18n from './i18n';
 
@@ -18,35 +21,61 @@ import './TopicStats.scss';
 
 const b = cn('ydb-overview-topic-stats');
 
-const prepareTopicInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
+const prepareTopicInfo = (data: IPreparedTopicStats): Array<InfoViewerItem> => {
     return [
-        ...formatObject(formatTopicStats, {
-            ...data.topic_stats,
-        }),
+        {label: 'Store size', value: formatBytes(data.storeSize)},
+        {
+            label: (
+                <LabelWithPopover
+                    text={'Write idle time'}
+                    popoverContent={
+                        <LagPopoverContent text={i18n('writeIdleTimePopover')} type="write" />
+                    }
+                />
+            ),
+            value: formatDurationToShortTimeFormat(data.partitionsIdleTime),
+        },
+        {
+            label: (
+                <LabelWithPopover
+                    text={'Write lag'}
+                    popoverContent={
+                        <LagPopoverContent text={i18n('writeLagPopover')} type="write" />
+                    }
+                />
+            ),
+            value: formatDurationToShortTimeFormat(data.partitionsWriteLag),
+        },
+        {
+            label: 'Average write speed',
+            value: <SpeedMultiMeter data={data.writeSpeed} withValue={false} />,
+        },
     ];
 };
 
-const prepareBytesWrittenInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
-    const preparedBytes = convertBytesObjectToSpeed(data?.topic_stats?.bytes_written);
+const prepareBytesWrittenInfo = (data: IPreparedTopicStats): Array<InfoViewerItem> => {
+    const writeSpeed = data.writeSpeed;
 
     return [
         {
             label: 'per minute',
-            value: formatBps(preparedBytes.perMinute),
+            value: formatBps(writeSpeed.perMinute),
         },
         {
             label: 'per hour',
-            value: formatBps(preparedBytes.perHour),
+            value: formatBps(writeSpeed.perHour),
         },
         {
             label: 'per day',
-            value: formatBps(preparedBytes.perDay),
+            value: formatBps(writeSpeed.perDay),
         },
     ];
 };
 
 export const TopicStats = () => {
-    const {data, error, loading, wasLoaded} = useTypedSelector((state) => state.topic);
+    const {error, loading, wasLoaded} = useTypedSelector((state) => state.topic);
+
+    const data = useTypedSelector(selectPreparedTopicStats);
 
     if (loading && !wasLoaded) {
         return (
@@ -56,24 +85,14 @@ export const TopicStats = () => {
         );
     }
 
-    // There are several backed versions with different behaviour
-    // Possible returns on older versions:
-    // 1. Error when trying to access endpoint
-    // 2. No data
-    // 3. HTML page of Internal Viewer with an error
-    // 4. Data with no topic stats
-    // 5. Topic Stats as an empty object
-    if (
-        error ||
-        !data ||
-        typeof data !== 'object' ||
-        !data.topic_stats ||
-        isEmpty(data.topic_stats)
-    ) {
+    // If there is at least some empty data object
+    // we initialize its fields with zero values
+    // so no data at all is considered to be error as well
+    if (error || !data) {
         return (
             <div className={b()}>
                 <div className={b('title')}>Stats</div>
-                <div className="error">{i18n('notSupportedVersion')}</div>
+                <ResponseError error={error} />
             </div>
         );
     }

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/en.json

@@ -1,3 +1,4 @@
 {
-  "notSupportedVersion": "Topic stats are not supported in the current cluster version. Update cluster version to see topic stats"
+  "writeLagPopover": "Write lag, maximum among all topic partitions",
+  "writeIdleTimePopover": "Write idle time, maximum among all topic partitions"
 }

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/ru.json

@@ -1,3 +1,4 @@
 {
-  "notSupportedVersion": "Статистика топиков не поддерживается в текущей версии. Обновите кластер до более новой версии, чтобы увидеть статистику топиков"
+  "writeLagPopover": "Лаг записи, максимальное значение среди всех партиций топика",
+  "writeIdleTimePopover": "Время без записи, максимальное значение среди всех партиций топика"
 }

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/Headers.scss

@@ -19,14 +19,6 @@
         white-space: normal;
     }
 
-    &__lags-popover-content {
-        max-width: 300px;
-
-        div:nth-child(1) {
-            margin-bottom: 10px;
-        }
-    }
-
     &__messages-popover-content {
         max-width: 200px;
     }

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/Headers.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
-import {WriteLagImage, ReadLagImage} from '../../../../../components/LagImages';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 
 import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES} from '../utils/constants';
 
@@ -28,37 +28,23 @@ export const ReadSessionHeader = () => (
 export const WriteLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
-        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
-        popoverContent={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.writeLags')}</div>
-                <div>
-                    <WriteLagImage />
-                </div>
-            </div>
-        }
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );
 
 export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
-        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
-        popoverContent={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.readLags')}</div>
-                <div>
-                    <ReadLagImage />
-                </div>
-            </div>
-        }
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.writeLags')} type="write" />}
     />
 );
 
 export const UnreadMessagesHeader = () => (
     <LabelWithPopover
         className={b('messages')}
-        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES]}
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES]}
         popoverContent={
             <div className={b('messages-popover-content')}>{i18n('headers.unread')}</div>
         }
@@ -68,7 +54,7 @@ export const UnreadMessagesHeader = () => (
 export const UncommitedMessagesHeader = () => (
     <LabelWithPopover
         className={b('messages')}
-        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES]}
+        text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES]}
         popoverContent={
             <div className={b('messages-popover-content')}>{i18n('headers.uncommited')}</div>
         }

package/dist/services/api.d.ts

@@ -77,6 +77,10 @@ interface Window {
             consumer?: string;
         }) => Promise<import('../types/api/consumer').DescribeConsumerResult>;
         getHostInfo: () => Promise<import('../types/api/systemState').TEvSystemStateResponse>;
+        getNodeInfo: (
+            id?: string,
+        ) => Promise<import('../types/api/systemState').TEvSystemStateResponse>;
+        getNodesList: () => Promise<import('../types/api/nodesList').TEvNodesInfo>;
         [method: string]: Function;
     };
 }

package/dist/store/reducers/{nodesList.js → nodesList.ts}

@@ -1,11 +1,19 @@
+import type {Reducer} from 'redux';
+
+import type {
+    NodesListState,
+    NodesListAction,
+    NodesListRootStateSlice,
+    NodesMap,
+} from '../../types/store/nodesList';
 import '../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_NODES_LIST = createRequestActionTypes('tenants', 'FETCH_NODES_LIST');
+export const FETCH_NODES_LIST = createRequestActionTypes('nodesList', 'FETCH_NODES_LIST');
 
 const initialState = {loading: true, wasLoaded: false, data: []};
 
-const nodesList = function (state = initialState, action) {
+const nodesList: Reducer<NodesListState, NodesListAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_NODES_LIST.REQUEST: {
             return {
@@ -36,13 +44,17 @@ const nodesList = function (state = initialState, action) {
 
 export function getNodesList() {
     return createApiRequest({
-        request: window.api.getNodeInfo(),
+        request: window.api.getNodesList(),
         actions: FETCH_NODES_LIST,
-        dataHandler: (data) => {
-            const {SystemStateInfo: nodes = []} = data;
-            return nodes;
-        },
     });
 }
 
+export const selectNodesMap = (state: NodesListRootStateSlice) =>
+    state.nodesList.data?.reduce<NodesMap>((nodesMap, node) => {
+        if (node.Id && node.Host) {
+            nodesMap.set(node.Id, node.Host);
+        }
+        return nodesMap;
+    }, new Map());
+
 export default nodesList;

package/dist/store/reducers/storage.js

@@ -204,15 +204,6 @@ export const getUsageFilter = (state) => state.storage.usageFilter;
 export const getVisibleEntities = (state) => state.storage.visible;
 export const getNodesUptimeFilter = (state) => state.storage.nodesUptimeFilter;
 export const getStorageType = (state) => state.storage.type;
-export const getNodesObject = (state) =>
-    _.reduce(
-        state.nodesList?.data,
-        (acc, el) => {
-            acc[el.NodeId] = el.Host;
-            return acc;
-        },
-        {},
-    );
 
 const FLAGS_POINTS = {
     Green: 1,
@@ -314,9 +305,10 @@ export const getFlatListStorageNodes = createSelector([getStorageNodes], (storag
         return {
             NodeId: node.NodeId,
             SystemState: systemState.SystemState,
-            FQDN: systemState.Host,
             DataCenter: systemState.DataCenter,
             Rack: systemState.Rack,
+            Host: systemState.Host,
+            Endpoints: systemState.Endpoints,
             uptime: calcUptime(systemState.StartTime),
             StartTime: systemState.StartTime,
             PDisks: node.PDisks,
@@ -378,7 +370,7 @@ const filterByText = (entities, type, text) => {
 
         return (
             entity.NodeId.toString().includes(cleanedFilter) ||
-            entity.FQDN.toLowerCase().includes(cleanedFilter)
+            entity.Host.toLowerCase().includes(cleanedFilter)
         );
     });
 };

package/dist/types/api/nodesList.ts

@@ -0,0 +1,25 @@
+/**
+ * endpoint: /viewer/json/nodesList
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/library/cpp/actors/core/interconnect.h
+ */
+export type TEvNodesInfo = TNodeInfo[];
+
+export interface TNodeInfo {
+    Id?: number;
+    Host?: string;
+    ResolveHost?: string;
+    Address?: string;
+    Port?: number;
+    PhysicalLocation?: TNodeLocation;
+}
+
+interface TNodeLocation {
+    DataCenter?: number;
+    Room?: number;
+    Rack?: number;
+    Body?: number;
+    DataCenterId?: string;
+    /** String with DC, Module, Rack and Unit ids */
+    Location?: string;
+}

package/dist/types/store/nodesList.ts

@@ -0,0 +1,24 @@
+import {FETCH_NODES_LIST} from '../../store/reducers/nodesList';
+
+import type {ApiRequestAction} from '../../store/utils';
+import type {IResponseError} from '../api/error';
+import type {TEvNodesInfo} from '../api/nodesList';
+
+export interface NodesListState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: TEvNodesInfo;
+    error?: IResponseError;
+}
+
+export type NodesListAction = ApiRequestAction<
+    typeof FETCH_NODES_LIST,
+    TEvNodesInfo,
+    IResponseError
+>;
+
+export type NodesMap = Map<number, string>;
+
+export interface NodesListRootStateSlice {
+    nodesList: NodesListState;
+}

package/dist/utils/index.js

@@ -20,7 +20,15 @@ export const formatBytes = (bytes) => {
     return numeral(bytes).format('0 b');
 };
 
-export const formatBps = (bytes) => formatBytes(bytes) + '/s';
+export const formatBps = (bytes) => {
+    const formattedBytes = formatBytes(bytes);
+
+    if (!formattedBytes) {
+        return '';
+    }
+
+    return formattedBytes + '/s';
+};
 
 export const formatBytesToGigabyte = (bytes) => {
     return `${Math.floor(bytes / GIGABYTE)} GB`;

package/dist/utils/nodes.ts

@@ -14,3 +14,7 @@ export const NodesUptimeFilterTitles = {
 
 export const isUnavailableNode = (node: INodesPreparedEntity | TSystemStateInfo) =>
     !node.SystemState || node.SystemState === EFlag.Grey;
+
+export interface AdditionalNodesInfo extends Record<string, unknown> {
+    getNodeRef?: Function;
+}

package/dist/utils/tooltip.js

@@ -2,6 +2,8 @@ import cn from 'bem-cn-lite';
 import {calcUptime} from '.';
 import JSONTree from 'react-json-inspector';
 
+import {NodeEndpointsTooltip} from '../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
+
 const poolB = cn('pool-tooltip');
 
 const PoolTooltip = (props) => {
@@ -109,34 +111,6 @@ const NodeTooltip = (props) => {
     );
 };
 
-const NodeEndpointsTooltip = (props) => {
-    const {data} = props;
-    return (
-        data && (
-            <div className={nodeB()}>
-                <table>
-                    <tbody>
-                        {data.Rack && (
-                            <tr>
-                                <td className={nodeB('label')}>Rack</td>
-                                <td className={nodeB('value')}>{data.Rack}</td>
-                            </tr>
-                        )}
-                        {data.Endpoints &&
-                            data.Endpoints.length &&
-                            data.Endpoints.map(({Name, Address}) => (
-                                <tr key={Name}>
-                                    <td className={nodeB('label')}>{Name}</td>
-                                    <td className={nodeB('value')}>{Address}</td>
-                                </tr>
-                            ))}
-                    </tbody>
-                </table>
-            </div>
-        )
-    );
-};
-
 const tabletsOverallB = cn('tabletsOverall-tooltip');
 
 const TabletsOverallTooltip = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "files": [
     "dist"
   ],

package/dist/components/InfoViewer/formatters/topicStats.tsx

@@ -1,29 +0,0 @@
-import type {TopicStats} from '../../../types/api/topic';
-import {formatBytes} from '../../../utils';
-import {
-    parseLag,
-    parseTimestampToIdleTime,
-    formatDurationToShortTimeFormat,
-} from '../../../utils/timeParsers';
-import {convertBytesObjectToSpeed} from '../../../utils/bytesParsers';
-
-import {SpeedMultiMeter} from '../../SpeedMultiMeter';
-
-import {createInfoFormatter} from '../utils';
-
-export const formatTopicStats = createInfoFormatter<TopicStats>({
-    values: {
-        store_size_bytes: formatBytes,
-        min_last_write_time: (value) =>
-            formatDurationToShortTimeFormat(parseTimestampToIdleTime(value)),
-        max_write_time_lag: (value) => formatDurationToShortTimeFormat(parseLag(value)),
-        bytes_written: (value) =>
-            value && <SpeedMultiMeter data={convertBytesObjectToSpeed(value)} withValue={false} />,
-    },
-    labels: {
-        store_size_bytes: 'Store size',
-        min_last_write_time: 'Partitions max time since last write',
-        max_write_time_lag: 'Partitions max write time lag',
-        bytes_written: 'Average write speed',
-    },
-});