ydb-embedded-ui 3.4.5 → 4.0.0

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

@@ -1,5 +1,7 @@
 import {useCallback, useEffect, useRef, useState} from 'react';
 import {useDispatch} from 'react-redux';
+import {useHistory, useLocation} from 'react-router';
+import qs from 'qs';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
@@ -21,13 +23,14 @@ import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
 
-import {formatDateTime} from '../../../../utils';
+import {formatDateTime, formatNumber} from '../../../../utils';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
+import routes, {createHref} from '../../../../routes';
 
 import {isColumnEntityType} from '../../utils/schema';
-import {TenantGeneralTabsIds} from '../../TenantPages';
+import {TenantGeneralTabsIds, TenantTabsGroups} from '../../TenantPages';
 
 import i18n from './i18n';
 import './TopQueries.scss';
@@ -43,19 +46,41 @@ const MAX_QUERY_HEIGHT = 10;
 const COLUMNS: Column<KeyValueRow>[] = [
     {
         name: 'CPUTimeUs',
-        width: 140,
-        sortAccessor: (row) => Number(row['CPUTimeUs']),
+        sortAccessor: (row) => Number(row.CPUTimeUs),
+        align: DataTable.RIGHT,
     },
     {
         name: 'QueryText',
         width: 500,
         sortable: false,
-        render: ({value}) => <TruncatedQuery value={value} maxQueryHeight={MAX_QUERY_HEIGHT} />,
+        render: ({row}) => (
+            <div className={b('query')}>
+                <TruncatedQuery value={row.QueryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
+            </div>
+        ),
+    },
+    {
+        name: 'EndTime',
+        render: ({row}) => formatDateTime(new Date(row.EndTime as string).getTime()),
+        align: DataTable.RIGHT,
+    },
+    {
+        name: 'ReadRows',
+        render: ({row}) => formatNumber(row.ReadRows),
+        sortAccessor: (row) => Number(row.ReadRows),
+        align: DataTable.RIGHT,
+    },
+    {
+        name: 'ReadBytes',
+        render: ({row}) => formatNumber(row.ReadBytes),
+        sortAccessor: (row) => Number(row.ReadBytes),
+        align: DataTable.RIGHT,
     },
     {
-        name: 'IntervalEnd',
-        width: 140,
-        render: ({value}) => formatDateTime(new Date(value as string).getTime()),
+        name: 'UserSID',
+        render: ({row}) => <div className={b('user-sid')}>{row.UserSID || '–'}</div>,
+        sortAccessor: (row) => String(row.UserSID),
+        align: DataTable.LEFT,
     },
 ];
 
@@ -65,8 +90,10 @@ interface TopQueriesProps {
     type?: EPathType;
 }
 
-export const TopQueries = ({path, type, changeSchemaTab}: TopQueriesProps) => {
+export const TopQueries = ({path, type}: TopQueriesProps) => {
     const dispatch = useDispatch();
+    const location = useLocation();
+    const history = useHistory();
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
@@ -144,9 +171,19 @@ export const TopQueries = ({path, type, changeSchemaTab}: TopQueriesProps) => {
             const {QueryText: input} = row;
 
             dispatch(changeUserInput({input}));
-            changeSchemaTab(TenantGeneralTabsIds.query);
+
+            const queryParams = qs.parse(location.search, {
+                ignoreQueryPrefix: true,
+            });
+
+            const queryPath = createHref(routes.tenant, undefined, {
+                ...queryParams,
+                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
+            });
+
+            history.push(queryPath);
         },
-        [changeSchemaTab, dispatch],
+        [dispatch, history, location],
     );
 
     const handleTextSearchUpdate = (text: string) => {
@@ -179,7 +216,7 @@ export const TopQueries = ({path, type, changeSchemaTab}: TopQueriesProps) => {
         }
 
         return (
-            <div className={b('result')}>
+            <div className={b('table')}>
                 <DataTable
                     columns={COLUMNS}
                     data={data}

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

@@ -20,6 +20,7 @@ import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema
 import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
 
 import type {EPathType} from '../../../../types/api/schema';
+import type {CellValue, KeyValueRow} from '../../../../types/api/query';
 
 import {formatDateTime, formatNumber} from '../../../../utils';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
@@ -57,10 +58,17 @@ const tableColumnsNames = {
     IntervalEnd: 'IntervalEnd',
 };
 
-function prepareCPUWorkloadValue(value: string) {
+function prepareCPUWorkloadValue(value: string | number) {
     return `${(Number(value) * 100).toFixed(2)}%`;
 }
 
+function prepareDateTimeValue(value: CellValue) {
+    if (!value) {
+        return '–';
+    }
+    return formatDateTime(new Date(value).getTime());
+}
+
 function stringToDataTableSortOrder(value: string): SortOrder[] | undefined {
     return value
         ? value.split(',').map((columnId) => ({
@@ -190,16 +198,17 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             };
         };
 
-        const columns: Column<any>[] = [
+        const columns: Column<KeyValueRow>[] = [
             {
                 name: tableColumnsNames.Path,
-                render: ({value: relativeNodePath}) => {
+                render: ({row}) => {
+                    // row.Path - relative schema path
                     return (
                         <span
-                            onClick={onSchemaClick(tenantPath + relativeNodePath)}
+                            onClick={onSchemaClick(tenantPath + row.Path)}
                             className={bLink({view: 'normal'})}
                         >
-                            {relativeNodePath as string}
+                            {row.Path}
                         </span>
                     );
                 },
@@ -207,25 +216,28 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             },
             {
                 name: tableColumnsNames.CPUCores,
-                render: ({value}) => {
-                    return prepareCPUWorkloadValue(value as string);
+                render: ({row}) => {
+                    return prepareCPUWorkloadValue(row.CPUCores || 0);
                 },
                 align: DataTable.RIGHT,
             },
             {
                 name: tableColumnsNames.DataSize,
                 header: 'DataSize (B)',
-                render: ({value}) => {
-                    return formatNumber(value as number);
+                render: ({row}) => {
+                    return formatNumber(row.DataSize);
                 },
                 align: DataTable.RIGHT,
             },
             {
                 name: tableColumnsNames.TabletId,
-                render: ({value}) => {
+                render: ({row}) => {
+                    if (!row.TabletId) {
+                        return '–';
+                    }
                     return (
-                        <InternalLink to={createHref(routes.tablet, {id: value})}>
-                            {value as string}
+                        <InternalLink to={createHref(routes.tablet, {id: row.TabletId})}>
+                            {row.TabletId}
                         </InternalLink>
                     );
                 },
@@ -233,10 +245,13 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             },
             {
                 name: tableColumnsNames.NodeId,
-                render: ({value: nodeId}) => {
+                render: ({row}) => {
+                    if (!row.NodeId) {
+                        return '–';
+                    }
                     return (
-                        <InternalLink to={getDefaultNodePath(nodeId as string)}>
-                            {nodeId as string}
+                        <InternalLink to={getDefaultNodePath(row.NodeId)}>
+                            {row.NodeId}
                         </InternalLink>
                     );
                 },
@@ -245,7 +260,7 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             },
             {
                 name: tableColumnsNames.InFlightTxCount,
-                render: ({value}) => formatNumber(value as number),
+                render: ({row}) => formatNumber(row.InFlightTxCount),
                 align: DataTable.RIGHT,
                 sortable: false,
             },
@@ -255,12 +270,16 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             // after NodeId
             columns.splice(5, 0, {
                 name: tableColumnsNames.PeakTime,
-                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
+                render: ({row}) => {
+                    return prepareDateTimeValue(row.PeakTime);
+                },
                 sortable: false,
             });
             columns.push({
                 name: tableColumnsNames.IntervalEnd,
-                render: ({value}) => formatDateTime(new Date(value as string).getTime()),
+                render: ({row}) => {
+                    return prepareDateTimeValue(row.IntervalEnd);
+                },
             });
         }
 

package/dist/containers/Tenant/QueryEditor/QueriesHistory/QueriesHistory.tsx

@@ -2,8 +2,9 @@ import React, {useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import {Button, Popup} from '@gravity-ui/uikit';
+
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {useSelector} from 'react-redux';
+import {useTypedSelector} from '../../../../utils/hooks';
 
 import './QueriesHistory.scss';
 
@@ -17,8 +18,7 @@ interface QueriesHistoryProps {
 
 function QueriesHistory(props: QueriesHistoryProps) {
     const [isHistoryVisible, setIsHistoryVisible] = useState(false);
-    const history: string[] =
-        useSelector((state: any) => state.executeQuery.history?.queries) ?? [];
+    const history = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
     const anchor = useRef(null);
 
     const onShowHistoryClick = () => {

package/dist/containers/Tenant/QueryEditor/QueryDuration/QueryDuration.scss

@@ -0,0 +1,8 @@
+.ydb-query-duration {
+    display: flex;
+    align-items: center;
+
+    margin-left: 10px;
+
+    color: var(--yc-color-text-complementary);
+}

package/dist/containers/Tenant/QueryEditor/QueryDuration/QueryDuration.tsx

@@ -0,0 +1,21 @@
+import block from 'bem-cn-lite';
+
+import {formatDurationToShortTimeFormat, parseUsToMs} from '../../../../utils/timeParsers';
+
+import './QueryDuration.scss';
+
+interface QueryDurationProps {
+    duration?: string;
+}
+
+const b = block('ydb-query-duration');
+
+export const QueryDuration = ({duration}: QueryDurationProps) => {
+    if (!duration) {
+        return null;
+    }
+
+    const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
+
+    return <span className={b()}>{parsedDuration}</span>;
+};

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

@@ -4,41 +4,36 @@ import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
-import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
 import SplitPane from '../../../components/SplitPane';
 import {QueryResultTable} from '../../../components/QueryResultTable';
 
-import SaveQuery from './SaveQuery/SaveQuery';
 import SavedQueries from './SavedQueries/SavedQueries';
-import {Icon} from '../../../components/Icon';
 import QueryResult from './QueryResult/QueryResult';
 import QueryExplain from './QueryExplain/QueryExplain';
+import {QueryEditorControls} from './QueryEditorControls/QueryEditorControls';
+import {OldQueryEditorControls} from './QueryEditorControls/OldQueryEditorControls';
 
 import {
-    sendQuery,
+    sendExecuteQuery,
     changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
     goToNextQuery,
-    selectRunAction,
-    RUN_ACTIONS_VALUES,
     MONACO_HOT_KEY_ACTIONS,
     setMonacoHotKey,
 } from '../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
-import {getSettingValue, setSettingValue} from '../../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
     SAVED_QUERIES_KEY,
-    QUERY_INITIAL_RUN_ACTION_KEY,
+    QUERY_INITIAL_MODE_KEY,
+    ENABLE_QUERY_MODES_FOR_EXPLAIN,
 } from '../../../utils/constants';
 
-import {parseJson} from '../../../utils/utils';
-
 import './QueryEditor.scss';
-import Divider from '../../../components/Divider/Divider';
 import QueriesHistory from './QueriesHistory/QueriesHistory';
 import {
     PaneVisibilityActionTypes,
@@ -47,11 +42,6 @@ import {
 import Preview from '../Preview/Preview';
 import {setShowPreview} from '../../../store/reducers/schema';
 
-export const RUN_ACTIONS = [
-    {value: RUN_ACTIONS_VALUES.script, content: 'Run Script'},
-    {value: RUN_ACTIONS_VALUES.scan, content: 'Run Scan'},
-];
-
 const TABLE_SETTINGS = {
     sortable: false,
 };
@@ -73,7 +63,7 @@ const RESULT_TYPES = {
 const b = cn('query-editor');
 
 const propTypes = {
-    sendQuery: PropTypes.func,
+    sendExecuteQuery: PropTypes.func,
     path: PropTypes.string,
     response: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
     executeQuery: PropTypes.object,
@@ -81,6 +71,7 @@ const propTypes = {
     setMonacoHotKey: PropTypes.func,
     theme: PropTypes.string,
     type: PropTypes.string,
+    initialQueryMode: PropTypes.string,
 };
 
 const initialTenantCommonInfoState = {
@@ -92,6 +83,7 @@ function QueryEditor(props) {
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
+    const [queryMode, setQueryMode] = useState(props.initialQueryMode);
 
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
@@ -155,7 +147,7 @@ function QueryEditor(props) {
         setMonacoHotKey(null);
         switch (monacoHotKey) {
             case MONACO_HOT_KEY_ACTIONS.sendQuery: {
-                return handleSendClick();
+                return handleSendExecuteClick(queryMode);
             }
             case MONACO_HOT_KEY_ACTIONS.goPrev: {
                 return handlePreviousHistoryClick();
@@ -246,17 +238,17 @@ function QueryEditor(props) {
         props.changeUserInput({input: newValue});
     };
 
-    const handleSendClick = () => {
+    const handleSendExecuteClick = (mode) => {
         const {
             path,
-            executeQuery: {input, history, runAction},
-            sendQuery,
+            executeQuery: {input, history},
+            sendExecuteQuery,
             saveQueryToHistory,
             setShowPreview,
         } = props;
 
         setResultType(RESULT_TYPES.EXECUTE);
-        sendQuery({query: input, database: path, action: runAction});
+        sendExecuteQuery({query: input, database: path, mode});
         setIsResultLoaded(true);
         setShowPreview(false);
 
@@ -267,15 +259,20 @@ function QueryEditor(props) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
 
-    const handleGetExplainQueryClick = () => {
+    const handleGetExplainQueryClick = (mode) => {
         const {
             path,
             executeQuery: {input},
             getExplainQuery,
             setShowPreview,
         } = props;
+
         setResultType(RESULT_TYPES.EXPLAIN);
-        getExplainQuery({query: input, database: path});
+        getExplainQuery({
+            query: input,
+            database: path,
+            mode: mode,
+        });
         setIsResultLoaded(true);
         setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
@@ -513,64 +510,42 @@ function QueryEditor(props) {
         setSettingValue(SAVED_QUERIES_KEY, JSON.stringify(newSavedQueries));
     };
 
-    const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries, selectRunAction, setSettingValue} = props;
-        const {runAction} = executeQuery;
-        const runIsDisabled = !executeQuery.input || executeQuery.loading;
-        const runText = _.find(RUN_ACTIONS, {value: runAction}).content;
-
-        const menuItems = RUN_ACTIONS.map((action) => {
-            return {
-                text: action.content,
-                action: () => {
-                    selectRunAction(action.value);
-                    setSettingValue(QUERY_INITIAL_RUN_ACTION_KEY, action.value);
-                },
-            };
-        });
+    const onUpdateQueryMode = (mode) => {
+        setQueryMode(mode);
+        props.setSettingValue(QUERY_INITIAL_MODE_KEY, mode);
+    };
 
-        return (
-            <div className={b('controls')}>
-                <div className={b('control-run')}>
-                    <Button
-                        onClick={handleSendClick}
-                        view="action"
-                        pin="round-brick"
-                        disabled={runIsDisabled}
-                        loading={executeQuery.loading}
-                    >
-                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                        {runText}
-                    </Button>
-                    <DropdownMenu
-                        items={menuItems}
-                        switcher={
-                            <Button
-                                view="action"
-                                pin="brick-round"
-                                disabled={runIsDisabled}
-                                loading={executeQuery.loading}
-                                className={b('select-query-action')}
-                            >
-                                <Icon name="chevron-down" width={16} height={16} />
-                            </Button>
-                        }
-                    />
-                </div>
-                <Button
-                    onClick={handleGetExplainQueryClick}
-                    disabled={!executeQuery.input}
-                    loading={explainQuery.loading}
-                >
-                    Explain
-                </Button>
-                <Divider />
-                <SaveQuery
+    const renderControls = () => {
+        const {executeQuery, explainQuery, savedQueries, enableQueryModesForExplain} = props;
+
+        if (enableQueryModesForExplain) {
+            return (
+                <QueryEditorControls
+                    onRunButtonClick={handleSendExecuteClick}
+                    runIsLoading={executeQuery.loading}
+                    onExplainButtonClick={handleGetExplainQueryClick}
+                    explainIsLoading={explainQuery.loading}
+                    onSaveQueryClick={onSaveQueryHandler}
                     savedQueries={savedQueries}
-                    onSaveQuery={onSaveQueryHandler}
-                    saveButtonDisabled={runIsDisabled}
+                    disabled={!executeQuery.input}
+                    onUpdateQueryMode={onUpdateQueryMode}
+                    queryMode={queryMode}
                 />
-            </div>
+            );
+        }
+
+        return (
+            <OldQueryEditorControls
+                onRunButtonClick={handleSendExecuteClick}
+                runIsLoading={executeQuery.loading}
+                onExplainButtonClick={handleGetExplainQueryClick}
+                explainIsLoading={explainQuery.loading}
+                onSaveQueryClick={onSaveQueryHandler}
+                savedQueries={savedQueries}
+                disabled={!executeQuery.input}
+                onUpdateQueryMode={onUpdateQueryMode}
+                queryMode={queryMode}
+            />
         );
     };
 
@@ -631,7 +606,9 @@ const mapStateToProps = (state) => {
     return {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
-        savedQueries: parseJson(getSettingValue(state, SAVED_QUERIES_KEY)),
+        savedQueries: getParsedSettingValue(state, SAVED_QUERIES_KEY),
+        initialQueryMode: getParsedSettingValue(state, QUERY_INITIAL_MODE_KEY),
+        enableQueryModesForExplain: getParsedSettingValue(state, ENABLE_QUERY_MODES_FOR_EXPLAIN),
         showPreview: state.schema.showPreview,
         currentSchema: state.schema.currentSchema,
         monacoHotKey: state.executeQuery?.monacoHotKey,
@@ -639,7 +616,7 @@ const mapStateToProps = (state) => {
 };
 
 const mapDispatchToProps = {
-    sendQuery,
+    sendExecuteQuery,
     changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
@@ -647,7 +624,6 @@ const mapDispatchToProps = {
     getExplainQuery,
     getExplainQueryAst,
     setSettingValue,
-    selectRunAction,
     setShowPreview,
     setMonacoHotKey,
 };

package/dist/containers/Tenant/QueryEditor/QueryEditor.scss

@@ -54,35 +54,6 @@
         align-items: center;
     }
 
-    &__controls {
-        display: flex;
-        flex: 0 0 40px;
-        align-items: flex-end;
-
-        min-height: 40px;
-        padding: 5px 20px;
-
-        border-top: 1px solid var(--yc-color-line-generic);
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
-        gap: 12px;
-    }
-
-    &__control-run {
-        display: flex;
-        align-items: center;
-        .yc-select__option-text {
-            display: none;
-        }
-
-        .yc-button__text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-        }
-    }
-
     &__history-controls {
         display: flex;
         align-items: center;
@@ -93,8 +64,4 @@
 
         color: var(--yc-color-text-secondary);
     }
-
-    &__select-query-action {
-        margin-left: 2px;
-    }
 }