ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -1,330 +1,176 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import cn from 'bem-cn-lite';
 import qs from 'qs';
 import _ from 'lodash';
-
-import {Loader, Select} from '@gravity-ui/uikit';
+import { Loader, Select } from '@gravity-ui/uikit';
 import ReactList from 'react-list';
-
-import {Tablet} from '../../components/Tablet';
-import {AccessDenied} from '../../components/Errors/403';
-
-import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
-import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';
-import {
-    getTabletsInfo,
-    clearWasLoadingFlag,
-    setStateFilter,
-    setTypeFilter,
-    getFilteredTablets,
-    getTablets,
-} from '../../store/reducers/tabletsFilters';
-
+import { Tablet } from '../../components/Tablet';
+import { AccessDenied } from '../../components/Errors/403';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { tabletColorToTabletState, tabletStates } from '../../utils/tablet';
+import { getTabletsInfo, clearWasLoadingFlag, setStateFilter, setTypeFilter, getFilteredTablets, getTablets, } from '../../store/reducers/tabletsFilters';
 import './TabletsFilters.scss';
-
 const b = cn('tablets-filters');
-
-class TabletsFilters extends React.Component {
-    static propTypes = {
-        wasLoaded: PropTypes.bool,
-        loading: PropTypes.bool,
-        getTabletsInfo: PropTypes.func,
-        timeoutForRequest: PropTypes.number,
-        path: PropTypes.string,
-        clearWasLoadingFlag: PropTypes.func,
-        nodes: PropTypes.array,
-        tablets: PropTypes.array,
-        filteredTablets: PropTypes.array,
-        setStateFilter: PropTypes.func,
-        setTypeFilter: PropTypes.func,
-        stateFilter: PropTypes.array,
-        typeFilter: PropTypes.array,
-        error: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
-        setHeader: PropTypes.func,
-    };
-
+export class TabletsFilters extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            nodeFilter: [],
+            tenantPath: '',
+        };
+        this.reloadDescriptor = -1;
+        this.makeRequest = () => {
+            const { nodeFilter, tenantPath } = this.state;
+            this.props.getTabletsInfo({ nodes: nodeFilter, path: [tenantPath] });
+        };
+        this.getTablets = () => {
+            const { timeoutForRequest } = this.props;
+            clearInterval(this.reloadDescriptor);
+            this.reloadDescriptor = setTimeout(() => {
+                this.makeRequest();
+                this.reloadDescriptor = -1;
+            }, timeoutForRequest);
+        };
+        this.handleNodeFilterChange = (nodeFilter) => {
+            this.setState({ nodeFilter }, () => {
+                this.props.clearWasLoadingFlag();
+                this.makeRequest();
+            });
+        };
+        this.handleStateFilterChange = (stateFilter) => {
+            const { setStateFilter } = this.props;
+            setStateFilter(stateFilter);
+        };
+        this.handleTypeFilterChange = (typeFilter) => {
+            const { setTypeFilter } = this.props;
+            setTypeFilter(typeFilter);
+        };
+        this.renderTablet = (index, key) => {
+            const { filteredTablets, size } = this.props;
+            return (_jsx(Tablet, { tablet: filteredTablets[index], tenantName: this.state.tenantPath, size: size, className: b('tablet') }, key));
+        };
+        this.renderContent = () => {
+            const { nodeFilter, tenantPath } = this.state;
+            const { tablets, filteredTablets, nodes, stateFilter, typeFilter, error } = this.props;
+            const states = tabletStates.map((item) => ({ value: item, content: item }));
+            const types = Array.from(new Set(...[_.map(tablets, (tblt) => tblt.Type)])).map((item) => ({
+                value: item,
+                content: item,
+            }));
+            const nodesForSelect = _.map(nodes, (node) => ({
+                content: node.Id,
+                value: node.Id,
+                meta: node.Host,
+            }));
+            return (_jsxs("div", Object.assign({ className: b() }, { children: [tenantPath ? (_jsx("div", Object.assign({ className: b('tenant') }, { children: _jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: b('label') }, { children: "Database: " })), " ", tenantPath] }) }))) : null, _jsx(MemoizedFilters, { nodesForSelect: nodesForSelect, nodeFilter: nodeFilter, onChangeNodes: this.handleNodeFilterChange, states: states, stateFilter: stateFilter, onChangeStates: this.handleStateFilterChange, types: types, typeFilter: typeFilter, onChangeTypes: this.handleTypeFilterChange }), error && _jsx("div", Object.assign({ className: "error" }, { children: error })), filteredTablets.length > 0 ? (_jsx("div", Object.assign({ className: b('items') }, { children: _jsx(ReactList, { itemRenderer: this.renderTablet, length: filteredTablets.length, type: "uniform" }) }))) : (!error && _jsx("div", Object.assign({ className: b('empty-message') }, { children: "no tablets" })))] })));
+        };
+    }
     static renderLoader() {
-        return (
-            <div className={'loader'}>
-                <Loader size="l" />
-            </div>
-        );
+        return (_jsx("div", Object.assign({ className: 'loader' }, { children: _jsx(Loader, { size: "l" }) })));
     }
-
-    static parseNodes = (nodes) => {
-        if (Array.isArray(nodes)) {
-            return nodes.map(Number).filter(Number.isInteger);
-        }
-    };
-
-    static getStateFiltersFromColor = (color) => {
-        return tabletColorToTabletState[color] || [color];
-    };
-
-    static CONTROL_WIDTH = 220;
-    static POPUP_WIDTH = 300;
-
-    state = {
-        nodeFilter: [],
-        tenantPath: '',
-    };
-
-    reloadDescriptor = -1;
-
     componentDidMount() {
-        const {setStateFilter, setTypeFilter, setHeaderBreadcrumbs} = this.props;
-
+        const { setStateFilter, setTypeFilter, setHeaderBreadcrumbs } = this.props;
         const queryParams = qs.parse(this.props.location.search, {
             ignoreQueryPrefix: true,
         });
-        const {nodeIds, type, path, state} = queryParams;
+        const { nodeIds, type, path, state } = queryParams;
         const nodes = TabletsFilters.parseNodes(nodeIds);
-
         if (state) {
             const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
             setStateFilter(stateFilter);
         }
-
         if (type) {
             setTypeFilter([type]);
         }
-
-        this.setState({nodeFilter: nodes, tenantPath: path}, () => {
+        this.setState({ nodeFilter: nodes, tenantPath: path }, () => {
             this.makeRequest();
         });
-
         setHeaderBreadcrumbs('tablets', {
             tenantName: path,
         });
     }
-
     componentDidUpdate(prevProps) {
-        const {loading, error} = this.props;
+        const { loading, error } = this.props;
         if (!error && prevProps.path && this.props.path && prevProps.path !== this.props.path) {
             this.props.clearWasLoadingFlag();
             this.getTablets();
         }
-
         if (!error && !loading && this.reloadDescriptor === -1) {
             this.getTablets();
         }
     }
-
     componentWillUnmount() {
         clearInterval(this.reloadDescriptor);
     }
-
-    makeRequest = () => {
-        const {nodeFilter, tenantPath} = this.state;
-
-        this.props.getTabletsInfo({nodes: nodeFilter, path: [tenantPath]});
-    };
-
-    getTablets = () => {
-        const {timeoutForRequest} = this.props;
-        clearInterval(this.reloadDescriptor);
-        this.reloadDescriptor = setTimeout(() => {
-            this.makeRequest();
-            this.reloadDescriptor = -1;
-        }, timeoutForRequest);
-    };
-
-    handleNodeFilterChange = (nodeFilter) => {
-        this.setState({nodeFilter}, () => {
-            this.props.clearWasLoadingFlag();
-            this.makeRequest();
-        });
-    };
-
-    handleStateFilterChange = (stateFilter) => {
-        const {setStateFilter} = this.props;
-        setStateFilter(stateFilter);
-    };
-
-    handleTypeFilterChange = (typeFilter) => {
-        const {setTypeFilter} = this.props;
-        setTypeFilter(typeFilter);
-    };
-
-    renderTablet = (index, key) => {
-        const {filteredTablets, size} = this.props;
-
-        return (
-            <Tablet
-                tablet={filteredTablets[index]}
-                tenantName={this.state.tenantPath}
-                key={key}
-                size={size}
-                className={b('tablet')}
-            />
-        );
-    };
-
-    renderContent = () => {
-        const {nodeFilter, tenantPath} = this.state;
-        const {tablets, filteredTablets, nodes, stateFilter, typeFilter, error} = this.props;
-
-        const states = tabletStates.map((item) => ({value: item, content: item}));
-        const types = Array.from(new Set(...[_.map(tablets, (tblt) => tblt.Type)])).map((item) => ({
-            value: item,
-            content: item,
-        }));
-
-        const nodesForSelect = _.map(nodes, (node) => ({
-            content: node.Id,
-            value: node.Id,
-            meta: node.Host,
-        }));
-
-        return (
-            <div className={b()}>
-                {tenantPath ? (
-                    <div className={b('tenant')}>
-                        <>
-                            <span className={b('label')}>Database: </span> {tenantPath}
-                        </>
-                    </div>
-                ) : null}
-                <MemoizedFilters
-                    nodesForSelect={nodesForSelect}
-                    nodeFilter={nodeFilter}
-                    onChangeNodes={this.handleNodeFilterChange}
-                    states={states}
-                    stateFilter={stateFilter}
-                    onChangeStates={this.handleStateFilterChange}
-                    types={types}
-                    typeFilter={typeFilter}
-                    onChangeTypes={this.handleTypeFilterChange}
-                />
-
-                {error && <div className="error">{error}</div>}
-
-                {filteredTablets.length > 0 ? (
-                    <div className={b('items')}>
-                        <ReactList
-                            itemRenderer={this.renderTablet}
-                            length={filteredTablets.length}
-                            type="uniform"
-                        />
-                    </div>
-                ) : (
-                    !error && <div className={b('empty-message')}>no tablets</div>
-                )}
-            </div>
-        );
-    };
-
     render() {
-        const {loading, wasLoaded, error} = this.props;
-
+        const { loading, wasLoaded, error } = this.props;
         if (loading && !wasLoaded) {
             return TabletsFilters.renderLoader();
-        } else if (error && typeof error === 'object') {
+        }
+        else if (error && typeof error === 'object') {
             if (error.status === 403) {
-                return <AccessDenied />;
+                return _jsx(AccessDenied, {});
             }
-
-            return <div>{error.statusText}</div>;
-        } else {
+            return _jsx("div", { children: error.statusText });
+        }
+        else {
             return this.renderContent();
         }
     }
 }
-
-const Filters = ({
-    nodesForSelect,
-    nodeFilter,
-    onChangeNodes,
-
-    states,
-    stateFilter,
-    onChangeStates,
-
-    types,
-    typeFilter,
-    onChangeTypes,
-}) => {
-    return (
-        <div className={b('filters')}>
-            <div className={b('filter-wrapper')}>
-                <Select
-                    multiple
-                    label="Node ID"
-                    width={TabletsFilters.CONTROL_WIDTH}
-                    popupWidth={TabletsFilters.POPUP_WIDTH}
-                    placeholder="All"
-                    options={nodesForSelect}
-                    value={nodeFilter}
-                    onUpdate={onChangeNodes}
-                    renderOption={(option) => {
-                        return (
-                            <div className={b('node')}>
-                                <div>{option.content}</div>
-                                <div className={b('node-meta')} title={option.meta}>
-                                    {option.meta}
-                                </div>
-                            </div>
-                        );
-                    }}
-                    getOptionHeight={() => 40}
-                />
-            </div>
-
-            <div className={b('filter-wrapper')}>
-                <Select
-                    multiple
-                    label="multiple"
-                    width={TabletsFilters.CONTROL_WIDTH}
-                    placeholder="All"
-                    options={states}
-                    value={stateFilter}
-                    onUpdate={onChangeStates}
-                />
-            </div>
-
-            <div className={b('filter-wrapper')}>
-                <Select
-                    multiple
-                    label="Types"
-                    width={TabletsFilters.CONTROL_WIDTH}
-                    placeholder="All"
-                    options={types}
-                    value={typeFilter}
-                    onUpdate={onChangeTypes}
-                />
-            </div>
-        </div>
-    );
+TabletsFilters.propTypes = {
+    wasLoaded: PropTypes.bool,
+    loading: PropTypes.bool,
+    getTabletsInfo: PropTypes.func,
+    timeoutForRequest: PropTypes.number,
+    path: PropTypes.string,
+    clearWasLoadingFlag: PropTypes.func,
+    nodes: PropTypes.array,
+    tablets: PropTypes.array,
+    filteredTablets: PropTypes.array,
+    setStateFilter: PropTypes.func,
+    setTypeFilter: PropTypes.func,
+    stateFilter: PropTypes.array,
+    typeFilter: PropTypes.array,
+    error: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
+    setHeader: PropTypes.func,
+};
+TabletsFilters.parseNodes = (nodes) => {
+    if (Array.isArray(nodes)) {
+        return nodes.map(Number).filter(Number.isInteger);
+    }
+};
+TabletsFilters.getStateFiltersFromColor = (color) => {
+    return tabletColorToTabletState[color] || [color];
+};
+TabletsFilters.CONTROL_WIDTH = 220;
+TabletsFilters.POPUP_WIDTH = 300;
+const Filters = ({ nodesForSelect, nodeFilter, onChangeNodes, states, stateFilter, onChangeStates, types, typeFilter, onChangeTypes, }) => {
+    return (_jsxs("div", Object.assign({ className: b('filters') }, { children: [_jsx("div", Object.assign({ className: b('filter-wrapper') }, { children: _jsx(Select, { multiple: true, label: "Node ID", width: TabletsFilters.CONTROL_WIDTH, popupWidth: TabletsFilters.POPUP_WIDTH, placeholder: "All", options: nodesForSelect, value: nodeFilter, onUpdate: onChangeNodes, renderOption: (option) => {
+                        return (_jsxs("div", Object.assign({ className: b('node') }, { children: [_jsx("div", { children: option.content }), _jsx("div", Object.assign({ className: b('node-meta'), title: option.meta }, { children: option.meta }))] })));
+                    }, getOptionHeight: () => 40 }) })), _jsx("div", Object.assign({ className: b('filter-wrapper') }, { children: _jsx(Select, { multiple: true, label: "multiple", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: states, value: stateFilter, onUpdate: onChangeStates }) })), _jsx("div", Object.assign({ className: b('filter-wrapper') }, { children: _jsx(Select, { multiple: true, label: "Types", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: types, value: typeFilter, onUpdate: onChangeTypes }) }))] })));
 };
-
 Filters.propTypes = {
     nodesForSelect: PropTypes.array,
     nodeFilter: PropTypes.array,
     onChangeNodes: PropTypes.func,
-
     states: PropTypes.array,
     stateFilter: PropTypes.array,
     onChangeStates: PropTypes.func,
-
     types: PropTypes.array,
     typeFilter: PropTypes.array,
     onChangeTypes: PropTypes.func,
 };
-
 const MemoizedFilters = React.memo(Filters, (prevProps, nextProps) => {
-    return (
-        _.isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
+    return (_.isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
         _.isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
-        _.isEqual(prevProps.typeFilter, nextProps.typeFilter)
-    );
+        _.isEqual(prevProps.typeFilter, nextProps.typeFilter));
 });
-
 const mapStateToProps = (state) => {
-    const {nodes, wasLoaded, loading, timeoutForRequest, stateFilter, typeFilter, error} =
-        state.tabletsFilters;
-
+    const { nodes, wasLoaded, loading, timeoutForRequest, stateFilter, typeFilter, error } = state.tabletsFilters;
     return {
         tablets: getTablets(state),
         filteredTablets: getFilteredTablets(state),
@@ -337,7 +183,6 @@ const mapStateToProps = (state) => {
         error,
     };
 };
-
 const mapDispatchToProps = {
     getTabletsInfo,
     clearWasLoadingFlag,
@@ -345,5 +190,4 @@ const mapDispatchToProps = {
     setTypeFilter,
     setHeaderBreadcrumbs,
 };
-
 export default connect(mapStateToProps, mapDispatchToProps)(TabletsFilters);

package/dist/containers/Tenant/Acl/Acl.d.ts

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

package/dist/containers/Tenant/Acl/Acl.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+import cn from 'bem-cn-lite';
+import DataTable from '@gravity-ui/react-data-table';
+import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
+import { useTypedSelector } from '../../../utils/hooks';
+import { getSchemaAcl, setAclWasNotLoaded } from '../../../store/reducers/schemaAcl/schemaAcl';
+import { ResponseError } from '../../../components/Errors/ResponseError';
+import { Loader } from '../../../components/Loader';
+import './Acl.scss';
+import i18n from '../i18n';
+const b = cn('ydb-acl');
+const TABLE_SETTINGS = Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false, stickyTop: 36 });
+const prepareLogin = (value) => {
+    if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
+        const login = value.split('@')[0];
+        return login;
+    }
+    return value;
+};
+const columns = [
+    {
+        name: 'AccessType',
+        header: 'Access Type',
+        sortable: false,
+        render: ({ row }) => row.AccessType,
+    },
+    {
+        name: 'AccessRights',
+        header: 'Access Rights',
+        render: ({ row }) => {
+            var _a;
+            return (_a = row.AccessRights) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+                return _jsx("div", { children: item }, index);
+            });
+        },
+        sortable: false,
+    },
+    {
+        name: 'Subject',
+        sortable: false,
+        render: ({ row }) => {
+            return prepareLogin(row.Subject);
+        },
+        width: 140,
+    },
+    {
+        name: 'InheritanceType',
+        header: 'Inheritance Type',
+        render: ({ row }) => {
+            var _a;
+            return (_a = row.InheritanceType) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+                return _jsx("div", { children: item }, index);
+            });
+        },
+        sortable: false,
+    },
+];
+export const Acl = () => {
+    const dispatch = useDispatch();
+    const { currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const { loading, error, acl, owner, wasLoaded } = useTypedSelector((state) => state.schemaAcl);
+    useEffect(() => {
+        if (currentSchemaPath) {
+            dispatch(getSchemaAcl({ path: currentSchemaPath }));
+        }
+        return () => {
+            // Ensures correct acl on path change
+            dispatch(setAclWasNotLoaded());
+        };
+    }, [currentSchemaPath, dispatch]);
+    const renderTable = () => {
+        if (!acl || !acl.length) {
+            return null;
+        }
+        return (_jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: acl, settings: TABLE_SETTINGS }));
+    };
+    const renderOwner = () => {
+        if (!owner) {
+            return null;
+        }
+        return (_jsxs("div", Object.assign({ className: b('owner-container') }, { children: [_jsx("span", Object.assign({ className: b('owner-label') }, { children: `${i18n('acl.owner')}: ` })), prepareLogin(owner)] })));
+    };
+    if (loading && !wasLoaded) {
+        return _jsx(Loader, {});
+    }
+    if (error) {
+        return _jsx(ResponseError, { error: error, className: b('message-container') });
+    }
+    if (!loading && !acl && !owner) {
+        return _jsx("div", Object.assign({ className: b('message-container') }, { children: i18n('acl.empty') }));
+    }
+    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('result') }, { children: [renderOwner(), renderTable()] })) })));
+};

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

@@ -0,0 +1,8 @@
+import type { EPathType } from '../../../../types/api/schema';
+import './Consumers.scss';
+interface ConsumersProps {
+    path: string;
+    type?: EPathType;
+}
+export declare const Consumers: ({ path, type }: ConsumersProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import block from 'bem-cn-lite';
+import { escapeRegExp } from 'lodash/fp';
+import DataTable from '@gravity-ui/react-data-table';
+import { Loader } from '../../../../components/Loader';
+import { Search } from '../../../../components/Search';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { useAutofetcher, useTypedSelector } from '../../../../utils/hooks';
+import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
+import { selectPreparedConsumersData, selectPreparedTopicStats, getTopic, setDataWasNotLoaded, } from '../../../../store/reducers/topic';
+import { isCdcStreamEntityType } from '../../utils/schema';
+import { ConsumersTopicStats } from './TopicStats';
+import { columns } from './columns';
+import i18n from './i18n';
+import './Consumers.scss';
+const b = block('ydb-diagnostics-consumers');
+export const Consumers = ({ path, type }) => {
+    const isCdcStream = isCdcStreamEntityType(type);
+    const dispatch = useDispatch();
+    const [searchValue, setSearchValue] = useState('');
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const { loading, wasLoaded, error } = useTypedSelector((state) => state.topic);
+    const consumers = useTypedSelector((state) => selectPreparedConsumersData(state));
+    const topic = useTypedSelector((state) => selectPreparedTopicStats(state));
+    const fetchData = useCallback((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded);
+        }
+        dispatch(getTopic(path));
+    }, [dispatch, path]);
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+    const dataToRender = useMemo(() => {
+        if (!consumers) {
+            return [];
+        }
+        const searchRe = new RegExp(escapeRegExp(searchValue), 'i');
+        return consumers.filter((consumer) => {
+            return searchRe.test(String(consumer.name));
+        });
+    }, [consumers, searchValue]);
+    const handleSearchChange = (value) => {
+        setSearchValue(value);
+    };
+    if (loading && !wasLoaded) {
+        return _jsx(Loader, { size: "m" });
+    }
+    if (error) {
+        return _jsx(ResponseError, { error: error });
+    }
+    if (!consumers || !consumers.length) {
+        return _jsx("div", { children: i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`) });
+    }
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] })), _jsx("div", Object.assign({ className: b('table-wrapper') }, { children: _jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { theme: "yandex-cloud", data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) })) }))] })));
+};

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

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

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

@@ -0,0 +1,9 @@
+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 { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES } from '../utils/constants';
+import i18n from '../i18n';
+import './Headers.scss';
+const b = block('ydb-diagnostics-consumers-columns-header');
+export const ReadLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.readLags'), type: "read" }) }));

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.d.ts

@@ -0,0 +1,7 @@
+import type { IPreparedTopicStats } from '../../../../../types/store/topic';
+import './ConsumersTopicStats.scss';
+interface ConsumersTopicStatsProps {
+    data?: IPreparedTopicStats;
+}
+export declare const ConsumersTopicStats: ({ data }: ConsumersTopicStatsProps) => JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
+import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
+import './ConsumersTopicStats.scss';
+const b = block('ydb-diagnostics-consumers-topic-stats');
+export const ConsumersTopicStats = ({ data }) => {
+    const { writeSpeed, partitionsWriteLag, partitionsIdleTime } = data || {};
+    const values = [
+        {
+            label: 'Write speed',
+            value: _jsx(SpeedMultiMeter, { data: writeSpeed }),
+        },
+        {
+            label: 'Write lag',
+            value: formatMsToUptime(partitionsWriteLag || 0),
+        },
+        {
+            label: 'Write idle time',
+            value: formatMsToUptime(partitionsIdleTime || 0),
+        },
+    ];
+    return (_jsx("div", Object.assign({ className: b('wrapper') }, { children: values.map((value, index) => (_jsxs("div", Object.assign({ className: b('item') }, { children: [_jsx("div", Object.assign({ className: b('label') }, { children: value.label })), _jsx("div", Object.assign({ className: b('value') }, { children: value.value }))] }), index))) })));
+};