{"size": 1164, "ext": "js", "max_stars_repo_path": "src/components/TabletsViewer/TabletsViewer.js", "max_stars_repo_name": "ydb-platform/ydb-embedded-ui", "max_stars_repo_stars_event_min_datetime": "2022-03-29T14:36:22.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-29T14:36:22.000Z", "max_issues_repo_path": "src/components/TabletsViewer/TabletsViewer.js", "max_issues_repo_name": "ydb-platform/ydb-embedded-ui", "max_issues_repo_issues_event_min_datetime": "2022-02-24T09:30:39.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-24T11:28:47.000Z", "max_forks_repo_path": "src/components/TabletsViewer/TabletsViewer.js", "max_forks_repo_name": "ydb-platform/ydb-embedded-ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 25.8666666667, "max_line_length": 92, "alphanum_fraction": 0.5558419244}
import React from 'react';
import cn from 'bem-cn-lite';
import PropTypes from 'prop-types';
import {formatNumber} from '../../utils';
import './TabletsViewer.scss';

import {TABLET_STATES} from '../../utils/constants';

const b = cn('tablets-viewer');

const prepareStates = (states) => {
    return states.map((state) => {
        return {
            label: TABLET_STATES[state.VolatileState],
            count: formatNumber(state.Count),
        };
    });
};

class TabletsViewer extends React.Component {
    static propTypes = {
        tablets: PropTypes.array,
    };
    renderTabletInfo = (item, index) => {
        return (
            <div key={index} className={b('row')}>
                <div className={b('tablet-label')}>{item.label}</div>
                <span>{item.count}</span>
            </div>
        );
    };
    render() {
        const {tablets = []} = this.props;
        const preparedStates = prepareStates(tablets);

        return (
            <div className={b()}>
                <div className={b('grid')}>{preparedStates.map(this.renderTabletInfo)}</div>
            </div>
        );
    }
}

export default TabletsViewer;
