ydb-embedded-ui 3.2.0 → 3.2.2

package/dist/containers/Heatmap/Heatmap.js

@@ -1,244 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
-import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
-import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
-import {formatNumber} from '../../utils';
-
-import {Loader, Checkbox, Select} from '@gravity-ui/uikit';
-import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
-import {Histogram} from './Histogram/Histogram';
-import {AutoFetcher} from '../../utils/autofetcher';
-
-import './Heatmap.scss';
-
-const b = cn('heatmap');
-const COLORS_RANGE = getColorRange(COLORS_RANGE_SIZE);
-
-const PageLoader = () => (
-    <div className={b('loader')}>
-        <Loader size="m" />
-    </div>
-);
-
-class Heatmap extends React.Component {
-    static propTypes = {
-        tablets: PropTypes.array,
-        error: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        loading: PropTypes.bool,
-        showTooltip: PropTypes.func,
-        hideTooltip: PropTypes.func,
-        getTabletsInfo: PropTypes.func,
-        nodeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        path: PropTypes.string,
-        clearWasLoadingFlag: PropTypes.func,
-        metrics: PropTypes.array,
-        sort: PropTypes.bool,
-        heatmap: PropTypes.bool,
-        currentMetric: PropTypes.string,
-        setHeatmapOptions: PropTypes.func,
-    };
-    autofetcher;
-
-    componentDidMount() {
-        this.getTablets();
-        this.autofetcher = new AutoFetcher();
-        this.setInitialMetric();
-        if (this.props.autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.getTablets());
-        }
-    }
-    componentDidUpdate(prevProps) {
-        const {path, autorefresh} = this.props;
-
-        if (path && prevProps.path !== path) {
-            this.props.setHeatmapOptions({
-                wasLoaded: false,
-            });
-            this.getTablets();
-        }
-
-        if (autorefresh && !prevProps.autorefresh) {
-            this.getTablets();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.getTablets());
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-
-        this.setInitialMetric();
-    }
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    itemsContainer = React.createRef();
-
-    setInitialMetric = () => {
-        const {metrics, currentMetric} = this.props;
-
-        if (!currentMetric && metrics && metrics.length) {
-            this.props.setHeatmapOptions({
-                currentMetric: metrics[0].value,
-            });
-        }
-    };
-    getTablets = () => {
-        const {path} = this.props;
-
-        this.props.getTabletsInfo({path});
-    };
-    _onMetricChange = (value) => {
-        this.props.setHeatmapOptions({
-            currentMetric: value,
-        });
-    };
-    _onCheckboxChange = () => {
-        this.props.setHeatmapOptions({
-            sort: !this.props.sort,
-        });
-    };
-    _onHeatmapChange = () => {
-        this.props.setHeatmapOptions({
-            heatmap: !this.props.heatmap,
-        });
-    };
-    renderHistogram() {
-        const {tablets, currentMetric} = this.props;
-
-        return (
-            <Histogram
-                tablets={tablets}
-                currentMetric={currentMetric}
-                showTooltip={this.props.showTooltip}
-                hideTooltip={this.props.hideTooltip}
-            />
-        );
-    }
-    renderHeatmapCanvas() {
-        const {tablets, currentMetric, sort} = this.props;
-
-        const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
-
-        const preparedTablets = tablets.map((tablet) => {
-            const value = currentMetric && Number(tablet.metrics[currentMetric]);
-            const colorIndex = getColorIndex(value, min, max);
-            const color = COLORS_RANGE[colorIndex];
-
-            return {
-                ...tablet,
-                color,
-                value,
-                formattedValue: formatNumber(value),
-                currentMetric,
-            };
-        });
-        const sortedTablets = sort
-            ? preparedTablets.sort((a, b) => b.value - a.value)
-            : preparedTablets;
-
-        return (
-            <div ref={this.itemsContainer} className={b('items')}>
-                <HeatmapCanvas
-                    tablets={sortedTablets}
-                    parentRef={this.itemsContainer}
-                    showTooltip={this.props.showTooltip}
-                    hideTooltip={this.props.hideTooltip}
-                    currentMetric={currentMetric}
-                />
-            </div>
-        );
-    }
-    renderContent() {
-        const {tablets, metrics, currentMetric, heatmap, sort} = this.props;
-
-        const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
-
-        return (
-            <div className={b()}>
-                <div className={b('filters')}>
-                    <Select
-                        className={b('heatmap-select')}
-                        value={currentMetric}
-                        options={metrics}
-                        onUpdate={this._onMetricChange}
-                        width={200}
-                    />
-                    <div className={b('sort-checkbox')}>
-                        <Checkbox onUpdate={this._onCheckboxChange} checked={sort}>
-                            Sort
-                        </Checkbox>
-                    </div>
-                    <div className={b('histogram-checkbox')}>
-                        <Checkbox onUpdate={this._onHeatmapChange} checked={heatmap}>
-                            Heatmap
-                        </Checkbox>
-                    </div>
-                    <div className={b('limits')}>
-                        <div className={b('limits-block')}>
-                            <div className={b('limits-title')}>min:</div>
-                            <div className={b('limits-value')}>
-                                {Number.isInteger(min) ? formatNumber(min) : '—'}
-                            </div>
-                        </div>
-                        <div className={b('limits-block')}>
-                            <div className={b('limits-title')}>max:</div>
-                            <div className={b('limits-value')}>
-                                {Number.isInteger(max) ? formatNumber(max) : '—'}
-                            </div>
-                        </div>
-                        <div className={b('limits-block')}>
-                            <div className={b('limits-title')}>count:</div>
-                            <div className={b('limits-value')}>{formatNumber(tablets.length)}</div>
-                        </div>
-                    </div>
-                </div>
-                {heatmap ? this.renderHeatmapCanvas() : this.renderHistogram()}
-            </div>
-        );
-    }
-    render() {
-        const {loading, wasLoaded} = this.props;
-
-        return loading && !wasLoaded ? <PageLoader /> : this.renderContent();
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {
-        loading,
-        data: tablets = [],
-        metrics,
-        sort,
-        heatmap,
-        currentMetric,
-        wasLoaded,
-    } = state.heatmap;
-    const {autorefresh} = state.schema;
-
-    return {
-        tablets,
-        loading,
-        metrics,
-        sort,
-        heatmap,
-        currentMetric,
-        wasLoaded,
-        autorefresh,
-    };
-};
-
-const mapDispatchToProps = {
-    getTabletsInfo,
-    hideTooltip,
-    showTooltip,
-    setHeatmapOptions,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Heatmap);

package/dist/containers/Tablets/Tablets.js

@@ -1,228 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {
-    getTabletsInfo,
-    clearWasLoadingFlag,
-    setStateFilter,
-    setTypeFilter,
-} from '../../store/reducers/tablets';
-import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
-
-import Tablet from '../../components/Tablet/Tablet';
-import {Loader, Select} from '@gravity-ui/uikit';
-import ReactList from 'react-list';
-import {AutoFetcher} from '../../utils/autofetcher';
-
-import './Tablets.scss';
-import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
-
-const b = cn('tablets');
-
-class Tablets extends React.Component {
-    static propTypes = {
-        tablets: PropTypes.array,
-        error: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        loading: PropTypes.bool,
-        showTooltip: PropTypes.func,
-        hideTooltip: PropTypes.func,
-        getTabletsInfo: PropTypes.func,
-        nodeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        path: PropTypes.string,
-        clearWasLoadingFlag: PropTypes.func,
-        className: PropTypes.string,
-    };
-
-    autofetcher;
-
-    state = {
-        filteredTablets: [],
-    };
-
-    componentDidMount() {
-        this.makeRequestIfPathOrNodeExist();
-        this.autofetcher = new AutoFetcher();
-        if (this.props.autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.makeRequestIfPathOrNodeExist());
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {autorefresh} = this.props;
-
-        if (!prevProps.path && this.props.path) {
-            this.makeRequestIfPathOrNodeExist();
-        }
-
-        if (prevProps.path && this.props.path && prevProps.path !== this.props.path) {
-            this.props.clearWasLoadingFlag();
-            this.makeRequestIfPathOrNodeExist();
-        }
-
-        if (autorefresh && !prevProps.autorefresh) {
-            this.makeRequestIfPathOrNodeExist();
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.makeRequestIfPathOrNodeExist());
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    renderLoader = () => {
-        return (
-            <div className={b('loader-wrapper')}>
-                <Loader size="m" />
-            </div>
-        );
-    };
-
-    makeRequestIfPathOrNodeExist = () => {
-        const {nodeId, path} = this.props;
-        if (typeof nodeId !== 'undefined') {
-            this.props.getTabletsInfo({nodes: [nodeId]}).then(this.updateFilteredTablets);
-        } else if (typeof path !== 'undefined') {
-            this.props.getTabletsInfo({path}).then(this.updateFilteredTablets);
-        }
-    };
-
-    handleStateFilterChange = (stateFilter) => {
-        this.props.setStateFilter(stateFilter);
-        this.updateFilteredTablets();
-    };
-
-    handleTypeFilterChange = (typeFilter) => {
-        this.props.setTypeFilter(typeFilter);
-        this.updateFilteredTablets();
-    };
-
-    renderTablet = (tablet, tabletIndex) => {
-        return (
-            <Tablet
-                onMouseLeave={this.props.hideTooltip}
-                onMouseEnter={this.props.showTooltip}
-                tablet={this.state.filteredTablets[parseInt(tabletIndex, 10)]}
-                key={tabletIndex}
-                size={this.props.size}
-                className={b('tablet')}
-            />
-        );
-    };
-
-    updateFilteredTablets = () => {
-        const {stateFilter, typeFilter} = this.props;
-        const {tablets} = this.props;
-
-        let filteredTablets = tablets;
-
-        if (typeFilter.length > 0) {
-            filteredTablets = filteredTablets.filter((tblt) =>
-                typeFilter.some((filter) => tblt.Type === filter),
-            );
-        }
-        if (stateFilter.length > 0) {
-            filteredTablets = filteredTablets.filter((tblt) =>
-                stateFilter.some((filter) => tblt.State === filter),
-            );
-        }
-        this.setState({filteredTablets});
-    };
-
-    renderContent = (tablets) => {
-        const states = Array.from(new Set(...[tablets.map((tblt) => tblt.State)])).map((item) => ({
-            value: item,
-            content: item,
-        }));
-        const types = Array.from(new Set(...[tablets.map((tblt) => tblt.Type)])).map((item) => ({
-            value: item,
-            content: item,
-        }));
-        const {filteredTablets} = this.state;
-        const {stateFilter, typeFilter, className} = this.props;
-
-        return (
-            <div className={b(null, className)}>
-                <div className={b('header')}>
-                    <Select
-                        className={b('filter-control')}
-                        multiple
-                        placeholder="All items"
-                        label="States:"
-                        options={states}
-                        value={stateFilter}
-                        onUpdate={this.handleStateFilterChange}
-                        width="100%"
-                    />
-                    <Select
-                        className={b('filter-control')}
-                        multiple
-                        placeholder="All items"
-                        label="Types:"
-                        options={types}
-                        value={typeFilter}
-                        onUpdate={this.handleTypeFilterChange}
-                        width="100%"
-                    />
-                    <TabletsOverall tablets={tablets} />
-                </div>
-
-                <div className={b('items')}>
-                    <ReactList
-                        itemRenderer={this.renderTablet}
-                        length={filteredTablets.length}
-                        type="uniform"
-                    />
-                </div>
-            </div>
-        );
-    };
-
-    render() {
-        const {loading, wasLoaded, error, tablets} = this.props;
-        if (loading && !wasLoaded) {
-            return this.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
-            return tablets.length > 0 ? (
-                this.renderContent(tablets)
-            ) : (
-                <div className="error">no tablets data</div>
-            );
-        }
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {data = {}, wasLoaded, loading, stateFilter, typeFilter} = state.tablets;
-    const {autorefresh} = state.schema;
-    const {TabletStateInfo: tablets = []} = data;
-    return {
-        tablets,
-        wasLoaded,
-        loading,
-        stateFilter,
-        typeFilter,
-        autorefresh,
-    };
-};
-
-const mapDispatchToProps = {
-    getTabletsInfo,
-    hideTooltip,
-    showTooltip,
-    clearWasLoadingFlag,
-    setStateFilter,
-    setTypeFilter,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Tablets);