ydb-embedded-ui 2.4.3 → 2.4.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [2.4.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.3...v2.4.4) (2022-11-22)
+
+
+### Bug Fixes
+
+* **api:** update getDescribe and getSchema requests params ([d70ba54](https://github.com/ydb-platform/ydb-embedded-ui/commit/d70ba54b90b9c86a393bd3f7845183114e5afbf1))
+* **describe:** cancel concurrent requests ([2f39ad0](https://github.com/ydb-platform/ydb-embedded-ui/commit/2f39ad0f736d44c3749d9523f5024151c51fcf6f))
+* **Describe:** render loader on path change ([baf552a](https://github.com/ydb-platform/ydb-embedded-ui/commit/baf552af8bb67046baa36e9115064b4b192cb015))
+* **QueryExplain:** fix colors on theme change ([cc0a2d6](https://github.com/ydb-platform/ydb-embedded-ui/commit/cc0a2d67139457748089c6bf1fb1045b0a6b0b93))
+* **SchemaTree:** remove unneeded fetches ([c7c0489](https://github.com/ydb-platform/ydb-embedded-ui/commit/c7c048937c5ae9e5e243d6e538aab8c2e2921df5))
+* **SchemaTree:** remove unneeded getDescribe ([1146f13](https://github.com/ydb-platform/ydb-embedded-ui/commit/1146f13a7a5a277a292b3789d45a0872dda0c487))
+* **Tenant:** make tenant fetch schema only on tenant change ([ccefbff](https://github.com/ydb-platform/ydb-embedded-ui/commit/ccefbffea08fc8f248a3dd1135e82de6db9f0645))
+
 ## [2.4.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.2...v2.4.3) (2022-11-14)
 
 

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

@@ -0,0 +1,91 @@
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+// @ts-ignore
+import JSONTree from 'react-json-inspector';
+import 'react-json-inspector/json-inspector.css';
+
+import {Loader} from '@gravity-ui/uikit';
+
+import {prepareQueryError} from '../../../../utils/query';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {
+    getDescribe,
+    setDataWasNotLoaded,
+    setCurrentDescribePath,
+} from '../../../../store/reducers/describe';
+
+import './Describe.scss';
+
+const b = cn('kv-describe');
+
+const expandMap = new Map();
+
+interface IDescribeProps {
+    tenant: string;
+}
+
+const Describe = ({tenant}: IDescribeProps) => {
+    const dispatch = useDispatch();
+
+    const {currentDescribe, error, loading, wasLoaded} = useTypedSelector(
+        (state) => state.describe,
+    );
+
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            const path = currentSchemaPath || tenant;
+
+            dispatch(setCurrentDescribePath(path));
+            dispatch(getDescribe({path}));
+        },
+        [currentSchemaPath, tenant, dispatch],
+    );
+
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b('loader-container')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    if (error) {
+        return <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;
+    }
+
+    if (!loading && !currentDescribe) {
+        return <div className={b('message-container')}>Empty</div>;
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('result')}>
+                <JSONTree
+                    data={currentDescribe}
+                    className={b('tree')}
+                    onClick={({path}: {path: string}) => {
+                        const newValue = !(expandMap.get(path) || false);
+                        expandMap.set(path, newValue);
+                    }}
+                    searchOptions={{
+                        debounceTime: 300,
+                    }}
+                    isExpanded={(keypath: string) => {
+                        return expandMap.get(keypath) || false;
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Describe;

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

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
 import {Loader, RadioButton} from '@gravity-ui/uikit';
@@ -25,20 +25,6 @@ import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
 const b = cn('kv-query-explain');
 
-const DARK_COLORS = {
-    success: 'rgba(59,201,53,0.75)',
-    error: '#bf3230',
-    warning: '#cc6810',
-    mute: 'rgba(255,255,255,0.15)',
-    stroke: 'rgba(255,255,255,0.17)',
-    fill: '#313037',
-    nodeFill: '#3b3a41',
-    nodeShadow: 'rgba(0,0,0,0.2)',
-    titleColor: 'rgba(255,255,255,0.7)',
-    textColor: 'rgba(255,255,255,0.55)',
-    buttonBorderColor: 'rgba(255,255,255,0.07)',
-};
-
 const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -64,9 +50,15 @@ const explainOptions = [
 function GraphRoot(props) {
     const paranoid = useRef();
 
-    const render = () => {
-        const {data, opts, shapes, version} = props;
+    const {data, opts, shapes, version, theme} = props;
+
+    const [componentTheme, updateComponentTheme] = useState(theme);
 
+    useEffect(() => {
+        updateComponentTheme(theme);
+    }, [theme]);
+
+    const render = useCallback(() => {
         if (version === explainVersions.v2) {
             paranoid.current = getTopology('graphRoot', data, opts, shapes);
             paranoid.current.render();
@@ -74,7 +66,7 @@ function GraphRoot(props) {
             paranoid.current = getCompactTopology('graphRoot', data, opts);
             paranoid.current.renderCompactTopology();
         }
-    }
+    }, [data, opts, shapes, version]);
 
     useEffect(() => {
         render();
@@ -94,7 +86,7 @@ function GraphRoot(props) {
         graphRoot.innerHTML = '';
 
         render();
-    }, [props.opts.colors]);
+    }, [componentTheme, render]);
 
     useEffect(() => {
         paranoid.current?.updateData?.(props.data);
@@ -134,11 +126,7 @@ function QueryExplain(props) {
     };
 
     const renderStub = () => {
-        return (
-            <div className={b('text-message')}>
-                There is no explanation for the request
-            </div>
-        );
+        return <div className={b('text-message')}>There is no explanation for the request</div>;
     };
 
     const hasContent = () => {
@@ -204,12 +192,12 @@ function QueryExplain(props) {
                     })}
                 >
                     <GraphRoot
+                        theme={theme}
                         version={version}
                         data={{links, nodes}}
                         opts={{
                             renderNodeTitle: renderExplainNode,
                             textOverflow: TextOverflow.Normal,
-                            colors: theme === 'dark' ? DARK_COLORS : {},
                             initialZoomFitsCanvas: true,
                         }}
                         shapes={{
@@ -237,11 +225,7 @@ function QueryExplain(props) {
             message = error;
         }
 
-        return (
-            <div className={b('text-message')}>
-                {message}
-            </div>
-        );
+        return <div className={b('text-message')}>{message}</div>;
     };
 
     const renderContent = () => {
@@ -292,7 +276,9 @@ function QueryExplain(props) {
                             )}
                         </div>
                         <div className={b('controls-left')}>
-                            <EnableFullscreenButton disabled={Boolean(props.error) || !hasContent()} />
+                            <EnableFullscreenButton
+                                disabled={Boolean(props.error) || !hasContent()}
+                            />
                             <PaneVisibilityToggleButtons
                                 onCollapse={props.onCollapseResults}
                                 onExpand={props.onExpandResults}

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -3,9 +3,7 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, getSchema, preloadSchemas} from '../../../../store/reducers/schema';
-import {getDescribe} from '../../../../store/reducers/describe';
-import {getSchemaAcl} from '../../../../store/reducers/schemaAcl';
+import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 
 import {mapPathTypeToNavigationTreeType} from '../../utils/schema';
@@ -30,7 +28,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                 const {PathDescription: {Children = []} = {}} = data;
 
                 const preloadedData: Record<string, TEvDescribeSchemeResult> = {
-                    [path]: data
+                    [path]: data,
                 };
 
                 const childItems = Children.map((childData) => {
@@ -55,9 +53,6 @@ export function SchemaTree(props: SchemaTreeProps) {
 
     const handleActivePathUpdate = (activePath: string) => {
         dispatch(setCurrentSchemaPath(activePath));
-        dispatch(getSchema({path: activePath}));
-        dispatch(getDescribe({path: activePath}));
-        dispatch(getSchemaAcl({path: activePath}));
     };
 
     useEffect(() => {

package/dist/containers/Tenant/Tenant.tsx

@@ -78,12 +78,15 @@ function Tenant(props: TenantProps) {
     const tenantName = name as string;
 
     useEffect(() => {
-        const schemaPath = currentSchemaPath || tenantName;
-        dispatch(resetLoadingState());
         dispatch(getSchema({path: tenantName}));
-        dispatch(getSchema({path: schemaPath}));
-        dispatch(getSchemaAcl({path: schemaPath}));
-    }, [tenantName, currentSchemaPath, dispatch]);
+        dispatch(getSchemaAcl({path: tenantName}));
+    }, [tenantName, dispatch]);
+
+    useEffect(() => {
+        dispatch(resetLoadingState());
+        dispatch(getSchema({path: currentSchemaPath}));
+        dispatch(getSchemaAcl({path: currentSchemaPath}));
+    }, [currentSchemaPath, dispatch]);
 
     useEffect(() => {
         dispatch(disableAutorefresh());

package/dist/services/api.js

@@ -83,17 +83,26 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 path,
                 enums: true,
                 backup: false,
+                private: true,
+                partition_config: false,
                 partition_stats: false,
                 partitioning_info: false,
+                subs: 1,
             },
             {concurrentId: concurrentId || `getSchema|${path}`},
         );
     }
-    getDescribe({path}) {
-        return this.get(this.getPath('/viewer/json/describe'), {
-            path,
-            enums: true,
-        });
+    getDescribe({path}, {concurrentId} = {}) {
+        return this.get(
+            this.getPath('/viewer/json/describe'),
+            {
+                path,
+                enums: true,
+                partition_stats: true,
+                subs: 0,
+            },
+            {concurrentId: concurrentId || `getDescribe|${path}`},
+        );
     }
     getSchemaAcl({path}) {
         return this.get(

package/dist/store/reducers/describe.ts

@@ -2,24 +2,23 @@ import {createSelector, Selector} from 'reselect';
 import {Reducer} from 'redux';
 
 import '../../services/api';
-import {TEvDescribeSchemeResult} from '../../types/api/schema';
 import {IConsumer} from '../../types/api/consumers';
-import {IDescribeRootStateSlice, IDescribeState} from '../../types/store/describe';
-import {IResponseError} from '../../types/api/error';
-import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
+import {IDescribeRootStateSlice, IDescribeState, IDescribeAction} from '../../types/store/describe';
+import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+export const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+const SET_CURRENT_DESCRIBE_PATH = 'describe/SET_CURRENT_DESCRIBE_PATH';
+const SET_DATA_WAS_NOT_LOADED = 'describe/SET_DATA_WAS_NOT_LOADED';
 
 const initialState = {
     loading: false,
     wasLoaded: false,
     data: {},
+    currentDescribe: undefined,
+    currentDescribePath: undefined,
 };
 
-const describe: Reducer<
-    IDescribeState,
-    ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, IResponseError>
-> = (state = initialState, action) => {
+const describe: Reducer<IDescribeState, IDescribeAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_DESCRIBE.REQUEST: {
             return {
@@ -28,52 +27,83 @@ const describe: Reducer<
             };
         }
         case FETCH_DESCRIBE.SUCCESS: {
-            let newData;
+            const data = action.data;
 
-            if (action.data.Path) {
+            const isCurrentDescribePath = data.Path === state.currentDescribePath;
+
+            let newData = state.data;
+
+            if (data.Path) {
                 newData = JSON.parse(JSON.stringify(state.data));
-                newData[action.data.Path] = action.data;
-            } else {
-                newData = state.data;
+                newData[data.Path] = data;
+            }
+
+            if (!isCurrentDescribePath) {
+                return {
+                    ...state,
+                    data: newData,
+                };
             }
 
             return {
                 ...state,
                 data: newData,
-                currentDescribe: action.data,
+                currentDescribe: data,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
             };
         }
+
         case FETCH_DESCRIBE.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
                 loading: false,
             };
         }
+        case SET_CURRENT_DESCRIBE_PATH: {
+            return {
+                ...state,
+                currentDescribePath: action.data,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
         default:
             return state;
     }
 };
 
+export const setCurrentDescribePath = (path: string) => {
+    return {
+        type: SET_CURRENT_DESCRIBE_PATH,
+        data: path,
+    } as const;
+};
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
 // Consumers selectors
-const selectConsumersNames: Selector<IDescribeRootStateSlice, string[] | undefined, [string]> = (
-    state,
-    path,
-) => state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
-
-export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[]> = createSelector(
-    selectConsumersNames,
-    (names = []) => {
-        const consumers = names.map((name) => {
-            return {name};
-        });
-
-        return consumers;
-    },
-);
+const selectConsumersNames = (state: IDescribeRootStateSlice, path: string | undefined) =>
+    path
+        ? state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules
+        : undefined;
+
+export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[], [string | undefined]> =
+    createSelector(selectConsumersNames, (names = []) => names.map((name) => ({name})));
 
 export function getDescribe({path}: {path: string}) {
     return createApiRequest({

package/dist/types/api/error.ts

@@ -1,4 +1,6 @@
 export interface IResponseError {
-    status: number;
-    statusText: string;
+    data?: unknown;
+    status?: number;
+    statusText?: string;
+    isCancelled?: boolean;
 }

package/dist/types/store/describe.ts

@@ -1,14 +1,34 @@
+import {
+    FETCH_DESCRIBE,
+    setCurrentDescribePath,
+    setDataWasNotLoaded,
+} from '../../store/reducers/describe';
+import {ApiRequestAction} from '../../store/utils';
 import {IResponseError} from '../api/error';
 import {TEvDescribeSchemeResult} from '../api/schema';
 
+export type IDescribeData = Record<string, TEvDescribeSchemeResult>;
+
 export interface IDescribeState {
     loading: boolean;
     wasLoaded: boolean;
-    data: Record<string, TEvDescribeSchemeResult>;
+    data: IDescribeData;
     currentDescribe?: TEvDescribeSchemeResult;
+    currentDescribePath?: string;
     error?: IResponseError;
 }
 
+type IDescribeApiRequestAction = ApiRequestAction<
+    typeof FETCH_DESCRIBE,
+    TEvDescribeSchemeResult,
+    IResponseError
+>;
+
+export type IDescribeAction =
+    | IDescribeApiRequestAction
+    | ReturnType<typeof setCurrentDescribePath>
+    | ReturnType<typeof setDataWasNotLoaded>;
+
 export interface IDescribeRootStateSlice {
     describe: IDescribeState;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "files": [
     "dist"
   ],

package/dist/containers/Tenant/Diagnostics/Describe/Describe.js

@@ -1,130 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import {Loader} from '@gravity-ui/uikit';
-import JSONTree from 'react-json-inspector';
-
-import {getDescribe} from '../../../../store/reducers/describe';
-
-import './Describe.scss';
-import 'react-json-inspector/json-inspector.css';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-
-const b = cn('kv-describe');
-
-const expandMap = new Map();
-
-class Describe extends React.Component {
-    static propTypes = {
-        error: PropTypes.string,
-        data: PropTypes.array,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        autorefresh: PropTypes.bool,
-        tenant: PropTypes.string,
-    };
-
-    autofetcher;
-
-    componentDidMount() {
-        const {autorefresh} = this.props;
-        this.autofetcher = new AutoFetcher();
-        this.fetchData();
-        if (autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchData);
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {autorefresh} = this.props;
-
-        if (autorefresh && !prevProps.autorefresh) {
-            this.fetchData();
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchData());
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    fetchData() {
-        const {getDescribe, tenant, currentSchemaPath} = this.props;
-        const path = currentSchemaPath || tenant;
-        getDescribe({path});
-    }
-
-    renderDescribeJson = () => {
-        const {data} = this.props;
-
-        return (
-            <JSONTree
-                data={data}
-                className={b('tree')}
-                onClick={({path}) => {
-                    const newValue = !(expandMap.get(path) || false);
-                    expandMap.set(path, newValue);
-                }}
-                searchOptions={{
-                    debounceTime: 300,
-                }}
-                isExpanded={(keypath) => {
-                    return expandMap.get(keypath) || false;
-                }}
-            />
-        );
-    };
-
-    render() {
-        const {error, loading, data, wasLoaded} = this.props;
-
-        if (loading && !wasLoaded) {
-            return (
-                <div className={b('loader-container')}>
-                    <Loader size="m" />
-                </div>
-            );
-        }
-
-        if (error) {
-            return <div className={b('message-container')}>{error.data || error}</div>;
-        }
-
-        if (!loading && !data) {
-            return <div className={b('message-container')}>Empty</div>;
-        }
-
-        return (
-            <div className={b()}>
-                <div className={b('result')}>{this.renderDescribeJson()}</div>
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {loading, error, currentDescribe, wasLoaded} = state.describe;
-    const {autorefresh, currentSchemaPath} = state.schema;
-
-    return {
-        data: currentDescribe,
-        loading,
-        error,
-        wasLoaded,
-        autorefresh,
-        currentSchemaPath,
-    };
-};
-
-const mapDispatchToProps = {
-    getDescribe,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Describe);