ydb-embedded-ui 2.5.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [3.0.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.6.0...v3.0.0) (2022-12-05)
+
+
+### ⚠ BREAKING CHANGES
+
+Updated build config ([11e02c6](https://github.com/ydb-platform/ydb-embedded-ui/commit/11e02c668ef186f058b2ece9d5f1082d0e96e23d))
+
+**Before the change**
+- the target dir for the production build was `build/resources`
+- `favicon.png` was placed directly in `build`
+
+**After the change**
+- the target dir is `build/static`
+- `favicon.png` is in `build/static`
+
+This change is intended to simplify build config and make it closer to the default one. Previously there were some custom tweaks after the build, they caused bugs and were hard to maintain. Now the application builds using the default `create-react-app` config.
+
+
+## [2.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.5.0...v2.6.0) (2022-12-05)
+
+
+### Features
+
+* **Describe:** add topic data for CDCStream ([3a289d4](https://github.com/ydb-platform/ydb-embedded-ui/commit/3a289d4f6452e3f2d719c0d508f48b389fd044d7))
+* **Diagnostics:** add consumers tab for CdcStream ([22c6efd](https://github.com/ydb-platform/ydb-embedded-ui/commit/22c6efdd39d85ab1585943bc13d88cf03f9bc2ae))
+* **Overview:** add topic data for CDCStream ([be80545](https://github.com/ydb-platform/ydb-embedded-ui/commit/be80545df65a03820265875fedd98c6f181af491))
+
+
+### Bug Fixes
+
+* **Compute:** update data on path change ([1783240](https://github.com/ydb-platform/ydb-embedded-ui/commit/17832403623ae3e718f47aec508c834cd2e3458c))
+* **Diagnostics:** render db tabs for not root dbs ([7d46ce2](https://github.com/ydb-platform/ydb-embedded-ui/commit/7d46ce2783a58b1ae6e41cae6592e78f95d61bcc))
+* **Healthcheck:** render loader on path change ([ec40f19](https://github.com/ydb-platform/ydb-embedded-ui/commit/ec40f19c0b369de0b8d0658b4a1dd68c5c419c1c))
+* **InfoViewer:** allow multiline values ([17755dc](https://github.com/ydb-platform/ydb-embedded-ui/commit/17755dc2eae7b6fc0a56ff70da95679fc590dccb))
+* **Network:** update data on path change ([588c53f](https://github.com/ydb-platform/ydb-embedded-ui/commit/588c53f80a81376301216a77d9ead95cdff9812f))
+* **SchemaTree:** do not expand childless components ([90468de](https://github.com/ydb-platform/ydb-embedded-ui/commit/90468de74b74e00a66255ba042378c9d7e1cbc27))
+* **Storage:** update data on path change ([f5486bc](https://github.com/ydb-platform/ydb-embedded-ui/commit/f5486bcb2838b9e290c566089980533b4d22d035))
+* **Tablets:** fix postponed data update on path change ([d474c6c](https://github.com/ydb-platform/ydb-embedded-ui/commit/d474c6cb36597f0c720ef3bb8d0360ec73973e26))
+* **TopQueries:** update data on path change ([32d7720](https://github.com/ydb-platform/ydb-embedded-ui/commit/32d77208b8ef09682c41160c60a1a7742b0c6c4c))
+
 ## [2.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.4...v2.5.0) (2022-11-25)
 
 

package/dist/components/InfoViewer/InfoViewer.scss

@@ -24,10 +24,10 @@
 
     &__row {
         display: flex;
-        align-items: flex-end;
+        align-items: baseline;
 
         max-width: 100%;
-        height: 24px;
+        padding-top: 4px;
     }
 
     &__label {
@@ -54,7 +54,7 @@
     &__value {
         display: flex;
 
-        white-space: nowrap;
+        word-break: break-all;
     }
 
     &_size {

package/dist/components/InfoViewer/schemaInfo/CDCStreamInfo.tsx

@@ -1,31 +1,45 @@
 import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
+import {useTypedSelector} from '../../../utils/hooks';
+import {selectSchemaData} from '../../../store/reducers/schema';
 
-import {formatCdcStreamItem, formatCommonItem} from '../formatters';
+import {formatCdcStreamItem, formatPQGroupItem, formatCommonItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
 
 const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set(['Mode', 'Format']);
 
 interface CDCStreamInfoProps {
     data?: TEvDescribeSchemeResult;
+    childrenPaths?: string[];
 }
 
-export const CDCStreamInfo = ({data}: CDCStreamInfoProps) => {
-    if (!data) {
-        return <div className="error">No CDC Stream data</div>;
+export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
+    const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
+
+    if (!data || !pqGroupData) {
+        return <div className="error">No Changefeed data</div>;
     }
 
-    const TableIndex = data.PathDescription?.CdcStreamDescription;
+    const cdcStream = data.PathDescription?.CdcStreamDescription;
+    const pqGroup = pqGroupData?.PathDescription?.PersQueueGroup;
+
     const info: Array<InfoViewerItem> = [];
 
-    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
     info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
 
     let key: keyof TCdcStreamDescription;
-    for (key in TableIndex) {
+    for (key in cdcStream) {
         if (DISPLAYED_FIELDS.has(key)) {
-            info.push(formatCdcStreamItem(key, TableIndex?.[key]));
+            info.push(formatCdcStreamItem(key, cdcStream?.[key]));
         }
     }
 
-    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
+    info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
+    info.push(
+        formatPQGroupItem(
+            'PQTabletConfig',
+            pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}},
+        ),
+    );
+
+    return <InfoViewer title={'Changefeed'} info={info} />;
 };

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -8,7 +8,7 @@ import InternalLink from '../../../components/InternalLink/InternalLink';
 
 import routes, {createHref} from '../../../routes';
 import type {RequiredField} from '../../../types';
-import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
+import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
 import {getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
 import {bytesToGB} from '../../../utils/utils';
@@ -96,9 +96,7 @@ function Pdisk(props: PDiskProps) {
         Realtime &&
             errorColors.includes(Realtime) &&
             pdiskData.push({label: 'Realtime', value: Realtime});
-        Device &&
-            errorColors.includes(Device) &&
-            pdiskData.push({label: 'Device', value: Device});
+        Device && errorColors.includes(Device) && pdiskData.push({label: 'Device', value: Device});
         return pdiskData;
     };
     /* eslint-enable */
@@ -113,11 +111,7 @@ function Pdisk(props: PDiskProps) {
             // matches the default offset for popup with arrow out of a sense of beauty
             offset={[0, 12]}
         >
-            <InfoViewer
-                title="PDisk"
-                info={preparePdiskData()}
-                size="s"
-            />
+            <InfoViewer title="PDisk" info={preparePdiskData()} size="s" />
         </Popup>
     );
 

package/dist/containers/Storage/Pdisk/__tests__/colors.tsx

@@ -2,7 +2,7 @@ import {MemoryRouter} from 'react-router-dom';
 
 import {renderWithStore} from '../../../../utils/tests/providers';
 
-import {TPDiskState} from '../../../../types/api/storage'
+import {TPDiskState} from '../../../../types/api/pdisk'
 
 import PDisk from '../Pdisk'
 

package/dist/containers/Storage/Storage.js

@@ -25,6 +25,7 @@ import {
     StorageTypes,
     setStorageType,
     setNodesUptimeFilter,
+    setDataWasNotLoaded,
     VisibleEntitiesTitles,
     getStoragePoolsGroupsCount,
     getStorageNodesCount,
@@ -71,6 +72,7 @@ class Storage extends React.Component {
         nodeId: PropTypes.string,
         nodesUptimeFilter: PropTypes.string,
         setNodesUptimeFilter: PropTypes.func,
+        setDataWasNotLoaded: PropTypes.func,
     };
 
     componentDidMount() {
@@ -106,7 +108,8 @@ class Storage extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        const {visibleEntities, storageType, autorefresh, database} = this.props;
+        const {visibleEntities, storageType, autorefresh, database, tenant, setDataWasNotLoaded} =
+            this.props;
 
         const startFetch = () => {
             this.getStorageInfo({
@@ -144,6 +147,12 @@ class Storage extends React.Component {
                 restartAutorefresh();
             }
         }
+
+        if (tenant !== prevProps.tenant) {
+            setDataWasNotLoaded();
+            startFetch();
+            restartAutorefresh();
+        }
     }
 
     componentWillUnmount() {
@@ -367,6 +376,7 @@ const mapDispatchToProps = {
     getNodesList,
     setStorageType,
     setHeader,
+    setDataWasNotLoaded,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Storage);

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -9,7 +9,7 @@ import {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 
-import {TVDiskStateInfo} from '../../../types/api/storage';
+import {TVDiskStateInfo} from '../../../types/api/vdisk';
 //@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 //@ts-ignore
@@ -92,7 +92,13 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}: StorageGroupsProps) {
+function StorageGroups({
+    data,
+    tableSettings,
+    visibleEntities,
+    nodes,
+    onShowAll,
+}: StorageGroupsProps) {
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.PoolName,
@@ -123,7 +129,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
             header: tableColumnsNames[TableColumnsIds.Type],
             render: ({value, row}) => (
                 <>
-                    <Label>{value as string || '—'}</Label>
+                    <Label>{(value as string) || '—'}</Label>
                     {' '}
                     {row.Encryption && (
                         <Popover
@@ -143,9 +149,8 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
             name: TableColumnsIds.Missing,
             header: tableColumnsNames[TableColumnsIds.Missing],
             width: 100,
-            render: ({value, row}) => value ? (
-                <Label theme={getDegradedSeverity(row)}>Degraded: {value}</Label>
-            ) : '-',
+            render: ({value, row}) =>
+                value ? <Label theme={getDegradedSeverity(row)}>Degraded: {value}</Label> : '-',
             align: DataTable.LEFT,
             defaultOrder: DataTable.DESCENDING,
         },
@@ -164,10 +169,12 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
                     >
                         {usage}%
                     </Label>
-                ) : '-';
+                ) : (
+                    '-'
+                );
             },
             // without a limit exclude usage from sort to display at the bottom
-            sortAccessor: (row) => row.Limit ? getUsage(row) : null,
+            sortAccessor: (row) => (row.Limit ? getUsage(row) : null),
             align: DataTable.LEFT,
         },
         {
@@ -241,35 +248,35 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
             render: ({value, row}) => (
                 <div className={b('vdisks-wrapper')}>
                     {_.map(value as TVDiskStateInfo[], (el) => {
-                        const donors = Array.isArray(el.Donors) ? el.Donors.filter(isFullDonorData) : [];
+                        const donors = Array.isArray(el.Donors)
+                            ? el.Donors.filter(isFullDonorData)
+                            : [];
 
-                        return (
-                            donors.length > 0 ? (
-                                <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                    <Vdisk
-                                        {...el}
-                                        PoolName={row[TableColumnsIds.PoolName]}
-                                        nodes={nodes}
-                                    />
-                                    {donors.map((donor) => (
-                                        <Vdisk
-                                            {...donor}
-                                            // donor and acceptor are always in the same group
-                                            PoolName={row[TableColumnsIds.PoolName]}
-                                            nodes={nodes}
-                                            key={stringifyVdiskId(donor.VDiskId)}
-                                        />
-                                    ))}
-                                </Stack>
-                            ) : (
-                                <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                        return donors.length > 0 ? (
+                            <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                                <Vdisk
+                                    {...el}
+                                    PoolName={row[TableColumnsIds.PoolName]}
+                                    nodes={nodes}
+                                />
+                                {donors.map((donor) => (
                                     <Vdisk
-                                        {...el}
+                                        {...donor}
+                                        // donor and acceptor are always in the same group
                                         PoolName={row[TableColumnsIds.PoolName]}
                                         nodes={nodes}
+                                        key={stringifyVdiskId(donor.VDiskId)}
                                     />
-                                </div>
-                            )
+                                ))}
+                            </Stack>
+                        ) : (
+                            <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                                <Vdisk
+                                    {...el}
+                                    PoolName={row[TableColumnsIds.PoolName]}
+                                    nodes={nodes}
+                                />
+                            </div>
                         );
                     })}
                 </div>

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

@@ -2,8 +2,6 @@ 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';
 
@@ -11,7 +9,7 @@ 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

@@ -4,7 +4,8 @@ import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@yandex-cloud/react-data-table';
 
-import { Loader } from '../../../../components/Loader';
+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';
@@ -15,6 +16,9 @@ import {
     setCurrentDescribePath,
     setDataWasNotLoaded,
 } from '../../../../store/reducers/describe';
+import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema';
+
+import {isCdcStreamEntityType} from '../../utils/schema';
 
 import i18n from './i18n';
 
@@ -24,21 +28,33 @@ const b = block('ydb-consumers');
 
 interface ConsumersProps {
     path: string;
+    type?: EPathType;
 }
 
-export const Consumers = ({path}: ConsumersProps) => {
+export const Consumers = ({path, type}: ConsumersProps) => {
     const dispatch = useDispatch();
 
+    const isCdcStream = isCdcStreamEntityType(type);
+
+    const mergedChildrenPaths = useTypedSelector((state) =>
+        selectSchemaMergedChildrenPaths(state, path, type),
+    );
+
+    const dataPath = isCdcStream ? mergedChildrenPaths?.[0] : path;
+
     const fetchData = useCallback(
         (isBackground: boolean) => {
             if (!isBackground) {
                 dispatch(setDataWasNotLoaded());
             }
-            dispatch(setCurrentDescribePath(path));
-            dispatch(getDescribe({path}));
+
+            if (dataPath) {
+                dispatch(setCurrentDescribePath(dataPath));
+                dispatch(getDescribe({path: dataPath}));
+            }
         },
 
-        [path, dispatch],
+        [dispatch, dataPath],
     );
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
@@ -46,7 +62,7 @@ export const Consumers = ({path}: ConsumersProps) => {
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
     const {loading, wasLoaded, error} = useTypedSelector((state) => state.describe);
-    const consumers = useTypedSelector((state) => selectConsumers(state, path));
+    const consumers = useTypedSelector((state) => selectConsumers(state, dataPath));
 
     const [consumersToRender, setConsumersToRender] = useState(consumers);
 

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

@@ -1,5 +1,5 @@
-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';
@@ -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,16 +68,20 @@ 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) {
+    if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
         return <Loader size="m" />;
     }
 
@@ -58,7 +89,7 @@ const Describe = ({tenant}: IDescribeProps) => {
         return <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;
     }
 
-    if (!loading && !currentDescribe) {
+    if (!loading && !preparedDescribeData) {
         return <div className={b('message-container')}>Empty</div>;
     }
 
@@ -66,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.tsx

@@ -38,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';
 
@@ -66,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));
@@ -134,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} />;
@@ -146,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} />;
@@ -155,7 +161,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Heatmap path={currentItem.Path} />;
             }
             case GeneralPagesIds.consumers: {
-                return <Consumers path={currentSchemaPath} />;
+                return <Consumers path={currentSchemaPath} type={type} />;
             }
             default: {
                 return <div>No data...</div>;

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