ydb-embedded-ui 0.1.0

package/dist/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js

@@ -0,0 +1,167 @@
+import {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import _ from 'lodash';
+
+import {basename as appBasename} from '../../../store/index';
+import routes, {createHref} from '../../../routes';
+
+const b = cn('heatmap');
+const defaultDimensions = {width: 0, height: 0};
+
+const TABLET_SIZE = 10;
+const TABLET_PADDING = 2;
+
+export const HeatmapCanvas = (props) => {
+    const [dimensions, setDimensions] = useState(defaultDimensions);
+    const {tablets} = props;
+    const canvasRef = useRef(null);
+    const containerRef = useRef(null);
+
+    function drawTablet(ctx) {
+        return (tablet, index) => {
+            const {columnsCount} = dimensions;
+            const rectX = (index % columnsCount) * (TABLET_SIZE + TABLET_PADDING);
+            const rectY = Math.floor(index / columnsCount) * (TABLET_SIZE + TABLET_PADDING);
+
+            ctx.fillStyle = tablet.color || 'gray';
+            ctx.fillRect(rectX, rectY, TABLET_SIZE, TABLET_SIZE);
+        };
+    }
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+
+        ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
+        tablets.map(drawTablet(ctx));
+    });
+
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+
+        if (container) {
+            const width = container.offsetWidth - 15;
+            const columnsCount = Math.floor(width / (TABLET_SIZE + TABLET_PADDING));
+            const rowsCount = Math.ceil(tablets.length / columnsCount);
+            const height = rowsCount * (TABLET_SIZE + TABLET_PADDING);
+
+            setDimensions({
+                width,
+                height,
+                columnsCount,
+                rowsCount,
+            });
+        }
+    }, []);
+
+    const getOffsetTop = () => {
+        let element = canvasRef.current;
+        let offsetTop = 0;
+        while (element) {
+            offsetTop += element.offsetTop;
+            element = element.offsetParent;
+        }
+        return offsetTop;
+    };
+
+    const getOffsetLeft = () => {
+        let element = canvasRef.current;
+        let offsetLeft = 0;
+        while (element) {
+            offsetLeft += element.offsetLeft;
+            element = element.offsetParent;
+        }
+        return offsetLeft;
+    };
+
+    const getTabletIndex = (x, y) => {
+        const {columnsCount} = dimensions;
+        const colStep = TABLET_SIZE + TABLET_PADDING;
+        const rowStep = TABLET_SIZE + TABLET_PADDING;
+
+        const xCol = Math.floor(x / colStep);
+        const yRow = Math.floor(y / rowStep);
+        const index = columnsCount * yRow + xCol;
+
+        return index;
+    };
+    const generateTabletExternalLink = (tablet) => {
+        const {TabletId: id} = tablet;
+        const hostname = window.location.hostname;
+        const path = createHref(routes.tablet, {id});
+        const protocol = 'https://';
+        const href = [hostname, appBasename, path]
+            .map((item) => (item.startsWith('/') ? item.slice(1) : item))
+            .filter(Boolean)
+            .join('/');
+
+        return `${protocol}${href}`;
+    };
+    const _onCanvasClick = (e) => {
+        const parent = props.parentRef.current;
+        const x = e.clientX - getOffsetLeft() + parent.scrollLeft;
+        const y = e.clientY - getOffsetTop() + parent.scrollTop;
+
+        const tabletIndex = getTabletIndex(x, y);
+        const tablet = tablets[tabletIndex];
+
+        if (tablet) {
+            window.open(generateTabletExternalLink(tablet), '_blank');
+        }
+    };
+    const _onCanvasMouseLeave = () => {
+        // Таймаут нужен для того, чтобы точно скрыть тултип. В методе _onCanvasMouseMove используется throttle.
+        // И это может вызвать функцию отрисовки тултипа уже после фактического покидания области канваса. Для этого
+        // в таймауте используем задержку больше, чем время задержки в throttle.
+        setTimeout(() => {
+            props.hideTooltip();
+        }, 40);
+    };
+    const _onCanvasMouseMove = _.throttle((x, y) => {
+        //this is needed to force ReduxPopup rerender
+        const event = new CustomEvent('scroll');
+        window.dispatchEvent(event);
+        const parent = props.parentRef.current;
+        const xPos = x - getOffsetLeft() + parent.scrollLeft;
+        const yPos = y - getOffsetTop() + parent.scrollTop;
+
+        const tabletIndex = getTabletIndex(xPos, yPos);
+        const tablet = tablets[tabletIndex];
+        if (tablet) {
+            const additionalData = {
+                name: tablet.currentMetric,
+                value: tablet.formattedValue,
+            };
+            props.showTooltip(undefined, tablet, 'tablet', additionalData, {
+                left: x - 20,
+                top: y - 20,
+            });
+        } else {
+            props.hideTooltip();
+        }
+    }, 20);
+
+    return (
+        <div
+            ref={containerRef}
+            className={b('canvas-container')}
+            onMouseLeave={_onCanvasMouseLeave}
+        >
+            <canvas
+                ref={canvasRef}
+                width={dimensions.width}
+                height={dimensions.height}
+                onClick={_onCanvasClick}
+                onMouseMove={(e) => _onCanvasMouseMove(e.clientX, e.clientY)}
+            />
+        </div>
+    );
+};
+
+HeatmapCanvas.propTypes = {
+    tablets: PropTypes.array,
+    parentRef: PropTypes.node,
+    showTooltip: PropTypes.func,
+    hideTooltip: PropTypes.func,
+};

package/dist/containers/Heatmap/Histogram/Histogram.js

@@ -0,0 +1,108 @@
+import {useRef} from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+
+import {getColorRange, getCurrentMetricLimits} from '../util';
+import {formatNumber} from '../../../utils';
+
+import './Histogram.scss';
+
+const b = cn('histogram');
+
+const HistogramBar = (props) => {
+    const barRef = useRef();
+    const {data = {}, maxCount} = props;
+    const {count, leftBound, rightBound, color} = data;
+    const height = (count / maxCount) * 100;
+
+    const _onHistogramItemEnter = () => {
+        const ref = barRef.current;
+
+        props.showTooltip(
+            ref,
+            {
+                count,
+                leftBound,
+                rightBound,
+            },
+            'histogram',
+        );
+    };
+
+    return (
+        <div
+            ref={barRef}
+            className={b('item')}
+            style={{backgroundColor: color, height: `${height}%`}}
+            onMouseEnter={_onHistogramItemEnter}
+            onMouseLeave={props.hideTooltip}
+        />
+    );
+};
+HistogramBar.propTypes = {
+    data: PropTypes.object,
+    maxCount: PropTypes.number,
+    showTooltip: PropTypes.func,
+    hideTooltip: PropTypes.func,
+};
+
+export const Histogram = (props) => {
+    const {tablets, currentMetric} = props;
+    const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
+
+    const histogramColorRange = getColorRange(50);
+    const step = (max - min) / 50;
+    const histogramRange = histogramColorRange.map((item, index) => {
+        return {
+            color: item,
+            count: 0,
+            leftBound: formatNumber(min + index * step),
+            rightBound: formatNumber(min + (index + 1) * step),
+        };
+    });
+    let maxCount = 0;
+    tablets.forEach((tablet) => {
+        const value = currentMetric && Number(tablet.metrics[currentMetric]);
+        const bucketIndex = Math.floor(value / step);
+        const nextCountValue = histogramRange[bucketIndex]?.count + 1;
+
+        if (nextCountValue > maxCount) {
+            maxCount = nextCountValue;
+        }
+
+        histogramRange[bucketIndex] = {
+            ...histogramRange[bucketIndex],
+            count: nextCountValue,
+        };
+    });
+
+    const renderHistogramItem = (item, index) => {
+        return (
+            <HistogramBar
+                key={index}
+                data={item}
+                maxCount={maxCount}
+                showTooltip={props.showTooltip}
+                hideTooltip={props.hideTooltip}
+            />
+        );
+    };
+
+    return (
+        <div className={b()}>
+            <div className={b('chart')}>
+                {Boolean(max) && histogramRange.map(renderHistogramItem)}
+                <div className={b('x-min')}>{formatNumber(min)}</div>
+                <div className={b('x-max')}>{formatNumber(max)}</div>
+                <div className={b('y-min')}>0</div>
+                <div className={b('y-max')}>{formatNumber(maxCount)}</div>
+            </div>
+        </div>
+    );
+};
+Histogram.propTypes = {
+    tablets: PropTypes.array,
+    currentMetric: PropTypes.string,
+    showTooltip: PropTypes.func,
+    hideTooltip: PropTypes.func,
+};

package/dist/containers/Heatmap/Histogram/Histogram.scss

@@ -0,0 +1,49 @@
+.histogram {
+    display: flex;
+    flex: 1 1 auto;
+
+    &__chart {
+        position: relative;
+        display: flex;
+        align-items: baseline;
+        width: 800px;
+        height: 300px;
+        border-bottom: 1px solid var(--yc-color-base-generic);
+        border-left: 1px solid var(--yc-color-base-generic);
+        margin-left: 50px;
+        margin-top: 30px;
+    }
+    &__x-min {
+        color: var(--yc-color-text-secondary);
+        position: absolute;
+        bottom: -25px;
+        left: -3px;
+    }
+    &__x-max {
+        color: var(--yc-color-text-secondary);
+        position: absolute;
+        bottom: -25px;
+        right: 0;
+    }
+    &__y-min {
+        color: var(--yc-color-text-secondary);
+        position: absolute;
+        width: 20px;
+        bottom: -7px;
+        left: -30px;
+        text-align: right;
+    }
+    &__y-max {
+        color: var(--yc-color-text-secondary);
+        position: absolute;
+        width: 50px;
+        top: -5px;
+        left: -60px;
+        text-align: right;
+    }
+    &__item {
+        width: 1.5%;
+        margin-right: 0.5%;
+        cursor: pointer;
+    }
+}

package/dist/containers/Heatmap/util.js

@@ -0,0 +1,110 @@
+const CRIT = {r: 255, g: 4, b: 0};
+const WARN = {r: 255, g: 219, b: 77};
+const OK = {r: 59, g: 201, b: 53};
+
+export const COLORS_RANGE_SIZE = 500;
+export const LIMITED_METRICS = {
+    CPU: {
+        min: 0,
+        max: 1000000,
+    },
+    Network: {
+        min: 0,
+        max: 1000000000,
+    },
+    Storage: {
+        min: 0,
+        max: 2000000000,
+    },
+    DataSize: {
+        min: 0,
+        max: 2000000000,
+    },
+    RowCount: {
+        min: 0,
+    },
+    IndexSize: {
+        min: 0,
+    },
+};
+
+const cToHex = (c) => {
+    const hex = c.toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+};
+const rgbToHex = ({r, g, b}) => {
+    return `#${cToHex(r)}${cToHex(g)}${cToHex(b)}`;
+};
+
+export const getRangeBetweenColors = (range, color1, color2) => {
+    if (range === 1) {
+        return [color1];
+    }
+
+    if (range === 2) {
+        return [color1, color2];
+    }
+
+    const redDiff = color1.r - color2.r;
+    const redStep = redDiff / (range - 1);
+
+    const greenDiff = color1.g - color2.g;
+    const greenStep = greenDiff / (range - 1);
+
+    const blueDiff = color1.b - color2.b;
+    const blueStep = blueDiff / (range - 1);
+
+    const colors = [];
+
+    for (let i = 0; i < range; i++) {
+        colors.push({
+            r: Math.round(color1.r - redStep * i),
+            g: Math.round(color1.g - greenStep * i),
+            b: Math.round(color1.b - blueStep * i),
+        });
+    }
+
+    return colors.map((color) => rgbToHex(color));
+};
+export const getColorRange = (range) => {
+    const halfRange = Math.floor(range / 2);
+    const range1 = range % 2 === 0 ? halfRange : halfRange + 1;
+    const range2 = halfRange + 1;
+
+    const firstInterval = getRangeBetweenColors(range1, OK, WARN);
+    const secondInterval = getRangeBetweenColors(range2, WARN, CRIT);
+
+    const colorsRange = [...firstInterval, ...secondInterval.slice(1)];
+
+    return colorsRange;
+};
+export const getColorIndex = (value, min, max) => {
+    if (max === 0) {
+        return 0;
+    } else {
+        return Math.round(((value - min) / (max - min)) * (COLORS_RANGE_SIZE - 1));
+    }
+};
+
+export const getCurrentMetricLimits = (metric, tablets) => {
+    const limits = new Set();
+    const limitedMetric = LIMITED_METRICS[metric] || {};
+
+    tablets.forEach((tablet) => {
+        limits.add(Number(tablet.metrics[metric]));
+    });
+
+    if (Number.isInteger(limitedMetric.min)) {
+        limits.add(limitedMetric.min);
+    }
+    if (Number.isInteger(limitedMetric.max)) {
+        limits.add(limitedMetric.max);
+    }
+
+    const sortedLimits = Array.from(limits.values()).sort((a, b) => a - b);
+
+    return {
+        min: sortedLimits[0],
+        max: sortedLimits[sortedLimits.length - 1],
+    };
+};

package/dist/containers/Node/Node.js

@@ -0,0 +1,184 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
+import _ from 'lodash';
+
+import {Loader, Tabs} from '@yandex-cloud/uikit';
+import {withRouter, Link} from 'react-router-dom';
+
+import FullNodeViewer from '../../components/FullNodeViewer/FullNodeViewer';
+import {TABLETS, STORAGE, NODE_PAGES} from './NodePages';
+import Tablets from '../Tablets/Tablets';
+import Storage from '../StorageV2/Storage';
+
+import {getNodeInfo} from '../../store/reducers/node';
+import {NODE_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
+import routes, {createHref} from '../../routes';
+import {backend} from '../../store';
+
+import './Node.scss';
+
+const b = cn('node');
+
+export const STORAGE_ROLE = 'Storage';
+
+class Node extends React.Component {
+    static renderLoader() {
+        return (
+            <div className={'loader'}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    static propTypes = {
+        className: PropTypes.string,
+        getNodeInfo: PropTypes.func,
+        match: PropTypes.object,
+        loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
+        error: PropTypes.bool,
+        node: PropTypes.object,
+        activeTab: PropTypes.string,
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        additionalNodesInfo: PropTypes.object,
+    };
+
+    static defaultProps = {
+        className: '',
+    };
+
+    state = {
+        activeTab: '',
+    };
+
+    componentDidMount() {
+        const {id} = this.props.match.params;
+        this.setState({activeTab: this.props.activeTab});
+        this.props.getNodeInfo(id);
+        this.reloadDescriptor = setInterval(
+            () => this.props.getNodeInfo(id),
+            NODE_AUTO_RELOAD_INTERVAL,
+        );
+    }
+
+    componentDidUpdate() {
+        const {node} = this.props;
+        let {activeTab} = this.props;
+        if (node) {
+            const hasStorage = _.find(node.Roles, (el) => el === STORAGE_ROLE);
+            if (!hasStorage) {
+                activeTab = TABLETS;
+            }
+            this.setState((prev) => {
+                if (prev.activeTab !== activeTab) {
+                    return {activeTab};
+                }
+            });
+        }
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.reloadDescriptor);
+    }
+
+    renderTabs() {
+        const {node} = this.props;
+        const {id} = this.props.match.params;
+        const hasStorage = _.find(node?.Roles, (el) => el === STORAGE_ROLE);
+
+        const filteredNodesPages = hasStorage
+            ? NODE_PAGES
+            : NODE_PAGES.filter((el) => el.id !== STORAGE);
+        const pages = filteredNodesPages.map((page) => {
+            return {
+                ...page,
+                path: createHref(routes.node, {id, activeTab: page.id}),
+            };
+        });
+
+        return (
+            <div className={b('tabs')}>
+                <Tabs
+                    items={pages}
+                    activeTab={this.state.activeTab}
+                    wrapTo={({path, id}, node) => (
+                        <Link to={path} key={id} className={b('tab')}>
+                            {node}
+                        </Link>
+                    )}
+                    allowNotSelected={true}
+                />
+            </div>
+        );
+    }
+    renderTabContent() {
+        const {activeTab} = this.state;
+        const {id} = this.props.match.params;
+
+        switch (activeTab) {
+            case STORAGE: {
+                return (
+                    <div className={b('storage')}>
+                        <Storage nodeId={id} />
+                    </div>
+                );
+            }
+            case TABLETS: {
+                return <Tablets nodeId={id} />;
+            }
+            default:
+                return false;
+        }
+    }
+
+    render() {
+        const {className, loading, wasLoaded, error, node, additionalNodesInfo} = this.props;
+
+        if (loading && !wasLoaded) {
+            return Node.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else {
+            if (node) {
+                return (
+                    <div className={`${b()} ${className}`}>
+                        <FullNodeViewer
+                            node={node}
+                            backend={backend}
+                            additionalNodesInfo={additionalNodesInfo}
+                        />
+                        {this.renderTabs()}
+
+                        <div className={b('content')}>{this.renderTabContent()}</div>
+                    </div>
+                );
+            }
+            return <div className="error">no node data</div>;
+        }
+    }
+}
+
+const mapStateToProps = (state, ownProps) => {
+    const {wasLoaded, loading} = state.node;
+    const {activeTab} = ownProps.match.params;
+    let {data: node} = state.node;
+
+    if (node) {
+        node = node.SystemStateInfo ? node.SystemStateInfo[0] : undefined;
+    }
+
+    return {
+        node,
+        activeTab,
+        wasLoaded,
+        loading,
+    };
+};
+
+const mapDispatchToProps = {
+    getNodeInfo,
+};
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Node));

package/dist/containers/Node/Node.scss

@@ -0,0 +1,34 @@
+@import '../../styles/mixins';
+
+.node {
+    @include flex-container();
+    overflow: auto;
+
+    &__content {
+        @include flex-container();
+        overflow: auto;
+    }
+
+    &__storage {
+        padding-left: 20px;
+        overflow: auto;
+        height: 100%;
+    }
+
+    &__tabs {
+        padding: 0 15px;
+    }
+
+    &__tab {
+        text-decoration: none;
+        margin-right: 40px;
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        &:first-letter {
+            text-transform: uppercase;
+        }
+    }
+}

package/dist/containers/Node/NodePages.js

@@ -0,0 +1,13 @@
+export const STORAGE = 'storage';
+export const TABLETS = 'tablets';
+
+export const NODE_PAGES = [
+    {
+        id: STORAGE,
+        name: 'Storage',
+    },
+    {
+        id: TABLETS,
+        name: 'Tablets',
+    },
+];