ydb-embedded-ui 6.6.1 → 6.7.0

package/dist/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -5,10 +5,11 @@ import DataTable from '@gravity-ui/react-data-table';
 import { Button, Card, Icon } from '@gravity-ui/uikit';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
-import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
+import { hotKeysApi } from '../../../../store/reducers/hotKeys/hotKeys';
+import { schemaApi } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
-import { DEFAULT_TABLE_SETTINGS, IS_HOTKEYS_HELP_HIDDDEN_KEY } from '../../../../utils/constants';
-import { useSetting, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { DEFAULT_TABLE_SETTINGS, IS_HOTKEYS_HELP_HIDDEN_KEY } from '../../../../utils/constants';
+import { useSetting } from '../../../../utils/hooks';
 import i18n from './i18n';
 import keyIcon from '../../../../assets/icons/key.svg';
 import './HotKeys.scss';
@@ -37,59 +38,18 @@ const getHotKeysColumns = (keyColumnsIds = []) => {
     ];
 };
 export function HotKeys({ path }) {
-    var _a, _b, _c;
-    const dispatch = useTypedDispatch();
-    const [helpHidden, setHelpHidden] = useSetting(IS_HOTKEYS_HELP_HIDDDEN_KEY);
-    const collectSamplesTimerRef = React.useRef();
-    const { loading, wasLoaded, data, error } = useTypedSelector((state) => state.hotKeys);
-    const { loading: schemaLoading, data: schemaData } = useTypedSelector((state) => state.schema);
-    const keyColumnsIds = (_c = (_b = (_a = schemaData[path]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Table) === null || _c === void 0 ? void 0 : _c.KeyColumnNames;
+    var _a, _b;
+    const { currentData: data, isFetching, error } = hotKeysApi.useGetHotKeysQuery({ path });
+    const loading = isFetching && data === undefined;
+    const { currentData: schemaData, isFetching: schemaIsFetching } = schemaApi.endpoints.getSchema.useQueryState({ path });
+    const schemaLoading = schemaIsFetching && schemaData === undefined;
+    const keyColumnsIds = (_b = (_a = schemaData === null || schemaData === void 0 ? void 0 : schemaData.PathDescription) === null || _a === void 0 ? void 0 : _a.Table) === null || _b === void 0 ? void 0 : _b.KeyColumnNames;
     const tableColumns = React.useMemo(() => {
         return getHotKeysColumns(keyColumnsIds);
     }, [keyColumnsIds]);
-    React.useEffect(() => {
-        const fetchHotkeys = async (enableSampling) => {
-            // Set hotkeys error, but not data, since data is set conditionally
-            try {
-                const response = await window.api.getHotKeys(path, enableSampling);
-                return response;
-            }
-            catch (err) {
-                dispatch(setHotKeysError(err));
-                return undefined;
-            }
-        };
-        const fetchData = async () => {
-            // If there is previous pending request for samples, cancel it
-            if (collectSamplesTimerRef.current !== undefined) {
-                window.clearInterval(collectSamplesTimerRef.current);
-            }
-            dispatch(setHotKeysDataWasNotLoaded());
-            dispatch(setHotKeysLoading());
-            // Send request that will trigger hot keys sampling (enable_sampling = true)
-            const initialResponse = await fetchHotkeys(true);
-            // If there are hotkeys in the initial request (hotkeys was collected before)
-            // we could just use colleted samples (collected hotkeys are stored only for 30 seconds)
-            if (initialResponse && initialResponse.hotkeys) {
-                dispatch(setHotKeysData(initialResponse));
-            }
-            else if (initialResponse) {
-                // Else wait for 5 seconds, while hot keys are being collected
-                // And request these samples (enable_sampling = false)
-                const timer = setTimeout(async () => {
-                    const responseWithSamples = await fetchHotkeys(false);
-                    if (responseWithSamples) {
-                        dispatch(setHotKeysData(responseWithSamples));
-                    }
-                }, 5000);
-                collectSamplesTimerRef.current = timer;
-            }
-        };
-        fetchData();
-    }, [dispatch, path]);
     const renderContent = () => {
         // It takes a while to collect hot keys. Display explicit status message, while collecting
-        if ((loading && !wasLoaded) || schemaLoading) {
+        if (loading || schemaLoading) {
             return _jsx("div", { children: i18n('hot-keys-collecting') });
         }
         if (error) {
@@ -103,11 +63,12 @@ export function HotKeys({ path }) {
                 order: DataTable.DESCENDING,
             } }));
     };
-    const renderHelpCard = () => {
-        if (helpHidden) {
-            return null;
-        }
-        return (_jsxs(Card, { theme: "info", view: "filled", type: "container", className: b('help-card'), children: [i18n('help'), _jsx(Button, { className: b('help-card__close-button'), view: "flat", onClick: () => setHelpHidden(true), children: _jsx(Icon, { data: Xmark, size: 18 }) })] }));
-    };
-    return (_jsxs(React.Fragment, { children: [renderHelpCard(), renderContent()] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(HelpCard, {}), renderContent()] }));
+}
+function HelpCard() {
+    const [helpHidden, setHelpHidden] = useSetting(IS_HOTKEYS_HELP_HIDDEN_KEY);
+    if (helpHidden) {
+        return null;
+    }
+    return (_jsxs(Card, { theme: "info", view: "filled", type: "container", className: b('help-card'), children: [i18n('help'), _jsx(Button, { className: b('help-card__close-button'), view: "flat", onClick: () => setHelpHidden(true), children: _jsx(Icon, { data: Xmark, size: 18 }) })] }));
 }

package/dist/src/containers/Tenant/Diagnostics/Network/Network.d.ts

@@ -1,6 +1,6 @@
 import './Network.scss';
 interface NetworkProps {
-    path: string;
+    tenantName: string;
 }
-export declare function Network({ path }: NetworkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Network({ tenantName }: NetworkProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,23 +9,23 @@ import { networkApi } from '../../../../store/reducers/network/network';
 import { ProblemFilterValues, changeFilter, selectProblemFilter, } from '../../../../store/reducers/settings/settings';
 import { hideTooltip, showTooltip } from '../../../../store/reducers/tooltip';
 import { cn } from '../../../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { getDefaultNodePath } from '../../../Node/NodePages';
 import { NodeNetwork } from './NodeNetwork/NodeNetwork';
 import { getConnectedNodesCount } from './utils';
 import networkIcon from '../../../../assets/icons/network.svg';
 import './Network.scss';
 const b = cn('network');
-export function Network({ path }) {
+export function Network({ tenantName }) {
     var _a, _b;
-    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
     const filter = useTypedSelector(selectProblemFilter);
     const dispatch = useTypedDispatch();
     const [clickedNode, setClickedNode] = React.useState();
     const [showId, setShowId] = React.useState(false);
     const [showRacks, setShowRacks] = React.useState(false);
-    const { currentData, isFetching, error } = networkApi.useGetNetworkInfoQuery(path, {
-        pollingInterval: autorefresh,
+    const { currentData, isFetching, error } = networkApi.useGetNetworkInfoQuery(tenantName, {
+        pollingInterval: autoRefreshInterval,
     });
     const loading = isFetching && currentData === undefined;
     if (loading) {

package/dist/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/AsyncReplicationInfo.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Flex, Text } from '@gravity-ui/uikit';
 import { AsyncReplicationState } from '../../../../../components/AsyncReplicationState';
 import { InfoViewer } from '../../../../../components/InfoViewer';
-import { useTypedSelector } from '../../../../../utils/hooks';
 import { getEntityName } from '../../../utils';
 import { AsyncReplicationPaths } from '../AsyncReplicationPaths';
 import { Credentials } from './Credentials';
@@ -11,10 +10,6 @@ import i18n from './i18n';
 export function AsyncReplicationInfo({ data }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
-    const { error: schemaError } = useTypedSelector((state) => state.schema);
-    if (schemaError) {
-        return _jsx("div", { className: "error", children: schemaError.statusText });
-    }
     if (!data) {
         return (_jsxs("div", { className: "error", children: [i18n('noData'), " ", entityName] }));
     }

package/dist/src/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/ChangefeedInfo.d.ts

@@ -1,8 +1,9 @@
 import type { TEvDescribeSchemeResult } from '../../../../../types/api/schema';
 interface ChangefeedProps {
+    path: string;
     data?: TEvDescribeSchemeResult;
     topic?: TEvDescribeSchemeResult;
 }
 /** Displays overview for CDCStream EPathType */
-export declare const ChangefeedInfo: ({ data, topic }: ChangefeedProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChangefeedInfo: ({ path, data, topic }: ChangefeedProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/ChangefeedInfo.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { InfoViewer, formatObject } from '../../../../../components/InfoViewer';
 import { formatCdcStreamItem, formatCommonItem, } from '../../../../../components/InfoViewer/formatters';
-import { useTypedSelector } from '../../../../../utils/hooks';
 import { getEntityName } from '../../../utils';
 import { TopicStats } from '../TopicStats';
 import { prepareTopicSchemaInfo } from '../utils';
@@ -21,14 +20,10 @@ const prepareChangefeedInfo = (changefeedData, topicData) => {
     return [created, ...changefeedInfo, ...topicInfo];
 };
 /** Displays overview for CDCStream EPathType */
-export const ChangefeedInfo = ({ data, topic }) => {
+export const ChangefeedInfo = ({ path, data, topic }) => {
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
-    const { error: schemaError } = useTypedSelector((state) => state.schema);
-    if (schemaError) {
-        return _jsx("div", { className: "error", children: schemaError.statusText });
-    }
     if (!data || !topic) {
         return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }
-    return (_jsxs("div", { children: [_jsx(InfoViewer, { title: entityName, info: prepareChangefeedInfo(data, topic) }), _jsx(TopicStats, {})] }));
+    return (_jsxs("div", { children: [_jsx(InfoViewer, { title: entityName, info: prepareChangefeedInfo(data, topic) }), _jsx(TopicStats, { path: path })] }));
 };

package/dist/src/containers/Tenant/Diagnostics/Overview/Overview.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { EPathType } from '../../../../types/api/schema';
 interface OverviewProps {
     type?: EPathType;
-    tenantName?: string;
+    path: string;
 }
-declare function Overview({ type, tenantName }: OverviewProps): string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
+declare function Overview({ type, path }: OverviewProps): string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
 export default Overview;

package/dist/src/containers/Tenant/Diagnostics/Overview/Overview.js

@@ -6,9 +6,9 @@ import { TableIndexInfo } from '../../../../components/InfoViewer/schemaInfo';
 import { Loader } from '../../../../components/Loader';
 import { olapApi } from '../../../../store/reducers/olapStats';
 import { overviewApi } from '../../../../store/reducers/overview/overview';
-import { selectSchemaMergedChildrenPaths } from '../../../../store/reducers/schema/schema';
+import { schemaApi, selectSchemaMergedChildrenPaths } from '../../../../store/reducers/schema/schema';
 import { EPathType } from '../../../../types/api/schema';
-import { useTypedSelector } from '../../../../utils/hooks';
+import { useAutoRefreshInterval, useTypedSelector } from '../../../../utils/hooks';
 import { ExternalDataSourceInfo } from '../../Info/ExternalDataSource/ExternalDataSource';
 import { ExternalTableInfo } from '../../Info/ExternalTable/ExternalTable';
 import { ViewInfo } from '../../Info/View/View';
@@ -17,30 +17,28 @@ import { AsyncReplicationInfo } from './AsyncReplicationInfo';
 import { ChangefeedInfo } from './ChangefeedInfo';
 import { TableInfo } from './TableInfo';
 import { TopicInfo } from './TopicInfo';
-function Overview({ type, tenantName }) {
-    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
-    const schemaPath = currentSchemaPath || tenantName;
-    const olapParams = isTableType(type) && isColumnEntityType(type) ? { path: schemaPath } : skipToken;
-    const { currentData: olapData, isFetching: olapIsFetching } = olapApi.useGetOlapStatsQuery(olapParams, { pollingInterval: autorefresh });
+function Overview({ type, path }) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const olapParams = isTableType(type) && isColumnEntityType(type) ? { path } : skipToken;
+    const { currentData: olapData, isFetching: olapIsFetching } = olapApi.useGetOlapStatsQuery(olapParams, { pollingInterval: autoRefreshInterval });
     const olapStatsLoading = olapIsFetching && olapData === undefined;
     const { result: olapStats } = olapData || { result: undefined };
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
-    // shalloEqual prevents rerenders when new schema data is loaded
-    const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type), shallowEqual);
+    // shallowEqual prevents rerenders when new schema data is loaded
+    const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, path, type), shallowEqual);
     let paths = skipToken;
-    if (schemaPath) {
-        if (!isEntityWithMergedImpl) {
-            paths = [schemaPath];
-        }
-        else if (mergedChildrenPaths) {
-            paths = [schemaPath, ...mergedChildrenPaths];
-        }
+    if (!isEntityWithMergedImpl) {
+        paths = [path];
+    }
+    else if (mergedChildrenPaths) {
+        paths = [path, ...mergedChildrenPaths];
     }
     const { currentData, isFetching, error: overviewError, } = overviewApi.useGetOverviewQuery(paths, {
-        pollingInterval: autorefresh,
+        pollingInterval: autoRefreshInterval,
     });
     const overviewLoading = isFetching && currentData === undefined;
     const { data: rawData, additionalData } = currentData || {};
+    const { error: schemaError } = schemaApi.endpoints.getSchema.useQueryState({ path });
     const entityLoading = overviewLoading || olapStatsLoading;
     const entityNotReady = isEntityWithMergedImpl && !mergedChildrenPaths;
     const renderContent = () => {
@@ -59,9 +57,9 @@ function Overview({ type, tenantName }) {
             [EPathType.EPathTypeColumnTable]: undefined,
             [EPathType.EPathTypeCdcStream]: () => {
                 var _a;
-                return (_jsx(ChangefeedInfo, { data: data, topic: (_a = additionalData === null || additionalData === void 0 ? void 0 : additionalData[0]) !== null && _a !== void 0 ? _a : undefined }));
+                return (_jsx(ChangefeedInfo, { path: path, data: data, topic: (_a = additionalData === null || additionalData === void 0 ? void 0 : additionalData[0]) !== null && _a !== void 0 ? _a : undefined }));
             },
-            [EPathType.EPathTypePersQueueGroup]: () => _jsx(TopicInfo, { data: data }),
+            [EPathType.EPathTypePersQueueGroup]: () => _jsx(TopicInfo, { data: data, path: path }),
             [EPathType.EPathTypeExternalTable]: () => _jsx(ExternalTableInfo, { data: data }),
             [EPathType.EPathTypeExternalDataSource]: () => _jsx(ExternalDataSourceInfo, { data: data }),
             [EPathType.EPathTypeView]: () => _jsx(ViewInfo, { data: data }),
@@ -72,8 +70,8 @@ function Overview({ type, tenantName }) {
     if (entityLoading || entityNotReady) {
         return _jsx(Loader, { size: "m" });
     }
-    if (overviewError) {
-        return _jsx(ResponseError, { error: overviewError });
+    if (schemaError || overviewError) {
+        return _jsx(ResponseError, { error: schemaError || overviewError });
     }
     return renderContent();
 }

package/dist/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss

@@ -1,8 +1,6 @@
 @import '../../../../../styles/mixins.scss';
 
 .ydb-diagnostics-table-info {
-    overflow: auto;
-
     &__title {
         @include info-viewer-title();
     }

package/dist/src/containers/Tenant/Diagnostics/Overview/TopicInfo/TopicInfo.d.ts

@@ -1,7 +1,8 @@
 import type { TEvDescribeSchemeResult } from '../../../../../types/api/schema';
 interface TopicInfoProps {
+    path: string;
     data?: TEvDescribeSchemeResult;
 }
 /** Displays overview for PersQueueGroup EPathType */
-export declare const TopicInfo: ({ data }: TopicInfoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TopicInfo: ({ data, path }: TopicInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/containers/Tenant/Diagnostics/Overview/TopicInfo/TopicInfo.js

@@ -1,18 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { InfoViewer } from '../../../../../components/InfoViewer';
-import { useTypedSelector } from '../../../../../utils/hooks';
 import { getEntityName } from '../../../utils';
 import { TopicStats } from '../TopicStats';
 import { prepareTopicSchemaInfo } from '../utils';
 /** Displays overview for PersQueueGroup EPathType */
-export const TopicInfo = ({ data }) => {
+export const TopicInfo = ({ data, path }) => {
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
-    const { error: schemaError } = useTypedSelector((state) => state.schema);
-    if (schemaError) {
-        return _jsx("div", { className: "error", children: schemaError.statusText });
-    }
     if (!data) {
         return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }
-    return (_jsxs("div", { children: [_jsx(InfoViewer, { title: entityName, info: prepareTopicSchemaInfo(data) }), _jsx(TopicStats, {})] }));
+    return (_jsxs("div", { children: [_jsx(InfoViewer, { title: entityName, info: prepareTopicSchemaInfo(data) }), _jsx(TopicStats, { path: path })] }));
 };

package/dist/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.d.ts

@@ -1,2 +1,4 @@
 import './TopicStats.scss';
-export declare const TopicStats: () => import("react/jsx-runtime").JSX.Element;
+export declare const TopicStats: ({ path }: {
+    path: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.js

@@ -8,7 +8,7 @@ import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
 import { selectPreparedTopicStats, topicApi } from '../../../../../store/reducers/topic';
 import { cn } from '../../../../../utils/cn';
 import { formatBps, formatBytes } from '../../../../../utils/dataFormatters/dataFormatters';
-import { useTypedSelector } from '../../../../../utils/hooks';
+import { useAutoRefreshInterval, useTypedSelector } from '../../../../../utils/hooks';
 import { formatDurationToShortTimeFormat } from '../../../../../utils/timeParsers';
 import i18n from './i18n';
 import './TopicStats.scss';
@@ -47,11 +47,11 @@ const prepareBytesWrittenInfo = (data) => {
         },
     ];
 };
-export const TopicStats = () => {
-    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
-    const { currentData, isFetching, error } = topicApi.useGetTopicQuery({ path: currentSchemaPath }, { pollingInterval: autorefresh });
+export const TopicStats = ({ path }) => {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { currentData, isFetching, error } = topicApi.useGetTopicQuery({ path }, { pollingInterval: autoRefreshInterval });
     const loading = isFetching && currentData === undefined;
-    const data = useTypedSelector((state) => selectPreparedTopicStats(state, currentSchemaPath));
+    const data = useTypedSelector((state) => selectPreparedTopicStats(state, path));
     if (loading) {
         return (_jsx("div", { className: b(), children: _jsx(Loader, { size: "s" }) }));
     }

package/dist/src/containers/Tenant/Diagnostics/Partitions/Partitions.js

@@ -9,7 +9,7 @@ import { partitionsApi, setSelectedConsumer } from '../../../../store/reducers/p
 import { selectConsumersNames, topicApi } from '../../../../store/reducers/topic';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY } from '../../../../utils/constants';
-import { useSetting, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { useAutoRefreshInterval, useSetting, useTypedDispatch, useTypedSelector, } from '../../../../utils/hooks';
 import { PartitionsControls } from './PartitionsControls/PartitionsControls';
 import { PARTITIONS_COLUMNS_WIDTH_LS_KEY } from './columns';
 import i18n from './i18n';
@@ -19,12 +19,9 @@ import './Partitions.scss';
 export const b = cn('ydb-diagnostics-partitions');
 export const Partitions = ({ path }) => {
     const dispatch = useTypedDispatch();
-    // Manual path control to ensure that topic state will be reset before data fetch
-    // so no request with wrong params will be sent
-    const [componentCurrentPath, setComponentCurrentPath] = React.useState(path);
     const [partitionsToRender, setPartitionsToRender] = React.useState([]);
     const consumers = useTypedSelector((state) => selectConsumersNames(state, path));
-    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
     const { selectedConsumer } = useTypedSelector((state) => state.partitions);
     const { currentData: topicData, isFetching: topicIsFetching, error: topicError, } = topicApi.useGetTopicQuery({ path });
     const topicLoading = topicIsFetching && topicData === undefined;
@@ -33,13 +30,8 @@ export const Partitions = ({ path }) => {
     const nodesMap = useTypedSelector(selectNodesMap);
     const [hiddenColumns, setHiddenColumns] = useSetting(PARTITIONS_HIDDEN_COLUMNS_KEY);
     const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer);
-    React.useEffect(() => {
-        setComponentCurrentPath(path);
-    }, [dispatch, path]);
-    const params = !topicLoading && componentCurrentPath
-        ? { path: componentCurrentPath, consumerName: selectedConsumer }
-        : skipToken;
-    const { currentData: partitionsData, isFetching: partitionsIsFetching, error: partitionsError, } = partitionsApi.useGetPartitionsQuery(params, { pollingInterval: autorefresh });
+    const params = !topicLoading && path ? { path, consumerName: selectedConsumer } : skipToken;
+    const { currentData: partitionsData, isFetching: partitionsIsFetching, error: partitionsError, } = partitionsApi.useGetPartitionsQuery(params, { pollingInterval: autoRefreshInterval });
     const partitionsLoading = partitionsIsFetching && partitionsData === undefined;
     const rawPartitions = partitionsData;
     const partitionsWithHosts = React.useMemo(() => {

package/dist/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss

@@ -1,21 +1,7 @@
 @import '../../../../../styles/mixins.scss';
 
 .healthcheck {
-    display: flex;
-
-    &_expanded {
-        // Since most of the inner containers have fixed width, we can set fixed width here as well
-        // Thus we will get rid of unneeded layout shift when scrollbar appear
-        min-width: 885px;
-    }
-
-    &__issue-preview {
-        margin-bottom: 15px;
-    }
-
-    &__message-container {
-        padding: 15px 0;
-    }
+    $block: &;
 
     &__details {
         width: 872px;
@@ -26,13 +12,10 @@
     }
 
     &__preview {
-        height: 100%;
-    }
-
-    &__preview-header {
-        gap: 8px;
+        display: flex;
+        flex-direction: column;
 
-        margin-bottom: var(--diagnostics-section-title-margin);
+        height: 100%;
     }
 
     &__preview-title {
@@ -44,9 +27,16 @@
     }
 
     &__preview-content {
+        margin: auto;
+
         line-height: 24px;
     }
 
+    &__preview-status-icon {
+        width: 64px;
+        height: 64px;
+    }
+
     &__preview-title-wrapper {
         display: flex;
         align-items: center;
@@ -55,13 +45,45 @@
         margin-bottom: 4px;
     }
 
-    &__issues-statistics {
+    &__preview-issue {
+        position: relative;
+        top: -8px;
+
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
         align-items: center;
-        gap: 10px;
+        gap: 4px;
 
-        margin: 8px 0;
+        &_good {
+            color: var(--g-color-text-positive);
+            & #{$block}__self-check-status-indicator {
+                background-color: var(--g-color-base-positive-light);
+            }
+        }
+        &_degraded {
+            color: var(--g-color-text-info);
+            & #{$block}__self-check-status-indicator {
+                background-color: var(--g-color-base-info-light);
+            }
+        }
+        &_emergency {
+            color: var(--g-color-text-danger);
+            & #{$block}__self-check-status-indicator {
+                background-color: var(--g-color-base-danger-light);
+            }
+        }
+        &_unspecified {
+            color: var(--g-color-text-misc);
+            & #{$block}__self-check-status-indicator {
+                background-color: var(--g-color-base-misc-light);
+            }
+        }
+        &_maintenance_required {
+            color: var(--g-color-text-warning-heavy);
+            & #{$block}__self-check-status-indicator {
+                background-color: var(--g-color-base-warning-light);
+            }
+        }
     }
 
     &__self-check-status-indicator {
@@ -71,39 +93,8 @@
 
         font-size: 13px;
         line-height: 24px;
+        text-wrap: nowrap;
 
         border-radius: 4px;
-
-        &_good,
-        &_green {
-            color: var(--g-color-text-positive);
-            background-color: var(--g-color-base-positive-light);
-        }
-        &_degraded,
-        &_yellow {
-            color: var(--g-color-text-warning);
-            background-color: var(--g-color-base-warning-light);
-        }
-
-        &_blue {
-            color: var(--g-color-text-info);
-            background-color: var(--g-color-base-info-light);
-        }
-
-        &_emergency,
-        &_red {
-            color: var(--g-color-text-danger);
-            background-color: var(--g-color-base-danger-light);
-        }
-        &_unspecified,
-        &_grey {
-            color: var(--g-color-text-misc);
-            background-color: var(--g-color-base-misc-light);
-        }
-        &_maintenance_required,
-        &_orange {
-            color: var(--g-color-text-warning-heavy);
-            background-color: var(--g-color-base-warning-light);
-        }
     }
 }

package/dist/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.d.ts

@@ -1,9 +1,6 @@
-import type { IssuesTree } from '../../../../../store/reducers/healthcheckInfo/types';
 import './Healthcheck.scss';
 interface HealthcheckDetailsProps {
-    issueTrees?: IssuesTree[];
-    loading?: boolean;
-    error?: unknown;
+    tenantName: string;
 }
-export declare function HealthcheckDetails(props: HealthcheckDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function HealthcheckDetails({ tenantName }: HealthcheckDetailsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.js

@@ -3,12 +3,17 @@ import React from 'react';
 import { ResponseError } from '../../../../../components/Errors/ResponseError';
 import { Loader } from '../../../../../components/Loader';
 import { cn } from '../../../../../utils/cn';
+import { useAutoRefreshInterval } from '../../../../../utils/hooks';
+import { useHealthcheck } from '../useHealthcheck';
 import IssueTree from './IssuesViewer/IssueTree';
 import i18n from './i18n';
 import './Healthcheck.scss';
 const b = cn('healthcheck');
-export function HealthcheckDetails(props) {
-    const { issueTrees, loading, error } = props;
+export function HealthcheckDetails({ tenantName }) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { issueTrees, loading, error } = useHealthcheck(tenantName, {
+        autorefresh: autoRefreshInterval,
+    });
     const renderContent = () => {
         if (error) {
             return _jsx(ResponseError, { error: error, defaultMessage: i18n('no-data') });

package/dist/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.d.ts

@@ -1,11 +1,6 @@
-import type { SelfCheckResult, StatusFlag } from '../../../../../types/api/healthcheck';
 import './Healthcheck.scss';
 interface HealthcheckPreviewProps {
-    selfCheckResult: SelfCheckResult;
-    issuesStatistics?: [StatusFlag, number][];
-    loading?: boolean;
-    onUpdate: VoidFunction;
-    error?: unknown;
+    tenantName: string;
     active?: boolean;
 }
 export declare function HealthcheckPreview(props: HealthcheckPreviewProps): import("react/jsx-runtime").JSX.Element;