ydb-embedded-ui 4.8.2 → 4.9.0

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

@@ -15,12 +15,6 @@
     }
 
     &__run {
-        display: flex;
-        align-items: center;
-        .yc-select__option-text {
-            display: none;
-        }
-
         .yc-button__text {
             display: flex;
             justify-content: center;
@@ -29,17 +23,11 @@
         }
     }
 
-    &__select-query-action {
-        margin-left: 2px;
-    }
-
     &__mode-selector {
-        &__popup {
-            width: 120px;
-        }
+        $b: &;
 
         &__button {
-            width: 120px;
+            width: 189px;
             margin-left: 2px;
         }
 
@@ -48,7 +36,24 @@
             justify-content: space-between;
             align-items: center;
 
-            width: 100px;
+            width: 163px;
+        }
+
+        &__popup {
+            width: 189px;
+
+            &_extended {
+                width: 241px;
+            }
+        }
+
+        &_extended {
+            #{$b}__button {
+                width: 241px;
+            }
+            #{$b}__button-content {
+                width: 215px;
+            }
         }
     }
 }

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

@@ -1,24 +1,49 @@
-import {Button, DropdownMenu} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+
+import {Button, ButtonView, DropdownMenu} from '@gravity-ui/uikit';
 import {useMemo} from 'react';
 
-import {QueryModes} from '../../../../types/store/query';
+import type {QueryAction, QueryMode} from '../../../../types/store/query';
+import {QUERY_MODES} from '../../../../utils/query';
 import {Icon} from '../../../../components/Icon';
 
 import SaveQuery from '../SaveQuery/SaveQuery';
 
 import i18n from '../i18n';
 
-import {QueryEditorControlsProps, b} from './shared';
-
 import './QueryEditorControls.scss';
 
-export const QueryModeSelectorTitles = {
-    [QueryModes.script]: 'Script',
-    [QueryModes.scan]: 'Scan',
-    [QueryModes.data]: 'Data',
-    [QueryModes.query]: 'Query',
+const queryModeSelectorQa = 'query-mode-selector';
+const queryModeSelectorPopupQa = 'query-mode-selector-popup';
+
+const b = block('ydb-query-editor-controls');
+
+const OldQueryModeSelectorTitles = {
+    [QUERY_MODES.script]: 'YQL Script',
+    [QUERY_MODES.scan]: 'Scan',
+} as const;
+
+const QueryModeSelectorTitles = {
+    [QUERY_MODES.script]: 'YQL Script',
+    [QUERY_MODES.scan]: 'Scan',
+    [QUERY_MODES.data]: 'Data',
+    [QUERY_MODES.query]: 'YQL - QueryService',
 } as const;
 
+interface QueryEditorControlsProps {
+    onRunButtonClick: (mode?: QueryMode) => void;
+    runIsLoading: boolean;
+    onExplainButtonClick: (mode?: QueryMode) => void;
+    explainIsLoading: boolean;
+    onSaveQueryClick: (queryName: string) => void;
+    savedQueries: unknown;
+    disabled: boolean;
+    onUpdateQueryMode: (mode: QueryMode) => void;
+    queryMode: QueryMode;
+    enableAdditionalQueryModes: boolean;
+    highlitedAction: QueryAction;
+}
+
 export const QueryEditorControls = ({
     onRunButtonClick,
     runIsLoading,
@@ -29,17 +54,27 @@ export const QueryEditorControls = ({
     disabled,
     onUpdateQueryMode,
     queryMode,
+    highlitedAction,
+    enableAdditionalQueryModes,
 }: QueryEditorControlsProps) => {
     const querySelectorMenuItems = useMemo(() => {
-        return Object.entries(QueryModeSelectorTitles).map(([mode, title]) => {
+        const titles = enableAdditionalQueryModes
+            ? QueryModeSelectorTitles
+            : OldQueryModeSelectorTitles;
+
+        return Object.entries(titles).map(([mode, title]) => {
             return {
                 text: title,
                 action: () => {
-                    onUpdateQueryMode(mode as QueryModes);
+                    onUpdateQueryMode(mode as QueryMode);
                 },
             };
         });
-    }, [onUpdateQueryMode]);
+    }, [onUpdateQueryMode, enableAdditionalQueryModes]);
+
+    const runView: ButtonView | undefined = highlitedAction === 'execute' ? 'action' : undefined;
+    const explainView: ButtonView | undefined =
+        highlitedAction === 'explain' ? 'action' : undefined;
 
     return (
         <div className={b()}>
@@ -49,9 +84,9 @@ export const QueryEditorControls = ({
                         onClick={() => {
                             onRunButtonClick(queryMode);
                         }}
-                        view="action"
                         disabled={disabled}
                         loading={runIsLoading}
+                        view={runView}
                     >
                         <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
                         {'Run'}
@@ -63,23 +98,35 @@ export const QueryEditorControls = ({
                     }}
                     disabled={disabled}
                     loading={explainIsLoading}
+                    view={explainView}
                 >
                     Explain
                 </Button>
-                <DropdownMenu
-                    items={querySelectorMenuItems}
-                    popupProps={{className: b('mode-selector__popup')}}
-                    switcher={
-                        <Button className={b('mode-selector__button')}>
-                            <span className={b('mode-selector__button-content')}>
-                                {`${i18n('controls.query-mode-selector_type')} ${
-                                    QueryModeSelectorTitles[queryMode]
-                                }`}
-                                <Icon name="chevron-down" width={16} height={16} />
-                            </span>
-                        </Button>
-                    }
-                />
+                <div
+                    className={b('mode-selector', {
+                        extended: enableAdditionalQueryModes,
+                    })}
+                >
+                    <DropdownMenu
+                        items={querySelectorMenuItems}
+                        popupProps={{
+                            className: b('mode-selector__popup', {
+                                extended: enableAdditionalQueryModes,
+                            }),
+                            qa: queryModeSelectorPopupQa,
+                        }}
+                        switcher={
+                            <Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
+                                <span className={b('mode-selector__button-content')}>
+                                    {`${i18n('controls.query-mode-selector_type')} ${
+                                        QueryModeSelectorTitles[queryMode]
+                                    }`}
+                                    <Icon name="chevron-down" width={16} height={16} />
+                                </span>
+                            </Button>
+                        }
+                    />
+                </div>
             </div>
             <SaveQuery
                 savedQueries={savedQueries}

package/dist/containers/Tenant/Query/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "controls.query-mode-selector_type": "Type:",
+  "controls.query-mode-selector_type": "Query type:",
   "tabs.newQuery": "New query",
   "tabs.history": "History",
   "tabs.saved": "Saved",

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -1,5 +1,5 @@
 {
-  "controls.query-mode-selector_type": "Тип:",
+  "controls.query-mode-selector_type": "Тип запроса:",
   "tabs.newQuery": "Новый запрос",
   "tabs.history": "История",
   "tabs.saved": "Сохраненные",

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

@@ -16,5 +16,5 @@
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'data' and 'query' modes for run. Enables query modes for explain. May not work on some versions"
+  "settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'YQL - QueryService' modes. May not work on some versions"
 }

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

@@ -16,5 +16,5 @@
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'data' и 'query' для run. Включает возможность выбрать режим выполнения запроса для explain. Может работать некорректно на некоторых версиях"
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'YQL - QueryService'. Может работать некорректно на некоторых версиях"
 }

package/dist/services/api.ts

@@ -28,7 +28,8 @@ import type {DescribeTopicResult} from '../types/api/topic';
 import type {TEvPDiskStateResponse} from '../types/api/pdisk';
 import type {TEvVDiskStateResponse} from '../types/api/vdisk';
 import type {TUserToken} from '../types/api/whoami';
-import type {INodesApiRequestParams} from '../types/store/nodes';
+import type {NodesApiRequestParams} from '../store/reducers/nodes/types';
+import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
 import {backend as BACKEND} from '../store';
 
@@ -81,14 +82,14 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         });
     }
     getNodes(
-        {tenant, filter, storage, type = 'any', tablets = true}: INodesApiRequestParams,
+        {tenant, visibleEntities, storage, type = 'any', tablets = true}: NodesApiRequestParams,
         {concurrentId}: AxiosOptions = {},
     ) {
         return this.get<TNodesInfo>(
             this.getPath('/viewer/json/nodes?enums=true'),
             {
                 tenant,
-                with: filter,
+                with: visibleEntities,
                 storage,
                 type,
                 tablets,
@@ -102,15 +103,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         return this.get<TComputeInfo>(this.getPath('/viewer/json/compute?enums=true'), {path});
     }
     getStorageInfo(
-        {
-            tenant,
-            filter,
-            nodeId,
-        }: {
-            tenant?: string;
-            filter?: string;
-            nodeId: string;
-        },
+        {tenant, visibleEntities, nodeId}: StorageApiRequestParams,
         {concurrentId}: AxiosOptions = {},
     ) {
         return this.get<TStorageInfo>(
@@ -118,7 +111,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             {
                 tenant,
                 node_id: nodeId,
-                with: filter,
+                with: visibleEntities,
             },
             {
                 concurrentId,

package/dist/store/reducers/executeQuery.ts

@@ -6,7 +6,7 @@ import type {
     ExecuteQueryState,
     MonacoHotKeyAction,
 } from '../../types/store/executeQuery';
-import type {QueryRequestParams, QueryModes} from '../../types/store/query';
+import type {QueryRequestParams, QueryMode} from '../../types/store/query';
 import {getValueFromLS, parseJson} from '../../utils/utils';
 import {QUERIES_HISTORY_KEY} from '../../utils/constants';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
@@ -34,7 +34,6 @@ export const MONACO_HOT_KEY_ACTIONS = {
     sendQuery: 'sendQuery',
     goPrev: 'goPrev',
     goNext: 'goNext',
-    getExplain: 'getExplain',
 } as const;
 
 const initialState = {
@@ -148,7 +147,7 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
 };
 
 interface SendQueryParams extends QueryRequestParams {
-    mode?: QueryModes;
+    mode?: QueryMode;
 }
 
 export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {

package/dist/store/reducers/explainQuery.ts

@@ -9,7 +9,7 @@ import type {
     ExplainQueryState,
     PreparedExplainResponse,
 } from '../../types/store/explainQuery';
-import type {QueryRequestParams, QueryModes} from '../../types/store/query';
+import type {QueryRequestParams, QueryMode} from '../../types/store/query';
 
 import {preparePlan} from '../../utils/prepareQueryExplain';
 import {parseQueryAPIExplainResponse, parseQueryExplainPlan} from '../../utils/query';
@@ -99,7 +99,7 @@ export const explainVersions = {
 const supportedExplainQueryVersions = Object.values(explainVersions);
 
 interface ExplainQueryParams extends QueryRequestParams {
-    mode?: QueryModes;
+    mode?: QueryMode;
 }
 
 export const getExplainQuery = ({query, database, mode}: ExplainQueryParams) => {

package/dist/store/reducers/index.ts

@@ -1,10 +1,10 @@
 import {combineReducers} from 'redux';
 
-import nodes from './nodes';
+import nodes from './nodes/nodes';
 import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
-import storage from './storage';
+import storage from './storage/storage';
 import node from './node/node';
 import tooltip from './tooltip';
 import tablets from './tablets';

package/dist/store/reducers/{nodes.ts → nodes/nodes.ts}

@@ -2,23 +2,24 @@ import type {Reducer} from 'redux';
 import {createSelector, Selector} from 'reselect';
 import {escapeRegExp} from 'lodash/fp';
 
-import '../../services/api';
-import {HOUR_IN_SECONDS} from '../../utils/constants';
-import {calcUptime, calcUptimeInSeconds} from '../../utils';
-import {NodesUptimeFilterValues} from '../../utils/nodes';
+import type {ValueOf} from '../../../types/common';
+import '../../../services/api';
+import {HOUR_IN_SECONDS} from '../../../utils/constants';
+import {calcUptime, calcUptimeInSeconds} from '../../../utils';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import {EFlag} from '../../../types/api/enums';
+
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+import {ProblemFilterValues} from '../settings/settings';
+
 import type {
-    INodesAction,
-    INodesApiRequestParams,
-    INodesHandledResponse,
-    INodesPreparedEntity,
-    INodesRootStateSlice,
-    INodesState,
-} from '../../types/store/nodes';
-import type {ValueOf} from '../../types/common';
-import {EFlag} from '../../types/api/enums';
-
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import {ProblemFilterValues} from './settings/settings';
+    NodesAction,
+    NodesApiRequestParams,
+    NodesHandledResponse,
+    NodesPreparedEntity,
+    NodesStateSlice,
+    NodesState,
+} from './types';
 
 export const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
@@ -34,7 +35,7 @@ const initialState = {
     searchValue: '',
 };
 
-const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action) => {
+const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_NODES.REQUEST: {
             return {
@@ -92,11 +93,11 @@ const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action)
     }
 };
 
-export function getNodes({tenant, filter, type = 'any'}: INodesApiRequestParams) {
+export function getNodes({tenant, visibleEntities, type = 'any'}: NodesApiRequestParams) {
     return createApiRequest({
-        request: window.api.getNodes({tenant, filter, type}),
+        request: window.api.getNodes({tenant, visibleEntities, type}),
         actions: FETCH_NODES,
-        dataHandler: (data): INodesHandledResponse => {
+        dataHandler: (data): NodesHandledResponse => {
             const rawNodes = data.Nodes || [];
 
             const preparedNodes = rawNodes.map((node) => {
@@ -121,8 +122,8 @@ export function getComputeNodes(path: string) {
     return createApiRequest({
         request: window.api.getCompute(path),
         actions: FETCH_NODES,
-        dataHandler: (data): INodesHandledResponse => {
-            const preparedNodes: INodesPreparedEntity[] = [];
+        dataHandler: (data): NodesHandledResponse => {
+            const preparedNodes: NodesPreparedEntity[] = [];
 
             if (data.Tenants) {
                 for (const tenant of data.Tenants) {
@@ -174,12 +175,12 @@ export const setSearchValue = (value: string) => {
     } as const;
 };
 
-const getNodesUptimeFilter = (state: INodesRootStateSlice) => state.nodes.nodesUptimeFilter;
-const getSearchValue = (state: INodesRootStateSlice) => state.nodes.searchValue;
-const getNodesList = (state: INodesRootStateSlice) => state.nodes.data;
+const getNodesUptimeFilter = (state: NodesStateSlice) => state.nodes.nodesUptimeFilter;
+const getSearchValue = (state: NodesStateSlice) => state.nodes.searchValue;
+const getNodesList = (state: NodesStateSlice) => state.nodes.data;
 
 const filterNodesByProblemsStatus = (
-    nodesList: INodesPreparedEntity[] = [],
+    nodesList: NodesPreparedEntity[] = [],
     problemFilter: ValueOf<typeof ProblemFilterValues>,
 ) => {
     if (problemFilter === ProblemFilterValues.ALL) {
@@ -192,7 +193,7 @@ const filterNodesByProblemsStatus = (
 };
 
 export const filterNodesByUptime = (
-    nodesList: INodesPreparedEntity[] = [],
+    nodesList: NodesPreparedEntity[] = [],
     nodesUptimeFilter: NodesUptimeFilterValues,
 ) => {
     if (nodesUptimeFilter === NodesUptimeFilterValues.All) {
@@ -203,7 +204,7 @@ export const filterNodesByUptime = (
     });
 };
 
-const filterNodesBySearchValue = (nodesList: INodesPreparedEntity[] = [], searchValue: string) => {
+const filterNodesBySearchValue = (nodesList: NodesPreparedEntity[] = [], searchValue: string) => {
     if (!searchValue) {
         return nodesList;
     }
@@ -215,8 +216,8 @@ const filterNodesBySearchValue = (nodesList: INodesPreparedEntity[] = [], search
 };
 
 export const getFilteredPreparedNodesList: Selector<
-    INodesRootStateSlice,
-    INodesPreparedEntity[] | undefined
+    NodesStateSlice,
+    NodesPreparedEntity[] | undefined
 > = createSelector(
     [getNodesList, getNodesUptimeFilter, getSearchValue, (state) => state.settings.problemFilter],
     (nodesList, uptimeFilter, searchValue, problemFilter) => {

package/dist/{types/store/nodes.ts → store/reducers/nodes/types.ts}

@@ -1,22 +1,23 @@
-import type {IResponseError} from '../api/error';
-import type {TEndpoint, TPoolStats} from '../api/nodes';
-import type {TTabletStateInfo as TComputeTabletStateInfo} from '../api/compute';
-import type {TTabletStateInfo as TFullTabletStateInfo} from '../api/tablet';
-import type {EFlag} from '../api/enums';
+import type {IResponseError} from '../../../types/api/error';
+import type {TEndpoint, TPoolStats} from '../../../types/api/nodes';
+import type {TTabletStateInfo as TComputeTabletStateInfo} from '../../../types/api/compute';
+import type {TTabletStateInfo as TFullTabletStateInfo} from '../../../types/api/tablet';
+import type {EFlag} from '../../../types/api/enums';
+import type {ApiRequestAction} from '../../utils';
+import type {VisibleEntities} from '../storage/types';
 
-import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import {
     FETCH_NODES,
     resetNodesState,
     setDataWasNotLoaded,
     setNodesUptimeFilter,
     setSearchValue,
-} from '../../store/reducers/nodes';
-import {ApiRequestAction} from '../../store/utils';
+} from './nodes';
 
 // Since nodes from different endpoints can have different types,
 // This type describes fields, that are expected by tables with nodes
-export interface INodesPreparedEntity {
+export interface NodesPreparedEntity {
     NodeId: number;
     Host?: string;
     SystemState?: EFlag;
@@ -33,43 +34,39 @@ export interface INodesPreparedEntity {
     Endpoints?: TEndpoint[];
 }
 
-export interface INodesState {
+export interface NodesState {
     loading: boolean;
     wasLoaded: boolean;
     nodesUptimeFilter: NodesUptimeFilterValues;
     searchValue: string;
-    data?: INodesPreparedEntity[];
+    data?: NodesPreparedEntity[];
     totalNodes?: number;
     error?: IResponseError;
 }
 
-type INodesApiRequestNodeType = 'static' | 'dynamic' | 'any';
+export type NodeType = 'static' | 'dynamic' | 'any';
 
-// Space - out of space nodes
-// Missing - nodes with missing disks
-type INodesApiRequestProblemType = 'missing' | 'space';
-
-export interface INodesApiRequestParams {
+export interface NodesApiRequestParams {
     tenant?: string;
-    type?: INodesApiRequestNodeType;
-    filter?: INodesApiRequestProblemType;
+    type?: NodeType;
+    visibleEntities?: VisibleEntities;
     storage?: boolean;
     tablets?: boolean;
 }
 
-export interface INodesHandledResponse {
-    Nodes?: INodesPreparedEntity[];
+export interface NodesHandledResponse {
+    Nodes?: NodesPreparedEntity[];
     TotalNodes: number;
 }
 
-type INodesApiRequestAction = ApiRequestAction<
+type NodesApiRequestAction = ApiRequestAction<
     typeof FETCH_NODES,
-    INodesHandledResponse,
+    NodesHandledResponse,
     IResponseError
 >;
 
-export type INodesAction =
-    | INodesApiRequestAction
+export type NodesAction =
+    | NodesApiRequestAction
     | (
           | ReturnType<typeof setDataWasNotLoaded>
           | ReturnType<typeof setNodesUptimeFilter>
@@ -77,6 +74,6 @@ export type INodesAction =
           | ReturnType<typeof resetNodesState>
       );
 
-export interface INodesRootStateSlice {
-    nodes: INodesState;
+export interface NodesStateSlice {
+    nodes: NodesState;
 }

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

@@ -13,10 +13,11 @@ import {
     QUERY_INITIAL_MODE_KEY,
     ENABLE_ADDITIONAL_QUERY_MODES,
     CLUSTER_INFO_HIDDEN_KEY,
+    LAST_USED_QUERY_ACTION_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {getValueFromLS, parseJson} from '../../../utils/utils';
-import {QueryModes} from '../../../types/store/query';
+import {QUERY_ACTIONS, QUERY_MODES} from '../../../utils/query';
 
 import {TENANT_PAGES_IDS} from '../tenant/constants';
 
@@ -64,7 +65,14 @@ export const initialState = {
             TENANT_INITIAL_PAGE_KEY,
             TENANT_PAGES_IDS.query,
         ),
-        [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(QUERY_INITIAL_MODE_KEY, QueryModes.script),
+        [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(
+            QUERY_INITIAL_MODE_KEY,
+            QUERY_MODES.script,
+        ),
+        [LAST_USED_QUERY_ACTION_KEY]: readSavedSettingsValue(
+            LAST_USED_QUERY_ACTION_KEY,
+            QUERY_ACTIONS.execute,
+        ),
         [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
         [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),
         [CLUSTER_INFO_HIDDEN_KEY]: readSavedSettingsValue(CLUSTER_INFO_HIDDEN_KEY, 'true'),

package/dist/store/reducers/storage/constants.ts

@@ -0,0 +1,10 @@
+export const VISIBLE_ENTITIES = {
+    all: 'all',
+    missing: 'missing',
+    space: 'space',
+} as const;
+
+export const STORAGE_TYPES = {
+    groups: 'groups',
+    nodes: 'nodes',
+} as const;