ydb-embedded-ui 0.1.0

package/dist/components/SplitPane/SplitPane.js

@@ -0,0 +1,368 @@
+import * as React from 'react';
+import cn from 'bem-cn-lite';
+
+import {useMeasure} from 'react-use';
+const block = cn('split');
+
+import './SplitPane.scss';
+
+const animationDuration = 200;
+
+function Pane({className, children, size, split, style, hide, innerRef}) {
+    const [animate, setAnimate] = React.useState(hide === true);
+    const [hideInner, setHide] = React.useState(hide === true);
+
+    const secondary = size === undefined;
+
+    React.useLayoutEffect(() => {
+        setAnimate(true);
+        setHide(hide === true);
+        const timerId = window.setTimeout(() => setAnimate(false), animationDuration);
+        return () => {
+            clearTimeout(timerId);
+        };
+    }, [hide]);
+
+    const PaneStyle = {
+        ...style,
+        ...(secondary
+            ? undefined
+            : {
+                  [split === 'vertical' ? 'width' : 'height']: hideInner ? 0 : size,
+                  opacity: hideInner ? 0 : 1,
+              }),
+        ...(animate
+            ? {
+                  overflow: 'hidden',
+                  transition: `${
+                      split === 'vertical' ? 'width' : 'height'
+                  } ${animationDuration}ms, opacity ${animationDuration}ms`,
+              }
+            : undefined),
+    };
+    return (
+        <div
+            ref={innerRef}
+            className={block(
+                'pane',
+                {secondary, hide: !secondary && hide},
+                classes(className, split),
+            )}
+            style={PaneStyle}
+        >
+            {children}
+        </div>
+    );
+}
+
+function Resizer({
+    className,
+    split,
+    style,
+    onClick,
+    onDoubleClick,
+    onMouseDown,
+    onTouchEnd,
+    onTouchStart,
+    allowResize,
+    active,
+}) {
+    return (
+        <span
+            role="presentation"
+            className={block(
+                'resizer',
+                classes(className, split, allowResize ? '' : 'disabled', active ? 'active' : ''),
+            )}
+            style={style}
+            onMouseDown={(event) => onMouseDown(event)}
+            onTouchStart={(event) => {
+                event.preventDefault();
+                onTouchStart(event);
+            }}
+            onTouchEnd={(event) => {
+                event.preventDefault();
+                onTouchEnd(event);
+            }}
+            onClick={(event) => {
+                if (onClick) {
+                    event.preventDefault();
+                    onClick(event);
+                }
+            }}
+            onDoubleClick={(event) => {
+                if (onDoubleClick) {
+                    event.preventDefault();
+                    onDoubleClick(event);
+                }
+            }}
+        />
+    );
+}
+
+export default function SplitPane({
+    className,
+    children,
+    split = 'vertical',
+    style,
+    size,
+    minSize = 50,
+    maxSize = -8,
+    defaultSize,
+    step,
+    primary = 'first',
+    allowResize = true,
+    hidePane,
+    onResizerClick,
+    onResizerDoubleClick,
+    onChange,
+    onDragStarted,
+    onDragFinished,
+    paneStyle,
+    pane1Style,
+    pane2Style,
+    paneClassName,
+    pane1ClassName,
+    pane2ClassName,
+    resizerClassName,
+    resizerStyle,
+}) {
+    const [containerRef, {width, height}] = useMeasure();
+    const pane1Ref = React.useRef(null);
+    const pane2Ref = React.useRef(null);
+    const [paneSize, setPaneSize] = React.useState(() =>
+        size === undefined
+            ? getDefaultSize(split, {width, height}, defaultSize, minSize, maxSize)
+            : size,
+    );
+    const [active, setActive] = React.useState(false);
+    const draggedSizeRef = React.useRef();
+    const defaultSizeRef = React.useRef();
+    const minSizeRef = React.useRef();
+    const maxSizeRef = React.useRef();
+    const positionRef = React.useRef(0);
+    const slackRef = React.useRef(0);
+
+    defaultSizeRef.current = defaultSize;
+    minSizeRef.current = minSize;
+    maxSizeRef.current = maxSize;
+
+    React.useLayoutEffect(() => {
+        if (!active) {
+            const newSize =
+                size === undefined
+                    ? getDefaultSize(
+                          split,
+                          {width, height},
+                          defaultSizeRef.current,
+                          minSizeRef.current,
+                          maxSizeRef.current,
+                          draggedSizeRef.current,
+                      )
+                    : size;
+
+            if (size !== undefined) {
+                draggedSizeRef.current = size;
+            }
+
+            setPaneSize(newSize);
+        }
+    }, [size, defaultSize, split, width, height, active]);
+
+    function onTouchStart(event) {
+        if (allowResize) {
+            unFocus(window);
+            positionRef.current =
+                split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY;
+            slackRef.current = 0;
+
+            if (typeof onDragStarted === 'function') {
+                onDragStarted();
+            }
+            setActive(true);
+        }
+    }
+
+    function onTouchMove(event) {
+        if (allowResize && active) {
+            unFocus(window);
+            const isPrimaryFirst = primary === 'first';
+            const node = isPrimaryFirst ? pane1Ref.current : pane2Ref.current;
+            const node2 = isPrimaryFirst ? pane2Ref.current : pane1Ref.current;
+            if (node && node2) {
+                if (node.getBoundingClientRect) {
+                    const newPosition =
+                        split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY;
+                    let positionDelta = positionRef.current - newPosition;
+                    if (step) {
+                        if (Math.abs(positionDelta) < step) {
+                            return;
+                        }
+                        positionDelta = Math.floor(positionDelta / step) * step;
+                    }
+                    let sizeDelta = isPrimaryFirst ? positionDelta : -positionDelta;
+
+                    const pane1Order = parseInt(window.getComputedStyle(node).order, 10);
+                    const pane2Order = parseInt(window.getComputedStyle(node2).order, 10);
+                    if (pane1Order > pane2Order) {
+                        sizeDelta = -sizeDelta;
+                    }
+
+                    const effectiveMaxSize = getEffectiveMaxSize(split, {width, height}, maxSize);
+
+                    const {width: currentWidth, height: currentHeight} =
+                        node.getBoundingClientRect();
+                    const currentSize = split === 'vertical' ? currentWidth : currentHeight;
+                    let newSize = slackRef.current + currentSize - sizeDelta;
+                    positionRef.current = positionRef.current - positionDelta;
+
+                    if (newSize < minSize) {
+                        slackRef.current = newSize - minSize;
+                        newSize = minSize;
+                    } else if (effectiveMaxSize !== undefined && newSize > effectiveMaxSize) {
+                        slackRef.current = newSize - effectiveMaxSize;
+                        newSize = effectiveMaxSize;
+                    } else {
+                        slackRef.current = 0;
+                    }
+
+                    if (onChange) onChange(newSize);
+
+                    draggedSizeRef.current = newSize;
+                    setPaneSize(newSize);
+                }
+            }
+        }
+    }
+    const onTouchMoveRef = React.useRef(onTouchMove);
+    onTouchMoveRef.current = onTouchMove;
+
+    function onMouseMove(event) {
+        const eventWithTouches = Object.assign({}, event, {
+            touches: [{clientX: event.clientX, clientY: event.clientY}],
+        });
+        //@ts-ignore
+        onTouchMove(eventWithTouches);
+    }
+    const onMouseMoveRef = React.useRef(onMouseMove);
+    onMouseMoveRef.current = onMouseMove;
+
+    function onTouchEnd() {
+        if (allowResize && active) {
+            if (typeof onDragFinished === 'function') {
+                if (typeof paneSize === 'number') {
+                    onDragFinished(paneSize);
+                }
+            }
+            setActive(false);
+        }
+    }
+    const onTouchEndRef = React.useRef(onTouchEnd);
+    onTouchEndRef.current = onTouchEnd;
+
+    function onMouseDown(event) {
+        const eventWithTouches = Object.assign({}, event, {
+            touches: [{clientX: event.clientX, clientY: event.clientY}],
+        });
+        //@ts-ignore
+        onTouchStart(eventWithTouches);
+    }
+
+    React.useEffect(() => {
+        function onTouchEndInner() {
+            // eslint-disable-next-line no-unused-expressions
+            onTouchEndRef.current?.();
+        }
+        function onMouseMoveInner(e) {
+            // eslint-disable-next-line no-unused-expressions
+            onMouseMoveRef.current?.(e);
+        }
+        function onTouchMoveInner(e) {
+            // eslint-disable-next-line no-unused-expressions
+            onTouchMoveRef.current?.(e);
+        }
+        document.addEventListener('mouseup', onTouchEndInner);
+        document.addEventListener('mousemove', onMouseMoveInner);
+        document.addEventListener('touchmove', onTouchMoveInner);
+        return () => {
+            document.removeEventListener('mouseup', onTouchEndInner);
+            document.removeEventListener('mousemove', onMouseMoveInner);
+            document.removeEventListener('touchmove', onTouchMoveInner);
+        };
+    }, []);
+    const notNullChildren = React.Children.toArray(children).filter(Boolean);
+
+    return (
+        <div
+            className={block(null, classes(className, split, allowResize ? '' : 'disabled'))}
+            ref={containerRef}
+            style={style}
+        >
+            <Pane
+                innerRef={pane1Ref}
+                className={classes(paneClassName, pane1ClassName)}
+                split={split}
+                style={{...paneStyle, ...pane1Style}}
+                size={primary === 'first' ? paneSize : undefined}
+                hide={hidePane}
+            >
+                {notNullChildren[0]}
+            </Pane>
+            <Resizer
+                className={resizerClassName}
+                style={resizerStyle}
+                onClick={onResizerClick}
+                onDoubleClick={onResizerDoubleClick}
+                onMouseDown={onMouseDown}
+                onTouchEnd={onTouchEnd}
+                onTouchStart={onTouchStart}
+                split={split}
+                allowResize={allowResize && !hidePane}
+                active={active}
+            />
+            <Pane
+                innerRef={pane2Ref}
+                className={classes(paneClassName, pane2ClassName)}
+                split={split}
+                style={{...paneStyle, ...pane2Style}}
+                size={primary === 'second' ? paneSize : undefined}
+                hide={hidePane}
+            >
+                {notNullChildren[1]}
+            </Pane>
+        </div>
+    );
+}
+
+function classes(...classList) {
+    return classList.filter(Boolean).join(' ');
+}
+
+function unFocus(window) {
+    // eslint-disable-next-line no-unused-expressions
+    window.getSelection()?.removeAllRanges();
+}
+
+function getDefaultSize(split, bound, defaultSize, minSize = 50, maxSize, draggedSize) {
+    const min = minSize;
+    const max = getEffectiveMaxSize(split, bound, maxSize);
+    if (typeof draggedSize === 'number') {
+        return Math.max(min, Math.min(max, draggedSize));
+    }
+    if (defaultSize !== undefined) {
+        if (typeof defaultSize === 'number') {
+            return Math.max(min, Math.min(max, defaultSize));
+        }
+        return defaultSize;
+    }
+    return min;
+}
+
+function getEffectiveMaxSize(split, bound, maxSize) {
+    const boundSize = split === 'vertical' ? bound.width : bound.height;
+    let effectiveMaxSize = boundSize;
+    if (typeof maxSize === 'number') {
+        effectiveMaxSize = maxSize >= 0 ? maxSize : boundSize + maxSize;
+    }
+    return Math.min(effectiveMaxSize, boundSize);
+}

package/dist/components/SplitPane/SplitPane.scss

@@ -0,0 +1,107 @@
+.split {
+    position: absolute;
+    z-index: 0;
+    display: flex;
+    height: 100%;
+    outline: none;
+    user-select: text;
+
+    &.vertical {
+        right: 0;
+        left: 0;
+        flex-direction: row;
+    }
+
+    &.horizontal {
+        top: 0;
+        bottom: 0;
+        flex-direction: column;
+        width: 100%;
+        min-height: 100%;
+    }
+
+    &__pane {
+        position: relative;
+        outline: none;
+
+        &_secondary {
+            flex: 1;
+
+            &.vertical {
+                min-width: 0;
+            }
+
+            &.horizontal {
+                min-height: 0;
+            }
+        }
+
+        &_hide {
+            overflow: hidden;
+        }
+    }
+
+    &__resizer {
+        position: relative;
+        z-index: 10;
+        background: var(--yc-color-base-background);
+
+        &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background-color: var(--yc-color-base-generic-ultralight);
+            content: '';
+        }
+
+        &.active::after,
+        &:hover::after {
+            background-color: var(--yc-color-line-generic-hover);
+            transition: background-color 1s ease;
+        }
+
+        &.disabled {
+            display: none;
+        }
+
+        &.horizontal {
+            width: 100%;
+            height: 8px;
+            cursor: row-resize;
+
+            &::before {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: 16px;
+                height: 4px;
+                border-color: var(--yc-color-base-generic-hover);
+                border-style: solid;
+                border-width: 1px 0;
+                transform: translate(-50%, -50%);
+                content: '';
+            }
+        }
+
+        &.vertical {
+            width: 8px;
+            height: 100%;
+            cursor: col-resize;
+
+            &::before {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: 4px;
+                height: 16px;
+                border-color: var(--yc-color-base-generic-hover);
+                border-style: solid;
+                border-width: 0 1px;
+                transform: translate(-50%, -50%);
+                content: '';
+            }
+        }
+    }
+}

package/dist/components/SplitPane/index.js

@@ -0,0 +1,3 @@
+import SplitPane from './SplitPane';
+
+export default SplitPane;

package/dist/components/Tablet/Tablet.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+
+import InternalLink from '../InternalLink/InternalLink';
+
+import {getTabletLabel} from '../../utils/constants';
+import routes, {createHref} from '../../routes';
+
+import './Tablet.scss';
+
+const b = cn('tablet');
+
+class Tablet extends React.PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        tablet: PropTypes.object,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+    };
+    static defaultProps = {
+        onMouseEnter: () => {},
+        onMouseLeave: () => {},
+    };
+    ref = React.createRef();
+    _onTabletMouseEnter = () => {
+        const {tablet} = this.props;
+        this.props.onMouseEnter(this.ref.current, tablet, 'tablet');
+    };
+    _onTabletClick = () => {
+        const {tablet = {}} = this.props;
+        const {TabletId: id} = tablet;
+
+        if (id) {
+            this.props.onMouseLeave();
+        }
+    };
+    render() {
+        const {tablet = {}} = this.props;
+        const {TabletId: id} = tablet;
+        const status = tablet.Overall?.toLowerCase();
+
+        return (
+            <InternalLink
+                onClick={this._onTabletClick}
+                to={id && createHref(routes.tablet, {id})}
+                className={b('wrapper')}
+            >
+                <div
+                    ref={this.ref}
+                    className={b({status})}
+                    onMouseEnter={this._onTabletMouseEnter}
+                    onMouseLeave={this.props.onMouseLeave}
+                >
+                    <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
+                </div>
+            </InternalLink>
+        );
+    }
+}
+export default Tablet;

package/dist/components/Tablet/Tablet.scss

@@ -0,0 +1,49 @@
+.tablet {
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--yc-color-text-complementary);
+    text-transform: uppercase;
+    font-size: 10px;
+    cursor: pointer;
+
+    border: 1px solid var(--yc-color-base-generic-medium-hover);
+
+    &__wrapper {
+        margin-right: 2px;
+        margin-bottom: 2px;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &__type {
+        line-height: 17px;
+        color: var(--yc-color-text-complementary);
+    }
+
+    &_status_gray {
+        background-color: var(--yc-color-text-complementary);
+    }
+    &_status_yellow {
+        background-color: var(--yc-color-base-warning-heavy);
+    }
+    &_status_orange {
+        background-color: var(--yc-color-text-warning-heavy);
+    }
+    &_status_red {
+        background-color: var(--yc-color-base-danger-heavy);
+    }
+    &_status_green {
+        background-color: var(--yc-color-base-positive-heavy);
+    }
+    &_state_blue {
+        background-color: var(--yc-color-base-info-heavy);
+    }
+    &_status_black {
+        background-color: var(--yc-color-text-secondary);
+    }
+}

package/dist/components/TabletsStatistic/TabletsStatistic.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import {Link} from 'react-router-dom';
+
+import {getTabletLabel} from '../../utils/constants';
+import routes, {createHref} from '../../routes';
+
+import './TabletsStatistic.scss';
+
+const b = cn('tablets-statistic');
+
+const prepareTablets = (tablets) => {
+    const res = tablets.map((tablet) => {
+        return {
+            label: getTabletLabel(tablet.Type),
+            type: tablet.Type,
+            count: tablet.Count,
+            state: tablet.State,
+        };
+    });
+
+    return res.sort((a, b) => a.label.localeCompare(b.label));
+};
+
+class TabletStatistic extends React.Component {
+    static propTypes = {
+        tablets: PropTypes.array,
+        path: PropTypes.string,
+        nodeIds: PropTypes.array,
+    };
+    renderTabletInfo = (item, index) => {
+        const {path, nodeIds} = this.props;
+
+        return (
+            <Link
+                to={createHref(routes.tabletsFilters, null, {
+                    nodeIds,
+                    state: item.state,
+                    type: item.type,
+                    path,
+                })}
+                key={index}
+                className={b('tablet', {state: item.state?.toLowerCase()})}
+            >
+                {item.label}: {item.count}
+            </Link>
+        );
+    };
+    render() {
+        const {tablets = []} = this.props;
+        const preparedTablets = prepareTablets(tablets);
+
+        return <div className={b()}>{preparedTablets.map(this.renderTabletInfo)}</div>;
+    }
+}
+
+export default TabletStatistic;

package/dist/components/TabletsStatistic/TabletsStatistic.scss

@@ -0,0 +1,41 @@
+.tablets-statistic {
+    display: flex;
+    align-items: center;
+
+    &__tablet {
+        // min-width: 20px;
+        padding: 2px 4px;
+        height: 20px;
+        display: inline-block;
+        border-radius: 4px;
+        text-align: center;
+        line-height: 14px;
+        color: var(--yc-color-text-complementary);
+        text-transform: uppercase;
+        font-size: 10px;
+        margin-right: 4px;
+        text-decoration: none;
+        border: 1px solid var(--yc-color-base-generic-medium-hover);
+
+        &_state_green {
+            background-color: var(--yc-color-base-positive-heavy);
+        }
+        &_state_yellow {
+            background-color: var(--yc-color-base-warning-heavy);
+        }
+        &_state_blue {
+            background-color: var(--yc-color-base-info-heavy);
+        }
+        &_state_orange {
+            background: var(--yc-color-text-warning-heavy);
+        }
+        &_state_red {
+            background: var(--yc-color-base-danger-heavy);
+            color: var(--yc-color-text-light-primary);
+        }
+        &_state_gray {
+            background: var(--yc-color-text-complementary);
+            color: var(--yc-color-text-light-primary);
+        }
+    }
+}