ydb-embedded-ui 4.21.0 → 4.22.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [4.22.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.21.1...v4.22.0) (2023-11-27)
+
+
+### Features
+
+* **Query:** enable queries with multiple resultsets ([#595](https://github.com/ydb-platform/ydb-embedded-ui/issues/595)) ([2eedfb6](https://github.com/ydb-platform/ydb-embedded-ui/commit/2eedfb6ec3be932c7399bb67de901798c0b31b50))
+* **TenantOverview:** add columns to memory table ([#593](https://github.com/ydb-platform/ydb-embedded-ui/issues/593)) ([6379577](https://github.com/ydb-platform/ydb-embedded-ui/commit/6379577782cfa69de9fb39640d2a143f1670be39))
+
+
+### Bug Fixes
+
+* fix disks developer UI links for paths with nodeId ([#594](https://github.com/ydb-platform/ydb-embedded-ui/issues/594)) ([7f5a783](https://github.com/ydb-platform/ydb-embedded-ui/commit/7f5a78393d0c23e584ad73040fd0e73d404e5d01))
+* **TopShards:** sort by InFlightTxCount ([#591](https://github.com/ydb-platform/ydb-embedded-ui/issues/591)) ([eb3592d](https://github.com/ydb-platform/ydb-embedded-ui/commit/eb3592d69a465814de27e8b1e368b34cc60fed2f))
+
+## [4.21.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.21.0...v4.21.1) (2023-11-17)
+
+
+### Bug Fixes
+
+* move inverted disk space setting to general page ([#589](https://github.com/ydb-platform/ydb-embedded-ui/issues/589)) ([b09345e](https://github.com/ydb-platform/ydb-embedded-ui/commit/b09345e1ebe9e7a47beea5ab2dac4257790232cc))
+* **Nodes:** always use nodes when flag is enabled ([#584](https://github.com/ydb-platform/ydb-embedded-ui/issues/584)) ([6ac6ee2](https://github.com/ydb-platform/ydb-embedded-ui/commit/6ac6ee2516bb2612cc7832e67ffa0bf92615a36c))
+* **QueryResultTable:** fix table error on null cell sort ([#590](https://github.com/ydb-platform/ydb-embedded-ui/issues/590)) ([805a339](https://github.com/ydb-platform/ydb-embedded-ui/commit/805a339b0bba34412bf8e854cf6d24ae7c080539))
+* **Tablets:** reduce rerenders ([#585](https://github.com/ydb-platform/ydb-embedded-ui/issues/585)) ([f1767a1](https://github.com/ydb-platform/ydb-embedded-ui/commit/f1767a143b139de4cd7c0df5c8c243c0224ebd3c))
+* turn on query modes and metrics cards by default ([#588](https://github.com/ydb-platform/ydb-embedded-ui/issues/588)) ([c2f0d74](https://github.com/ydb-platform/ydb-embedded-ui/commit/c2f0d7424cb3182926f125a1e8c16cd4a2d422b9))
+* update links to VDisk and PDisk Developer UI ([#582](https://github.com/ydb-platform/ydb-embedded-ui/issues/582)) ([97dda88](https://github.com/ydb-platform/ydb-embedded-ui/commit/97dda88bd595295eefaed4c0cbcd333e84b047f0))
+* **VirtualNodes:** display developerUI link on hover ([#587](https://github.com/ydb-platform/ydb-embedded-ui/issues/587)) ([ba6c249](https://github.com/ydb-platform/ydb-embedded-ui/commit/ba6c249a9793b0bac45607b0b36f284dea4e0a7a))
+
 ## [4.21.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.20.4...v4.21.0) (2023-10-27)
 
 

package/dist/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -16,7 +16,8 @@
     }
 }
 
-.data-table__row:hover {
+.data-table__row:hover,
+.ydb-virtual-table__row:hover {
     .ydb-node-host-wrapper__external-button {
         display: inline-flex;
     }

package/dist/components/QueryResultTable/QueryResultTable.tsx

@@ -36,10 +36,14 @@ const prepareTypedColumns = (columns: ColumnType[]) => {
             align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT,
             sortAccessor: (row) => {
                 const value = row[name];
-                if (value === undefined || value === null) return null;
+
+                if (value === undefined || value === null) {
+                    return null;
+                }
+
                 return columnType === 'number' ? BigInt(value) : value;
             },
-            render: ({value}) => <Cell value={value as string} />,
+            render: ({row}) => <Cell value={String(row[name])} />,
         };
 
         return column;
@@ -56,7 +60,7 @@ const prepareGenericColumns = (data: KeyValueRow[]) => {
             name,
             align: isNumeric(data[0][name]) ? DataTable.RIGHT : DataTable.LEFT,
             sortAccessor: (row) => (isNumeric(row[name]) ? Number(row[name]) : row[name]),
-            render: ({value}) => <Cell value={value as string} />,
+            render: ({row}) => <Cell value={String(row[name])} />,
         };
 
         return column;

package/dist/components/VirtualTable/TableChunk.tsx

@@ -1,8 +1,9 @@
 import {useEffect, useRef, memo} from 'react';
 
+import {getArray} from '../../utils';
+
 import type {Column, Chunk, GetRowClassName} from './types';
 import {LoadingTableRow, TableRow} from './TableRow';
-import {getArray} from './utils';
 
 // With original memo generic types are lost
 const typedMemo: <T>(Component: T) => T = memo;

package/dist/components/VirtualTable/VirtualTable.tsx

@@ -1,6 +1,7 @@
 import {useState, useReducer, useRef, useCallback, useEffect} from 'react';
 
 import type {IResponseError} from '../../types/api/error';
+import {getArray} from '../../utils';
 
 import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
 import {ResponseError} from '../Errors/ResponseError';
@@ -31,7 +32,6 @@ import {TableHead} from './TableHead';
 import {TableChunk} from './TableChunk';
 import {EmptyTableRow} from './TableRow';
 import {useIntersectionObserver} from './useIntersectionObserver';
-import {getArray} from './utils';
 import i18n from './i18n';
 import {b} from './shared';
 

package/dist/containers/Node/Node.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {useLocation, useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
-import _ from 'lodash';
 
 import {Tabs} from '@gravity-ui/uikit';
 import {Link} from 'react-router-dom';
@@ -52,21 +51,22 @@ function Node(props: NodeProps) {
     const {tenantName: tenantNameFromQuery} = parseQuery(location);
 
     const {activeTabVerified, nodeTabs} = React.useMemo(() => {
-        const hasStorage = _.find(node?.Roles as any[], (el) => el === STORAGE_ROLE);
-        let activeTabVerified = activeTab;
+        const hasStorage = node?.Roles?.find((el) => el === STORAGE_ROLE);
+
+        let actualActiveTab = activeTab;
         if (!hasStorage && activeTab === STORAGE) {
-            activeTabVerified = OVERVIEW;
+            actualActiveTab = OVERVIEW;
         }
         const nodePages = hasStorage ? NODE_PAGES : NODE_PAGES.filter((el) => el.id !== STORAGE);
 
-        const nodeTabs = nodePages.map((page) => {
+        const actualNodeTabs = nodePages.map((page) => {
             return {
                 ...page,
                 title: page.name,
             };
         });
 
-        return {activeTabVerified, nodeTabs};
+        return {activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs};
     }, [activeTab, node]);
 
     React.useEffect(() => {
@@ -100,13 +100,13 @@ function Node(props: NodeProps) {
                     size="l"
                     items={nodeTabs}
                     activeTab={activeTabVerified}
-                    wrapTo={({id}, node) => (
+                    wrapTo={({id}, tabNode) => (
                         <Link
                             to={createHref(routes.node, {id: nodeId, activeTab: id})}
                             key={id}
                             className={b('tab')}
                         >
-                            {node}
+                            {tabNode}
                         </Link>
                     )}
                     allowNotSelected={true}
@@ -115,8 +115,6 @@ function Node(props: NodeProps) {
         );
     };
     const renderTabContent = () => {
-        const {additionalNodesProps} = props;
-
         switch (activeTab) {
             case STORAGE: {
                 return (
@@ -134,13 +132,7 @@ function Node(props: NodeProps) {
             }
 
             case STRUCTURE: {
-                return (
-                    <NodeStructure
-                        className={b('node-page-wrapper')}
-                        nodeId={nodeId}
-                        additionalNodesProps={additionalNodesProps}
-                    />
-                );
+                return <NodeStructure className={b('node-page-wrapper')} nodeId={nodeId} />;
             }
             default:
                 return false;

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

@@ -1,7 +1,7 @@
-import {useEffect, useRef, useMemo} from 'react';
+import {useEffect, useRef} from 'react';
 import {useDispatch} from 'react-redux';
 import url from 'url';
-import _ from 'lodash';
+import {isEmpty} from 'lodash/fp';
 
 import cn from 'bem-cn-lite';
 
@@ -13,15 +13,13 @@ import {selectNodeStructure} from '../../../store/reducers/node/selectors';
 import {AutoFetcher} from '../../../utils/autofetcher';
 import {useTypedSelector} from '../../../utils/hooks';
 
-import type {AdditionalNodesProps} from '../../../types/additionalProps';
-
 import {PDisk} from './Pdisk';
 
 import './NodeStructure.scss';
 
 const b = cn('kv-node-structure');
 
-export function valueIsDefined(value: any) {
+export function valueIsDefined<T>(value: T | null | undefined): value is T {
     return value !== null && value !== undefined;
 }
 
@@ -32,24 +30,16 @@ function generateId({type, id}: {type: 'pdisk' | 'vdisk'; id: string}) {
 interface NodeStructureProps {
     nodeId: string;
     className?: string;
-    additionalNodesProps?: AdditionalNodesProps;
 }
 
 const autofetcher = new AutoFetcher();
 
-function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureProps) {
+function NodeStructure({nodeId, className}: NodeStructureProps) {
     const dispatch = useDispatch();
 
     const nodeStructure = useTypedSelector(selectNodeStructure);
 
     const {loadingStructure, wasLoadedStructure} = useTypedSelector((state) => state.node);
-    const nodeData = useTypedSelector((state) => state.node?.data?.SystemStateInfo?.[0]);
-
-    const nodeHref = useMemo(() => {
-        return additionalNodesProps?.getNodeRef
-            ? additionalNodesProps.getNodeRef(nodeData)
-            : undefined;
-    }, [nodeData, additionalNodesProps]);
 
     const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
         window.location.href,
@@ -57,23 +47,11 @@ function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureP
     ).query;
 
     const scrollContainerRef = useRef<HTMLDivElement>(null);
-    const scrollContainer = scrollContainerRef.current;
 
     const isReady = useRef(false);
 
     const scrolled = useRef(false);
 
-    useEffect(() => {
-        return () => {
-            if (scrollContainer) {
-                scrollContainer.scrollTo({
-                    behavior: 'smooth',
-                    top: 0,
-                });
-            }
-        };
-    }, []);
-
     useEffect(() => {
         dispatch(getNodeStructure(nodeId));
         autofetcher.start();
@@ -87,13 +65,13 @@ function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureP
     }, [nodeId, dispatch]);
 
     useEffect(() => {
-        if (!_.isEmpty(nodeStructure) && scrollContainer) {
+        if (!isEmpty(nodeStructure) && scrollContainerRef.current) {
             isReady.current = true;
         }
     }, [nodeStructure]);
 
     useEffect(() => {
-        if (isReady.current && !scrolled.current && scrollContainer) {
+        if (isReady.current && !scrolled.current && scrollContainerRef.current) {
             const element = document.getElementById(
                 generateId({type: 'pdisk', id: pdiskIdFromUrl as string}),
             );
@@ -112,7 +90,7 @@ function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureP
             }
 
             if (element) {
-                scrollContainer.scrollTo({
+                scrollContainerRef.current.scrollTo({
                     behavior: 'smooth',
                     // should subtract 20 to avoid sticking the element to tabs
                     top: scrollToVdisk ? scrollToVdisk : element.offsetTop,
@@ -136,7 +114,7 @@ function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureP
                       id={generateId({type: 'pdisk', id: pDiskId})}
                       unfolded={pdiskIdFromUrl === pDiskId}
                       selectedVdiskId={vdiskIdFromUrl as string}
-                      nodeHref={nodeHref}
+                      nodeId={nodeId}
                   />
               ))
             : renderStub();

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

@@ -12,15 +12,20 @@ import type {
     PreparedStructureVDisk,
 } from '../../../store/reducers/node/types';
 import {EVDiskState} from '../../../types/api/vdisk';
-import {bytesToGB, pad9} from '../../../utils/utils';
+import {bytesToGB} from '../../../utils/utils';
 import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskType} from '../../../utils/pdisk';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import {
+    createPDiskDeveloperUILink,
+    createVDiskDeveloperUILink,
+} from '../../../utils/developerUI/developerUI';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import InfoViewer, {type InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
 import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {Icon} from '../../../components/Icon';
 
+import i18n from '../i18n';
 import {Vdisk} from './Vdisk';
 import {valueIsDefined} from './NodeStructure';
 import {PDiskTitleBadge} from './PDiskTitleBadge';
@@ -32,7 +37,7 @@ interface PDiskProps {
     unfolded?: boolean;
     id: string;
     selectedVdiskId?: string;
-    nodeHref?: string | null;
+    nodeId: string | number;
 }
 
 enum VDiskTableColumnsIds {
@@ -54,11 +59,11 @@ const vDiskTableColumnsNames: Record<VDiskTableColumnsIdsValues, string> = {
 function getColumns({
     pDiskId,
     selectedVdiskId,
-    nodeHref,
+    nodeId,
 }: {
     pDiskId: number | undefined;
     selectedVdiskId?: string;
-    nodeHref?: string | null;
+    nodeId?: string | number;
 }) {
     const columns: Column<PreparedStructureVDisk>[] = [
         {
@@ -66,26 +71,31 @@ function getColumns({
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.slotId],
             width: 100,
             render: ({row}) => {
-                let vdiskInternalViewerLink = '';
+                const vDiskSlotId = row.VDiskSlotId;
+                let vdiskInternalViewerLink = null;
 
-                if (nodeHref && pDiskId !== undefined && row.VDiskSlotId !== undefined) {
-                    vdiskInternalViewerLink +=
-                        nodeHref +
-                        'actors/vdisks/vdisk' +
-                        pad9(pDiskId) +
-                        '_' +
-                        pad9(row.VDiskSlotId);
+                if (
+                    valueIsDefined(nodeId) &&
+                    valueIsDefined(pDiskId) &&
+                    valueIsDefined(vDiskSlotId)
+                ) {
+                    vdiskInternalViewerLink = createVDiskDeveloperUILink({
+                        nodeId,
+                        pDiskId,
+                        vDiskSlotId,
+                    });
                 }
 
                 return (
                     <div className={b('vdisk-id', {selected: row.id === selectedVdiskId})}>
-                        <span>{row.VDiskSlotId}</span>
+                        <span>{vDiskSlotId}</span>
                         {vdiskInternalViewerLink && (
                             <Button
                                 size="s"
                                 className={b('external-button', {hidden: true})}
                                 href={vdiskInternalViewerLink}
                                 target="_blank"
+                                title={i18n('vdisk.developer-ui-button-title')}
                             >
                                 <Icon name="external" />
                             </Button>
@@ -156,7 +166,7 @@ export function PDisk({
     id,
     data,
     selectedVdiskId,
-    nodeHref,
+    nodeId,
     unfolded: unfoldedFromProps,
 }: PDiskProps) {
     const [unfolded, setUnfolded] = useState(unfoldedFromProps ?? false);
@@ -190,7 +200,7 @@ export function PDisk({
             <DataTable
                 theme="yandex-cloud"
                 data={vDisks}
-                columns={getColumns({nodeHref, pDiskId: PDiskId, selectedVdiskId})}
+                columns={getColumns({nodeId, pDiskId: PDiskId, selectedVdiskId})}
                 settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
                 rowClassName={(row) => {
                     return row.id === selectedVdiskId ? b('selected-vdisk') : '';
@@ -203,10 +213,13 @@ export function PDisk({
         if (isEmpty(data)) {
             return <div>No information about PDisk</div>;
         }
-        let pDiskInternalViewerLink = '';
+        let pDiskInternalViewerLink = null;
 
-        if (nodeHref) {
-            pDiskInternalViewerLink += nodeHref + 'actors/pdisks/pdisk' + pad9(PDiskId);
+        if (valueIsDefined(PDiskId) && valueIsDefined(nodeId)) {
+            pDiskInternalViewerLink = createPDiskDeveloperUILink({
+                nodeId,
+                pDiskId: PDiskId,
+            });
         }
 
         const pdiskInfo: InfoViewerItem[] = [
@@ -222,6 +235,7 @@ export function PDisk({
                                 href={pDiskInternalViewerLink}
                                 target="_blank"
                                 view="flat-secondary"
+                                title={i18n('pdisk.developer-ui-button-title')}
                             >
                                 <Icon name="external" />
                             </Button>

package/dist/containers/Node/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "pdisk.developer-ui-button-title": "PDisk Developer UI page",
+  "vdisk.developer-ui-button-title": "VDisk Developer UI page"
+}

package/dist/containers/Node/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-node-page';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Node/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "pdisk.developer-ui-button-title": "Страница PDisk в Developer UI",
+  "vdisk.developer-ui-button-title": "Страница VDisk в Developer UI"
+}

package/dist/containers/Nodes/Nodes.tsx

@@ -5,7 +5,6 @@ import {useDispatch} from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
 import {ASCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
 
-import type {EPathType} from '../../types/api/schema';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 import type {NodesSortParams} from '../../store/reducers/nodes/types';
 
@@ -39,8 +38,6 @@ import {selectFilteredNodes} from '../../store/reducers/nodes/selectors';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 
-import {isDatabaseEntityType} from '../Tenant/utils/schema';
-
 import {getNodesColumns} from './getNodesColumns';
 
 import './Nodes.scss';
@@ -51,11 +48,10 @@ const b = cn('ydb-nodes');
 
 interface NodesProps {
     path?: string;
-    type?: EPathType;
     additionalNodesProps?: AdditionalNodesProps;
 }
 
-export const Nodes = ({path, type, additionalNodesProps = {}}: NodesProps) => {
+export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
     const dispatch = useDispatch();
 
     const isClusterNodes = !path;
@@ -90,15 +86,14 @@ export const Nodes = ({path, type, additionalNodesProps = {}}: NodesProps) => {
                 dispatch(setDataWasNotLoaded());
             }
 
-            // For not DB entities we always use /compute endpoint instead of /nodes
-            // since /nodes can return data only for tenants
-            if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
+            // If there is no path, it's cluster Nodes tab
+            if (path && !useNodesEndpoint) {
                 dispatch(getComputeNodes({path}));
             } else {
-                dispatch(getNodes({tenant: path}));
+                dispatch(getNodes({path}));
             }
         },
-        [dispatch, path, type, useNodesEndpoint],
+        [dispatch, path, useNodesEndpoint],
     );
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -28,6 +28,9 @@ const NODES_COLUMNS_IDS = {
     Tablets: 'Tablets',
     TopNodesLoadAverage: 'TopNodesLoadAverage',
     TopNodesMemory: 'TopNodesMemory',
+    SharedCacheUsage: 'SharedCacheUsage',
+    MemoryUsedInAlloc: 'MemoryUsedInAlloc',
+    TotalSessions: 'TotalSessions',
 };
 
 interface GetNodesColumnsProps {
@@ -184,23 +187,61 @@ const topNodesLoadAverageColumn: NodesColumn = {
 
 const topNodesMemoryColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.TopNodesMemory,
-    header: 'Memory',
-    render: ({row}) =>
-        row.MemoryUsed ? (
-            <ProgressViewer
-                value={row.MemoryUsed}
-                capacity={row.MemoryLimit}
-                formatValues={formatStorageValuesToGb}
-                colorizeProgress={true}
-            />
-        ) : (
-            '—'
-        ),
+    header: 'Process',
+    render: ({row}) => (
+        <ProgressViewer
+            value={row.MemoryUsed}
+            capacity={row.MemoryLimit}
+            formatValues={formatStorageValuesToGb}
+            colorizeProgress={true}
+        />
+    ),
+    align: DataTable.LEFT,
+    width: 140,
+    sortable: false,
+};
+
+const sharedCacheUsageColumn: NodesColumn = {
+    name: NODES_COLUMNS_IDS.SharedCacheUsage,
+    header: 'Tablet Cache',
+    render: ({row}) => (
+        <ProgressViewer
+            value={row.SharedCacheUsed}
+            capacity={row.SharedCacheLimit}
+            formatValues={formatStorageValuesToGb}
+            colorizeProgress={true}
+        />
+    ),
+    align: DataTable.LEFT,
+    width: 140,
+    sortable: false,
+};
+
+const memoryUsedInAllocColumn: NodesColumn = {
+    name: NODES_COLUMNS_IDS.MemoryUsedInAlloc,
+    header: 'Query Runtime',
+    render: ({row}) => (
+        <ProgressViewer
+            value={row.MemoryUsedInAlloc}
+            capacity={row.MemoryLimit}
+            formatValues={formatStorageValuesToGb}
+            colorizeProgress={true}
+        />
+    ),
     align: DataTable.LEFT,
     width: 140,
     sortable: false,
 };
 
+const sessionsColumn: NodesColumn = {
+    name: NODES_COLUMNS_IDS.TotalSessions,
+    header: 'Sessions',
+    render: ({row}) => row.TotalSessions ?? '—',
+    align: DataTable.RIGHT,
+    width: 100,
+    sortable: false,
+};
+
 export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps): NodesColumn[] {
     return [
         nodeIdColumn,
@@ -241,8 +282,11 @@ export function getTopNodesByMemoryColumns({
         nodeIdColumn,
         getHostColumn(getNodeRef),
         uptimeColumn,
-        topNodesMemoryColumn,
         topNodesLoadAverageColumn,
+        topNodesMemoryColumn,
+        sharedCacheUsageColumn,
+        memoryUsedInAllocColumn,
+        sessionsColumn,
         getTabletsColumn(tabletsPath),
     ];
 }

package/dist/containers/Tablets/Tablets.tsx

@@ -34,14 +34,9 @@ interface TabletsProps {
 export const Tablets = ({path, nodeId, className}: TabletsProps) => {
     const dispatch = useDispatch();
 
-    const {
-        data = {},
-        wasLoaded,
-        loading,
-        error,
-        stateFilter,
-        typeFilter,
-    } = useTypedSelector((state) => state.tablets);
+    const {data, wasLoaded, loading, error, stateFilter, typeFilter} = useTypedSelector(
+        (state) => state.tablets,
+    );
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const tablets = useMemo(() => data?.TabletStateInfo || [], [data]);

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

@@ -123,7 +123,6 @@ function Diagnostics(props: DiagnosticsProps) {
                 return (
                     <Nodes
                         path={currentSchemaPath}
-                        type={type}
                         additionalNodesProps={props.additionalNodesProps}
                     />
                 );

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -18,6 +18,8 @@ import {changeFilter, ProblemFilterValues} from '../../../../store/reducers/sett
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
+import {getConnectedNodesCount} from './utils';
+
 import './Network.scss';
 
 const b = cn('network');
@@ -145,11 +147,6 @@ class Network extends React.Component {
         );
     };
 
-    getConnectedNodesCount = (peers) => {
-        const res = peers?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
-        return res;
-    };
-
     renderNodes = (nodes, isRight) => {
         const {showId, showRacks, clickedNode} = this.state;
         let problemNodesCount = 0;
@@ -171,9 +168,7 @@ class Network extends React.Component {
                                           let capacity, connected;
                                           if (!isRight && nodeInfo?.Peers) {
                                               capacity = Object.keys(nodeInfo?.Peers).length;
-                                              connected = this.getConnectedNodesCount(
-                                                  nodeInfo?.Peers,
-                                              );
+                                              connected = getConnectedNodesCount(nodeInfo?.Peers);
                                           }
 
                                           if (
@@ -214,7 +209,7 @@ class Network extends React.Component {
                                   let capacity, connected;
                                   if (!isRight) {
                                       capacity = nodeInfo?.Peers?.length;
-                                      connected = this.getConnectedNodesCount(nodeInfo?.Peers);
+                                      connected = getConnectedNodesCount(nodeInfo?.Peers);
                                   }
 
                                   if (
@@ -234,7 +229,7 @@ class Network extends React.Component {
                                               capacity={nodeInfo?.Peers && nodeInfo?.Peers.length}
                                               connected={
                                                   nodeInfo?.Peers &&
-                                                  this.getConnectedNodesCount(nodeInfo?.Peers)
+                                                  getConnectedNodesCount(nodeInfo?.Peers)
                                               }
                                               onMouseEnter={showTooltip}
                                               onMouseLeave={hideTooltip}