ydb-embedded-ui 4.21.1 → 4.23.0

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx

@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     getTopNodesByLoad,
     selectTopNodesByLoad,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByLoadColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByLoadProps {
@@ -21,6 +25,8 @@ interface TopNodesByLoadProps {
 export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByLoad);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByLoad);
@@ -39,11 +45,20 @@ export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-load'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by load"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx

@@ -3,6 +3,7 @@ import {useHistory, useLocation} from 'react-router';
 import {useCallback} from 'react';
 
 import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_PAGE,
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
@@ -14,9 +15,13 @@ import {
 import {changeUserInput} from '../../../../../store/reducers/executeQuery';
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
 import {parseQuery} from '../../../../../routes';
+
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {getTenantOverviewTopQueriesColumns} from '../../TopQueries/getTopQueriesColumns';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopQueriesProps {
     path: string;
@@ -27,6 +32,8 @@ export function TopQueries({path}: TopQueriesProps) {
     const location = useLocation();
     const history = useHistory();
 
+    const query = parseQuery(location);
+
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const {
@@ -68,12 +75,21 @@ export function TopQueries({path}: TopQueriesProps) {
         [dispatch, history, location],
     );
 
+    const title = getSectionTitle({
+        entity: i18n('queries'),
+        postfix: i18n('by-cpu-time'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
             onRowClick={handleRowClick}
-            title="Top queries by cpu time"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx

@@ -2,12 +2,20 @@ import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
 
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {parseQuery} from '../../../../../routes';
+
 import {
     sendTenantOverviewTopShardsQuery,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {getTopShardsColumns} from '../../TopShards/getTopShardsColumns';
+
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopShardsProps {
     path: string;
@@ -17,6 +25,8 @@ export const TopShards = ({path}: TopShardsProps) => {
     const dispatch = useDispatch();
     const location = useLocation();
 
+    const query = parseQuery(location);
+
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
 
     const {
@@ -39,11 +49,20 @@ export const TopShards = ({path}: TopShardsProps) => {
 
     const columns = getTopShardsColumns(path, location);
 
+    const title = getSectionTitle({
+        entity: i18n('shards'),
+        postfix: i18n('by-cpu-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
-            title="Top shards by cpu usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx

@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useTypedSelector, useSearchQuery} from '../../../../../utils/hooks';
 import {
     getTopNodesByMemory,
     selectTopNodesByMemory,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByMemoryColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByMemoryProps {
@@ -21,6 +25,8 @@ interface TopNodesByMemoryProps {
 export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByMemory);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByMemory);
@@ -41,11 +47,20 @@ export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryP
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-memory'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by memory"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
 
 import DataTable from '@gravity-ui/react-data-table';
@@ -14,7 +15,7 @@ import {ResponseError} from '../../../../components/Errors/ResponseError';
 const b = cn('tenant-overview');
 
 interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
-    title: string;
+    title: ReactNode;
     loading?: boolean;
     wasLoaded?: boolean;
     error?: IResponseError;

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx

@@ -1,14 +1,20 @@
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     setDataWasNotLoaded,
     getTopStorageGroups,
     selectTopStorageGroups,
 } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {getStorageTopGroupsColumns} from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
+
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopGroupsProps {
     tenant?: string;
@@ -17,6 +23,8 @@ interface TopGroupsProps {
 export function TopGroups({tenant}: TopGroupsProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const {loading, wasLoaded, error} = useTypedSelector((state) => state.topStorageGroups);
     const topGroups = useTypedSelector(selectTopStorageGroups);
@@ -36,11 +44,20 @@ export function TopGroups({tenant}: TopGroupsProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('groups'),
+        postfix: i18n('by-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topGroups || []}
             columns={columns}
-            title="Top groups by usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

@@ -12,7 +12,10 @@ import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 import '../TenantOverview.scss';
 
@@ -72,12 +75,16 @@ export function TopTables({path}: TopTablesProps) {
                 ) : null,
         },
     ];
+    const title = getSectionTitle({
+        entity: i18n('tables'),
+        postfix: i18n('by-size'),
+    });
 
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
-            title="Top tables by size"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -0,0 +1,28 @@
+import {InternalLink} from '../../../../components/InternalLink/InternalLink';
+
+import i18n from './i18n';
+
+interface GetSectionTitleParams {
+    entity: string;
+    postfix: string;
+    prefix?: string;
+    link?: string;
+}
+
+// Titles are formed by the principle "Top entities by parameter"
+export const getSectionTitle = ({
+    prefix = i18n('top'),
+    entity,
+    postfix,
+    link,
+}: GetSectionTitleParams) => {
+    if (link) {
+        return (
+            <>
+                {prefix} <InternalLink to={link}>{entity}</InternalLink> {postfix}
+            </>
+        );
+    }
+
+    return `${prefix} ${entity} ${postfix}`;
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -7,5 +7,21 @@
   "title.pools": "Pools",
   "title.metrics": "Metrics",
 
-  "top-groups.empty-data": "No such groups"
+  "top-groups.empty-data": "No such groups",
+
+  "top": "Top",
+
+  "nodes": "nodes",
+  "shards": "shards",
+  "groups": "groups",
+  "queries": "queries",
+  "tables": "tables",
+
+  "by-pools-usage": "by pools usage",
+  "by-cpu-time": "by cpu time",
+  "by-cpu-usage": "by cpu usage",
+  "by-load": "by load",
+  "by-memory": "by memory",
+  "by-usage": "by usage",
+  "by-size": "by size"
 }

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

@@ -7,5 +7,21 @@
   "title.pools": "Пулы",
   "title.metrics": "Метрики",
 
-  "top-groups.empty-data": "Нет групп"
+  "top-groups.empty-data": "Нет групп",
+
+  "top": "Топ",
+
+  "nodes": "узлов",
+  "shards": "шардов",
+  "groups": "групп",
+  "queries": "запросов",
+  "tables": "таблиц",
+
+  "by-pools-usage": "по использованию пулов",
+  "by-cpu-time": "по времени cpu",
+  "by-cpu-usage": "по использованию cpu",
+  "by-load": "по нагрузке",
+  "by-memory": "по памяти",
+  "by-usage": "по потреблению",
+  "by-size": "по размеру"
 }

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