ydb-embedded-ui 3.5.0 → 4.1.0

package/dist/containers/Tenant/QueryEditor/i18n/index.ts

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

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

@@ -0,0 +1,3 @@
+{
+  "controls.query-mode-selector_type": "Тип:"
+}

package/dist/containers/Tenants/Tenants.js

@@ -20,7 +20,7 @@ import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
 import {ALL, DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
-import {getTenantsInfo} from '../../store/reducers/tenants';
+import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
 import {changeFilter, getSettingValue} from '../../store/reducers/settings';
 import {setHeader} from '../../store/reducers/header';
 

package/dist/containers/UserSettings/UserSettings.tsx

@@ -9,6 +9,7 @@ import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
+    ENABLE_QUERY_MODES_FOR_EXPLAIN,
     INVERTED_DISKS_KEY,
     THEME_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
@@ -39,6 +40,10 @@ function UserSettings(props: any) {
         props.setSettingValue(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, String(value));
     };
 
+    const _onExplainQueryModesChangeHandler = (value: boolean) => {
+        props.setSettingValue(ENABLE_QUERY_MODES_FOR_EXPLAIN, String(value));
+    };
+
     const renderBreakNodesSettingsItem = (title: ReactNode) => {
         return (
             <div className={b('item-with-popup')}>
@@ -52,6 +57,19 @@ function UserSettings(props: any) {
         );
     };
 
+    const renderEnableExplainQueryModesItem = (title: ReactNode) => {
+        return (
+            <div className={b('item-with-popup')}>
+                {title}
+                <HelpPopover
+                    content="Enable script | scan query mode selector for both run and explain. May not work on some versions"
+                    contentClassName={b('popup')}
+                    hasArrow={true}
+                />
+            </div>
+        );
+    };
+
     return (
         <Settings>
             <Settings.Page
@@ -86,6 +104,15 @@ function UserSettings(props: any) {
                             onUpdate={_onNodesEndpointChangeHandler}
                         />
                     </Settings.Item>
+                    <Settings.Item
+                        title="Enable query modes for explain"
+                        renderTitleComponent={renderEnableExplainQueryModesItem}
+                    >
+                        <Switch
+                            checked={props.enableQueryModesForExplain}
+                            onUpdate={_onExplainQueryModesChangeHandler}
+                        />
+                    </Settings.Item>
                 </Settings.Section>
             </Settings.Page>
         </Settings>
@@ -93,12 +120,14 @@ function UserSettings(props: any) {
 }
 
 const mapStateToProps = (state: any) => {
-    const {theme, invertedDisks, useNodesEndpointInDiagnostics} = state.settings.userSettings;
+    const {theme, invertedDisks, useNodesEndpointInDiagnostics, enableQueryModesForExplain} =
+        state.settings.userSettings;
 
     return {
         theme,
         invertedDisks: JSON.parse(invertedDisks),
         useNodesEndpointInDiagnostics: JSON.parse(useNodesEndpointInDiagnostics),
+        enableQueryModesForExplain: JSON.parse(enableQueryModesForExplain),
     };
 };
 

package/dist/services/api.ts

@@ -0,0 +1,383 @@
+import AxiosWrapper from '@gravity-ui/axios-wrapper';
+
+import type {
+    Actions,
+    ExplainActions,
+    ExplainResponse,
+    QueryAPIResponse,
+    Schemas,
+} from '../types/api/query';
+import type {
+    TDomainKey,
+    TEvTabletStateResponse,
+    UnmergedTEvTabletStateResponse,
+} from '../types/api/tablet';
+import type {TMetaInfo} from '../types/api/acl';
+import type {TClusterInfo} from '../types/api/cluster';
+import type {TComputeInfo} from '../types/api/compute';
+import type {DescribeConsumerResult} from '../types/api/consumer';
+import type {HealthCheckAPIResponse} from '../types/api/healthcheck';
+import type {TNetInfo} from '../types/api/netInfo';
+import type {TNodesInfo} from '../types/api/nodes';
+import type {TEvNodesInfo} from '../types/api/nodesList';
+import type {TEvDescribeSchemeResult} from '../types/api/schema';
+import type {TStorageInfo} from '../types/api/storage';
+import type {TEvSystemStateResponse} from '../types/api/systemState';
+import type {TTenantInfo, TTenants} from '../types/api/tenant';
+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 {backend as BACKEND} from '../store';
+
+const config = {withCredentials: !window.custom_backend};
+
+const settingsApi = window.web_version ? window.systemSettings?.settingsApi : undefined;
+
+type AxiosOptions = {
+    concurrentId?: string;
+};
+
+export class YdbEmbeddedAPI extends AxiosWrapper {
+    getPath(path: string) {
+        return `${BACKEND}${path}`;
+    }
+    getClusterInfo(clusterName?: string) {
+        return this.get<TClusterInfo>(this.getPath('/viewer/json/cluster'), {
+            name: clusterName,
+            tablets: true,
+        });
+    }
+    getNodeInfo(id?: string) {
+        return this.get<TEvSystemStateResponse>(this.getPath('/viewer/json/sysinfo?enums=true'), {
+            node_id: id,
+        });
+    }
+    getTenants(clusterName?: string) {
+        return this.get<TTenantInfo>(this.getPath('/viewer/json/tenantinfo'), {
+            tablets: 1,
+            storage: 1,
+            cluster_name: clusterName,
+        });
+    }
+    getTenantInfo({path}: {path: string}) {
+        return this.get<TTenantInfo>(this.getPath('/viewer/json/tenantinfo'), {
+            path,
+            tablets: true,
+            storage: true,
+        });
+    }
+    getNodes(
+        {tenant, filter, storage, type = 'any', tablets = true}: INodesApiRequestParams,
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        return this.get<TNodesInfo>(
+            this.getPath('/viewer/json/nodes?enums=true'),
+            {
+                tenant,
+                with: filter,
+                storage,
+                type,
+                tablets,
+            },
+            {
+                concurrentId,
+            },
+        );
+    }
+    getCompute(path: string) {
+        return this.get<TComputeInfo>(this.getPath('/viewer/json/compute?enums=true'), {path});
+    }
+    getStorageInfo(
+        {
+            tenant,
+            filter,
+            nodeId,
+        }: {
+            tenant: string;
+            filter: string;
+            nodeId: string;
+        },
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        return this.get<TStorageInfo>(
+            this.getPath(`/viewer/json/storage?enums=true`),
+            {
+                tenant,
+                node_id: nodeId,
+                with: filter,
+            },
+            {
+                concurrentId,
+            },
+        );
+    }
+    getPdiskInfo(nodeId: string | number, pdiskId: string | number) {
+        return this.get<TEvPDiskStateResponse>(this.getPath('/viewer/json/pdiskinfo?enums=true'), {
+            filter: `(NodeId=${nodeId}${pdiskId ? `;PDiskId=${pdiskId}` : ''})`,
+        });
+    }
+    getVdiskInfo({
+        vdiskId,
+        pdiskId,
+        nodeId,
+    }: {
+        vdiskId: string | number;
+        pdiskId: string | number;
+        nodeId: string | number;
+    }) {
+        return this.get<TEvVDiskStateResponse>(this.getPath('/viewer/json/vdiskinfo?enums=true'), {
+            filter: `(VDiskId=${vdiskId ?? ''};PDiskId=${pdiskId ?? ''};NodeId=${nodeId ?? ''})`,
+        });
+    }
+    getGroupInfo(groupId: string | number) {
+        return this.get<TStorageInfo>(this.getPath('/viewer/json/storage?enums=true'), {
+            group_id: groupId,
+        });
+    }
+    getHostInfo() {
+        return this.get<TEvSystemStateResponse>(
+            this.getPath('/viewer/json/sysinfo?node_id=.&enums=true'),
+            {},
+        );
+    }
+    getTabletsInfo({nodes = [], path}: {nodes?: string[]; path?: string}) {
+        const filter = nodes.length > 0 && `(NodeId=[${nodes.join(',')}])`;
+        return this.get<TEvTabletStateResponse>(this.getPath('/viewer/json/tabletinfo'), {
+            filter,
+            path,
+            enums: true,
+        });
+    }
+    getSchema({path}: {path: string}, {concurrentId}: AxiosOptions = {}) {
+        return this.get<TEvDescribeSchemeResult>(
+            this.getPath('/viewer/json/describe'),
+            {
+                path,
+                enums: true,
+                backup: false,
+                private: true,
+                partition_config: true,
+                partition_stats: true,
+                partitioning_info: true,
+                subs: 1,
+            },
+            {concurrentId: concurrentId || `getSchema|${path}`},
+        );
+    }
+    getDescribe({path}: {path: string}, {concurrentId}: AxiosOptions = {}) {
+        return this.get<TEvDescribeSchemeResult>(
+            this.getPath('/viewer/json/describe'),
+            {
+                path,
+                enums: true,
+                partition_stats: true,
+                subs: 0,
+            },
+            {concurrentId: concurrentId || `getDescribe|${path}`},
+        );
+    }
+    getSchemaAcl({path}: {path: string}) {
+        return this.get<TMetaInfo>(
+            this.getPath('/viewer/json/acl'),
+            {
+                path,
+            },
+            {concurrentId: `getSchemaAcl|${path}`},
+        );
+    }
+    getHeatmapData({path}: {path: string}) {
+        return this.get<TEvDescribeSchemeResult>(this.getPath('/viewer/json/describe'), {
+            path,
+            enums: true,
+            backup: false,
+            children: false,
+            partition_config: false,
+            partition_stats: true,
+        });
+    }
+    getNetwork(path: string) {
+        return this.get<TNetInfo>(this.getPath('/viewer/json/netinfo'), {
+            enums: true,
+            path,
+        });
+    }
+    getTopic({path}: {path?: string}, {concurrentId}: AxiosOptions = {}) {
+        return this.get<DescribeTopicResult>(
+            this.getPath('/viewer/json/describe_topic'),
+            {
+                enums: true,
+                include_stats: true,
+                path,
+            },
+            {concurrentId: concurrentId || 'getTopic'},
+        );
+    }
+    getConsumer(
+        {path, consumer}: {path?: string; consumer?: string},
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        return this.get<DescribeConsumerResult>(
+            this.getPath('/viewer/json/describe_consumer'),
+            {
+                enums: true,
+                include_stats: true,
+                path,
+                consumer,
+            },
+            {concurrentId: concurrentId || 'getConsumer'},
+        );
+    }
+    getPoolInfo(poolName: string) {
+        return this.get<TStorageInfo>(this.getPath('/viewer/json/storage'), {
+            pool: poolName,
+            enums: true,
+        });
+    }
+    getTablet({id}: {id?: string}) {
+        return this.get<TEvTabletStateResponse>(
+            this.getPath(`/viewer/json/tabletinfo?filter=(TabletId=${id})`),
+            {
+                enums: true,
+            },
+        );
+    }
+    getTabletHistory({id}: {id?: string}) {
+        return this.get<UnmergedTEvTabletStateResponse>(
+            this.getPath(`/viewer/json/tabletinfo?filter=(TabletId=${id})`),
+            {
+                enums: true,
+                merge: false,
+            },
+        );
+    }
+    getNodesList() {
+        return this.get<TEvNodesInfo>(this.getPath('/viewer/json/nodelist'), {enums: true});
+    }
+    getTenantsList() {
+        return this.get<TTenants>(this.getPath('/viewer/json/tenants'), {
+            enums: true,
+            state: 0,
+        });
+    }
+    sendQuery<Action extends Actions, Schema extends Schemas = undefined>(
+        {
+            query,
+            database,
+            action,
+            stats,
+            schema,
+        }: {
+            query?: string;
+            database?: string;
+            action?: Action;
+            stats?: string;
+            schema?: Schema;
+        },
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        return this.post<QueryAPIResponse<Action, Schema>>(
+            this.getPath(`/viewer/json/query${schema ? `?schema=${schema}` : ''}`),
+            {
+                query,
+                database,
+                action,
+                stats,
+                timeout: 600000,
+            },
+            null,
+            {
+                concurrentId,
+                timeout: 9 * 60 * 1000,
+            },
+        );
+    }
+    getExplainQuery<Action extends ExplainActions>(
+        query: string,
+        database: string,
+        action: Action,
+    ) {
+        return this.post<ExplainResponse<Action>>(
+            this.getPath('/viewer/json/query'),
+            {
+                query,
+                database,
+                action: action || 'explain',
+                timeout: 600000,
+            },
+            null,
+        );
+    }
+    getExplainQueryAst(query: string, database: string) {
+        return this.post<ExplainResponse<'explain-ast'>>(
+            this.getPath('/viewer/json/query'),
+            {
+                query,
+                database,
+                action: 'explain-ast',
+                timeout: 600000,
+            },
+            null,
+        );
+    }
+    getHotKeys(path: string, enableSampling: boolean) {
+        return this.get(this.getPath('/viewer/json/hotkeys'), {
+            path,
+            enable_sampling: enableSampling,
+        });
+    }
+    getHealthcheckInfo(database: string) {
+        return this.get<HealthCheckAPIResponse>(this.getPath('/viewer/json/healthcheck'), {
+            tenant: database,
+        });
+    }
+    killTablet(id?: string) {
+        return this.get<string>(this.getPath(`/tablets?KillTabletID=${id}`), null);
+    }
+    stopTablet(id?: string, hiveId?: string) {
+        return this.get<string>(
+            this.getPath(`/tablets/app?TabletID=${hiveId}&page=StopTablet&tablet=${id}`),
+            null,
+        );
+    }
+    resumeTablet(id?: string, hiveId?: string) {
+        return this.get<string>(
+            this.getPath(`/tablets/app?TabletID=${hiveId}&page=ResumeTablet&tablet=${id}`),
+            null,
+        );
+    }
+    getTabletDescribe(tenantId: TDomainKey) {
+        return this.get<TEvDescribeSchemeResult>(this.getPath('/viewer/json/describe'), {
+            schemeshard_id: tenantId?.SchemeShard,
+            path_id: tenantId?.PathId,
+        });
+    }
+    postSetting(name: string, value: string) {
+        return this.request({
+            method: 'PATCH',
+            url: settingsApi || '',
+            data: {[name]: value},
+        });
+    }
+    authenticate(user: string, password: string) {
+        return this.post(
+            this.getPath('/login'),
+            {
+                user,
+                password,
+            },
+            null,
+        );
+    }
+    logout() {
+        return this.post(this.getPath('/logout'), null, null);
+    }
+    whoami() {
+        return this.get<TUserToken>(this.getPath('/viewer/json/whoami'), null);
+    }
+}
+
+const api = new YdbEmbeddedAPI({config: config});
+window.api = api;

package/dist/store/reducers/{cluster.js → cluster/cluster.ts}

@@ -1,11 +1,14 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
+import type {Reducer} from 'redux';
 
-const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+import type {ClusterAction, ClusterState} from './types';
+
+export const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
 
 const initialState = {loading: true, wasLoaded: false};
 
-const cluster = function (state = initialState, action) {
+const cluster: Reducer<ClusterState, ClusterAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_CLUSTER.REQUEST: {
             return {
@@ -14,17 +17,9 @@ const cluster = function (state = initialState, action) {
             };
         }
         case FETCH_CLUSTER.SUCCESS: {
-            const {data} = action;
-            const clusterInfo = data.cluster ? data.cluster.cluster : data;
-            const clusterName = data.cluster?.title || data.Name;
             return {
                 ...state,
-                data: {
-                    ...clusterInfo,
-                    balancer: data.cluster?.balancer,
-                    solomon: data.cluster?.solomon,
-                    Name: clusterName,
-                },
+                data: action.data,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -42,7 +37,7 @@ const cluster = function (state = initialState, action) {
     }
 };
 
-export function getClusterInfo(clusterName) {
+export function getClusterInfo(clusterName?: string) {
     return createApiRequest({
         request: window.api.getClusterInfo(clusterName),
         actions: FETCH_CLUSTER,

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

@@ -0,0 +1,13 @@
+import {FETCH_CLUSTER} from './cluster';
+
+import type {TClusterInfo} from '../../../types/api/cluster';
+import type {ApiRequestAction} from '../../utils';
+
+export interface ClusterState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: TClusterInfo;
+    error?: unknown;
+}
+
+export type ClusterAction = ApiRequestAction<typeof FETCH_CLUSTER, TClusterInfo, unknown>;

package/dist/store/reducers/executeQuery.ts

@@ -1,21 +1,20 @@
 import type {Reducer} from 'redux';
 
-import type {Actions} from '../../types/api/query';
+import type {ExecuteActions} from '../../types/api/query';
 import type {
     ExecuteQueryAction,
     ExecuteQueryState,
     MonacoHotKeyAction,
-    RunAction,
 } from '../../types/store/executeQuery';
+import type {QueryRequestParams, QueryModes} from '../../types/store/query';
 import {getValueFromLS, parseJson} from '../../utils/utils';
-import {QUERIES_HISTORY_KEY, QUERY_INITIAL_RUN_ACTION_KEY} from '../../utils/constants';
+import {QUERIES_HISTORY_KEY} from '../../utils/constants';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
+import {parseQueryError} from '../../utils/error';
 import '../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-import {readSavedSettingsValue} from './settings';
-
 const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 export const SEND_QUERY = createRequestActionTypes('query', 'SEND_QUERY');
@@ -24,18 +23,12 @@ const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
 const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
 const GO_TO_PREVIOUS_QUERY = 'query/GO_TO_PREVIOUS_QUERY';
 const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
-const SELECT_RUN_ACTION = 'query/SELECT_RUN_ACTION';
 const MONACO_HOT_KEY = 'query/MONACO_HOT_KEY';
 
 const queriesHistoryInitial: string[] = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
 
 const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 
-export const RUN_ACTIONS_VALUES = {
-    script: 'execute-script',
-    scan: 'execute-scan',
-} as const;
-
 export const MONACO_HOT_KEY_ACTIONS = {
     sendQuery: 'sendQuery',
     goPrev: 'goPrev',
@@ -53,7 +46,6 @@ const initialState = {
                 ? MAXIMUM_QUERIES_IN_HISTORY - 1
                 : queriesHistoryInitial.length - 1,
     },
-    runAction: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY, RUN_ACTIONS_VALUES.script),
     monacoHotKey: null,
 };
 
@@ -79,22 +71,14 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
                 error: undefined,
             };
         }
-        // 401 Unauthorized error is handled by GenericAPI
         case SEND_QUERY.FAILURE: {
             return {
                 ...state,
-                error: action.error || 'Unauthorized',
+                error: parseQueryError(action.error),
                 loading: false,
             };
         }
 
-        case SELECT_RUN_ACTION: {
-            return {
-                ...state,
-                runAction: action.data,
-            };
-        }
-
         case CHANGE_USER_INPUT: {
             return {
                 ...state,
@@ -156,15 +140,13 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
     }
 };
 
-export const sendQuery = ({
-    query,
-    database,
-    action,
-}: {
-    query: string;
-    database: string;
-    action: Actions;
-}) => {
+interface SendQueryParams extends QueryRequestParams {
+    mode?: QueryModes;
+}
+
+export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {
+    const action: ExecuteActions = mode ? `execute-${mode}` : 'execute';
+
     return createApiRequest({
         request: window.api.sendQuery({
             schema: 'modern',
@@ -185,13 +167,6 @@ export const saveQueryToHistory = (query: string) => {
     } as const;
 };
 
-export const selectRunAction = (value: RunAction) => {
-    return {
-        type: SELECT_RUN_ACTION,
-        data: value,
-    } as const;
-};
-
 export const goToPreviousQuery = () => {
     return {
         type: GO_TO_PREVIOUS_QUERY,

package/dist/store/reducers/executeTopQueries.ts

@@ -13,7 +13,7 @@ import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-import type {IRootState} from '.';
+import type {RootState} from '.';
 
 export const FETCH_TOP_QUERIES = createRequestActionTypes('top-queries', 'FETCH_TOP_QUERIES');
 const SET_TOP_QUERIES_STATE = 'top-queries/SET_TOP_QUERIES_STATE';
@@ -126,7 +126,7 @@ const executeTopQueries: Reducer<ITopQueriesState, ITopQueriesAction> = (
 type FetchTopQueries = (params: {
     database: string;
     filters?: ITopQueriesFilters;
-}) => ThunkAction<Promise<IQueryResult | undefined>, IRootState, unknown, AnyAction>;
+}) => ThunkAction<Promise<IQueryResult | undefined>, RootState, unknown, AnyAction>;
 
 export const fetchTopQueries: FetchTopQueries =
     ({database, filters}) =>