ydb-embedded-ui 1.8.8 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [1.9.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.8...v1.9.0) (2022-07-29)
+
+
+### Features
+
+* **Node:** display endpoints in overview ([89e9e47](https://github.com/ydb-platform/ydb-embedded-ui/commit/89e9e470499b6f458e8949211d97293c0b7d9b97))
+* **Node:** display node basic info above tabs ([aafb15b](https://github.com/ydb-platform/ydb-embedded-ui/commit/aafb15b399bf116026eff36f3c4ac817e2c40e18))
+* **Node:** more informative pdisks panels ([342712b](https://github.com/ydb-platform/ydb-embedded-ui/commit/342712bcaa793971e1ca354da57fb962639ef90c))
+* **Nodes:** show node endpoints in tooltip ([34be559](https://github.com/ydb-platform/ydb-embedded-ui/commit/34be55957e02f947ede30b43f22fde82d21df308))
+* **Tenant:** table index overview ([2aed714](https://github.com/ydb-platform/ydb-embedded-ui/commit/2aed71488cde1175e6569c236ab609bb126f9cf3))
+* **Tenant:** virtualized tree in schema ([815f558](https://github.com/ydb-platform/ydb-embedded-ui/commit/815f5588e5fed6fb86f69653c4937e975465372f))
+* utils for parsing bitfields in pdisk data ([da22b4a](https://github.com/ydb-platform/ydb-embedded-ui/commit/da22b4afde9efe4d9605cefb69ddd51aed989722))
+
+
+### Bug Fixes
+
+* **Node:** fix pdisk title items width ([ca5fec6](https://github.com/ydb-platform/ydb-embedded-ui/commit/ca5fec6388364b7d1d6362f1bda36431d9c29749))
+* **Nodes:** hide tooltip on unmount ([54e4fdc](https://github.com/ydb-platform/ydb-embedded-ui/commit/54e4fdc8045c555338e79d89a93faf58e888fa0e))
+* **ProgressViewer:** apply provided custom class name ([aa60e9d](https://github.com/ydb-platform/ydb-embedded-ui/commit/aa60e9d1b9c0752853f4323d3bcfd220bedd272d))
+* **Tenant:** display all table props in overview ([d70e311](https://github.com/ydb-platform/ydb-embedded-ui/commit/d70e311296f6a4d1781f6e72929c70e0db7c3226))
+* **Tenant:** display PartCount first in table overview ([8c09746](https://github.com/ydb-platform/ydb-embedded-ui/commit/8c09746b026a23a36fe31be94057cc92535aceaa))
+
 ## [1.8.8](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.7...v1.8.8) (2022-07-21)
 
 

package/dist/components/BasicNodeViewer/BasicNodeViewer.scss

@@ -0,0 +1,43 @@
+@import '../../styles/mixins.scss';
+
+.basic-node-viewer {
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
+
+    display: flex;
+    align-items: center;
+
+    margin: 15px 0;
+
+    &__title {
+        margin: 0 20px 0 0;
+
+        font-size: var(--yc-text-body-2-font-size);
+        font-weight: 600;
+        line-height: var(--yc-text-body-2-line-height);
+        text-transform: uppercase;
+    }
+
+    &__id {
+        margin: 0 15px 0 24px;
+    }
+
+    &__label {
+        margin-right: 10px;
+
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: 18px;
+        white-space: nowrap;
+
+        color: var(--yc-color-text-hint);
+
+        .yc-root_theme_dark & {
+            color: var(--yc-color-text-hint);
+        }
+    }
+
+    &__link {
+        margin-left: 5px;
+        @extend .link;
+    }
+}

package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -0,0 +1,53 @@
+import cn from 'bem-cn-lite';
+
+import EntityStatus from '../EntityStatus/EntityStatus';
+import Tags from '../Tags/Tags';
+import Icon from '../Icon/Icon';
+
+import './BasicNodeViewer.scss';
+
+const b = cn('basic-node-viewer');
+
+interface BasicNodeViewerProps {
+    node: any;
+    additionalNodesInfo?: any;
+    className?: string;
+}
+
+export const BasicNodeViewer = ({node, additionalNodesInfo, className}: BasicNodeViewerProps) => {
+    const nodeHref = additionalNodesInfo?.getNodeRef
+        ? additionalNodesInfo.getNodeRef(node) + 'internal'
+        : undefined;
+
+    return (
+        <div className={b(null, className)}>
+            {node ? (
+                <>
+                    <div className={b('title')}>Node</div>
+                    <EntityStatus status={node.SystemState} name={node.Host} />
+                    {nodeHref && (
+                        <a
+                            rel="noopener noreferrer"
+                            className={b('link', {external: true})}
+                            href={nodeHref}
+                            target="_blank"
+                        >
+                            <Icon name="external" />
+                        </a>
+                    )}
+
+                    <div className={b('id')}>
+                        <label className={b('label')}>NodeID</label>
+                        <label>{node.NodeId}</label>
+                    </div>
+
+                    <Tags tags={[node.DataCenter]} />
+                    <Tags tags={node.Roles} tagsType="blue" />
+                </>
+            ) : (
+                <div className="error">no data</div>
+            )}
+
+        </div>
+    );
+};

package/dist/components/BasicNodeViewer/index.ts

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

package/dist/components/EntityStatus/EntityStatus.js

@@ -12,6 +12,8 @@ class EntityStatus extends React.Component {
     static propTypes = {
         status: PropTypes.string,
         name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        onNameMouseEnter: PropTypes.func,
+        onNameMouseLeave: PropTypes.func,
         path: PropTypes.string,
         size: PropTypes.string,
         label: PropTypes.string,
@@ -49,19 +51,29 @@ class EntityStatus extends React.Component {
         );
     }
     renderLink() {
-        const {externalLink, name, path} = this.props;
+        const {externalLink, name, path, onNameMouseEnter, onNameMouseLeave} = this.props;
 
         if (externalLink) {
             return <ExternalLink href={path}>{name}</ExternalLink>;
         }
 
         return path ? (
-            <Link title={name} to={path}>
+            <Link
+                title={name}
+                to={path}
+                onMouseEnter={onNameMouseEnter}
+                onMouseLeave={onNameMouseLeave}
+            >
                 {name}
             </Link>
         ) : (
             name && (
-                <span className={b('name')} title={name}>
+                <span
+                    className={b('name')}
+                    title={name}
+                    onMouseEnter={onNameMouseEnter}
+                    onMouseLeave={onNameMouseLeave}
+                >
                     {name}
                 </span>
             )

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -3,11 +3,8 @@ import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
-import EntityStatus from '../EntityStatus/EntityStatus';
 import ProgressViewer from '../ProgressViewer/ProgressViewer';
 import PoolUsage from '../PoolUsage/PoolUsage';
-import Tags from '../Tags/Tags';
-import Icon from '../Icon/Icon';
 
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
 import {calcUptime} from '../../utils';
@@ -22,7 +19,6 @@ class FullNodeViewer extends React.Component {
         node: PropTypes.object.isRequired,
         backend: PropTypes.string,
         singleClusterMode: PropTypes.bool,
-        additionalNodesInfo: PropTypes.object,
     };
 
     static defaultProps = {
@@ -30,10 +26,12 @@ class FullNodeViewer extends React.Component {
     };
 
     render() {
-        const {node, className, additionalNodesInfo={}} = this.props;
-        const nodeHref = additionalNodesInfo.getNodeRef
-            ? additionalNodesInfo.getNodeRef(node) + 'internal'
-            : undefined;
+        const {node, className} = this.props;
+
+        const endpointsInfo = node.Endpoints?.map(({Name, Address}) => ({
+            label: Name,
+            value: Address,
+        }));
 
         const commonInfo = [
             {label: 'Version', value: node.Version},
@@ -50,52 +48,35 @@ class FullNodeViewer extends React.Component {
         return (
             <div className={`${b()} ${className}`}>
                 {node ? (
-                    <div>
-                        <div className={b('row')}>
-                            <div className={b('title')}>Node</div>
-                            <EntityStatus status={node.SystemState} name={node.Host} />
-                            {nodeHref && (
-                                <a
-                                    rel="noopener noreferrer"
-                                    className={b('link', {external: true})}
-                                    href={nodeHref}
-                                    target="_blank"
-                                >
-                                    <Icon name="external" />
-                                </a>
-                            )}
-
-                            <div className={b('row', {id: true})}>
-                                <label className={b('label', {id: true})}>NodeID</label>
-                                <label>{node.NodeId}</label>
+                    <div className={b('common-info')}>
+                        <div>
+                            <div className={b('section-title')}>Pools</div>
+                            <div className={b('section', {pools: true})}>
+                                {node.PoolStats.map((pool, poolIndex) => (
+                                    <PoolUsage key={poolIndex} data={pool} />
+                                ))}
                             </div>
-
-                            <Tags tags={[node.DataCenter]} />
-                            <Tags tags={node.Roles} tagsType="blue" />
                         </div>
 
-                        <div className={b('common-info')}>
-                            <div>
-                                <div className={b('section-title')}>Pools</div>
-                                <div className={b('section', {pools: true})}>
-                                    {node.PoolStats.map((pool, poolIndex) => (
-                                        <PoolUsage key={poolIndex} data={pool} />
-                                    ))}
-                                </div>
-                            </div>
-
+                        {endpointsInfo && endpointsInfo.length && (
                             <InfoViewer
-                                title="Common info"
+                                title="Endpoints"
                                 className={b('section')}
-                                info={commonInfo}
+                                info={endpointsInfo}
                             />
-
-                            <InfoViewer
-                                title="Load average"
-                                className={b('section', {average: true})}
-                                info={averageInfo}
-                            />
-                        </div>
+                        )}
+
+                        <InfoViewer
+                            title="Common info"
+                            className={b('section')}
+                            info={commonInfo}
+                        />
+
+                        <InfoViewer
+                            title="Load average"
+                            className={b('section', {average: true})}
+                            info={averageInfo}
+                        />
                     </div>
                 ) : (
                     <div className="error">no data</div>

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -4,26 +4,6 @@
     font-size: var(--yc-text-body-2-font-size);
     line-height: var(--yc-text-body-2-line-height);
 
-    &__title {
-        margin: 0 20px 0 0;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
-        text-transform: uppercase;
-    }
-
-    &__row {
-        display: flex;
-        align-items: center;
-
-        margin: 15px 0;
-
-        &_id {
-            margin: 0 15px 0 24px;
-        }
-    }
-
     &__common-info {
         display: flex;
         flex-direction: column;
@@ -46,26 +26,6 @@
         min-width: 60px;
     }
 
-    &__label {
-        min-width: 100px;
-        margin-right: 25px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: 18px;
-        white-space: nowrap;
-
-        color: var(--yc-color-text-hint);
-
-        .yc-root_theme_dark & {
-            color: var(--yc-color-text-hint);
-        }
-
-        &_id {
-            min-width: auto;
-            margin-right: 10px;
-        }
-    }
-
     &__section-title {
         margin: 15px 0 10px;
 
@@ -73,9 +33,4 @@
         font-weight: 600;
         line-height: var(--yc-text-body-2-line-height);
     }
-
-    &__link {
-        margin-left: 5px;
-        @extend .link;
-    }
 }

package/dist/components/IndexInfoViewer/IndexInfoViewer.tsx

@@ -0,0 +1,52 @@
+import type {TEvDescribeSchemeResult, TIndexDescription} from '../../types/api/schema';
+import {InfoViewer, createInfoFormatter} from '../InfoViewer';
+
+const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
+    'Type',
+    'State',
+    'DataSize',
+    'KeyColumnNames',
+    'DataColumnNames',
+]);
+
+const formatItem = createInfoFormatter<TIndexDescription>({
+    Type: (value) => value?.substring(10), // trims EIndexType prefix
+    State: (value) => value?.substring(11), // trims EIndexState prefix
+    KeyColumnNames: (value) => value?.join(', '),
+    DataColumnNames: (value) => value?.join(', '),
+}, {
+    KeyColumnNames: 'Columns',
+    DataColumnNames: 'Includes',
+});
+
+interface IndexInfoViewerProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const IndexInfoViewer = ({data}: IndexInfoViewerProps) => {
+    if (!data) {
+        return (
+            <div className="error">no index data</div>
+        );
+    }
+
+    const TableIndex = data.PathDescription?.TableIndex;
+    const info: Array<{label?: string, value?: unknown}> = [];
+
+    let key: keyof TIndexDescription;
+    for (key in TableIndex) {
+        if (DISPLAYED_FIELDS.has(key)) {
+            info.push(formatItem(key, TableIndex?.[key]));
+        }
+    }
+
+    return (
+        <>
+            {info.length ? (
+                <InfoViewer info={info}></InfoViewer>
+            ) : (
+                <>Empty</>
+            )}
+        </>
+    );
+};

package/dist/components/InfoViewer/index.ts

@@ -0,0 +1,4 @@
+import InfoViewer from './InfoViewer';
+
+export {InfoViewer};
+export * from './utils';

package/dist/components/InfoViewer/utils.ts

@@ -0,0 +1,32 @@
+type LabelMap<T> = {
+    [label in keyof T]?: string;
+}
+
+type FieldMappers<T> = {
+    [label in keyof T]?: (value: T[label]) => string | undefined;
+}
+
+function formatLabel<Shape>(label: keyof Shape, map: LabelMap<Shape>) {
+    return map[label] ?? label;
+}
+
+function formatValue<Shape, Key extends keyof Shape>(
+    label: Key,
+    value: Shape[Key],
+    mappers: FieldMappers<Shape>,
+) {
+    const mapper = mappers[label];
+    const mappedValue = mapper ? mapper(value) : value;
+
+    return String(mappedValue ?? '');
+}
+
+export function createInfoFormatter<Shape extends Record<string, any>>(
+    fieldMappers?: FieldMappers<Shape>,
+    labelMap?: LabelMap<Shape>,
+) {
+    return <Key extends keyof Shape>(label: Key, value: Shape[Key]) => ({
+        label: formatLabel(label, labelMap || {}),
+        value: formatValue(label, value, fieldMappers || {}),
+    });
+}

package/dist/components/ProgressViewer/ProgressViewer.js

@@ -76,7 +76,7 @@ export class ProgressViewer extends React.Component {
 
         if (!isNaN(fillWidth)) {
             return (
-                <div className={b({size})}>
+                <div className={b({size}, className)}>
                     <div className={b('line', {bg})} style={lineStyle}></div>
                     <span className={b('text', {text})}>
                         {`${valueText} ${divider} ${capacityText}`}

package/dist/containers/Node/Node.scss

@@ -4,6 +4,10 @@
     overflow: auto;
     @include flex-container();
 
+    &__header {
+        margin: 16px 20px;
+    }
+
     &__content {
         position: relative;
 
@@ -19,7 +23,7 @@
     }
 
     &__tabs {
-        padding: 16px 20px 0;
+        padding: 0 20px;
     }
 
     &__tab {

package/dist/containers/Node/Node.tsx

@@ -13,6 +13,7 @@ import Storage from '../Storage/Storage';
 import NodeOverview from './NodeOverview/NodeOverview';
 import NodeStructure from './NodeStructure/NodeStructure';
 import Loader from '../../components/Loader/Loader';
+import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
@@ -133,7 +134,6 @@ function Node(props: NodeProps) {
             case OVERVIEW: {
                 return (
                     <NodeOverview
-                        additionalNodesInfo={additionalNodesInfo}
                         node={node}
                         className={b('overview-wrapper')}
                     />
@@ -162,6 +162,12 @@ function Node(props: NodeProps) {
         if (node) {
             return (
                 <div className={b(null, props.className)}>
+                    <BasicNodeViewer
+                        node={node}
+                        additionalNodesInfo={props.additionalNodesInfo}
+                        className={b('header')}
+                    />
+
                     {renderTabs()}
 
                     <div className={b('content')}>{renderTabContent()}</div>

package/dist/containers/Node/NodeOverview/NodeOverview.tsx

@@ -5,16 +5,14 @@ import {backend} from '../../../store';
 
 interface NodeOverviewProps {
     node: any;
-    additionalNodesInfo: any;
     className?: string;
 }
 
-function NodeOverview({node, additionalNodesInfo, className}: NodeOverviewProps) {
+function NodeOverview({node, className}: NodeOverviewProps) {
     return (
         <FullNodeViewer
             node={node}
             backend={backend}
-            additionalNodesInfo={additionalNodesInfo}
             className={className}
         />
     );

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -44,9 +44,38 @@
     &__pdisk-title-wrapper {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 16px;
 
         font-weight: 600;
+
+        .entity-status__status-icon {
+            margin-right: 0;
+        }
+    }
+
+    &__pdisk-title-item {
+        display: flex;
+        gap: 4px;
+
+        &-label {
+            font-weight: 400;
+
+            color: var(--yc-color-text-secondary);
+        }
+    }
+
+    &__pdisk-title-id {
+        min-width: 110px;
+    }
+
+    &__pdisk-title-type {
+        justify-content: flex-end;
+
+        min-width: 50px;
+    }
+
+    &__pdisk-title-size {
+        min-width: 150px;
     }
 
     &__pdisk-details {

package/dist/containers/Node/NodeStructure/PDiskTitleBadge.tsx

@@ -0,0 +1,25 @@
+import {ReactNode} from 'react';
+import cn from 'bem-cn-lite';
+
+const b = cn('kv-node-structure');
+
+interface PDiskTitleBadgeProps {
+    label?: string;
+    value: ReactNode;
+    className?: string;
+}
+
+export function PDiskTitleBadge({label, value, className}: PDiskTitleBadgeProps) {
+    return (
+        <span className={b('pdisk-title-item', className)}>
+            {label && (
+                <span className={b('pdisk-title-item-label')}>
+                    {label}:
+                </span>
+            )}
+            <span className={b('pdisk-title-item-value')}>
+                {value}
+            </span>
+        </span>
+    );
+}

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -14,9 +14,11 @@ import {Vdisk} from './Vdisk';
 
 import {bytesToGB, pad9} from '../../../utils/utils';
 import {formatStorageValuesToGb} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {valueIsDefined} from './NodeStructure';
+import {PDiskTitleBadge} from './PDiskTitleBadge';
 
 const b = cn('kv-node-structure');
 
@@ -230,6 +232,7 @@ export function PDisk(props: PDiskProps) {
         }
         if (valueIsDefined(Category)) {
             pdiskInfo.push({label: 'Category', value: Category});
+            pdiskInfo.push({label: 'Type', value: getPDiskType(data)});
         }
         pdiskInfo.push({
             label: 'Allocated Size',
@@ -286,8 +289,27 @@ export function PDisk(props: PDiskProps) {
         <div className={b('pdisk')} id={props.id}>
             <div className={b('pdisk-header')}>
                 <div className={b('pdisk-title-wrapper')}>
-                    <span>{data.Path}</span>
-                    <EntityStatus status={data.Device} name={`${data.NodeId}-${data.PDiskId}`} />
+                    <EntityStatus status={data.Device} />
+                    <PDiskTitleBadge
+                        label="PDiskID"
+                        value={data.PDiskId}
+                        className={b('pdisk-title-id')}
+                    />
+                    <PDiskTitleBadge
+                        value={getPDiskType(data)}
+                        className={b('pdisk-title-type')}
+                    />
+                    <ProgressViewer
+                        value={data.TotalSize - data.AvailableSize}
+                        capacity={data.TotalSize}
+                        formatValues={formatStorageValuesToGb}
+                        colorizeProgress={true}
+                        className={b('pdisk-title-size')}
+                    />
+                    <PDiskTitleBadge
+                        label="VDisks"
+                        value={data.vDisks.length}
+                    />
                 </div>
                 <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="flat-secondary">
                     <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />

package/dist/containers/Nodes/Nodes.js

@@ -63,6 +63,7 @@ class Nodes extends React.Component {
     }
 
     componentWillUnmount() {
+        this.props.hideTooltip();
         clearInterval(this.reloadDescriptor);
     }
 

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

@@ -6,9 +6,10 @@ import {Loader} from '@yandex-cloud/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
+import {IndexInfoViewer} from '../../../../components/IndexInfoViewer/IndexInfoViewer';
 
 import type {EPathType} from '../../../../types/api/schema';
-import {isColumnEntityType, isTableType} from '../../utils/schema';
+import {isColumnEntityType, isTableType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {AutoFetcher} from '../../../../utils/autofetcher';
 //@ts-ignore
 import {getSchema} from '../../../../store/reducers/schema';
@@ -112,11 +113,24 @@ function Overview(props: OverviewProps) {
         );
     };
 
+    const renderContent = () => {
+        switch (mapPathTypeToNavigationTreeType(props.type)) {
+            case 'index':
+                return (
+                    <IndexInfoViewer data={schemaData} />
+                );
+            default:
+                return (
+                    <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+                );
+        }
+    }
+
     return loading && !wasLoaded ? (
         renderLoader()
     ) : (
         <div className={props.className}>
-            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+            {renderContent()}
         </div>
     );
 }

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -28,29 +28,33 @@ class SchemaInfoViewer extends React.Component {
         if (data) {
             const {PathDescription = {}} = data;
             const {TableStats = {}, TabletMetrics = {}} = PathDescription;
-            const tableStatsInfo =
-                TableStats &&
-                Object.keys(TableStats).map((key) => ({
-                    label: key,
-                    value: TableStats[key].toString(),
-                }));
+            const {PartCount, ...restTableStats} = TableStats;
 
-            const tabletMetricsInfo =
-                TableStats &&
-                Object.keys(TabletMetrics).map((key) => ({
-                    label: key,
-                    value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
-                }));
+            const priorityInfo = [{
+                label: 'PartCount',
+                value: PartCount,
+            }].filter(({value}) => value !== undefined);
 
-            let generalInfo = Object.assign(tableStatsInfo, tabletMetricsInfo);
-            generalInfo = Object.assign(generalInfo);
+            const tableStatsInfo = Object.keys(restTableStats).map((key) => ({
+                label: key,
+                value: TableStats[key].toString(),
+            }));
 
-            const infoLength = Object.keys(generalInfo).length;
+            const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) => ({
+                label: key,
+                value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
+            }));
 
+            const generalInfo = [
+                ...priorityInfo,
+                ...tabletMetricsInfo,
+                ...tableStatsInfo,
+            ];
+ 
             return (
                 <div className={b()}>
                     <div className={b('item')}>
-                        {infoLength ? (
+                        {generalInfo.length ? (
                             <InfoViewer info={generalInfo}></InfoViewer>
                         ) : (
                             <div>Empty</div>

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -61,6 +61,7 @@ export function SchemaTree(props: SchemaTreeProps) {
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}
+            virtualize
         />
     );
 }

package/dist/types/api/schema.ts

@@ -54,6 +54,8 @@ interface TPathDescription {
 
     ColumnStoreDescription?: unknown;
     ColumnTableDescription?: unknown;
+
+    TableIndex?: TIndexDescription;
 }
 
 interface TDirEntry {
@@ -80,6 +82,27 @@ interface TDirEntry {
     Version?: TPathVersion;
 }
 
+export interface TIndexDescription {
+    Name?: string;
+    /** uint64 */
+    LocalPathId?: string;
+
+    Type?: EIndexType;
+    State?: EIndexState;
+
+    KeyColumnNames?: string[];
+
+    /** uint64 */
+    SchemaVersion?: string;
+
+    /** uint64 */
+    PathOwnerId?: string;
+
+    DataColumnNames?: string[];
+    /** uint64 */
+    DataSize?: string;
+}
+
 // incomplete
 export enum EPathType {
     EPathTypeInvalid = 'EPathTypeInvalid',
@@ -112,6 +135,19 @@ enum EPathState {
     EPathStateMoving = 'EPathStateMoving',
 }
 
+enum EIndexType {
+    EIndexTypeInvalid = 'EIndexTypeInvalid',
+    EIndexTypeGlobal = 'EIndexTypeGlobal',
+    EIndexTypeGlobalAsync = 'EIndexTypeGlobalAsync',
+}
+
+enum EIndexState {
+    EIndexStateInvalid = 'EIndexStateInvalid',
+    EIndexStateReady = 'EIndexStateReady',
+    EIndexStateNotReady = 'EIndexStateNotReady',
+    EIndexStateWriteOnly = 'EIndexStateWriteOnly',
+}
+
 // incomplete
 interface TPathVersion {
     /** uint64 */

package/dist/types/api/storage.ts

@@ -0,0 +1,54 @@
+enum EFlag {
+    Grey = 'Grey',
+    Green = 'Green',
+    Yellow = 'Yellow',
+    Orange = 'Orange',
+    Red = 'Red',
+}
+
+enum TPDiskState {
+    Initial = 'Initial',
+    InitialFormatRead = 'InitialFormatRead',
+    InitialFormatReadError = 'InitialFormatReadError',
+    InitialSysLogRead = 'InitialSysLogRead',
+    InitialSysLogReadError = 'InitialSysLogReadError',
+    InitialSysLogParseError = 'InitialSysLogParseError',
+    InitialCommonLogRead = 'InitialCommonLogRead',
+    InitialCommonLogReadError = 'InitialCommonLogReadError',
+    InitialCommonLogParseError = 'InitialCommonLogParseError',
+    CommonLoggerInitError = 'CommonLoggerInitError',
+    Normal = 'Normal',
+    OpenFileError = 'OpenFileError',
+    ChunkQuotaError = 'ChunkQuotaError',
+    DeviceIoError = 'DeviceIoError',
+
+    Missing = 'Missing',
+    Timeout = 'Timeout',
+    NodeDisconnected = 'NodeDisconnected',
+    Unknown = 'Unknown',
+}
+
+export interface TPDiskStateInfo {
+    PDiskId?: number;
+    /** uint64 */
+    CreateTime?: string;
+    /** uint64 */
+    ChangeTime?: string;
+    Path?: string;
+    /** uint64 */
+    Guid?: string;
+    /** uint64 */
+    Category?: string;
+    /** uint64 */
+    AvailableSize?: string;
+    /** uint64 */
+    TotalSize?: string;
+    State?: TPDiskState;
+    NodeId?: number;
+    Count?: number;
+    Device?: EFlag;
+    Realtime?: EFlag;
+    StateFlag?: EFlag;
+    Overall?: EFlag;
+    SerialNumber?: string;
+}

package/dist/utils/getNodesColumns.js

@@ -33,6 +33,8 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                     <div className={b('host-name-wrapper')}>
                         <EntityStatus
                             name={row.Host}
+                            onNameMouseEnter={(e) => showTooltip(e.target, row, 'nodeEndpoints')}
+                            onNameMouseLeave={hideTooltip}
                             status={row.Overall}
                             path={getDefaultNodePath(row.NodeId)}
                             hasClipboardButton

package/dist/utils/pdisk.ts

@@ -0,0 +1,74 @@
+import type {TPDiskStateInfo} from "../types/api/storage";
+
+// TODO: move to utils or index after converting them to TS
+/**
+ * Parses a binary string containing a bit field into an object with binary values.
+ * This is an implementation based on string manipulation, since JS can only perform
+ * bitwise operations with 32-bits integers, and YDB sends uint64.
+ * @see https://en.cppreference.com/w/c/language/bit_field
+ * @param binaryString - binary string representing a bit field
+ * @param bitFieldStruct - bit field description, <field => size in bits>, in order starting from the rightmost bit
+ * @returns object with binary values
+ */
+export const parseBitField = <T extends Record<string, number>>(
+    binaryString: string,
+    bitFieldStruct: T,
+): Record<keyof T, string> => {
+    const fields: Partial<Record<keyof T, string>> = {};
+
+    Object.entries(bitFieldStruct).reduce((prefixSize, [field, size]: [keyof T, number]) => {
+        const end = binaryString.length - prefixSize;
+        const start = end - size;
+        fields[field] = binaryString.substring(start, end) || '0';
+
+        return prefixSize + size;
+    }, 0);
+
+    return fields as Record<keyof T, string>;
+};
+
+export enum IPDiskType {
+    ROT = 'ROT',
+    SSD = 'SSD',
+    MVME = 'NVME',
+}
+
+// Bear with me.
+// Disk type is determined by the field Category.
+// Category is a bit field defined as follows:
+// struct {
+//     ui64 IsSolidState : 1;
+//     ui64 Kind : 55;
+//     ui64 TypeExt : 8;
+// }
+// For compatibility TypeExt is not used for old types (ROT, SSD), so the following scheme is used:
+// ROT  -> IsSolidState# 0, TypeExt# 0
+// SSD  -> IsSolidState# 1, TypeExt# 0
+// NVME -> IsSolidState# 1, TypeExt# 2
+// Reference on bit fields: https://en.cppreference.com/w/c/language/bit_field
+export const getPDiskType = (data: TPDiskStateInfo): IPDiskType | undefined => {
+    if (!data.Category) {
+        return undefined;
+    }
+
+    // Category is uint64, too big for Number or bitwise operators, thus BigInt and a custom parser
+    const categotyBin = BigInt(data.Category).toString(2);
+    const categoryBitField = parseBitField(categotyBin, {
+        isSolidState: 1,
+        kind: 55,
+        typeExt: 8,
+    });
+
+    if (categoryBitField.isSolidState === '1') {
+        switch (parseInt(categoryBitField.typeExt, 2)) {
+            case 0:
+                return IPDiskType.SSD;
+            case 2:
+                return IPDiskType.MVME;
+        }
+    } else if (categoryBitField.typeExt === '0') {
+        return IPDiskType.ROT;
+    }
+
+    return undefined;
+};

package/dist/utils/tooltip.js

@@ -109,6 +109,32 @@ 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) => {
@@ -175,6 +201,7 @@ export const tooltipTemplates = {
     tablet: (data, additionalData) => <TabletTooltip data={data} additionalData={additionalData} />,
     // eslint-disable-next-line react/display-name
     node: (data) => <NodeTooltip data={data} />,
+    nodeEndpoints: (data) => <NodeEndpointsTooltip data={data} />,
     // eslint-disable-next-line react/display-name
     tabletsOverall: (data) => <TabletsOverallTooltip data={data} />,
     // eslint-disable-next-line react/display-name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "2.3.0"
+    "ydb-ui-components": "2.4.0"
   },
   "scripts": {
     "start": "react-app-rewired start",