ydb-embedded-ui 0.1.0

package/dist/containers/Header/Header.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
+import {withRouter} from 'react-router-dom';
+
+import Host from '../../containers/Header/Host/Host';
+
+import {backend, clusterName as clusterNameLocation} from '../../store';
+import {getHostInfo} from '../../store/reducers/host';
+import {getClusterInfo} from '../../store/reducers/cluster';
+import {setSettingValue, getSettingValue} from '../../store/reducers/settings';
+import {THEME_KEY} from '../../utils/constants';
+
+import './Header.scss';
+
+const b = cn('header');
+
+const ClusterName = ({name}) => (
+    <div className={b('cluster-info')}>
+        <div className={b('cluster-info-title')}>cluster</div>
+        <div className={b('cluster-info-name')}>{name}</div>
+    </div>
+);
+ClusterName.propTypes = {
+    name: PropTypes.string,
+};
+
+class Header extends React.Component {
+    static propTypes = {
+        getHostInfo: PropTypes.func,
+        host: PropTypes.object,
+        pathname: PropTypes.string,
+        clusterName: PropTypes.string,
+        theme: PropTypes.string,
+        setSettingValue: PropTypes.func,
+        getSettingValue: PropTypes.func,
+        getClusterInfo: PropTypes.func,
+        singleClusterMode: PropTypes.bool,
+    };
+    componentDidMount() {
+        const {pathname, clusterName, singleClusterMode} = this.props;
+        const isClustersPage = pathname.includes('/clusters');
+
+        if (!isClustersPage && !clusterName && !singleClusterMode) {
+            this.props.getClusterInfo(clusterNameLocation);
+        }
+        this.props.getHostInfo();
+    }
+    render() {
+        const {host, clusterName: clusterNameWeb, singleClusterMode} = this.props;
+        const clusterName = singleClusterMode ? host.ClusterName : clusterNameWeb;
+
+        return (
+            <header className={b()}>
+                <div className={b('content')}>
+                    {clusterName && <ClusterName name={clusterName} />}
+                </div>
+                {host.Host && (
+                    <Host host={host} backend={backend} singleClusterMode={singleClusterMode} />
+                )}
+            </header>
+        );
+    }
+}
+
+const mapStateToProps = (state, ownProps) => {
+    const {singleClusterMode} = state;
+    const {data: host} = state.host;
+    const {pathname} = ownProps.location;
+
+    return {
+        singleClusterMode,
+        host,
+        pathname,
+        theme: getSettingValue(state, THEME_KEY),
+        clusterName: state.cluster.data?.Name || state.clusterInfo.title,
+    };
+};
+
+const mapDispatchToProps = {
+    getHostInfo,
+    setSettingValue,
+    getClusterInfo,
+};
+
+const ConnectedHeader = connect(mapStateToProps, mapDispatchToProps)(Header);
+export default withRouter(ConnectedHeader);

package/dist/containers/Header/Header.scss

@@ -0,0 +1,72 @@
+.header {
+    height: 60px;
+    flex: 0 0 auto;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--yc-color-base-generic);
+
+    &__logo {
+        margin-right: 40px;
+        color: var(--yc-color-text-dark-primary);
+        .yc-root_theme_dark & {
+            color: var(--yc-color-text-light-primary);
+        }
+        .yc-root_theme_light & {
+            color: var(--yc-color-text-dark-primary);
+        }
+        user-select: none;
+        height: 38px;
+        width: 143px;
+    }
+    &__cluster-info {
+    }
+    &__cluster-info-title {
+        color: var(--yc-color-text-secondary);
+        text-transform: uppercase;
+        font-size: 12px;
+        margin-bottom: 3px;
+    }
+    &__cluster-info-name {
+        font-size: 17px;
+        font-weight: 500;
+    }
+
+    &__theme-toggle {
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        margin-left: auto;
+        color: var(--yc-color-text-primary);
+
+        .yc-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .yc-button__text {
+            margin: 0;
+        }
+    }
+
+    &__theme-toggle + .host {
+        margin-left: 25px;
+    }
+
+    &__space-divider {
+        width: 100%;
+    }
+
+    &__theme-button {
+        width: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__help-center {
+        margin-right: 15px;
+    }
+}

package/dist/containers/Header/Host/Host.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+
+import {Link as ExternalLink} from '@yandex-cloud/uikit';
+
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import {Tag} from '../../../components/Tag/Tag';
+
+import {calcUptime} from '../../../utils';
+import {customBackend} from '../../../store';
+
+import './Host.scss';
+
+const b = cn('host');
+
+export default class Host extends React.Component {
+    static propTypes = {
+        host: PropTypes.object,
+        singleClusterMode: PropTypes.bool,
+    };
+
+    renderStatus = () => {
+        const {host} = this.props;
+
+        return (
+            <div className={b('status')}>
+                <EntityStatus size="m" status={host.SystemState} name={'Internal viewer'} />
+            </div>
+        );
+    };
+
+    render() {
+        const {host, backend, singleClusterMode} = this.props;
+        const uptime = calcUptime(host.StartTime);
+
+        let link = backend + '/internal';
+
+        if (singleClusterMode && !customBackend) {
+            link = `/internal`;
+        }
+
+        return (
+            <div className={b()}>
+                <div className={b('common')}>
+                    {link ? (
+                        <ExternalLink href={link}>{this.renderStatus()}</ExternalLink>
+                    ) : (
+                        this.renderStatus()
+                    )}
+                    <Tag text={host.DataCenter} />
+                </div>
+                <div className={b('info')}>
+                    <div className={b('info-item')}>
+                        <div className={b('label')}>Uptime</div>
+                        <div className={b('value')}>{uptime}</div>
+                    </div>
+                    <div className={b('info-item')}>
+                        <div className={b('label')}>Version</div>
+                        <div className={b('value')}>{host.Version}</div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

package/dist/containers/Header/Host/Host.scss

@@ -0,0 +1,43 @@
+.host {
+    display: flex;
+    flex-direction: column;
+
+    &__common {
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+    }
+    &__status {
+        display: flex;
+        margin-right: 15px;
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+    }
+    &__info {
+        display: flex;
+        align-items: center;
+    }
+    &__info-item {
+        display: flex;
+        margin-right: 20px;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    &__label {
+        color: var(--yc-color-text-hint);
+        font-size: var(--yc-text-body-font-size);
+        line-height: var(--yc-text-body-line-height);
+        margin-right: 10px;
+
+        .yc-root_theme_dark & {
+            color: var(--yc-color-text-hint);
+        }
+    }
+    &__value {
+        color: var(--yc-color-text-primary);
+        font-size: var(--yc-text-body-font-size);
+        line-height: var(--yc-text-body-line-height);
+    }
+}

package/dist/containers/Heatmap/Heatmap.js

@@ -0,0 +1,246 @@
+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} from '@yandex-cloud/uikit';
+import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
+import {Histogram} from './Histogram/Histogram';
+import {AutoFetcher} from '../Cluster/Cluster';
+
+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]),
+        timeoutForRequest: 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/Heatmap/Heatmap.scss

@@ -0,0 +1,94 @@
+@import '../../styles/mixins';
+
+.heatmap {
+    @include flex-container();
+    overflow: auto;
+
+    &__loader {
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__limits {
+        display: flex;
+        align-items: center;
+        margin-left: 20px;
+    }
+    &__limits-block {
+        display: flex;
+        margin-right: 10px;
+    }
+    &__limits-title {
+        color: var(--yc-color-text-secondary);
+        margin-right: 5px;
+    }
+    &__limits-value {
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+
+        &_overall {
+            margin: 15px 20px;
+
+            .yc-progress {
+                width: 300px;
+                margin: 0;
+            }
+        }
+    }
+
+    &__label {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        font-weight: 500;
+        text-transform: uppercase;
+        margin-right: 16px;
+
+        &_overall {
+            margin-right: 15px;
+        }
+    }
+
+    &__items {
+        overflow: auto;
+    }
+    &__canvas-container {
+        overflow: auto;
+        cursor: pointer;
+    }
+
+    &__filters {
+        display: flex;
+        align-items: center;
+        margin: 10px 0;
+    }
+
+    &__filter-control {
+        margin-right: 10px;
+        min-width: 100px;
+        max-width: 200px;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    &__sort-checkbox {
+        margin-left: 10px;
+    }
+    &__histogram-checkbox {
+        margin-left: 10px;
+    }
+
+    &__row {
+        display: flex;
+        margin-bottom: 2px;
+    }
+
+    .tablet {
+        margin-bottom: 2px;
+    }
+}