ydb-embedded-ui 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [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