ydb-embedded-ui 4.5.0 → 4.5.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.1...v4.5.2) (2023-06-06)
+
+
+### Bug Fixes
+
+* **Versions:** enable table dynamic render ([#416](https://github.com/ydb-platform/ydb-embedded-ui/issues/416)) ([3c877ea](https://github.com/ydb-platform/ydb-embedded-ui/commit/3c877ea88a0c4036213b38099676f473cf3ac2d6))
+
+## [4.5.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.0...v4.5.1) (2023-06-02)
+
+
+### Bug Fixes
+
+* **Tablet:** fetch data on action finish ([#405](https://github.com/ydb-platform/ydb-embedded-ui/issues/405)) ([f1d71c5](https://github.com/ydb-platform/ydb-embedded-ui/commit/f1d71c5af330a0a13246f8d87433e6bba1d3509a))
+
 ## [4.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.4.2...v4.5.0) (2023-06-01)
 
 

package/dist/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -13,6 +13,7 @@ interface CriticalActionDialogProps {
     text: string;
     onClose: VoidFunction;
     onConfirm: () => Promise<unknown>;
+    onConfirmActionFinish: VoidFunction;
 }
 
 export const CriticalActionDialog = ({
@@ -20,6 +21,7 @@ export const CriticalActionDialog = ({
     text,
     onClose,
     onConfirm,
+    onConfirmActionFinish,
 }: CriticalActionDialogProps) => {
     const [isLoading, setIsLoading] = useState(false);
 
@@ -28,6 +30,7 @@ export const CriticalActionDialog = ({
         setIsLoading(true);
 
         return onConfirm().then(() => {
+            onConfirmActionFinish();
             setIsLoading(false);
             onClose();
         });

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
 import ProgressViewer from '../ProgressViewer/ProgressViewer';
-import PoolUsage from '../PoolUsage/PoolUsage';
+import {PoolUsage} from '../PoolUsage/PoolUsage';
 
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
 import {calcUptime} from '../../utils';

package/dist/components/PoolUsage/PoolUsage.scss

@@ -1,4 +1,4 @@
-.pool-usage {
+.ydb-pool-usage {
     font-size: var(--yc-text-body-2-font-size);
     line-height: var(--yc-text-body-2-line-height);
     &__info {

package/dist/components/PoolUsage/PoolUsage.tsx

@@ -0,0 +1,50 @@
+import block from 'bem-cn-lite';
+
+import type {TPoolStats} from '../../types/api/nodes';
+
+import './PoolUsage.scss';
+
+const b = block('ydb-pool-usage');
+
+const getLineType = (fillWidth: number) => {
+    let fillColor = 'green';
+    if (fillWidth > 60 && fillWidth <= 80) {
+        fillColor = 'yellow';
+    } else if (fillWidth > 80) {
+        fillColor = 'red';
+    }
+
+    return fillColor;
+};
+
+interface PoolUsageProps {
+    data?: TPoolStats;
+}
+
+export const PoolUsage = ({data: pool = {}}: PoolUsageProps) => {
+    const {Threads, Name = 'Unknown', Usage = 0} = pool;
+    const dataExist = Usage && Threads;
+
+    const value = Math.floor(Usage * 100);
+    const fillWidth = value > 100 ? 100 : value;
+
+    return (
+        <div className={b()}>
+            <div className={b('info')}>
+                <div className={b('pool-name')}>{Name}</div>
+                {dataExist && (
+                    <div className={b('value')}>
+                        <div className={b('percents')}>{value < 1 ? '<1' : value}%</div>
+                        <div className={b('threads')}>(×{Threads})</div>
+                    </div>
+                )}
+            </div>
+            <div className={b('visual')}>
+                <div
+                    className={b('usage-line', {type: getLineType(fillWidth)})}
+                    style={{width: `${fillWidth}%`}}
+                />
+            </div>
+        </div>
+    );
+};

package/dist/containers/Node/Node.tsx

@@ -15,7 +15,7 @@ import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
-import {getNodeInfo, resetNode} from '../../store/reducers/node';
+import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {setHeader} from '../../store/reducers/header';
 import {AutoFetcher} from '../../utils/autofetcher';

package/dist/containers/Node/NodeStructure/NodeStructure.tsx

@@ -1,16 +1,19 @@
 import {useEffect, useRef, useMemo} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import url from 'url';
 import _ from 'lodash';
 
 import cn from 'bem-cn-lite';
 
-import {PDisk} from './Pdisk';
 import {Loader} from '../.././../components/Loader';
 
-import {getNodeStructure, selectNodeStructure} from '../../../store/reducers/node';
+import {getNodeStructure} from '../../../store/reducers/node/node';
+import {selectNodeStructure} from '../../../store/reducers/node/selectors';
 
 import {AutoFetcher} from '../../../utils/autofetcher';
+import {useTypedSelector} from '../../../utils/hooks';
+
+import {PDisk} from './Pdisk';
 
 import './NodeStructure.scss';
 
@@ -32,20 +35,19 @@ interface NodeStructureProps {
 
 const autofetcher = new AutoFetcher();
 
-function NodeStructure(props: NodeStructureProps) {
+function NodeStructure({nodeId, className, additionalNodesInfo}: NodeStructureProps) {
     const dispatch = useDispatch();
 
-    const nodeStructure: any = useSelector(selectNodeStructure);
+    const nodeStructure = useTypedSelector(selectNodeStructure);
 
-    const loadingStructure = useSelector((state: any) => state.node.loadingStructure);
-    const wasLoadedStructure = useSelector((state: any) => state.node.wasLoadedStructure);
-    const nodeData = useSelector((state: any) => state.node?.data?.SystemStateInfo?.[0]);
+    const {loadingStructure, wasLoadedStructure} = useTypedSelector((state) => state.node);
+    const nodeData = useTypedSelector((state) => state.node?.data?.SystemStateInfo?.[0]);
 
     const nodeHref = useMemo(() => {
-        return props.additionalNodesInfo?.getNodeRef
-            ? props.additionalNodesInfo.getNodeRef(nodeData)
+        return additionalNodesInfo?.getNodeRef
+            ? additionalNodesInfo.getNodeRef(nodeData)
             : undefined;
-    }, [nodeData, props.additionalNodesInfo]);
+    }, [nodeData, additionalNodesInfo]);
 
     const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
         window.location.href,
@@ -71,16 +73,16 @@ function NodeStructure(props: NodeStructureProps) {
     }, []);
 
     useEffect(() => {
-        dispatch(getNodeStructure(props.nodeId));
+        dispatch(getNodeStructure(nodeId));
         autofetcher.start();
-        autofetcher.fetch(() => dispatch(getNodeStructure(props.nodeId)));
+        autofetcher.fetch(() => dispatch(getNodeStructure(nodeId)));
 
         return () => {
             scrolled.current = false;
             isReady.current = false;
             autofetcher.stop();
         };
-    }, [props.nodeId, dispatch]);
+    }, [nodeId, dispatch]);
 
     useEffect(() => {
         if (!_.isEmpty(nodeStructure) && scrollContainer) {
@@ -98,9 +100,9 @@ function NodeStructure(props: NodeStructureProps) {
 
             if (vdiskIdFromUrl) {
                 const vDisks = nodeStructure[pdiskIdFromUrl as string]?.vDisks;
-                const vDisk = vDisks?.find((el: any) => el.id === vdiskIdFromUrl);
+                const vDisk = vDisks?.find((el) => el.id === vdiskIdFromUrl);
                 const dataTable = vDisk ? document.querySelector('.data-table') : undefined;
-                const order = vDisk?.order;
+                const order = vDisk?.order || 0;
 
                 if (dataTable) {
                     scrollToVdisk += (dataTable as HTMLElement).offsetTop + 40 * order;
@@ -147,7 +149,7 @@ function NodeStructure(props: NodeStructureProps) {
 
     return (
         <div className={b()} ref={scrollContainerRef}>
-            <div className={props.className}>{renderContent()}</div>
+            <div className={className}>{renderContent()}</div>
         </div>
     );
 }

package/dist/containers/Tablet/Tablet.scss

@@ -52,6 +52,10 @@
         text-transform: uppercase;
     }
 
+    &__loader {
+        width: 25px;
+    }
+
     .info-viewer__items {
         grid-template-columns: auto;
     }

package/dist/containers/Tablet/Tablet.tsx

@@ -108,9 +108,10 @@ export const Tablet = () => {
                             <Icon name="external" />
                         </a>
                         {Leader && <Tag text="Leader" type="blue" />}
+                        <span className={b('loader')}>{loading && <Loader size="s" />}</span>
                     </div>
                     <TabletInfo tablet={tablet} tenantPath={tenantPath} />
-                    <TabletControls tablet={tablet} />
+                    <TabletControls tablet={tablet} fetchData={fetchData} />
                 </div>
                 <div className={b('rigth-pane')}>
                     <TabletTable history={history} />

package/dist/containers/Tablet/TabletControls/TabletControls.tsx

@@ -17,18 +17,19 @@ type VisibleDialogType = EVisibleDialogType | null;
 
 interface TabletControlsProps {
     tablet: TTabletStateInfo;
+    fetchData: VoidFunction;
 }
 
-export const TabletControls = ({tablet}: TabletControlsProps) => {
+export const TabletControls = ({tablet, fetchData}: TabletControlsProps) => {
     const {TabletId, HiveId} = tablet;
 
     const [isDialogVisible, setIsDialogVisible] = useState(false);
     const [visibleDialogType, setVisibleDialogType] = useState<VisibleDialogType>(null);
-    const [isTabletActionsDisabled, setIsTabletActionsDisabled] = useState(false);
+    const [isTabletActionLoading, setIsTabletActionLoading] = useState(false);
 
     // Enable controls after data update
     useEffect(() => {
-        setIsTabletActionsDisabled(false);
+        setIsTabletActionLoading(false);
     }, [tablet]);
 
     const makeShowDialog = (type: VisibleDialogType) => () => {
@@ -46,15 +47,15 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
     };
 
     const _onKillClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.killTablet(TabletId);
     };
     const _onStopClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.stopTablet(TabletId, HiveId);
     };
     const _onResumeClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.resumeTablet(TabletId, HiveId);
     };
 
@@ -62,25 +63,11 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
         return HiveId && HiveId !== '0';
     };
 
-    const isDisabledResume = () => {
-        if (isTabletActionsDisabled) {
-            return true;
-        }
-
-        return tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
-    };
-
-    const isDisabledKill = () => {
-        return isTabletActionsDisabled;
-    };
-
-    const isDisabledStop = () => {
-        if (isTabletActionsDisabled) {
-            return true;
-        }
+    const isDisabledResume =
+        tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
 
-        return tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
-    };
+    const isDisabledStop =
+        tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
 
     const renderDialog = () => {
         if (!isDialogVisible) {
@@ -95,6 +82,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.kill')}
                         onClose={hideDialog}
                         onConfirm={_onKillClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -105,6 +93,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.stop')}
                         onClose={hideDialog}
                         onConfirm={_onStopClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -115,6 +104,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.resume')}
                         onClose={hideDialog}
                         onConfirm={_onResumeClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -128,7 +118,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
             <Button
                 onClick={showKillDialog}
                 view="action"
-                disabled={isDisabledKill()}
+                loading={isTabletActionLoading}
                 className={b('control')}
             >
                 {i18n('controls.kill')}
@@ -138,7 +128,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <Button
                         onClick={showStopDialog}
                         view="action"
-                        disabled={isDisabledStop()}
+                        disabled={isDisabledStop}
+                        loading={!isDisabledStop && isTabletActionLoading}
                         className={b('control')}
                     >
                         {i18n('controls.stop')}
@@ -146,7 +137,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <Button
                         onClick={showResumeDialog}
                         view="action"
-                        disabled={isDisabledResume()}
+                        disabled={isDisabledResume}
+                        loading={!isDisabledResume && isTabletActionLoading}
                         className={b('control')}
                     >
                         {i18n('controls.resume')}

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

@@ -3,13 +3,13 @@ import block from 'bem-cn-lite';
 import qs from 'qs';
 
 import type {IPreparedConsumerData} from '../../../../../types/store/topic';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import {InternalLink} from '../../../../../components/InternalLink';
 import {formatMsToUptime} from '../../../../../utils';
 import routes, {createHref} from '../../../../../routes';
 
 import {TenantTabsGroups} from '../../../TenantPages';
-import {GeneralPagesIds} from '../../DiagnosticsPages';
 
 import {
     CONSUMERS_COLUMNS_IDS,
@@ -42,7 +42,7 @@ export const columns: Column<IPreparedConsumerData>[] = [
                 <InternalLink
                     to={createHref(routes.tenant, undefined, {
                         ...queryParams,
-                        [TenantTabsGroups.generalTab]: GeneralPagesIds.partitions,
+                        [TenantTabsGroups.generalTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
                         selectedConsumer: row.name,
                     })}
                 >

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

@@ -7,37 +7,36 @@ import {useLocation} from 'react-router';
 
 import {Switch, Tabs} from '@gravity-ui/uikit';
 
+import type {EPathType} from '../../../types/api/schema';
+
+import {useTypedSelector} from '../../../utils/hooks';
+import routes, {createHref} from '../../../routes';
+import type {TenantDiagnosticsTab, TenantGeneralTab} from '../../../store/reducers/tenant/types';
+import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
+
 import {Loader} from '../../../components/Loader';
 
-import {TopQueries} from './TopQueries';
-//@ts-ignore
-import DetailedOverview from './DetailedOverview/DetailedOverview';
-import {TopShards} from './TopShards';
-//@ts-ignore
-import Storage from '../../Storage/Storage';
-//@ts-ignore
-import Network from './Network/Network';
-//@ts-ignore
-import Describe from './Describe/Describe';
-//@ts-ignore
-import HotKeys from './HotKeys/HotKeys';
-//@ts-ignore
 import {Heatmap} from '../../Heatmap';
 import {Nodes} from '../../Nodes';
-//@ts-ignore
+import Storage from '../../Storage/Storage';
 import {Tablets} from '../../Tablets';
-import {Consumers} from './Consumers';
+
+import Describe from './Describe/Describe';
+import HotKeys from './HotKeys/HotKeys';
+import Network from './Network/Network';
 import {Partitions} from './Partitions/Partitions';
+import {Consumers} from './Consumers';
+import {TopQueries} from './TopQueries';
+import {TopShards} from './TopShards';
+import DetailedOverview from './DetailedOverview/DetailedOverview';
 
-import routes, {createHref} from '../../../routes';
-import type {EPathType} from '../../../types/api/schema';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
-import {GeneralPagesIds, DATABASE_PAGES, getPagesByType} from './DiagnosticsPages';
-//@ts-ignore
-import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
-import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant';
 import {isDatabaseEntityType} from '../utils/schema';
 
+import {TenantTabsGroups} from '../TenantPages';
+import {DATABASE_PAGES, getPagesByType} from './DiagnosticsPages';
+
 import './Diagnostics.scss';
 
 interface DiagnosticsProps {
@@ -51,8 +50,8 @@ const b = cn('kv-tenant-diagnostics');
 function Diagnostics(props: DiagnosticsProps) {
     const dispatch = useDispatch();
     const {currentSchemaPath, autorefresh} = useSelector((state: any) => state.schema);
-    const {diagnosticsTab = GeneralPagesIds.overview, wasLoaded} = useSelector(
-        (state: any) => state.tenant,
+    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview, wasLoaded} = useTypedSelector(
+        (state) => state.tenant,
     );
 
     const location = useLocation();
@@ -73,7 +72,7 @@ function Diagnostics(props: DiagnosticsProps) {
         return getPagesByType(props.type);
     }, [props.type, isDatabase]);
 
-    const forwardToDiagnosticTab = (tab: GeneralPagesIds) => {
+    const forwardToDiagnosticTab = (tab: TenantDiagnosticsTab) => {
         dispatch(setDiagnosticsTab(tab));
     };
     const activeTab = useMemo(() => {
@@ -97,7 +96,7 @@ function Diagnostics(props: DiagnosticsProps) {
         }
     };
 
-    const forwardToGeneralTab = (tab: TenantGeneralTabsIds) => {
+    const forwardToGeneralTab = (tab: TenantGeneralTab) => {
         dispatch(setTopLevelTab(tab));
     };
 
@@ -107,7 +106,7 @@ function Diagnostics(props: DiagnosticsProps) {
         const tenantNameString = tenantName as string;
 
         switch (diagnosticsTab) {
-            case GeneralPagesIds.overview: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
                 return (
                     <DetailedOverview
                         type={type}
@@ -116,7 +115,7 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.topQueries: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
                 return (
                     <TopQueries
                         path={tenantNameString}
@@ -125,10 +124,10 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.topShards: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
                 return <TopShards tenantPath={tenantNameString} type={type} />;
             }
-            case GeneralPagesIds.nodes: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
                 return (
                     <Nodes
                         path={currentSchemaPath}
@@ -137,28 +136,28 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.tablets: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
                 return <Tablets path={currentSchemaPath} />;
             }
-            case GeneralPagesIds.storage: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
                 return <Storage tenant={tenantNameString} database={true} />;
             }
-            case GeneralPagesIds.network: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.network: {
                 return <Network path={tenantNameString} />;
             }
-            case GeneralPagesIds.describe: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
                 return <Describe tenant={tenantNameString} type={type} />;
             }
-            case GeneralPagesIds.hotKeys: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
                 return <HotKeys type={type} />;
             }
-            case GeneralPagesIds.graph: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
                 return <Heatmap path={currentSchemaPath} />;
             }
-            case GeneralPagesIds.consumers: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
                 return <Consumers path={currentSchemaPath} type={type} />;
             }
-            case GeneralPagesIds.partitions: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
                 return <Partitions path={currentSchemaPath} />;
             }
             default: {

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

@@ -1,80 +1,67 @@
+import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {EPathType} from '../../../types/api/schema';
 
-export enum GeneralPagesIds {
-    'overview' = 'Overview',
-    'topQueries' = 'topQueries',
-    'topShards' = 'topShards',
-    'nodes' = 'Nodes',
-    'tablets' = 'Tablets',
-    'storage' = 'Storage',
-    'network' = 'Network',
-    'describe' = 'Describe',
-    'hotKeys' = 'hotKeys',
-    'graph' = 'graph',
-    'consumers' = 'consumers',
-    'partitions' = 'partitions',
-}
-
 type Page = {
-    id: GeneralPagesIds;
+    id: TenantDiagnosticsTab;
     title: string;
 };
 
 const overview = {
-    id: GeneralPagesIds.overview,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.overview,
     title: 'Info',
 };
 
 const topQueries = {
-    id: GeneralPagesIds.topQueries,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
     title: 'Top queries',
 };
 
 const topShards = {
-    id: GeneralPagesIds.topShards,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
     title: 'Top shards',
 };
 
 const nodes = {
-    id: GeneralPagesIds.nodes,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
     title: 'Nodes',
 };
 
 const tablets = {
-    id: GeneralPagesIds.tablets,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
     title: 'Tablets',
 };
 const storage = {
-    id: GeneralPagesIds.storage,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.storage,
     title: 'Storage',
 };
 const network = {
-    id: GeneralPagesIds.network,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.network,
     title: 'Network',
 };
 
 const describe = {
-    id: GeneralPagesIds.describe,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.describe,
     title: 'Describe',
 };
 
 const hotKeys = {
-    id: GeneralPagesIds.hotKeys,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.hotKeys,
     title: 'Hot keys',
 };
 
 const graph = {
-    id: GeneralPagesIds.graph,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.graph,
     title: 'Graph',
 };
 
 const consumers = {
-    id: GeneralPagesIds.consumers,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.consumers,
     title: 'Consumers',
 };
 
 const partitions = {
-    id: GeneralPagesIds.partitions,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
     title: 'Partitions',
 };
 

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

@@ -12,7 +12,7 @@ import {Icon} from '../../../../components/Icon';
 import {ProblemFilter} from '../../../../components/ProblemFilter';
 import {Illustration} from '../../../../components/Illustration';
 
-import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network';
+import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network/network';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
 import {changeFilter, ProblemFilterValues} from '../../../../store/reducers/settings/settings';
 import {AutoFetcher} from '../../../../utils/autofetcher';
@@ -361,7 +361,7 @@ class Network extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-    const {wasLoaded, loading, data: netWorkInfo} = state.network;
+    const {wasLoaded, loading, data: netWorkInfo = {}} = state.network;
     const {autorefresh} = state.schema;
     return {
         netWorkInfo,