ydb-embedded-ui 4.21.1 → 4.22.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
 
 

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/NodeStructure/Pdisk.tsx

@@ -16,7 +16,10 @@ 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';
+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';

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

package/dist/containers/Tenant/Diagnostics/Network/utils.ts

@@ -0,0 +1,6 @@
+import type {TNetNodePeerInfo} from '../../../../types/api/netInfo';
+
+// determine how many nodes have status Connected "true"
+export const getConnectedNodesCount = (peers: TNetNodePeerInfo[] | undefined) => {
+    return peers?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
+};

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss

@@ -13,11 +13,19 @@
         & .data-table__table-wrapper {
             padding-bottom: 0;
         }
-        &_fullscreen {
-            width: 100%;
-            margin-top: 10px;
-            padding: 0 10px 10px;
-        }
+    }
+
+    &__result-fullscreen-wrapper {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        margin-top: 10px;
+        padding: 0 10px 10px;
+    }
+
+    &__result-tabs {
+        padding-left: 10px;
     }
 
     &__error {

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

@@ -1,26 +1,30 @@
-import React, {type ReactNode, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 import JSONTree from 'react-json-inspector';
 
-import {RadioButton} from '@gravity-ui/uikit';
+import {RadioButton, Tabs} from '@gravity-ui/uikit';
 
 import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
+import {QueryResultTable} from '../../../../components/QueryResultTable/QueryResultTable';
 
 import type {ValueOf} from '../../../../types/common';
 import type {IQueryResult, QueryErrorResponse} from '../../../../types/store/query';
+import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 import {prepareQueryError} from '../../../../utils/query';
 import {useTypedSelector} from '../../../../utils/hooks';
+import {getArray} from '../../../../utils';
 
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
 import {ResultIssues} from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
+import {getPreparedResult} from '../utils/getPreparedResult';
 
 import './ExecuteResult.scss';
 
@@ -39,30 +43,35 @@ const resultOptions = [
 ];
 
 interface ExecuteResultProps {
-    textResults: string;
-    result: ReactNode;
+    data: IQueryResult | undefined;
     stats: IQueryResult['stats'] | undefined;
     error: string | QueryErrorResponse | undefined;
-    copyDisabled?: boolean;
     isResultsCollapsed?: boolean;
     onCollapseResults: VoidFunction;
     onExpandResults: VoidFunction;
 }
 
 export function ExecuteResult({
-    textResults,
-    result,
+    data,
     stats,
     error,
-    copyDisabled,
     isResultsCollapsed,
     onCollapseResults,
     onExpandResults,
 }: ExecuteResultProps) {
+    const [selectedResultSet, setSelectedResultSet] = useState(0);
     const [activeSection, setActiveSection] = useState<SectionID>(resultOptionsIds.result);
+
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useDispatch();
 
+    const resultsSetsCount = data?.resultSets?.length;
+    const isMulti = resultsSetsCount && resultsSetsCount > 0;
+    const currentResult = isMulti ? data?.resultSets?.[selectedResultSet].result : data?.result;
+    const currentColumns = isMulti ? data?.resultSets?.[selectedResultSet].columns : data?.columns;
+    const textResults = getPreparedResult(currentResult);
+    const copyDisabled = !textResults.length;
+
     useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
@@ -73,6 +82,37 @@ export function ExecuteResult({
         setActiveSection(value as SectionID);
     };
 
+    const renderResultTable = (
+        result: KeyValueRow[] | undefined,
+        columns: ColumnType[] | undefined,
+    ) => {
+        return <QueryResultTable data={result} columns={columns} settings={{sortable: false}} />;
+    };
+
+    const renderContent = () => {
+        return (
+            <>
+                {isMulti && resultsSetsCount > 1 && (
+                    <div>
+                        <Tabs
+                            className={b('result-tabs')}
+                            size="l"
+                            items={getArray(resultsSetsCount).map((item) => ({
+                                id: String(item),
+                                title: `Result #${item + 1}`,
+                            }))}
+                            activeTab={String(selectedResultSet)}
+                            onSelectTab={(tabId) => setSelectedResultSet(Number(tabId))}
+                        />
+                    </div>
+                )}
+                <div className={b('result')}>
+                    {renderResultTable(currentResult, currentColumns)}
+                </div>
+            </>
+        );
+    };
+
     const renderClipboardButton = () => {
         return (
             <CopyToClipboard
@@ -108,12 +148,14 @@ export function ExecuteResult({
     };
 
     const renderResult = () => {
+        const content = renderContent();
+
         return (
             <React.Fragment>
-                {result}
+                {content}
                 {isFullscreen && (
                     <Fullscreen>
-                        <div className={b('result', {fullscreen: true})}>{result}</div>
+                        <div className={b('result-fullscreen-wrapper')}>{content}</div>
                     </Fullscreen>
                 )}
             </React.Fragment>
@@ -126,13 +168,15 @@ export function ExecuteResult({
         }
 
         if (typeof error === 'object' && error.data?.issues && Array.isArray(error.data.issues)) {
+            const content = <ResultIssues data={error.data} />;
+
             return (
                 <React.Fragment>
-                    <ResultIssues data={error.data} />
+                    {content}
                     {isFullscreen && (
                         <Fullscreen>
-                            <div className={b('result', {fullscreen: true})}>
-                                <ResultIssues data={error.data} />
+                            <div className={b('result-fullscreen-wrapper', b('result'))}>
+                                {content}
                             </div>
                         </Fullscreen>
                     )}
@@ -145,6 +189,19 @@ export function ExecuteResult({
         return <div className={b('error')}>{parsedError}</div>;
     };
 
+    const renderResultSection = () => {
+        if (activeSection === resultOptionsIds.result && !error) {
+            return renderResult();
+        }
+
+        return (
+            <div className={b('result')}>
+                {activeSection === resultOptionsIds.stats && !error && renderStats()}
+                {renderIssues()}
+            </div>
+        );
+    };
+
     return (
         <React.Fragment>
             <div className={b('controls')}>
@@ -174,11 +231,8 @@ export function ExecuteResult({
                     />
                 </div>
             </div>
-            <div className={b('result')}>
-                {activeSection === resultOptionsIds.result && !error && renderResult()}
-                {activeSection === resultOptionsIds.stats && !error && renderStats()}
-                {renderIssues()}
-            </div>
+
+            {renderResultSection()}
         </React.Fragment>
     );
 }

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.js

@@ -16,11 +16,12 @@ import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus'
 import {explainVersions} from '../../../../store/reducers/explainQuery';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
-import {renderExplainNode} from '../../../../utils';
 import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
 
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
+import {renderExplainNode} from './utils';
+
 import './ExplainResult.scss';
 
 const b = cn('ydb-query-explain-result');

package/dist/containers/Tenant/Query/ExplainResult/utils.ts

@@ -0,0 +1,6 @@
+import type {GraphNode} from '@gravity-ui/paranoid';
+
+export const renderExplainNode = (node: GraphNode): string => {
+    const parts = node.name.split('|');
+    return parts.length > 1 ? parts[1] : node.name;
+};

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -6,7 +6,6 @@ import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
 
 import SplitPane from '../../../../components/SplitPane';
-import {QueryResultTable} from '../../../../components/QueryResultTable';
 
 import {
     sendExecuteQuery,
@@ -26,6 +25,7 @@ import {
     SAVED_QUERIES_KEY,
     ENABLE_ADDITIONAL_QUERY_MODES,
     LAST_USED_QUERY_ACTION_KEY,
+    QUERY_USE_MULTI_SCHEMA_KEY,
 } from '../../../../utils/constants';
 import {useSetting, useQueryModes} from '../../../../utils/hooks';
 import {QUERY_ACTIONS, QUERY_MODES, isNewQueryMode} from '../../../../utils/query';
@@ -40,14 +40,8 @@ import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
 import {ExplainResult} from '../ExplainResult/ExplainResult';
 import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
 
-import {getPreparedResult} from '../utils/getPreparedResult';
-
 import './QueryEditor.scss';
 
-const TABLE_SETTINGS = {
-    sortable: false,
-};
-
 const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -92,6 +86,7 @@ function QueryEditor(props) {
     const [isResultLoaded, setIsResultLoaded] = useState(false);
     const [queryMode, setQueryMode] = useQueryModes();
     const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
+    const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
 
     useEffect(() => {
@@ -256,9 +251,16 @@ function QueryEditor(props) {
             setShowPreview,
         } = props;
 
+        const schema = useMultiSchema ? 'multi' : 'modern';
+
         setLastUsedQueryAction(QUERY_ACTIONS.execute);
         setResultType(RESULT_TYPES.EXECUTE);
-        sendExecuteQuery({query: input, database: path, mode});
+        sendExecuteQuery({
+            query: input,
+            database: path,
+            mode,
+            schema,
+        });
         setIsResultLoaded(true);
         setShowPreview(false);
 
@@ -314,26 +316,11 @@ function QueryEditor(props) {
             executeQuery: {data, error, stats},
         } = props;
 
-        let content;
-        if (data) {
-            content = (
-                <QueryResultTable
-                    data={data.result}
-                    columns={data.columns}
-                    settings={TABLE_SETTINGS}
-                />
-            );
-        }
-        const textResults = getPreparedResult(data);
-        const disabled = !textResults.length || resultType !== RESULT_TYPES.EXECUTE;
-
         return data || error ? (
             <ExecuteResult
-                result={content}
+                data={data}
                 stats={stats}
                 error={error}
-                textResults={textResults}
-                copyDisabled={disabled}
                 isResultsCollapsed={resultVisibilityState.collapsed}
                 onExpandResults={onExpandResultHandler}
                 onCollapseResults={onCollapseResultHandler}

package/dist/containers/Tenant/Query/utils/getPreparedResult.ts

@@ -1,16 +1,15 @@
 import type {KeyValueRow} from '../../../../types/api/query';
-import type {IQueryResult} from '../../../../types/store/query';
 
-export const getPreparedResult = (data: IQueryResult) => {
+export const getPreparedResult = (data: KeyValueRow[] | undefined) => {
     const columnDivider = '\t';
     const rowDivider = '\n';
 
-    if (!data?.result?.length) {
+    if (!data?.length) {
         return '';
     }
 
-    const columnHeaders = Object.keys(data.result[0]);
-    const rows = Array<string[] | KeyValueRow[]>(columnHeaders).concat(data.result);
+    const columnHeaders = Object.keys(data[0]);
+    const rows = Array<string[] | KeyValueRow[]>(columnHeaders).concat(data);
 
     return rows
         .map((item) => {

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

@@ -25,6 +25,9 @@
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
   "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions",
 
+  "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
+  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older",
+
   "settings.tenantDiagnostics.title": "Display metrics cards for database diagnostics",
   "settings.tenantDiagnostics.popover": "Adds indicators of database resources usage. Incomplete data may be displayed for some databases"
 }

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

@@ -25,6 +25,9 @@
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
   "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях",
 
+  "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
+  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще",
+
   "settings.tenantDiagnostics.title": "Показывать карточки с метриками в диагностике базы данных",
   "settings.tenantDiagnostics.popover": "Добавляет индикаторы использования ресурсов базы данных. Для некоторых баз могут отображаться неполные данные"
 }

package/dist/containers/UserSettings/settings.ts

@@ -11,6 +11,7 @@ import {
     THEME_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+    QUERY_USE_MULTI_SCHEMA_KEY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
 
@@ -95,6 +96,11 @@ export const enableQueryModesForExplainSetting: SettingProps = {
     title: i18n('settings.enableAdditionalQueryModes.title'),
     helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
 };
+export const queryUseMultiSchemaSetting: SettingProps = {
+    settingKey: QUERY_USE_MULTI_SCHEMA_KEY,
+    title: i18n('settings.queryUseMultiSchema.title'),
+    helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
+};
 export const enableNewTenantDiagnosticsDesign: SettingProps = {
     settingKey: DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
     title: i18n('settings.tenantDiagnostics.title'),
@@ -113,6 +119,7 @@ export const experimentsSection: SettingsSection = {
         useNodesEndpointSetting,
         useBackendParamsForTables,
         enableQueryModesForExplainSetting,
+        queryUseMultiSchemaSetting,
         enableNewTenantDiagnosticsDesign,
     ],
 };

package/dist/store/reducers/executeQuery.ts

@@ -1,6 +1,6 @@
 import type {Reducer} from 'redux';
 
-import type {ExecuteActions} from '../../types/api/query';
+import type {ExecuteActions, Schemas} from '../../types/api/query';
 import type {
     ExecuteQueryAction,
     ExecuteQueryState,
@@ -154,9 +154,10 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
 
 interface SendQueryParams extends QueryRequestParams {
     mode?: QueryMode;
+    schema?: Schemas;
 }
 
-export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {
+export const sendExecuteQuery = ({query, database, mode, schema = 'modern'}: SendQueryParams) => {
     let action: ExecuteActions = 'execute';
     let syntax: QuerySyntax = QUERY_SYNTAX.yql;
 
@@ -169,7 +170,7 @@ export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {
 
     return createApiRequest({
         request: window.api.sendQuery({
-            schema: 'modern',
+            schema,
             query,
             database,
             action,

package/dist/store/reducers/nodes/types.ts

@@ -30,15 +30,25 @@ export interface NodesPreparedEntity {
     DataCenter?: string;
     Rack?: string;
     Version?: string;
+    TenantName?: string;
+
     StartTime?: string;
     Uptime: string;
+    DisconnectTime?: string;
+
     MemoryUsed?: string;
+    MemoryUsedInAlloc?: string;
     MemoryLimit?: string;
+
+    SharedCacheUsed?: string;
+    SharedCacheLimit?: string | number;
+
     PoolStats?: TPoolStats[];
     LoadAverage?: number[];
     Tablets?: TFullTabletStateInfo[] | TComputeTabletStateInfo[];
-    TenantName?: string;
     Endpoints?: TEndpoint[];
+
+    TotalSessions?: number;
 }
 
 export interface NodesState {

package/dist/store/reducers/nodes/utils.ts

@@ -50,12 +50,18 @@ export const prepareNodesData = (data: TNodesInfo): NodesHandledResponse => {
     const rawNodes = data.Nodes || [];
 
     const preparedNodes = rawNodes.map((node) => {
+        // 0 limit means that limit is not set, so it should be undefined
+        const sharedCacheLimit = Number(node.SystemState.SharedCacheStats?.LimitBytes) || undefined;
+
         return {
             ...node.SystemState,
             Tablets: node.Tablets,
             NodeId: node.NodeId,
             Uptime: calcUptime(node.SystemState?.StartTime),
             TenantName: node.SystemState?.Tenants?.[0],
+
+            SharedCacheUsed: node.SystemState.SharedCacheStats?.UsedBytes,
+            SharedCacheLimit: sharedCacheLimit,
         };
     });
 

package/dist/store/reducers/settings/settings.ts

@@ -16,6 +16,7 @@ import {
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     LANGUAGE_KEY,
     DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
+    QUERY_USE_MULTI_SCHEMA_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {parseJson} from '../../../utils/utils';
@@ -56,6 +57,7 @@ export const initialState = {
             ENABLE_ADDITIONAL_QUERY_MODES,
             'true',
         ),
+        [QUERY_USE_MULTI_SCHEMA_KEY]: readSavedSettingsValue(QUERY_USE_MULTI_SCHEMA_KEY, 'false'),
         [DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS]: readSavedSettingsValue(
             DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
             'true',

package/dist/types/api/netInfo.ts

@@ -27,7 +27,7 @@ interface TNetNodeInfo {
     Port: number;
 }
 
-interface TNetNodePeerInfo {
+export interface TNetNodePeerInfo {
     NodeId: number;
     PeerName: string;
     Connected: boolean;

package/dist/types/api/nodes.ts

@@ -26,6 +26,9 @@ export interface TNodeInfo {
     Tablets?: TTabletStateInfo[];
 }
 
+/**
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/node_whiteboard.proto
+ */
 export interface TSystemStateInfo {
     /** uint64 */
     StartTime?: string;
@@ -62,6 +65,20 @@ export interface TSystemStateInfo {
     /** double */
     MaxDiskUsage?: number;
     Location?: TNodeLocation;
+
+    /**
+     * int64
+     *
+     * a positive value means the peer is ahead in time; a negative value means it's behind
+     */
+    MaxClockSkewWithPeerUs?: string;
+    MaxClockSkewPeerId?: number;
+
+    /** uint64 */
+    DisconnectTime?: string;
+
+    SharedCacheStats?: TNodeSharedCache;
+    TotalSessions?: number;
 }
 
 export interface TPoolStats {
@@ -97,6 +114,13 @@ interface TNodeLocation {
     Unit?: string;
 }
 
+interface TNodeSharedCache {
+    /** uint64 */
+    UsedBytes: string;
+    /** uint64 */
+    LimitBytes: string;
+}
+
 enum EConfigState {
     'Consistent' = 'Consistent',
     'Outdated' = 'Outdated',

package/dist/types/api/query.ts

@@ -180,7 +180,7 @@ export interface ColumnType {
 }
 
 /** undefined = 'classic' */
-export type Schemas = 'classic' | 'modern' | 'ydb' | undefined;
+export type Schemas = 'classic' | 'modern' | 'ydb' | 'multi' | undefined;
 
 /** undefined = 'execute' */
 export type ExecuteActions =
@@ -231,16 +231,29 @@ export type ExplainResponse<Action extends ExplainActions> = Action extends 'exp
     ? ExplainScriptResponse
     : ExplainQueryResponse;
 
+// ==== Execute Results ====
+
+interface ModernSchemaResult {
+    result?: ArrayRow[];
+    columns?: ColumnType[];
+}
+interface MultiSchemaResult {
+    result?: {
+        rows?: ArrayRow[] | null;
+        columns?: ColumnType[];
+    }[];
+}
+interface DefaultSchemaResult {
+    result?: KeyValueRow[];
+}
+
 // ==== Execute Responses ====
 
 type ResultFields<Schema extends Schemas> = Schema extends 'modern'
-    ? {
-          result?: ArrayRow[];
-          columns?: ColumnType[];
-      }
-    : {
-          result?: KeyValueRow[];
-      };
+    ? ModernSchemaResult
+    : Schema extends 'multi'
+    ? MultiSchemaResult
+    : DefaultSchemaResult;
 
 /**
  * meta.type = 'query'
@@ -287,6 +300,7 @@ export type AnyExplainResponse = ExplainQueryResponse | ExplainScriptResponse;
 export type ExecuteModernResponse =
     | ExecuteQueryResponse<'modern'>
     | ExecuteScriptResponse<'modern'>;
+export type ExecuteMultiResponse = ExecuteQueryResponse<'multi'> | ExecuteScriptResponse<'multi'>;
 export type ExecuteClassicResponse =
     | ExecuteQueryResponse<'classic'>
     | ExecuteScriptResponse<'classic'>;
@@ -294,5 +308,6 @@ export type ExecuteYdbResponse = ExecuteQueryResponse<'ydb'> | ExecuteScriptResp
 
 export type AnyExecuteResponse =
     | ExecuteModernResponse
+    | ExecuteMultiResponse
     | ExecuteClassicResponse
     | ExecuteYdbResponse;

package/dist/types/store/query.ts

@@ -11,7 +11,13 @@ import type {
 } from '../api/query';
 import type {ValueOf} from '../common';
 
+export interface ParsedResultSet {
+    columns?: ColumnType[];
+    result?: KeyValueRow[];
+}
+
 export interface IQueryResult {
+    resultSets?: ParsedResultSet[];
     result?: KeyValueRow[];
     columns?: ColumnType[];
     stats?: TKqpStatsQuery;

package/dist/utils/constants.ts

@@ -133,3 +133,6 @@ export const TENANT_INITIAL_PAGE_KEY = 'saved_tenant_initial_tab';
 
 // Send filters and sort params to backend for Nodes and Storage tables
 export const USE_BACKEND_PARAMS_FOR_TABLES_KEY = 'useBackendParamsForTables';
+
+// Enable schema that supports multiple resultsets
+export const QUERY_USE_MULTI_SCHEMA_KEY = 'queryUseMultiSchema';

package/dist/utils/developerUI/__test__/developerUI.test.ts

@@ -0,0 +1,50 @@
+import {
+    createDeveloperUILinkWithNodeId,
+    createPDiskDeveloperUILink,
+    createVDiskDeveloperUILink,
+} from '../developerUI';
+
+describe('Developer UI links generators', () => {
+    describe('createDeveloperUILinkWithNodeId', () => {
+        it('should create relative link with no host', () => {
+            expect(createDeveloperUILinkWithNodeId(1)).toBe('/node/1/');
+        });
+        it('should create relative link with existing relative path with nodeId', () => {
+            expect(createDeveloperUILinkWithNodeId(1, '/node/3/')).toBe('/node/1/');
+        });
+        it('should create full link with host', () => {
+            expect(
+                createDeveloperUILinkWithNodeId(
+                    1,
+                    'http://ydb-vla-dev02-001.search.yandex.net:8765',
+                ),
+            ).toBe('http://ydb-vla-dev02-001.search.yandex.net:8765/node/1/');
+        });
+        it('should create full link with host with existing node path with nodeId', () => {
+            expect(
+                createDeveloperUILinkWithNodeId(
+                    1,
+                    'http://ydb-vla-dev02-001.search.yandex.net:8765/node/3',
+                ),
+            ).toBe('http://ydb-vla-dev02-001.search.yandex.net:8765/node/1/');
+        });
+    });
+    describe('createPDiskDeveloperUILink', () => {
+        it('should create link with pDiskId and nodeId', () => {
+            expect(createPDiskDeveloperUILink({nodeId: 1, pDiskId: 1})).toBe(
+                '/node/1/actors/pdisks/pdisk000000001',
+            );
+        });
+    });
+    describe('createVDiskDeveloperUILink', () => {
+        it('should create link with pDiskId, vDiskSlotId nodeId', () => {
+            expect(
+                createVDiskDeveloperUILink({
+                    nodeId: 1,
+                    pDiskId: 1,
+                    vDiskSlotId: 1,
+                }),
+            ).toBe('/node/1/actors/vdisks/vdisk000000001_000000001');
+        });
+    });
+});

package/dist/utils/developerUI/developerUI.ts

@@ -0,0 +1,42 @@
+import {backend} from '../../store';
+import {pad9} from '../utils';
+
+// Current node connects with target node by itself using nodeId
+export const createDeveloperUILinkWithNodeId = (nodeId: number | string, host = backend) => {
+    const nodePathRegexp = /\/node\/\d+\/?$/g;
+
+    // In case current backend is already relative node path ({host}/node/{nodeId})
+    // We replace existing nodeId path with new nodeId path
+    if (nodePathRegexp.test(String(host))) {
+        return String(host).replace(nodePathRegexp, `/node/${nodeId}/`);
+    }
+
+    return `${host ?? ''}/node/${nodeId}/`;
+};
+
+interface PDiskDeveloperUILinkParams {
+    nodeId: number | string;
+    pDiskId: number | string;
+    host?: string;
+}
+
+export const createPDiskDeveloperUILink = ({nodeId, pDiskId, host}: PDiskDeveloperUILinkParams) => {
+    const pdiskPath = 'actors/pdisks/pdisk' + pad9(pDiskId);
+
+    return createDeveloperUILinkWithNodeId(nodeId, host) + pdiskPath;
+};
+
+interface VDiskDeveloperUILinkParams extends PDiskDeveloperUILinkParams {
+    vDiskSlotId: number | string;
+}
+
+export const createVDiskDeveloperUILink = ({
+    nodeId,
+    pDiskId,
+    vDiskSlotId,
+    host,
+}: VDiskDeveloperUILinkParams) => {
+    const vdiskPath = 'actors/vdisks/vdisk' + pad9(pDiskId) + '_' + pad9(vDiskSlotId);
+
+    return createDeveloperUILinkWithNodeId(nodeId, host) + vdiskPath;
+};

package/dist/utils/diagnostics.ts

@@ -3,6 +3,7 @@ import {ValueOf} from '../types/common';
 const TOP_SHARDS_SORT_VALUES = {
     CPUCores: 'CPUCores',
     DataSize: 'DataSize',
+    InFlightTxCount: 'InFlightTxCount',
 } as const;
 
 const TOP_QUERIES_SORT_VALUES = {

package/dist/utils/query.ts

@@ -2,7 +2,10 @@ import {YQLType} from '../types';
 import type {
     AnyExecuteResponse,
     AnyExplainResponse,
+    ArrayRow,
+    ColumnType,
     ExecuteModernResponse,
+    ExecuteMultiResponse,
     KeyValueRow,
     QueryPlan,
     ScriptPlan,
@@ -76,34 +79,74 @@ export const getColumnType = (type: string) => {
     }
 };
 
-/** parse response result field from ArrayRow to KeyValueRow */
+/** parse response result from ArrayRow to KeyValueRow */
+const parseModernResult = (rows: ArrayRow[], columns: ColumnType[]) => {
+    return rows.map((row) => {
+        return row.reduce<KeyValueRow>((newRow, cellData, columnIndex) => {
+            const {name} = columns[columnIndex];
+            newRow[name] = cellData;
+            return newRow;
+        }, {});
+    });
+};
+
 const parseExecuteModernResponse = (data: ExecuteModernResponse): IQueryResult => {
     const {result, columns, ...restData} = data;
 
     return {
-        result:
-            result &&
-            columns &&
-            result.map((row) => {
-                return row.reduce((newRow, cellData, columnIndex) => {
-                    const {name} = columns[columnIndex];
-                    newRow[name] = cellData;
-                    return newRow;
-                }, {} as KeyValueRow);
-            }),
+        result: result && columns && parseModernResult(result, columns),
         columns,
         ...restData,
     };
 };
 
+const parseExecuteMultiResponse = (data: ExecuteMultiResponse): IQueryResult => {
+    const {result, ...restData} = data;
+
+    const parsedResult = result?.map((resultSet) => {
+        const {rows, columns} = resultSet;
+
+        let parsedRows: KeyValueRow[] | undefined;
+
+        if (columns) {
+            // Result shouldn't be null if there are columns
+            parsedRows = [];
+        }
+
+        if (rows && columns) {
+            parsedRows = parseModernResult(rows, columns);
+        }
+
+        return {
+            columns: columns,
+            result: parsedRows,
+        };
+    });
+
+    return {
+        resultSets: parsedResult, // use a separate field to make result compatible
+        ...restData,
+    };
+};
+
 const isModern = (response: AnyExecuteResponse): response is ExecuteModernResponse =>
     Boolean(
         response &&
             !Array.isArray(response) &&
-            Array.isArray((response as ExecuteModernResponse).result) &&
+            Array.isArray(response.result) &&
             Array.isArray((response as ExecuteModernResponse).columns),
     );
 
+const isMulti = (response: AnyExecuteResponse): response is ExecuteMultiResponse =>
+    Boolean(
+        response &&
+            !Array.isArray(response) &&
+            Array.isArray(response.result) &&
+            typeof response.result[0] === 'object' &&
+            'rows' in response.result[0] &&
+            'columns' in response.result[0],
+    );
+
 type UnsupportedQueryResponseFormat =
     | Array<unknown>
     | string
@@ -122,12 +165,17 @@ const isUnsupportedType = (
     );
 };
 
+// Although schema is set in request, if schema is not supported default schema for the version will be used
+// So we should additionally parse response
 export const parseQueryAPIExecuteResponse = (
     data: AnyExecuteResponse | UnsupportedQueryResponseFormat,
 ): IQueryResult => {
     if (isUnsupportedType(data)) {
         return {};
     }
+    if (isMulti(data)) {
+        return parseExecuteMultiResponse(data);
+    }
     if (isModern(data)) {
         return parseExecuteModernResponse(data);
     }

package/package.json

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

package/dist/utils/developerUI.ts

@@ -1,32 +0,0 @@
-import {backend} from '../store';
-import {pad9} from './utils';
-
-// Current node connects with target node by itself using nodeId
-export const createDeveloperUILinkWithNodeId = (nodeId: number | string) => {
-    return `${backend}/node/${nodeId}/`;
-};
-
-interface PDiskDeveloperUILinkParams {
-    nodeId: number | string;
-    pDiskId: number | string;
-}
-
-export const createPDiskDeveloperUILink = ({nodeId, pDiskId}: PDiskDeveloperUILinkParams) => {
-    const pdiskPath = 'actors/pdisks/pdisk' + pad9(pDiskId);
-
-    return createDeveloperUILinkWithNodeId(nodeId) + pdiskPath;
-};
-
-interface VDiskDeveloperUILinkParams extends PDiskDeveloperUILinkParams {
-    vDiskSlotId: number | string;
-}
-
-export const createVDiskDeveloperUILink = ({
-    nodeId,
-    pDiskId,
-    vDiskSlotId,
-}: VDiskDeveloperUILinkParams) => {
-    const vdiskPath = 'actors/vdisks/vdisk' + pad9(pDiskId) + '_' + pad9(vDiskSlotId);
-
-    return createDeveloperUILinkWithNodeId(nodeId) + vdiskPath;
-};

package/dist/utils/index.js

@@ -1,9 +0,0 @@
-// determine how many nodes have status Connected "true"
-export const getConnectedNodesCount = (nodeStateInfo) => {
-    return nodeStateInfo?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
-};
-
-export const renderExplainNode = (node) => {
-    const parts = node.name.split('|');
-    return parts.length > 1 ? parts[1] : node.name;
-};