ydb-embedded-ui 3.4.4 → 3.5.0

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -3,6 +3,8 @@ import cn from 'bem-cn-lite';
 
 import {Label, Popup, PopupProps} from '@gravity-ui/uikit';
 
+import type {NodesMap} from '../../../types/store/nodesList';
+
 import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
@@ -13,7 +15,7 @@ import {isFullVDiskData} from '../../../utils/storage';
 
 import type {IUnavailableDonor} from '../utils/types';
 
-import {NodesHosts, preparePDiskData} from '../PDiskPopup';
+import {preparePDiskData} from '../PDiskPopup';
 
 import './VDiskPopup.scss';
 
@@ -128,7 +130,7 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
 interface VDiskPopupProps extends PopupProps {
     data: TVDiskStateInfo | IUnavailableDonor;
     poolName?: string;
-    nodes?: NodesHosts;
+    nodes?: NodesMap;
 }
 
 export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) => {

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

@@ -9,8 +9,8 @@ import {b} from '../Tablet';
 
 enum EVisibleDialogType {
     'kill' = 'kill',
-    'stop' = 'kill',
-    'resume' = 'kill',
+    'stop' = 'stop',
+    'resume' = 'resume',
 }
 
 type VisibleDialogType = EVisibleDialogType | null;

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

@@ -2,12 +2,4 @@
     &__lags {
         white-space: nowrap;
     }
-
-    &__lags-popover-content {
-        max-width: 300px;
-
-        div:nth-child(1) {
-            margin-bottom: 10px;
-        }
-    }
 }

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

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
-import {ReadLagImage} from '../../../../../components/LagImages';
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 
 import {CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES} from '../utils/constants';
 
@@ -14,14 +14,7 @@ const b = block('ydb-diagnostics-consumers-columns-header');
 export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
-        headerText={CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS]}
-        popoverContent={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.readLags')}</div>
-                <div>
-                    <ReadLagImage />
-                </div>
-            </div>
-        }
+        text={CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS]}
+        popoverContent={<LagPopoverContent text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );

package/dist/containers/Tenant/Diagnostics/Consumers/i18n/ru.json

@@ -1,7 +1,7 @@
 {
   "noConsumersMessage.topic": "У этого топика нет читателей",
   "noConsumersMessage.stream": "У этого стрима нет читателей",
-  "lagsPopover.readLags": "Статистика лагов чтения, максимальной значение среди всех партиций читателя (формат времени дд чч:мм:сс)",
+  "lagsPopover.readLags": "Статистика лагов чтения, максимальное значение среди всех партиций читателя (формат времени дд чч:мм:сс)",
   "table.emptyDataMessage": "По заданному поиску нет читателей",
   "controls.search": "Consumer"
 }

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

@@ -1,4 +1,4 @@
-import {ReactNode, useCallback, useMemo} from 'react';
+import {ReactNode, useCallback} from 'react';
 import {shallowEqual, useDispatch, useSelector} from 'react-redux';
 
 import {Loader} from '../../../../components/Loader';
@@ -11,7 +11,7 @@ import {TopicInfo} from './TopicInfo';
 import {ChangefeedInfo} from './ChangefeedInfo';
 import {TableInfo} from './TableInfo';
 
-import {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
+import {EPathType} from '../../../../types/api/schema';
 import {
     isEntityWithMergedImplementation,
     isColumnEntityType,
@@ -33,35 +33,6 @@ import {
 } from '../../../../store/reducers/olapStats';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 
-function prepareOlapTableGeneral(item?: TEvDescribeSchemeResult, olapStats?: any[]) {
-    const tableData = item?.PathDescription?.ColumnTableDescription;
-
-    const Bytes = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Bytes) || 0;
-        return acc;
-    }, 0);
-    const Rows = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Rows) || 0;
-        return acc;
-    }, 0);
-    const tabletIds = olapStats?.reduce((acc, el) => {
-        acc.add(el.TabletId);
-        return acc;
-    }, new Set());
-
-    return {
-        PathDescription: {
-            Self: item?.PathDescription?.Self,
-            TableStats: {
-                ColumnShardCount: tableData?.ColumnShardCount,
-                Bytes: Bytes?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
-                Rows: Rows?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
-                Parts: tabletIds?.size ?? 0,
-            },
-        },
-    };
-}
-
 interface OverviewProps {
     type?: EPathType;
     className?: string;
@@ -81,7 +52,7 @@ function Overview({type, tenantName, className}: OverviewProps) {
     } = useSelector((state: any) => state.schema);
 
     const {data: {result: olapStats} = {result: undefined}, loading: olapStatsLoading} =
-        useSelector((state: any) => state.olapStats);
+        useTypedSelector((state) => state.olapStats);
 
     const loading = schemaLoading || olapStatsLoading;
 
@@ -134,13 +105,6 @@ function Overview({type, tenantName, className}: OverviewProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    const schemaData = useMemo(() => {
-        return isTableType(type) && isColumnEntityType(type)
-            ? // process data for ColumnTable
-              prepareOlapTableGeneral(currentItem, olapStats)
-            : currentItem;
-    }, [type, olapStats, currentItem]);
-
     const renderContent = () => {
         // verbose mapping to guarantee a correct render for new path types
         // TS will error when a new type is added but not mapped here
@@ -149,17 +113,21 @@ function Overview({type, tenantName, className}: OverviewProps) {
             [EPathType.EPathTypeDir]: undefined,
             [EPathType.EPathTypeTable]: undefined,
             [EPathType.EPathTypeSubDomain]: undefined,
-            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={schemaData} />,
+            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={currentItem} />,
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
             [EPathType.EPathTypeCdcStream]: () => (
-                <ChangefeedInfo data={schemaData} childrenPaths={mergedChildrenPaths} />
+                <ChangefeedInfo data={currentItem} childrenPaths={mergedChildrenPaths} />
             ),
-            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={schemaData} />,
+            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={currentItem} />,
         };
 
-        return (type && pathTypeToComponent[type]?.()) || <TableInfo data={schemaData} />;
+        return (
+            (type && pathTypeToComponent[type]?.()) || (
+                <TableInfo data={currentItem} type={type} olapStats={olapStats} />
+            )
+        );
     };
 
     if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {

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

@@ -1,8 +1,8 @@
 import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
-import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
-
+import type {EPathType, TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import type {KeyValueRow} from '../../../../../types/api/query';
 import {InfoViewer} from '../../../../../components/InfoViewer';
 
 import {getEntityName} from '../../../utils';
@@ -17,27 +17,40 @@ const b = cn('ydb-diagnostics-table-info');
 
 interface TableInfoProps {
     data?: TEvDescribeSchemeResult;
+    type?: EPathType;
+    olapStats?: KeyValueRow[];
 }
 
-export const TableInfo = ({data}: TableInfoProps) => {
+export const TableInfo = ({data, type, olapStats}: TableInfoProps) => {
     const entityName = getEntityName(data?.PathDescription);
 
     const {
-        generalTableInfo = [],
+        generalInfo = [],
         tableStatsInfo = [],
         tabletMetricsInfo = [],
         partitionConfigInfo = [],
-    } = useMemo(() => prepareTableInfo(data), [data]);
+    } = useMemo(() => prepareTableInfo(data, type, olapStats), [data, type, olapStats]);
 
     return (
         <div className={b()}>
             <InfoViewer
-                info={generalTableInfo}
+                info={generalInfo}
                 title={entityName}
                 className={b('info-block')}
                 renderEmptyState={() => <div className={b('title')}>{entityName}</div>}
             />
             <div className={b('row')}>
+                <div className={b('col')}>
+                    {tableStatsInfo.map((info, index) => (
+                        <InfoViewer
+                            key={index}
+                            info={info}
+                            title={index === 0 ? i18n('tableStats') : undefined}
+                            className={b('info-block')}
+                            renderEmptyState={() => null}
+                        />
+                    ))}
+                </div>
                 {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
                     <div className={b('col')}>
                         <InfoViewer
@@ -54,17 +67,6 @@ export const TableInfo = ({data}: TableInfoProps) => {
                         />
                     </div>
                 ) : null}
-                <div className={b('col')}>
-                    {tableStatsInfo.map((info, index) => (
-                        <InfoViewer
-                            key={index}
-                            info={info}
-                            title={index === 0 ? i18n('tableStats') : undefined}
-                            className={b('info-block')}
-                            renderEmptyState={() => null}
-                        />
-                    ))}
-                </div>
             </div>
         </div>
     );

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts

@@ -1,6 +1,16 @@
-import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
-
-import {formatObject} from '../../../../../components/InfoViewer';
+import type {
+    TColumnDataLifeCycle,
+    TColumnTableDescription,
+    TEvDescribeSchemeResult,
+    TPartitionConfig,
+    TTTLSettings,
+} from '../../../../../types/api/schema';
+import type {KeyValueRow} from '../../../../../types/api/query';
+import {EPathType} from '../../../../../types/api/schema';
+import {isNumeric} from '../../../../../utils/utils';
+import {formatBytes, formatNumber} from '../../../../../utils';
+import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
+import {formatObject, InfoViewerItem} from '../../../../../components/InfoViewer';
 import {
     formatFollowerGroupItem,
     formatPartitionConfigItem,
@@ -8,7 +18,134 @@ import {
     formatTabletMetricsItem,
 } from '../../../../../components/InfoViewer/formatters';
 
-export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
+const isInStoreColumnTable = (table: TColumnTableDescription) => {
+    // SchemaPresetId could be 0
+    return table.SchemaPresetName && table.SchemaPresetId !== undefined;
+};
+
+const prepareOlapStats = (olapStats?: KeyValueRow[]) => {
+    const Bytes = olapStats?.reduce((acc, el) => {
+        const value = isNumeric(el.Bytes) ? Number(el.Bytes) : 0;
+        return acc + value;
+    }, 0);
+    const Rows = olapStats?.reduce((acc, el) => {
+        const value = isNumeric(el.Rows) ? Number(el.Rows) : 0;
+        return acc + value;
+    }, 0);
+    const tabletIds = olapStats?.reduce((acc, el) => {
+        acc.add(el.TabletId);
+        return acc;
+    }, new Set());
+
+    return [
+        {label: 'PartCount', value: tabletIds?.size ?? 0},
+        {label: 'RowCount', value: formatNumber(Rows) ?? 0},
+        {label: 'DataSize', value: formatBytes(Bytes) ?? 0},
+    ];
+};
+
+const prepareTTL = (ttl: TTTLSettings | TColumnDataLifeCycle) => {
+    // ExpireAfterSeconds could be 0
+    if (ttl.Enabled && ttl.Enabled.ColumnName && ttl.Enabled.ExpireAfterSeconds !== undefined) {
+        const value = `column: '${
+            ttl.Enabled.ColumnName
+        }', expire after: ${formatDurationToShortTimeFormat(
+            ttl.Enabled.ExpireAfterSeconds * 1000,
+            1,
+        )}`;
+
+        return {label: 'TTL for rows', value};
+    }
+    return undefined;
+};
+
+function prepareColumnTableGeneralInfo(columnTable: TColumnTableDescription) {
+    const columnTableGeneralInfo: InfoViewerItem[] = [];
+
+    columnTableGeneralInfo.push({
+        label: 'Standalone',
+        value: String(!isInStoreColumnTable(columnTable)),
+    });
+
+    if (columnTable.Sharding && columnTable.Sharding.HashSharding) {
+        columnTableGeneralInfo.push({label: 'Sharding', value: 'hash'});
+    }
+
+    if (columnTable.TtlSettings) {
+        const ttlInfo = prepareTTL(columnTable?.TtlSettings);
+        if (ttlInfo) {
+            columnTableGeneralInfo.push(ttlInfo);
+        }
+    }
+
+    return columnTableGeneralInfo;
+}
+
+const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings?: TTTLSettings) => {
+    const {PartitioningPolicy = {}, FollowerGroups, EnableFilterByKey} = PartitionConfig;
+
+    const generalTableInfo: InfoViewerItem[] = [];
+
+    const partitioningBySize = PartitioningPolicy.SizeToSplit
+        ? `Enabled, split size: ${formatBytes(PartitioningPolicy.SizeToSplit)}`
+        : 'Disabled';
+
+    const partitioningByLoad = PartitioningPolicy.SplitByLoadSettings?.Enabled
+        ? 'Enabled'
+        : 'Disabled';
+
+    generalTableInfo.push(
+        {label: 'Partitioning by size', value: partitioningBySize},
+        {label: 'Partitioning by load', value: partitioningByLoad},
+        {
+            label: 'Min number of partitions',
+            value: PartitioningPolicy.MinPartitionsCount || 0,
+        },
+    );
+
+    if (PartitioningPolicy.MaxPartitionsCount) {
+        generalTableInfo.push({
+            label: 'Max number of partitions',
+            value: PartitioningPolicy.MaxPartitionsCount || 0,
+        });
+    }
+
+    if (FollowerGroups && FollowerGroups.length) {
+        const {RequireAllDataCenters, FollowerCountPerDataCenter, FollowerCount} =
+            FollowerGroups[0];
+
+        let readReplicasConfig: string;
+
+        if (RequireAllDataCenters && FollowerCountPerDataCenter) {
+            readReplicasConfig = `PER_AZ: ${FollowerCount}`;
+        } else {
+            readReplicasConfig = `ANY_AZ: ${FollowerCount}`;
+        }
+
+        generalTableInfo.push({label: 'Read replicas (followers)', value: readReplicasConfig});
+    }
+
+    if (TTLSettings) {
+        const ttlInfo = prepareTTL(TTLSettings);
+        if (ttlInfo) {
+            generalTableInfo.push(ttlInfo);
+        }
+    }
+
+    generalTableInfo.push({
+        label: 'Bloom filter',
+        value: EnableFilterByKey ? 'Enabled' : 'Disabled',
+    });
+
+    return generalTableInfo;
+};
+
+/** Prepares data for Table, ColumnTable and ColumnStore */
+export const prepareTableInfo = (
+    data?: TEvDescribeSchemeResult,
+    type?: EPathType,
+    olapStats?: KeyValueRow[],
+) => {
     if (!data) {
         return {};
     }
@@ -18,7 +155,8 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
     const {
         TableStats = {},
         TabletMetrics = {},
-        Table: {PartitionConfig = {}} = {},
+        Table: {PartitionConfig = {}, TTLSettings} = {},
+        ColumnTableDescription = {},
     } = PathDescription;
 
     const {
@@ -42,45 +180,62 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
         RowReads,
         RangeReads,
         RangeReadRows,
-
-        ...restTableStats
     } = TableStats;
 
     const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
 
-    const generalTableInfo = formatObject(formatTableStatsItem, {
-        PartCount,
-        RowCount,
-        DataSize,
-        IndexSize,
-        ...restTableStats,
-    });
+    let generalInfo: InfoViewerItem[] = [];
+
+    switch (type) {
+        case EPathType.EPathTypeTable: {
+            generalInfo = prepareTableGeneralInfo(PartitionConfig, TTLSettings);
+            break;
+        }
+        case EPathType.EPathTypeColumnTable: {
+            generalInfo = prepareColumnTableGeneralInfo(ColumnTableDescription);
+            break;
+        }
+    }
 
-    const tableStatsInfo = [
-        formatObject(formatTableStatsItem, {
-            LastAccessTime,
-            LastUpdateTime,
-        }),
-        formatObject(formatTableStatsItem, {
-            ImmediateTxCompleted,
-            PlannedTxCompleted,
-            TxRejectedByOverload,
-            TxRejectedBySpace,
-            TxCompleteLagMsec,
-            InFlightTxCount,
-        }),
-        formatObject(formatTableStatsItem, {
-            RowUpdates,
-            RowDeletes,
-            RowReads,
-            RangeReads,
-            RangeReadRows,
-        }),
-    ];
+    let tableStatsInfo: InfoViewerItem[][];
+
+    // There is no TableStats and TabletMetrics for ColumnTables inside ColumnStore
+    // Therefore we parse olapStats
+    if (type === EPathType.EPathTypeColumnTable && isInStoreColumnTable(ColumnTableDescription)) {
+        tableStatsInfo = [prepareOlapStats(olapStats)];
+    } else {
+        tableStatsInfo = [
+            formatObject(formatTableStatsItem, {
+                PartCount,
+                RowCount,
+                DataSize,
+                IndexSize,
+            }),
+            formatObject(formatTableStatsItem, {
+                LastAccessTime,
+                LastUpdateTime,
+            }),
+            formatObject(formatTableStatsItem, {
+                ImmediateTxCompleted,
+                PlannedTxCompleted,
+                TxRejectedByOverload,
+                TxRejectedBySpace,
+                TxCompleteLagMsec,
+                InFlightTxCount,
+            }),
+            formatObject(formatTableStatsItem, {
+                RowUpdates,
+                RowDeletes,
+                RowReads,
+                RangeReads,
+                RangeReadRows,
+            }),
+        ];
+    }
 
     const tabletMetricsInfo = formatObject(formatTabletMetricsItem, TabletMetrics);
 
-    let partitionConfigInfo = [];
+    let partitionConfigInfo: InfoViewerItem[] = [];
 
     if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
         partitionConfigInfo = formatObject(formatFollowerGroupItem, FollowerGroups[0]);
@@ -92,5 +247,5 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
         );
     }
 
-    return {generalTableInfo, tableStatsInfo, tabletMetricsInfo, partitionConfigInfo};
+    return {generalInfo, tableStatsInfo, tabletMetricsInfo, partitionConfigInfo};
 };

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

@@ -1,16 +1,19 @@
 import cn from 'bem-cn-lite';
-import {isEmpty} from 'lodash/fp';
 
-import type {DescribeTopicResult} from '../../../../../types/api/topic';
+import type {IPreparedTopicStats} from '../../../../../types/store/topic';
 
 import {Loader} from '../../../../../components/Loader';
-import {InfoViewerItem, formatObject, InfoViewer} from '../../../../../components/InfoViewer';
-
-import {formatTopicStats} from '../../../../../components/InfoViewer/formatters';
+import {InfoViewerItem, InfoViewer} from '../../../../../components/InfoViewer';
+import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
-import {convertBytesObjectToSpeed} from '../../../../../utils/bytesParsers';
-import {formatBps} from '../../../../../utils';
+import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
+import {formatBps, formatBytes} from '../../../../../utils';
+
+import {selectPreparedTopicStats} from '../../../../../store/reducers/topic';
 
 import i18n from './i18n';
 
@@ -18,35 +21,61 @@ import './TopicStats.scss';
 
 const b = cn('ydb-overview-topic-stats');
 
-const prepareTopicInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
+const prepareTopicInfo = (data: IPreparedTopicStats): Array<InfoViewerItem> => {
     return [
-        ...formatObject(formatTopicStats, {
-            ...data.topic_stats,
-        }),
+        {label: 'Store size', value: formatBytes(data.storeSize)},
+        {
+            label: (
+                <LabelWithPopover
+                    text={'Write idle time'}
+                    popoverContent={
+                        <LagPopoverContent text={i18n('writeIdleTimePopover')} type="write" />
+                    }
+                />
+            ),
+            value: formatDurationToShortTimeFormat(data.partitionsIdleTime),
+        },
+        {
+            label: (
+                <LabelWithPopover
+                    text={'Write lag'}
+                    popoverContent={
+                        <LagPopoverContent text={i18n('writeLagPopover')} type="write" />
+                    }
+                />
+            ),
+            value: formatDurationToShortTimeFormat(data.partitionsWriteLag),
+        },
+        {
+            label: 'Average write speed',
+            value: <SpeedMultiMeter data={data.writeSpeed} withValue={false} />,
+        },
     ];
 };
 
-const prepareBytesWrittenInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
-    const preparedBytes = convertBytesObjectToSpeed(data?.topic_stats?.bytes_written);
+const prepareBytesWrittenInfo = (data: IPreparedTopicStats): Array<InfoViewerItem> => {
+    const writeSpeed = data.writeSpeed;
 
     return [
         {
             label: 'per minute',
-            value: formatBps(preparedBytes.perMinute),
+            value: formatBps(writeSpeed.perMinute),
         },
         {
             label: 'per hour',
-            value: formatBps(preparedBytes.perHour),
+            value: formatBps(writeSpeed.perHour),
         },
         {
             label: 'per day',
-            value: formatBps(preparedBytes.perDay),
+            value: formatBps(writeSpeed.perDay),
         },
     ];
 };
 
 export const TopicStats = () => {
-    const {data, error, loading, wasLoaded} = useTypedSelector((state) => state.topic);
+    const {error, loading, wasLoaded} = useTypedSelector((state) => state.topic);
+
+    const data = useTypedSelector(selectPreparedTopicStats);
 
     if (loading && !wasLoaded) {
         return (
@@ -56,24 +85,14 @@ export const TopicStats = () => {
         );
     }
 
-    // There are several backed versions with different behaviour
-    // Possible returns on older versions:
-    // 1. Error when trying to access endpoint
-    // 2. No data
-    // 3. HTML page of Internal Viewer with an error
-    // 4. Data with no topic stats
-    // 5. Topic Stats as an empty object
-    if (
-        error ||
-        !data ||
-        typeof data !== 'object' ||
-        !data.topic_stats ||
-        isEmpty(data.topic_stats)
-    ) {
+    // If there is at least some empty data object
+    // we initialize its fields with zero values
+    // so no data at all is considered to be error as well
+    if (error || !data) {
         return (
             <div className={b()}>
                 <div className={b('title')}>Stats</div>
-                <div className="error">{i18n('notSupportedVersion')}</div>
+                <ResponseError error={error} />
             </div>
         );
     }

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/en.json

@@ -1,3 +1,4 @@
 {
-  "notSupportedVersion": "Topic stats are not supported in the current cluster version. Update cluster version to see topic stats"
+  "writeLagPopover": "Write lag, maximum among all topic partitions",
+  "writeIdleTimePopover": "Write idle time, maximum among all topic partitions"
 }

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/ru.json

@@ -1,3 +1,4 @@
 {
-  "notSupportedVersion": "Статистика топиков не поддерживается в текущей версии. Обновите кластер до более новой версии, чтобы увидеть статистику топиков"
+  "writeLagPopover": "Лаг записи, максимальное значение среди всех партиций топика",
+  "writeIdleTimePopover": "Время без записи, максимальное значение среди всех партиций топика"
 }