ydb-embedded-ui 2.4.4 → 2.6.0

package/dist/containers/Storage/UsageFilter/UsageFilter.scss

@@ -1,4 +1,6 @@
 .usage-filter {
+    min-width: 100px;
+
     &__option {
         flex-grow: 1;
 
@@ -10,22 +12,25 @@
         }
 
         &-meta {
-            padding: 0 5px;
             position: relative;
-            border-radius: 3px;
+
+            padding: 0 5px;
+
             font-size: var(--yc-text-caption-2-font-size);
             line-height: var(--yc-text-caption-2-line-height);
+
+            border-radius: 3px;
         }
 
         &-bar {
             position: absolute;
-            left: 0;
+            z-index: -1;
             top: 0;
             bottom: 0;
-            z-index: -1;
+            left: 0;
 
-            background-color: var(--yc-color-infographics-info-medium);
             border-radius: 3px;
+            background-color: var(--yc-color-infographics-info-medium);
         }
     }
 }

package/dist/containers/Tenant/Acl/Acl.js

@@ -83,13 +83,7 @@ class Acl extends React.Component {
             return null;
         }
 
-        return (
-            <DataTable
-                columns={this.COLUMNS}
-                data={acl}
-                settings={TABLE_SETTINGS}
-            />
-        );
+        return <DataTable columns={this.COLUMNS} data={acl} settings={TABLE_SETTINGS} />;
     };
 
     renderOwner = () => {

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

@@ -2,16 +2,14 @@ import React from 'react';
 import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {withRouter} from 'react-router-dom';
-import qs from 'qs';
 
 import {Loader} from '@gravity-ui/uikit';
 
-import NodesViewer from '../../../../components/NodesViewer/NodesViewer';
+import NodesViewer from '../../../NodesViewer/NodesViewer';
 
 import {backend} from '../../../../store';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
-import {getNodes, clearNodes} from '../../../../store/reducers/nodes';
+import {getNodes, clearNodes, setDataWasNotLoaded} from '../../../../store/reducers/nodes';
 
 import './Compute.scss';
 import {AutoFetcher} from '../../../../utils/autofetcher';
@@ -28,6 +26,7 @@ class Compute extends React.Component {
         autorefresh: PropTypes.bool,
         error: PropTypes.object,
         wasLoaded: PropTypes.bool,
+        setDataWasNotLoaded: PropTypes.func,
         getNodes: PropTypes.func,
         hideTooltip: PropTypes.func,
         showTooltip: PropTypes.func,
@@ -50,12 +49,25 @@ class Compute extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        const {autorefresh, getNodes, tenantName} = this.props;
+        const {autorefresh, getNodes, setDataWasNotLoaded, tenantName} = this.props;
 
-        if (autorefresh && !prevProps.autorefresh) {
-            getNodes(tenantName);
+        const restartAutorefresh = () => {
+            this.autofetcher.stop();
             this.autofetcher.start();
             this.autofetcher.fetch(() => getNodes(tenantName));
+        };
+
+        if (tenantName !== prevProps.tenantName) {
+            setDataWasNotLoaded();
+            getNodes(tenantName);
+            if (autorefresh) {
+                restartAutorefresh();
+            }
+        }
+
+        if (autorefresh && !prevProps.autorefresh) {
+            getNodes(tenantName);
+            restartAutorefresh();
         }
         if (!autorefresh && prevProps.autorefresh) {
             this.autofetcher.stop();
@@ -103,15 +115,10 @@ class Compute extends React.Component {
 function mapStateToProps(state, ownProps) {
     const {data, loading, wasLoaded, error} = state.nodes;
     const {autorefresh} = state.schema;
-    const {search} = ownProps.location;
-    const queryParams = qs.parse(search, {
-        ignoreQueryPrefix: true,
-    });
-    const {name: tenantName} = queryParams;
     const nodes = (data && data.Tenants && data.Tenants[0] && data.Tenants[0].Nodes) || [];
     return {
+        ...ownProps,
         nodes,
-        tenantName,
         loading,
         wasLoaded,
         error,
@@ -124,8 +131,9 @@ const mapDispatchToProps = {
     clearNodes,
     hideTooltip,
     showTooltip,
+    setDataWasNotLoaded,
 };
 
 const ConnectedCompute = connect(mapStateToProps, mapDispatchToProps)(Compute);
 
-export default withRouter(ConnectedCompute);
+export default ConnectedCompute;

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

@@ -1,13 +1,24 @@
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@yandex-cloud/react-data-table';
 
+import type {EPathType} from '../../../../types/api/schema';
+import {Loader} from '../../../../components/Loader';
+import {prepareQueryError} from '../../../../utils/query';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {Search} from '../../../../components/Search';
-import {getDescribe, selectConsumers} from '../../../../store/reducers/describe';
+import {
+    getDescribe,
+    selectConsumers,
+    setCurrentDescribePath,
+    setDataWasNotLoaded,
+} from '../../../../store/reducers/describe';
+import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema';
+
+import {isCdcStreamEntityType} from '../../utils/schema';
 
 import i18n from './i18n';
 
@@ -17,18 +28,41 @@ const b = block('ydb-consumers');
 
 interface ConsumersProps {
     path: string;
+    type?: EPathType;
 }
 
-export const Consumers = ({path}: ConsumersProps) => {
-    const dispath = useDispatch();
+export const Consumers = ({path, type}: ConsumersProps) => {
+    const dispatch = useDispatch();
 
-    const fetchData = () => {
-        dispath(getDescribe({path}));
-    };
+    const isCdcStream = isCdcStreamEntityType(type);
+
+    const mergedChildrenPaths = useTypedSelector((state) =>
+        selectSchemaMergedChildrenPaths(state, path, type),
+    );
 
-    useAutofetcher(fetchData, [path]);
+    const dataPath = isCdcStream ? mergedChildrenPaths?.[0] : path;
 
-    const consumers = useTypedSelector((state) => selectConsumers(state, path));
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            if (dataPath) {
+                dispatch(setCurrentDescribePath(dataPath));
+                dispatch(getDescribe({path: dataPath}));
+            }
+        },
+
+        [dispatch, dataPath],
+    );
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+
+    const {loading, wasLoaded, error} = useTypedSelector((state) => state.describe);
+    const consumers = useTypedSelector((state) => selectConsumers(state, dataPath));
 
     const [consumersToRender, setConsumersToRender] = useState(consumers);
 
@@ -59,8 +93,16 @@ export const Consumers = ({path}: ConsumersProps) => {
         },
     ];
 
+    if (loading && !wasLoaded) {
+        return <Loader size="m" />;
+    }
+
+    if (!loading && error) {
+        return <div className={b('message', 'error')}>{prepareQueryError(error)}</div>;
+    }
+
     if (consumers.length === 0) {
-        return <div>{i18n('noConsumersMessage')}</div>;
+        return <div className={b('message')}>{i18n('noConsumersMessage')}</div>;
     }
 
     return (

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

@@ -13,14 +13,6 @@
         padding: 10px 20px 20px 0;
     }
 
-    &__loader-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-    }
-
     &__tree {
         @include json-tree-styles();
     }

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

@@ -1,11 +1,11 @@
-import {useCallback} from 'react';
-import {useDispatch} from 'react-redux';
+import {useCallback, useEffect, useState} from 'react';
+import {shallowEqual, 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 {Loader} from '../../../../components/Loader';
 
 import {prepareQueryError} from '../../../../utils/query';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
@@ -13,7 +13,12 @@ import {
     getDescribe,
     setDataWasNotLoaded,
     setCurrentDescribePath,
+    getDescribeBatched,
 } from '../../../../store/reducers/describe';
+import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema';
+import type {EPathType} from '../../../../types/api/schema';
+
+import {isEntityWithMergedImplementation} from '../../utils/schema';
 
 import './Describe.scss';
 
@@ -23,17 +28,39 @@ const expandMap = new Map();
 
 interface IDescribeProps {
     tenant: string;
+    type?: EPathType;
 }
 
-const Describe = ({tenant}: IDescribeProps) => {
+const Describe = ({tenant, type}: IDescribeProps) => {
     const dispatch = useDispatch();
 
     const {currentDescribe, error, loading, wasLoaded} = useTypedSelector(
         (state) => state.describe,
     );
 
+    const [preparedDescribeData, setPreparedDescribeData] = useState<Object>();
+
+    useEffect(() => {
+        if (currentDescribe) {
+            const paths = Object.keys(currentDescribe);
+
+            if (paths.length === 1) {
+                setPreparedDescribeData(currentDescribe[paths[0]]);
+            } else {
+                setPreparedDescribeData(currentDescribe);
+            }
+        }
+    }, [currentDescribe]);
+
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
 
+    const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
+
+    const mergedChildrenPaths = useTypedSelector(
+        (state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type),
+        shallowEqual,
+    );
+
     const fetchData = useCallback(
         (isBackground: boolean) => {
             if (!isBackground) {
@@ -41,28 +68,28 @@ const Describe = ({tenant}: IDescribeProps) => {
             }
 
             const path = currentSchemaPath || tenant;
-
             dispatch(setCurrentDescribePath(path));
-            dispatch(getDescribe({path}));
+
+            if (!isEntityWithMergedImpl) {
+                dispatch(getDescribe({path}));
+            } else if (mergedChildrenPaths) {
+                dispatch(getDescribeBatched([path, ...mergedChildrenPaths]));
+            }
         },
-        [currentSchemaPath, tenant, dispatch],
+        [currentSchemaPath, tenant, mergedChildrenPaths, isEntityWithMergedImpl, dispatch],
     );
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    if (loading && !wasLoaded) {
-        return (
-            <div className={b('loader-container')}>
-                <Loader size="m" />
-            </div>
-        );
+    if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
+        return <Loader size="m" />;
     }
 
     if (error) {
         return <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;
     }
 
-    if (!loading && !currentDescribe) {
+    if (!loading && !preparedDescribeData) {
         return <div className={b('message-container')}>Empty</div>;
     }
 
@@ -70,7 +97,7 @@ const Describe = ({tenant}: IDescribeProps) => {
         <div className={b()}>
             <div className={b('result')}>
                 <JSONTree
-                    data={currentDescribe}
+                    data={preparedDescribeData}
                     className={b('tree')}
                     onClick={({path}: {path: string}) => {
                         const newValue = !(expandMap.get(path) || false);

package/dist/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -5,13 +5,6 @@
 
     height: 100%;
 
-    &__loader {
-        display: flex;
-        flex-grow: 1;
-        justify-content: center;
-        align-items: center;
-    }
-
     &__header-wrapper {
         padding: 13px 20px 16px;
 

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

@@ -5,7 +5,9 @@ import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
 import {useLocation} from 'react-router';
 
-import {Loader, Switch, Tabs} from '@gravity-ui/uikit';
+import {Switch, Tabs} from '@gravity-ui/uikit';
+
+import {Loader} from '../../../components/Loader';
 
 //@ts-ignore
 import TopQueries from './TopQueries/TopQueries';
@@ -36,6 +38,7 @@ import {GeneralPagesIds, DATABASE_PAGES, getPagesByType} from './DiagnosticsPage
 //@ts-ignore
 import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
 import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant';
+import {isDatabaseEntityType} from '../utils/schema';
 
 import './Diagnostics.scss';
 
@@ -64,17 +67,17 @@ function Diagnostics(props: DiagnosticsProps) {
         ignoreQueryPrefix: true,
     });
 
-    const {name: tenantName} = queryParams;
-
-    const isRoot = currentSchemaPath === tenantName;
+    const {name: rootTenantName} = queryParams;
+    const tenantName = isDatabaseEntityType(props.type) ? currentSchemaPath : rootTenantName;
+    const isDatabase = isDatabaseEntityType(props.type) || currentSchemaPath === rootTenantName;
 
     const pages = useMemo(() => {
-        if (isRoot) {
+        if (isDatabase) {
             return DATABASE_PAGES;
         }
 
         return getPagesByType(props.type);
-    }, [props.type, isRoot]);
+    }, [props.type, isDatabase]);
 
     const forwardToDiagnosticTab = (tab: GeneralPagesIds) => {
         dispatch(setDiagnosticsTab(tab));
@@ -132,10 +135,15 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <TopShards path={tenantNameString} type={type} />;
             }
             case GeneralPagesIds.nodes: {
-                return <Compute additionalNodesInfo={props.additionalNodesInfo} />;
+                return (
+                    <Compute
+                        tenantName={tenantNameString}
+                        additionalNodesInfo={props.additionalNodesInfo}
+                    />
+                );
             }
             case GeneralPagesIds.tablets: {
-                return <Tablets path={currentItem.Path} />;
+                return <Tablets path={currentSchemaPath} />;
             }
             case GeneralPagesIds.storage: {
                 return <Storage tenant={tenantNameString} database={true} />;
@@ -144,7 +152,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Network path={tenantNameString} />;
             }
             case GeneralPagesIds.describe: {
-                return <Describe tenant={tenantNameString} />;
+                return <Describe tenant={tenantNameString} type={type} />;
             }
             case GeneralPagesIds.hotKeys: {
                 return <HotKeys type={type} />;
@@ -153,7 +161,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Heatmap path={currentItem.Path} />;
             }
             case GeneralPagesIds.consumers: {
-                return <Consumers path={currentItem.Path} />;
+                return <Consumers path={currentSchemaPath} type={type} />;
             }
             default: {
                 return <div>No data...</div>;
@@ -196,11 +204,7 @@ function Diagnostics(props: DiagnosticsProps) {
     // After tabs are initially loaded it is no longer needed
     // Thus there is no also "loading" check as in other parts of the project
     if (!wasLoaded) {
-        return (
-            <div className={b('loader')}>
-                <Loader size="l" />
-            </div>
-        );
+        return <Loader size="l" />;
     }
 
     return (

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -87,7 +87,7 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
-export const CDC_STREAM_PAGES = [overview, describe];
+export const CDC_STREAM_PAGES = [overview, consumers, describe];
 export const TOPIC_PAGES = [overview, consumers, describe];
 
 // verbose mapping to guarantee correct tabs for new path types

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

@@ -10,6 +10,7 @@ import {
     getHealthcheckInfo,
     selectIssuesTreeById,
     selectIssuesTreesRoots,
+    setDataWasNotLoaded,
 } from '../../../../store/reducers/healthcheckInfo';
 
 import {Details} from './Details';
@@ -43,14 +44,21 @@ export const Healthcheck = (props: HealthcheckProps) => {
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
-    const fetchHealthcheck = useCallback(() => {
-        dispatch(getHealthcheckInfo(tenant));
-    }, [dispatch, tenant]);
+    const fetchHealthcheck = useCallback(
+        (isBackground = true) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getHealthcheckInfo(tenant));
+        },
+        [dispatch, tenant],
+    );
 
     useAutofetcher(
-        () => {
+        (isBackground) => {
             if (fetchData) {
-                fetchHealthcheck();
+                fetchHealthcheck(isBackground);
             }
         },
         [fetchData, fetchHealthcheck],

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

@@ -12,7 +12,7 @@ import Icon from '../../../../components/Icon/Icon';
 import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFilter/ProblemFilter';
 import {Illustration} from '../../../../components/Illustration';
 
-import {getNetworkInfo} from '../../../../store/reducers/network';
+import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
 import {ALL, PROBLEMS} from '../../../../utils/constants';
 import {changeFilter} from '../../../../store/reducers/settings';
@@ -26,6 +26,7 @@ const b = cn('network');
 class Network extends React.Component {
     static propTypes = {
         getNetworkInfo: PropTypes.func,
+        setDataWasNotLoaded: PropTypes.func,
         netWorkInfo: PropTypes.object,
         hideTooltip: PropTypes.func,
         showTooltip: PropTypes.func,
@@ -75,16 +76,27 @@ class Network extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        const {autorefresh, path} = this.props;
+        const {autorefresh, path, setDataWasNotLoaded, getNetworkInfo} = this.props;
 
-        if (autorefresh && !prevProps.autorefresh) {
-            getNetworkInfo(path);
+        const restartAutorefresh = () => {
+            this.autofetcher.stop();
             this.autofetcher.start();
             this.autofetcher.fetch(() => getNetworkInfo(path));
+        };
+
+        if (autorefresh && !prevProps.autorefresh) {
+            getNetworkInfo(path);
+            restartAutorefresh();
         }
         if (!autorefresh && prevProps.autorefresh) {
             this.autofetcher.stop();
         }
+
+        if (path !== prevProps.path) {
+            setDataWasNotLoaded();
+            getNetworkInfo(path);
+            restartAutorefresh();
+        }
     }
 
     componentWillUnmount() {
@@ -364,6 +376,7 @@ const mapDispatchToProps = {
     hideTooltip,
     showTooltip,
     changeFilter,
+    setDataWasNotLoaded,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Network);