ydb-embedded-ui 4.33.0 → 5.1.0

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

@@ -0,0 +1,2 @@
+import type { TNetNodePeerInfo } from '../../../../types/api/netInfo';
+export declare const getConnectedNodesCount: (peers: TNetNodePeerInfo[] | undefined) => number | undefined;

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

@@ -0,0 +1,4 @@
+// determine how many nodes have status Connected "true"
+export const getConnectedNodesCount = (peers) => {
+    return peers === null || peers === void 0 ? void 0 : peers.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
+};

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatObject, InfoViewer } 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';
+const prepareChangefeedInfo = (changefeedData, topicData) => {
+    var _a, _b, _c;
+    if (!changefeedData && !topicData) {
+        return [];
+    }
+    const streamDescription = (_a = changefeedData === null || changefeedData === void 0 ? void 0 : changefeedData.PathDescription) === null || _a === void 0 ? void 0 : _a.CdcStreamDescription;
+    const { Mode, Format } = streamDescription || {};
+    const created = formatCommonItem('CreateStep', (_c = (_b = changefeedData === null || changefeedData === void 0 ? void 0 : changefeedData.PathDescription) === null || _b === void 0 ? void 0 : _b.Self) === null || _c === void 0 ? void 0 : _c.CreateStep);
+    const changefeedInfo = formatObject(formatCdcStreamItem, {
+        Mode,
+        Format,
+    });
+    const topicInfo = prepareTopicSchemaInfo(topicData);
+    return [created, ...changefeedInfo, ...topicInfo];
+};
+/** Displays overview for CDCStream EPathType */
+export const ChangefeedInfo = ({ 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", Object.assign({ className: "error" }, { children: schemaError.statusText }));
+    }
+    if (!data || !topic) {
+        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+    }
+    return (_jsxs("div", { children: [_jsx(InfoViewer, { title: entityName, info: prepareChangefeedInfo(data, topic) }), _jsx(TopicStats, {})] }));
+};

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

@@ -0,0 +1 @@
+export * from './ChangefeedInfo';

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { EPathType } from '../../../../types/api/schema';
+interface OverviewProps {
+    type?: EPathType;
+    tenantName?: string;
+}
+declare function Overview({ type, tenantName }: OverviewProps): JSX.Element;
+export default Overview;

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { shallowEqual, useDispatch } from 'react-redux';
+import { Loader } from '../../../../components/Loader';
+import { TableIndexInfo } from '../../../../components/InfoViewer/schemaInfo';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { EPathType } from '../../../../types/api/schema';
+import { useAutofetcher, useTypedSelector } from '../../../../utils/hooks';
+import { selectSchemaMergedChildrenPaths } from '../../../../store/reducers/schema/schema';
+import { getTopic } from '../../../../store/reducers/topic';
+import { getOlapStats, resetLoadingState as resetOlapLoadingState, } from '../../../../store/reducers/olapStats';
+import { getOverview, getOverviewBatched, setCurrentOverviewPath, setDataWasNotLoaded, } from '../../../../store/reducers/overview/overview';
+import { isEntityWithMergedImplementation, isColumnEntityType, isTableType, isPathTypeWithTopic, } from '../../utils/schema';
+import { ExternalTableInfo } from '../../Info/ExternalTable/ExternalTable';
+import { ExternalDataSourceInfo } from '../../Info/ExternalDataSource/ExternalDataSource';
+import { TopicInfo } from './TopicInfo';
+import { ChangefeedInfo } from './ChangefeedInfo';
+import { TableInfo } from './TableInfo';
+function Overview({ type, tenantName }) {
+    const dispatch = useDispatch();
+    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const { data, additionalData, loading: overviewLoading, wasLoaded: overviewWasLoaded, error: overviewError, } = useTypedSelector((state) => state.overview);
+    const { data: { result: olapStats } = { result: undefined }, loading: olapStatsLoading, wasLoaded: olapStatsWasLoaded, } = useTypedSelector((state) => state.olapStats);
+    const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
+    // shalloEqual prevents rerenders when new schema data is loaded
+    const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type), shallowEqual);
+    const entityLoading = (overviewLoading && !overviewWasLoaded) || (olapStatsLoading && !olapStatsWasLoaded);
+    const entityNotReady = isEntityWithMergedImpl && !mergedChildrenPaths;
+    const fetchData = useCallback((isBackground) => {
+        const schemaPath = currentSchemaPath || tenantName;
+        if (!schemaPath) {
+            return;
+        }
+        dispatch(setCurrentOverviewPath(schemaPath));
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        if (!isEntityWithMergedImpl) {
+            dispatch(getOverview({ path: schemaPath }));
+        }
+        else if (mergedChildrenPaths) {
+            dispatch(getOverviewBatched([schemaPath, ...mergedChildrenPaths]));
+        }
+        if (isTableType(type) && isColumnEntityType(type)) {
+            if (!isBackground) {
+                dispatch(resetOlapLoadingState());
+            }
+            dispatch(getOlapStats({ path: schemaPath }));
+        }
+        if (isPathTypeWithTopic(type)) {
+            dispatch(getTopic(currentSchemaPath));
+        }
+    }, [
+        tenantName,
+        currentSchemaPath,
+        type,
+        isEntityWithMergedImpl,
+        mergedChildrenPaths,
+        dispatch,
+    ]);
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+    const renderContent = () => {
+        var _a;
+        // verbose mapping to guarantee a correct render for new path types
+        // TS will error when a new type is added but not mapped here
+        const pathTypeToComponent = {
+            [EPathType.EPathTypeInvalid]: undefined,
+            [EPathType.EPathTypeDir]: undefined,
+            [EPathType.EPathTypeTable]: undefined,
+            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeTableIndex]: () => _jsx(TableIndexInfo, { data: data }),
+            [EPathType.EPathTypeExtSubDomain]: undefined,
+            [EPathType.EPathTypeColumnStore]: undefined,
+            [EPathType.EPathTypeColumnTable]: undefined,
+            [EPathType.EPathTypeCdcStream]: () => (_jsx(ChangefeedInfo, { data: data, topic: additionalData === null || additionalData === void 0 ? void 0 : additionalData[0] })),
+            [EPathType.EPathTypePersQueueGroup]: () => _jsx(TopicInfo, { data: data }),
+            [EPathType.EPathTypeExternalTable]: () => _jsx(ExternalTableInfo, { data: data }),
+            [EPathType.EPathTypeExternalDataSource]: () => _jsx(ExternalDataSourceInfo, { data: data }),
+        };
+        return ((type && ((_a = pathTypeToComponent[type]) === null || _a === void 0 ? void 0 : _a.call(pathTypeToComponent))) || (_jsx(TableInfo, { data: data, type: type, olapStats: olapStats })));
+    };
+    if (entityLoading || entityNotReady) {
+        return _jsx(Loader, { size: "m" });
+    }
+    if (overviewError) {
+        return _jsx(ResponseError, { error: overviewError });
+    }
+    return _jsx("div", { children: renderContent() });
+}
+export default Overview;

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

@@ -0,0 +1,10 @@
+import type { EPathType, TEvDescribeSchemeResult } from '../../../../../types/api/schema';
+import type { KeyValueRow } from '../../../../../types/api/query';
+import './TableInfo.scss';
+interface TableInfoProps {
+    data?: TEvDescribeSchemeResult;
+    type?: EPathType;
+    olapStats?: KeyValueRow[];
+}
+export declare const TableInfo: ({ data, type, olapStats }: TableInfoProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import cn from 'bem-cn-lite';
+import { InfoViewer } from '../../../../../components/InfoViewer';
+import { getEntityName } from '../../../utils';
+import { prepareTableInfo } from './prepareTableInfo';
+import i18n from './i18n';
+import './TableInfo.scss';
+const b = cn('ydb-diagnostics-table-info');
+export const TableInfo = ({ data, type, olapStats }) => {
+    const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
+    const { generalInfo = [], tableStatsInfo = [], tabletMetricsInfo = [], partitionConfigInfo = [], } = useMemo(() => prepareTableInfo(data, type, olapStats), [data, type, olapStats]);
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(InfoViewer, { info: generalInfo, title: entityName, className: b('info-block'), renderEmptyState: () => _jsx("div", Object.assign({ className: b('title') }, { children: entityName })) }), _jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx("div", Object.assign({ className: b('col') }, { children: tableStatsInfo.map((info, index) => (_jsx(InfoViewer, { info: info, title: index === 0 ? i18n('tableStats') : undefined, className: b('info-block'), renderEmptyState: () => null }, index))) })), tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (_jsxs("div", Object.assign({ className: b('col') }, { children: [_jsx(InfoViewer, { info: tabletMetricsInfo, title: i18n('tabletMetrics'), className: b('info-block'), renderEmptyState: () => null }), _jsx(InfoViewer, { info: partitionConfigInfo, title: i18n('partitionConfig'), className: b('info-block'), renderEmptyState: () => null })] }))) : null] }))] })));
+};

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

@@ -1,5 +1,5 @@
 {
-  "tableStats": "Table Stats",
-  "tabletMetrics": "Tablet Metrics",
-  "partitionConfig": "Partition Config"
+    "tableStats": "Table Stats",
+    "tabletMetrics": "Tablet Metrics",
+    "partitionConfig": "Partition Config"
 }

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-diagnostics-overview-table-info';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

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

@@ -1,5 +1,5 @@
 {
-  "tableStats": "Статистика таблицы",
-  "tabletMetrics": "Метрики таблетки",
-  "partitionConfig": "Конфигурация партиции"
+    "tableStats": "Статистика таблицы",
+    "tabletMetrics": "Метрики таблетки",
+    "partitionConfig": "Конфигурация партиции"
 }

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/index.js

@@ -0,0 +1 @@
+export * from './TableInfo';

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

@@ -0,0 +1,16 @@
+import type { TEvDescribeSchemeResult } from '../../../../../types/api/schema';
+import type { KeyValueRow } from '../../../../../types/api/query';
+import { EPathType } from '../../../../../types/api/schema';
+import { InfoViewerItem } from '../../../../../components/InfoViewer';
+/** Prepares data for Table, ColumnTable and ColumnStore */
+export declare const prepareTableInfo: (data?: TEvDescribeSchemeResult | undefined, type?: EPathType | undefined, olapStats?: KeyValueRow<import("../../../../../types/api/query").CellValue>[] | undefined) => {
+    generalInfo?: undefined;
+    tableStatsInfo?: undefined;
+    tabletMetricsInfo?: undefined;
+    partitionConfigInfo?: undefined;
+} | {
+    generalInfo: InfoViewerItem[];
+    tableStatsInfo: InfoViewerItem[][];
+    tabletMetricsInfo: InfoViewerItem[];
+    partitionConfigInfo: InfoViewerItem[];
+};

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

@@ -0,0 +1,166 @@
+import { EPathType } from '../../../../../types/api/schema';
+import { isNumeric } from '../../../../../utils/utils';
+import { formatBytes, formatNumber } from '../../../../../utils/dataFormatters/dataFormatters';
+import { formatDurationToShortTimeFormat } from '../../../../../utils/timeParsers';
+import { formatObject } from '../../../../../components/InfoViewer';
+import { formatFollowerGroupItem, formatPartitionConfigItem, formatTableStatsItem, formatTabletMetricsItem, } from '../../../../../components/InfoViewer/formatters';
+const isInStoreColumnTable = (table) => {
+    // SchemaPresetId could be 0
+    return table.SchemaPresetName && table.SchemaPresetId !== undefined;
+};
+const prepareOlapStats = (olapStats) => {
+    var _a, _b, _c;
+    const Bytes = olapStats === null || olapStats === void 0 ? void 0 : olapStats.reduce((acc, el) => {
+        const value = isNumeric(el.Bytes) ? Number(el.Bytes) : 0;
+        return acc + value;
+    }, 0);
+    const Rows = olapStats === null || olapStats === void 0 ? void 0 : olapStats.reduce((acc, el) => {
+        const value = isNumeric(el.Rows) ? Number(el.Rows) : 0;
+        return acc + value;
+    }, 0);
+    const tabletIds = olapStats === null || olapStats === void 0 ? void 0 : olapStats.reduce((acc, el) => {
+        acc.add(el.TabletId);
+        return acc;
+    }, new Set());
+    return [
+        { label: 'PartCount', value: (_a = tabletIds === null || tabletIds === void 0 ? void 0 : tabletIds.size) !== null && _a !== void 0 ? _a : 0 },
+        { label: 'RowCount', value: (_b = formatNumber(Rows)) !== null && _b !== void 0 ? _b : 0 },
+        { label: 'DataSize', value: (_c = formatBytes(Bytes)) !== null && _c !== void 0 ? _c : 0 },
+    ];
+};
+const prepareTTL = (ttl) => {
+    // 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) {
+    const columnTableGeneralInfo = [];
+    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 === null || columnTable === void 0 ? void 0 : columnTable.TtlSettings);
+        if (ttlInfo) {
+            columnTableGeneralInfo.push(ttlInfo);
+        }
+    }
+    return columnTableGeneralInfo;
+}
+const prepareTableGeneralInfo = (PartitionConfig, TTLSettings) => {
+    var _a;
+    const { PartitioningPolicy = {}, FollowerGroups, EnableFilterByKey } = PartitionConfig;
+    const generalTableInfo = [];
+    const partitioningBySize = PartitioningPolicy.SizeToSplit && Number(PartitioningPolicy.SizeToSplit) > 0
+        ? `Enabled, split size: ${formatBytes(PartitioningPolicy.SizeToSplit)}`
+        : 'Disabled';
+    const partitioningByLoad = ((_a = PartitioningPolicy.SplitByLoadSettings) === null || _a === void 0 ? void 0 : _a.Enabled)
+        ? 'Enabled'
+        : 'Disabled';
+    generalTableInfo.push({ label: 'Partitioning by size', value: partitioningBySize }, { label: 'Partitioning by load', value: partitioningByLoad }, {
+        label: 'Min number of partitions',
+        value: formatNumber(PartitioningPolicy.MinPartitionsCount || 0),
+    });
+    if (PartitioningPolicy.MaxPartitionsCount) {
+        generalTableInfo.push({
+            label: 'Max number of partitions',
+            value: formatNumber(PartitioningPolicy.MaxPartitionsCount),
+        });
+    }
+    if (FollowerGroups && FollowerGroups.length) {
+        const { RequireAllDataCenters, FollowerCountPerDataCenter, FollowerCount } = FollowerGroups[0];
+        let readReplicasConfig;
+        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, type, olapStats) => {
+    if (!data) {
+        return {};
+    }
+    const { PathDescription = {} } = data;
+    const { TableStats = {}, TabletMetrics = {}, Table: { PartitionConfig = {}, TTLSettings } = {}, ColumnTableDescription = {}, } = PathDescription;
+    const { PartCount, RowCount, DataSize, IndexSize, LastAccessTime, LastUpdateTime, ImmediateTxCompleted, PlannedTxCompleted, TxRejectedByOverload, TxRejectedBySpace, TxCompleteLagMsec, InFlightTxCount, RowUpdates, RowDeletes, RowReads, RangeReads, RangeReadRows, } = TableStats;
+    const { FollowerGroups, FollowerCount, CrossDataCenterFollowerCount } = PartitionConfig;
+    let generalInfo = [];
+    switch (type) {
+        case EPathType.EPathTypeTable: {
+            generalInfo = prepareTableGeneralInfo(PartitionConfig, TTLSettings);
+            break;
+        }
+        case EPathType.EPathTypeColumnTable: {
+            generalInfo = prepareColumnTableGeneralInfo(ColumnTableDescription);
+            break;
+        }
+    }
+    let tableStatsInfo;
+    // 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 = [];
+    if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
+        partitionConfigInfo = formatObject(formatFollowerGroupItem, FollowerGroups[0]);
+    }
+    else if (FollowerCount !== undefined) {
+        partitionConfigInfo.push(formatPartitionConfigItem('FollowerCount', FollowerCount));
+    }
+    else if (CrossDataCenterFollowerCount !== undefined) {
+        partitionConfigInfo.push(formatPartitionConfigItem('CrossDataCenterFollowerCount', CrossDataCenterFollowerCount));
+    }
+    return { generalInfo, tableStatsInfo, tabletMetricsInfo, partitionConfigInfo };
+};

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

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

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

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

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

@@ -0,0 +1 @@
+export * from './TopicInfo';

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

@@ -0,0 +1,2 @@
+import './TopicStats.scss';
+export declare const TopicStats: () => JSX.Element;

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { Loader } from '../../../../../components/Loader';
+import { 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 { formatDurationToShortTimeFormat } from '../../../../../utils/timeParsers';
+import { formatBps, formatBytes } from '../../../../../utils/dataFormatters/dataFormatters';
+import { selectPreparedTopicStats } from '../../../../../store/reducers/topic';
+import i18n from './i18n';
+import './TopicStats.scss';
+const b = cn('ydb-overview-topic-stats');
+const prepareTopicInfo = (data) => {
+    return [
+        { label: 'Store size', value: formatBytes(data.storeSize) },
+        {
+            label: (_jsx(LabelWithPopover, { text: 'Write idle time', popoverContent: _jsx(LagPopoverContent, { text: i18n('writeIdleTimePopover'), type: "write" }) })),
+            value: formatDurationToShortTimeFormat(data.partitionsIdleTime),
+        },
+        {
+            label: (_jsx(LabelWithPopover, { text: 'Write lag', popoverContent: _jsx(LagPopoverContent, { text: i18n('writeLagPopover'), type: "write" }) })),
+            value: formatDurationToShortTimeFormat(data.partitionsWriteLag),
+        },
+        {
+            label: 'Average write speed',
+            value: _jsx(SpeedMultiMeter, { data: data.writeSpeed, withValue: false }),
+        },
+    ];
+};
+const prepareBytesWrittenInfo = (data) => {
+    const writeSpeed = data.writeSpeed;
+    return [
+        {
+            label: 'per minute',
+            value: formatBps(writeSpeed.perMinute),
+        },
+        {
+            label: 'per hour',
+            value: formatBps(writeSpeed.perHour),
+        },
+        {
+            label: 'per day',
+            value: formatBps(writeSpeed.perDay),
+        },
+    ];
+};
+export const TopicStats = () => {
+    const { error, loading, wasLoaded } = useTypedSelector((state) => state.topic);
+    const data = useTypedSelector(selectPreparedTopicStats);
+    if (loading && !wasLoaded) {
+        return (_jsx("div", Object.assign({ className: b() }, { children: _jsx(Loader, { size: "s" }) })));
+    }
+    // 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 (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: "Stats" })), _jsx(ResponseError, { error: error })] })));
+    }
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: "Stats" })), _jsx("div", Object.assign({ className: b('info') }, { children: _jsx(InfoViewer, { info: prepareTopicInfo(data), multilineLabels: true }) })), _jsx("div", Object.assign({ className: b('bytes-written') }, { children: _jsx(InfoViewer, { info: prepareBytesWrittenInfo(data) }) }))] })));
+};

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

@@ -1,4 +1,4 @@
 {
-  "writeLagPopover": "Write lag, maximum among all topic partitions",
-  "writeIdleTimePopover": "Write idle time, maximum among all topic partitions"
+    "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/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-diagnostics-overview-topic-stats';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

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

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

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

@@ -0,0 +1 @@
+export * from './TopicStats';

package/dist/containers/Tenant/Diagnostics/Overview/utils/index.js

@@ -0,0 +1 @@
+export * from './prepareTopicSchemaInfo';

package/dist/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.d.ts

@@ -0,0 +1,3 @@
+import type { TEvDescribeSchemeResult } from '../../../../../types/api/schema';
+import { InfoViewerItem } from '../../../../../components/InfoViewer';
+export declare const prepareTopicSchemaInfo: (data?: TEvDescribeSchemeResult | undefined) => Array<InfoViewerItem>;

package/dist/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.js

@@ -0,0 +1,25 @@
+import { formatObject } from '../../../../../components/InfoViewer';
+import { formatPQGroupItem, formatPQPartitionConfig, formatPQTabletConfig, } from '../../../../../components/InfoViewer/formatters';
+export const prepareTopicSchemaInfo = (data) => {
+    var _a;
+    const pqGroupData = (_a = data === null || data === void 0 ? void 0 : data.PathDescription) === null || _a === void 0 ? void 0 : _a.PersQueueGroup;
+    if (!pqGroupData) {
+        return [];
+    }
+    const { Partitions = [], PQTabletConfig = { PartitionConfig: { LifetimeSeconds: 0 } } } = pqGroupData;
+    const { Codecs, MeteringMode } = PQTabletConfig;
+    const { WriteSpeedInBytesPerSecond, StorageLimitBytes } = PQTabletConfig.PartitionConfig;
+    const pqGeneralInfo = formatObject(formatPQGroupItem, {
+        Partitions,
+        PQTabletConfig,
+    });
+    const pqPartitionInfo = formatObject(formatPQPartitionConfig, {
+        StorageLimitBytes,
+        WriteSpeedInBytesPerSecond,
+    });
+    const pqTabletInfo = formatObject(formatPQTabletConfig, {
+        Codecs,
+        MeteringMode,
+    });
+    return [...pqGeneralInfo, ...pqPartitionInfo, ...pqTabletInfo];
+};

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/Headers.d.ts

@@ -0,0 +1,11 @@
+import './Headers.scss';
+interface MultilineHeaderProps {
+    title: string;
+}
+export declare const MultilineHeader: ({ title }: MultilineHeaderProps) => JSX.Element;
+export declare const ReadSessionHeader: () => JSX.Element;
+export declare const WriteLagsHeader: () => JSX.Element;
+export declare const ReadLagsHeader: () => JSX.Element;
+export declare const UnreadMessagesHeader: () => JSX.Element;
+export declare const UncommitedMessagesHeader: () => JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
+import { LagPopoverContent } from '../../../../../components/LagPopoverContent';
+import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES } from '../utils/constants';
+import i18n from '../i18n';
+import './Headers.scss';
+const b = block('ydb-diagnostics-partitions-columns-header');
+export const MultilineHeader = ({ title }) => (_jsx("div", Object.assign({ className: b('multiline') }, { children: title })));
+export const ReadSessionHeader = () => (_jsx("div", Object.assign({ className: b('read-session') }, { children: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_SESSION_ID] })));
+export const WriteLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.writeLags'), type: "write" }) }));
+export const ReadLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.readLags'), type: "read" }) }));
+export const UnreadMessagesHeader = () => (_jsx(LabelWithPopover, { className: b('messages'), text: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES], popoverContent: _jsx("div", Object.assign({ className: b('messages-popover-content') }, { children: i18n('headers.unread') })) }));
+export const UncommitedMessagesHeader = () => (_jsx(LabelWithPopover, { className: b('messages'), text: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES], popoverContent: _jsx("div", Object.assign({ className: b('messages-popover-content') }, { children: i18n('headers.uncommited') })) }));

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/index.d.ts

@@ -0,0 +1 @@
+export * from './Headers';

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/index.js

@@ -0,0 +1 @@
+export * from './Headers';

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.d.ts

@@ -0,0 +1,16 @@
+import './Partitions.scss';
+export declare const b: {
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string, mixin?: string | string[] | undefined): string;
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
+    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string): string;
+    (mods: import("bem-cn-lite").Modifications | null): string;
+    (): string;
+    builder(): import("bem-cn").Block;
+};
+interface PartitionsProps {
+    path?: string;
+}
+export declare const Partitions: ({ path }: PartitionsProps) => JSX.Element;
+export {};