ydb-embedded-ui 1.14.2 → 2.1.0

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

@@ -1,7 +1,7 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
-import {Loader, RadioButton} from '@yandex-cloud/uikit';
+import {Loader, RadioButton} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
 import {
@@ -62,18 +62,25 @@ const explainOptions = [
 ];
 
 function GraphRoot(props) {
-    let paranoid;
-    useEffect(() => {
+    const paranoid = useRef();
+
+    const render = () => {
         const {data, opts, shapes, version} = props;
+
         if (version === explainVersions.v2) {
-            paranoid = getTopology('graphRoot', props.data, opts, shapes);
-            paranoid.render();
+            paranoid.current = getTopology('graphRoot', data, opts, shapes);
+            paranoid.current.render();
         } else if (version === explainVersions.v1) {
-            paranoid = getCompactTopology('graphRoot', data, opts);
-            paranoid.renderCompactTopology();
+            paranoid.current = getCompactTopology('graphRoot', data, opts);
+            paranoid.current.renderCompactTopology();
         }
+    }
+
+    useEffect(() => {
+        render();
+
         return () => {
-            paranoid = undefined;
+            paranoid.current = undefined;
         };
     }, []);
 
@@ -86,13 +93,11 @@ function GraphRoot(props) {
 
         graphRoot.innerHTML = '';
 
-        const {data, opts} = props;
-        paranoid = getCompactTopology('graphRoot', data, opts);
-        paranoid.renderCompactTopology();
+        render();
     }, [props.opts.colors]);
 
     useEffect(() => {
-        paranoid?.updateData(props.data);
+        paranoid.current?.updateData?.(props.data);
     }, [props.data]);
 
     return <div id="graphRoot" style={{height: '100vh'}} />;
@@ -110,9 +115,6 @@ function QueryExplain(props) {
         };
     }, []);
 
-    const {explain = {}, theme} = props;
-    const {links, nodes, version, graphDepth} = explain;
-
     useEffect(() => {
         if (!props.ast && activeOption === ExplainOptionIds.ast) {
             props.astQuery();
@@ -132,14 +134,24 @@ function QueryExplain(props) {
     };
 
     const renderStub = () => {
-        const {explain} = props;
-        if (!explain) {
-            return 'Explain of query is empty';
-        }
-        if (!explain.nodes.length) {
-            return 'There is no explanation for the request';
+        return (
+            <div className={b('text-message')}>
+                There is no explanation for the request
+            </div>
+        );
+    };
+
+    const hasContent = () => {
+        switch (activeOption) {
+            case ExplainOptionIds.schema:
+                return Boolean(props.explain?.nodes?.length);
+            case ExplainOptionIds.json:
+                return Boolean(props.explain);
+            case ExplainOptionIds.ast:
+                return Boolean(props.ast);
+            default:
+                return false;
         }
-        return null;
     };
 
     const renderTextExplain = () => {
@@ -153,23 +165,16 @@ function QueryExplain(props) {
                 }}
             />
         );
+
         return (
             <React.Fragment>
                 {content}
-                {renderStub()}
-                {isFullscreen && (
-                    <Fullscreen>
-                        <div className={b('inspector', {fullscreen: true})}>{content}</div>
-                    </Fullscreen>
-                )}
+                {isFullscreen && <Fullscreen>{content}</Fullscreen>}
             </React.Fragment>
         );
     };
 
     const renderAstExplain = () => {
-        if (!props.ast) {
-            return 'There is no AST explanation for the request';
-        }
         const content = (
             <div className={b('ast')}>
                 <MonacoEditor
@@ -189,19 +194,14 @@ function QueryExplain(props) {
     };
 
     const renderGraph = () => {
-        const graphHeight = `${Math.max(graphDepth * 100, 200)}px`;
-
+        const {explain = {}, theme} = props;
+        const {links, nodes, version} = explain;
         const content =
             links && nodes && nodes.length ? (
                 <div
                     className={b('explain-canvas-container', {
                         hidden: activeOption !== ExplainOptionIds.schema,
                     })}
-                    style={{
-                        height: isFullscreen ? '100%' : graphHeight,
-                        minHeight: graphHeight,
-                        width: '100%',
-                    }}
                 >
                     <GraphRoot
                         version={version}
@@ -222,11 +222,28 @@ function QueryExplain(props) {
             <React.Fragment>
                 {!isFullscreen && content}
                 {isFullscreen && <Fullscreen>{content}</Fullscreen>}
-                {renderStub()}
             </React.Fragment>
         );
     };
 
+    const renderError = () => {
+        const {error} = props;
+
+        let message;
+
+        if (error.data) {
+            message = typeof error.data === 'string' ? error.data : error.data.error?.message;
+        } else {
+            message = error;
+        }
+
+        return (
+            <div className={b('text-message')}>
+                {message}
+            </div>
+        );
+    };
+
     const renderContent = () => {
         const {error, loading, loadingAst} = props;
         if (loading || loadingAst) {
@@ -234,10 +251,11 @@ function QueryExplain(props) {
         }
 
         if (error) {
-            if (error.data) {
-                return typeof error.data === 'string' ? error.data : error.data.error?.message;
-            }
-            return error;
+            return renderError();
+        }
+
+        if (!hasContent()) {
+            return renderStub();
         }
 
         switch (activeOption) {
@@ -274,7 +292,7 @@ function QueryExplain(props) {
                             )}
                         </div>
                         <div className={b('controls-left')}>
-                            <EnableFullscreenButton disabled={Boolean(props.error)} />
+                            <EnableFullscreenButton disabled={Boolean(props.error) || !hasContent()} />
                             <PaneVisibilityToggleButtons
                                 onCollapse={props.onCollapseResults}
                                 onExpand={props.onExpandResults}

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

@@ -6,8 +6,9 @@
         overflow: auto;
         flex-grow: 1;
         flex-direction: column;
-
-        padding: 0px 10px;
+    }
+    &__text-message {
+        padding: 15px 20px;
     }
     &__controls {
         position: sticky;
@@ -40,7 +41,8 @@
     &__explain-canvas-container {
         overflow-y: auto;
 
-        margin-bottom: 20px;
+        width: 100%;
+        height: 100%;
         &_hidden {
             display: none;
         }
@@ -49,6 +51,7 @@
         overflow-y: auto;
 
         width: 100%;
+        padding: 15px 20px;
         @include json-tree-styles();
         &
             .json-inspector__leaf.json-inspector__leaf_root.json-inspector__leaf_expanded.json-inspector__leaf_composite {
@@ -61,9 +64,10 @@
     }
 
     &__ast {
+        overflow: hidden;
+
         width: 100%;
         height: 100%;
-        margin: 20px 0;
 
         white-space: pre-wrap;
     }

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

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
-import {RadioButton} from '@yandex-cloud/uikit';
+import {RadioButton} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 
 import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';

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

@@ -51,6 +51,7 @@
     }
     &__inspector {
         max-width: calc(100% - 50px);
+        padding: 15px 10px;
         @include json-tree-styles();
         &_fullscreen {
             overflow: auto;

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

@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import {useDispatch, useSelector} from 'react-redux';
-import {Dialog, DropdownMenu, TextInput, Button} from '@yandex-cloud/uikit';
+import {Dialog, DropdownMenu, TextInput, Button} from '@gravity-ui/uikit';
 
 import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
 

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

@@ -1,7 +1,7 @@
 import React, {useRef, useState} from 'react';
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
-import {Dialog, Popup, Button} from '@yandex-cloud/uikit';
+import {Dialog, Popup, Button} from '@gravity-ui/uikit';
 
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
 import Icon from '../../../../components/Icon/Icon';

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.scss

@@ -14,8 +14,8 @@
         justify-content: flex-start;
         align-items: flex-start;
 
-        & + & {
-            margin-left: 50px;
+        &:not(:last-child) {
+            margin-right: 50px;
         }
     }
 

package/dist/containers/Tenant/utils/paneVisibilityToggleHelpers.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button} from '@yandex-cloud/uikit';
+import {Button} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 //@ts-ignore
 import Icon from '../../../components/Icon/Icon';

package/dist/containers/Tenants/Tenants.js

@@ -5,12 +5,13 @@ import {connect} from 'react-redux';
 import _ from 'lodash';
 
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader, TextInput, Button} from '@yandex-cloud/uikit';
+import {Loader, TextInput, Button} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import TabletsStatistic from '../../components/TabletsStatistic/TabletsStatistic';
 import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {Illustration} from '../../components/Illustration';
 import {AutoFetcher} from '../../utils/autofetcher';
 
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
@@ -97,6 +98,7 @@ class Tenants extends React.Component {
                     text={searchQuery}
                     onUpdate={handleSearchQuery}
                     hasClear
+                    autoFocus
                 />
                 <ProblemFilter value={filter} onChange={changeFilter} />
             </div>
@@ -309,7 +311,7 @@ class Tenants extends React.Component {
         ];
 
         if (filteredTenants.length === 0 && filter !== ALL) {
-            return <div className="no-problem" />;
+            return <Illustration name="thumbsUp" width="200" />;
         }
 
         return (

package/dist/containers/UserSettings/UserSettings.tsx

@@ -1,6 +1,6 @@
 import {connect} from 'react-redux';
 
-import {RadioButton, Switch} from '@yandex-cloud/uikit';
+import {RadioButton, Switch} from '@gravity-ui/uikit';
 import {Settings} from '../../components/AsideNavigation/Settings';
 import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
@@ -21,7 +21,7 @@ function UserSettings(props: any) {
     };
 
     const _onInvertedDisksChangeHandler = (value: boolean) => {
-        props.setSettingValue(INVERTED_DISKS_KEY, value);
+        props.setSettingValue(INVERTED_DISKS_KEY, String(value));
     };
 
     return (

package/dist/containers/Vdisk/Vdisk.js

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 
 import {Link} from 'react-router-dom';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 import InfoViewer from '../../components/InfoViewer/InfoViewer';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import _ from 'lodash';
 
 import {Link} from 'react-router-dom';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 import InfoViewer from '../../components/InfoViewer/InfoViewer';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';

package/dist/index.js

@@ -5,7 +5,7 @@ import App from './containers/App/App';
 import {Provider} from 'react-redux';
 import configureStore from './store';
 import reportWebVitals from './reportWebVitals';
-import '@yandex-cloud/uikit/styles/styles.scss';
+import '@gravity-ui/uikit/styles/styles.scss';
 import HistoryContext from './contexts/HistoryContext';
 
 const {store, history} = configureStore();

package/dist/services/api.d.ts

@@ -30,6 +30,15 @@ interface Window {
             },
             axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/query').QueryAPIResponse<Action, Schema>>;
+        getExplainQuery: (
+            query: string,
+            database: string,
+        ) => Promise<import('../types/api/query').QueryAPIExplainResponse<'explain'>>;
+        getExplainQueryAst: (
+            query: string,
+            database: string,
+        ) => Promise<import('../types/api/query').QueryAPIExplainResponse<'explain-ast'>>;
+        getHealthcheckInfo: (database: string) => Promise<import('../types/api/healthcheck').HealthCheckAPIResponse>,
         [method: string]: Function;
     };
 }

package/dist/setupTests.js

@@ -4,7 +4,7 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
 
-import {configure as configureUiKit} from '@yandex-cloud/uikit';
+import {configure as configureUiKit} from '@gravity-ui/uikit';
 import {configure as configureYdbUiComponents} from 'ydb-ui-components';
 import {i18n, Lang} from '../src/utils/i18n';
 

package/dist/store/reducers/executeTopQueries.js

@@ -1,6 +1,9 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 
+import {parseQueryAPIExecuteResponse} from '../../utils/query';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
 const SEND_QUERY = createRequestActionTypes('top-queries', 'SEND_QUERY');
 const SET_QUERY_OPTIONS = createRequestActionTypes('top-queries', 'SET_QUERY_OPTIONS');
 
@@ -47,15 +50,9 @@ const executeTopQueries = (state = initialState, action) => {
 
 export const sendQuery = ({query, database, action}) => {
     return createApiRequest({
-        request: window.api.sendQuery({query, database, action}),
+        request: window.api.sendQuery({schema: 'modern', query, database, action}),
         actions: SEND_QUERY,
-        dataHandler: (result) => {
-            if (result && typeof result === 'string') {
-                throw 'Unexpected token in JSON.';
-            }
-
-            return result;
-        },
+        dataHandler: parseQueryAPIExecuteResponse,
     });
 };
 

package/dist/store/reducers/explainQuery.js

@@ -1,8 +1,12 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
 import _ from 'lodash';
+
+import '../../services/api';
+
 import {getExplainNodeId, getMetaForExplainNode} from '../../utils';
 import {preparePlan} from '../../utils/prepareQueryExplain';
+import {parseQueryAPIExplainResponse} from '../../utils/query';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
 
 const GET_EXPLAIN_QUERY = createRequestActionTypes('query', 'GET_EXPLAIN_QUERY');
 const GET_EXPLAIN_QUERY_AST = createRequestActionTypes('query', 'GET_EXPLAIN_QUERY_AST');
@@ -26,7 +30,8 @@ const explainQuery = (state = initialState, action) => {
         case GET_EXPLAIN_QUERY.SUCCESS: {
             return {
                 ...state,
-                data: action.data,
+                data: action.data.plan,
+                dataAst: action.data.ast,
                 loading: false,
                 error: undefined,
             };
@@ -50,7 +55,7 @@ const explainQuery = (state = initialState, action) => {
         case GET_EXPLAIN_QUERY_AST.SUCCESS: {
             return {
                 ...state,
-                dataAst: action.data,
+                dataAst: action.data.ast,
                 loadingAst: false,
                 error: undefined,
             };
@@ -72,9 +77,7 @@ export const getExplainQueryAst = ({query, database}) => {
     return createApiRequest({
         request: window.api.getExplainQueryAst(query, database),
         actions: GET_EXPLAIN_QUERY_AST,
-        dataHandler: (result) => {
-            return result && result.ast ? result.ast : result;
-        },
+        dataHandler: parseQueryAPIExplainResponse,
     });
 };
 
@@ -89,11 +92,15 @@ export const getExplainQuery = ({query, database}) => {
     return createApiRequest({
         request: window.api.getExplainQuery(query, database),
         actions: GET_EXPLAIN_QUERY,
-        dataHandler: (result) => {
-            result = result && result.plan ? result.plan : result;
+        dataHandler: (response) => {
+            const {plan: result, ast} = parseQueryAPIExplainResponse(response);
+
+            if (!result) {
+                return {ast};
+            }
+
             let links = [];
             let nodes = [];
-            let graphDepth;
             const {tables, meta, Plan} = result;
 
             if (supportedExplainQueryVersions.indexOf(meta.version) === -1) {
@@ -106,9 +113,7 @@ export const getExplainQuery = ({query, database}) => {
                 const preparedPlan = preparePlan(Plan);
                 links = preparedPlan.links;
                 nodes = preparedPlan.nodes;
-                graphDepth = preparedPlan.graphDepth;
             } else {
-                graphDepth = tables.length;
                 _.forEach(tables, (table) => {
                     nodes.push({
                         name: table.name,
@@ -117,7 +122,7 @@ export const getExplainQuery = ({query, database}) => {
                     const tableTypes = {};
 
                     const {reads = [], writes = []} = table;
-                    let prevEl = null;
+                    let prevNodeId = table.name;
 
                     _.forEach([...reads, ...writes], (node) => {
                         if (tableTypes[node.type]) {
@@ -132,22 +137,6 @@ export const getExplainQuery = ({query, database}) => {
                             tableTypes[node.type],
                         );
 
-                        let prevNodeId = table.name;
-                        if (prevEl) {
-                            prevNodeId =
-                                node.type === prevEl.type
-                                    ? getExplainNodeId(
-                                          table.name,
-                                          prevEl.type,
-                                          tableTypes[prevEl.type] - 1,
-                                      )
-                                    : getExplainNodeId(
-                                          table.name,
-                                          prevEl.type,
-                                          tableTypes[prevEl.type],
-                                      );
-                        }
-
                         links.push({
                             from: prevNodeId,
                             to: nodeId,
@@ -158,18 +147,20 @@ export const getExplainQuery = ({query, database}) => {
                             id: nodeId,
                         });
 
-                        prevEl = node;
+                        prevNodeId = nodeId;
                     });
                 });
             }
 
             return {
-                links,
-                nodes,
-                tables,
-                version: meta.version,
-                pristine: result,
-                graphDepth,
+                plan: {
+                    links,
+                    nodes,
+                    tables,
+                    version: meta.version,
+                    pristine: result,
+                },
+                ast,
             };
         },
     });

package/dist/store/reducers/olapStats.js

@@ -1,6 +1,9 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 
+import {parseQueryAPIExecuteResponse} from '../../utils/query';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
 const FETCH_OLAP_STATS = createRequestActionTypes('query', 'SEND_OLAP_STATS_QUERY');
 const SET_OLAP_STATS_OPTIONS = createRequestActionTypes('query', 'SET_OLAP_STATS_OPTIONS');
 
@@ -53,18 +56,13 @@ const olapStats = (state = initialState, action) => {
 export const getOlapStats = ({path = ''}) => {
     return createApiRequest({
         request: window.api.sendQuery({
+            schema: 'modern',
             query: createOlatStatsQuery(path),
             database: path,
             action: queryAction,
         }),
         actions: FETCH_OLAP_STATS,
-        dataHandler: (result) => {
-            if (result && typeof result === 'string') {
-                throw 'Unexpected token in JSON.';
-            }
-
-            return result;
-        },
+        dataHandler: parseQueryAPIExecuteResponse,
     });
 };
 

package/dist/store/reducers/shardsWorkload.js

@@ -1,6 +1,9 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 
+import {parseQueryAPIExecuteResponse} from '../../utils/query';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
 const SEND_SHARD_QUERY = createRequestActionTypes('query', 'SEND_SHARD_QUERY');
 const SET_SHARD_QUERY_OPTIONS = 'query/SET_SHARD_QUERY_OPTIONS';
 
@@ -76,6 +79,7 @@ const shardsWorkload = (state = initialState, action) => {
 export const sendShardQuery = ({database, path = '', sortOrder}) => {
     return createApiRequest({
         request: window.api.sendQuery({
+            schema: 'modern',
             query: createShardQuery(path, sortOrder, database),
             database,
             action: queryAction,
@@ -83,13 +87,7 @@ export const sendShardQuery = ({database, path = '', sortOrder}) => {
             concurrentId: 'topShards',
         }),
         actions: SEND_SHARD_QUERY,
-        dataHandler: (result) => {
-            if (result && typeof result === 'string') {
-                throw 'Unexpected token in JSON.';
-            }
-
-            return result;
-        },
+        dataHandler: parseQueryAPIExecuteResponse,
     });
 };