ydb-embedded-ui 0.1.0

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -0,0 +1,108 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {Popup, useVirtualElementRef} from '@yandex-cloud/uikit';
+
+import {hideTooltip} from '../../store/reducers/tooltip';
+
+import './ReduxTooltip.scss';
+
+const propTypes = {
+    className: PropTypes.string,
+    toolTipVisible: PropTypes.bool,
+    currentHoveredRef: PropTypes.object,
+    data: PropTypes.object,
+    template: PropTypes.func,
+    hideTooltip: PropTypes.func,
+};
+
+function ReduxTooltip(props) {
+    const fakeAnchor = useVirtualElementRef({
+        rect: {top: props.positions?.top, left: props.positions?.left},
+    });
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll, true);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+    const handleScroll = () => {
+        const {hideTooltip, toolTipVisible} = props;
+        if (toolTipVisible) {
+            setTimeout(() => hideTooltip(), 500);
+        }
+    };
+
+    const renderPositionPopup = (visible, positions, data, additionalData) => {
+        const {template, popupClassName, hideTooltip} = props;
+
+        return (
+            <React.Fragment>
+                <Popup
+                    open={visible}
+                    placement={['top', 'bottom', 'left', 'right']}
+                    className={popupClassName}
+                    anchorRef={fakeAnchor}
+                    onOutsideClick={hideTooltip}
+                >
+                    {data && template(data, additionalData)}
+                </Popup>
+            </React.Fragment>
+        );
+    };
+    const renderAnchorPopup = (visible, anchor, data, additionalData) => {
+        const {template, popupClassName, hideTooltip} = props;
+        return (
+            <Popup
+                open={visible}
+                anchorRef={{current: anchor}}
+                hasArrow
+                placement={['top', 'bottom', 'left', 'right']}
+                className={popupClassName}
+                onOutsideClick={hideTooltip}
+            >
+                {data && template(data, additionalData)}
+            </Popup>
+        );
+    };
+
+    const {
+        className = '',
+        toolTipVisible,
+        currentHoveredRef,
+        data,
+        additionalData,
+        positions,
+    } = props;
+
+    return (
+        <div className={`redux-tooltip ${className}`}>
+            {positions
+                ? renderPositionPopup(toolTipVisible, positions, data, additionalData)
+                : renderAnchorPopup(toolTipVisible, currentHoveredRef, data, additionalData)}
+        </div>
+    );
+}
+
+const mapStateToProps = (state) => {
+    const {toolTipVisible, currentHoveredRef, data, template, additionalData, positions} =
+        state.tooltip;
+
+    const {popupClassName} = additionalData || {};
+
+    return {
+        toolTipVisible,
+        currentHoveredRef,
+        data,
+        template,
+        additionalData,
+        positions,
+        popupClassName,
+    };
+};
+
+export default connect(mapStateToProps, {hideTooltip})(ReduxTooltip);
+
+ReduxTooltip.propTypes = propTypes;

package/dist/containers/ReduxTooltip/ReduxTooltip.scss

@@ -0,0 +1,67 @@
+@import '../../styles/mixins.scss';
+
+.popup2 {
+    animation: none !important;
+    max-width: 300px;
+}
+
+.pool-tooltip,
+.tablet-tooltip,
+.node-tootltip,
+.tabletsOverall-tooltip,
+.histogram-tooltip {
+    padding: 10px;
+
+    &__label {
+        padding-right: 15px;
+        color: var(--yc-color-text-secondary);
+    }
+}
+
+.json-tooltip {
+    padding: 20px 20px 20px 0;
+
+    &__inspector {
+        @include json-tree-styles();
+
+        :not(.json-inspector__leaf_expanded).json-inspector__leaf_composite:before {
+            content: '';
+        }
+        .json-inspector__leaf_expanded.json-inspector__leaf_composite:before {
+            content: '';
+        }
+
+        & .json-inspector {
+            &__line:hover:after {
+                background: transparent;
+            }
+            &__show-original:hover:after,
+            &__show-original:hover:before {
+                color: transparent;
+            }
+
+            &__value_helper {
+                display: none;
+            }
+        }
+    }
+}
+
+.cell-tooltip {
+    padding: 10px;
+    word-break: break-word;
+}
+
+.tablet-tooltip {
+    padding: 10px;
+    &__label {
+        padding-right: 15px;
+        color: var(--yc-color-text-secondary);
+    }
+
+    &__value {
+        &_blue {
+            color: var(--yc-color-base-special);
+        }
+    }
+}

package/dist/containers/StorageV2/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -0,0 +1,81 @@
+.storage-disk-progress-bar {
+    $block: &;
+    position: relative;
+
+    display: inline-block;
+
+    width: 100%;
+    height: var(--yc-text-body2-line-height);
+
+    border: 1px solid var(--yc-color-infographics-misc-heavy);
+    border-radius: 5px;
+    background-color: var(--yc-color-infographics-misc-medium);
+
+    #{$block}__filled {
+        filter: brightness(0.3) saturate(3);
+    }
+
+    &_green {
+        border-color: var(--yc-color-text-positive);
+        background-color: var(--yc-color-text-positive);
+        filter: opacity(0.8);
+    }
+
+    &_blue {
+        border-color: var(--yc-color-infographics-info-heavy);
+        background-color: var(--yc-color-infographics-info-medium);
+        #{$block}__filled {
+            filter: brightness(0.2) saturate(3);
+        }
+    }
+
+    &_yellow {
+        border-color: var(--yc-color-base-warning-heavy-hover);
+        background-color: var(--yc-color-base-warning-heavy);
+        filter: opacity(0.8);
+    }
+
+    &_orange {
+        border-color: var(--yc-color-infographics-danger-medium);
+        background-color: var(--yc-color-infographics-warning-medium);
+        filter: opacity(0.8);
+        #{$block}__filled {
+            filter: brightness(0.7) saturate(3);
+        }
+    }
+    &_red {
+        border-color: var(--yc-color-base-danger-heavy-hover);
+        background-color: var(--yc-color-base-danger-heavy);
+        filter: opacity(0.8);
+        #{$block}__filled {
+            filter: brightness(0.3) saturate(4);
+        }
+    }
+
+    &__filled {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        height: 100%;
+
+        border-radius: 5px 0 0 5px;
+        background-color: inherit;
+        filter: brightness(0.6) saturate(2);
+    }
+    &__filled-title {
+        position: absolute;
+        top: 0;
+        left: 5px;
+
+        color: inherit;
+
+        font-size: var(--yc-text-body-font-size);
+        line-height: inherit;
+        &_light {
+            z-index: 100;
+
+            color: var(--yc-color-text-light-primary);
+        }
+    }
+}

package/dist/containers/StorageV2/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -0,0 +1,56 @@
+import React, {useContext} from 'react';
+import HistoryContext from '../../../contexts/HistoryContext';
+import cn from 'bem-cn-lite';
+
+import './DiskStateProgressBar.scss';
+
+const b = cn('storage-disk-progress-bar');
+
+export const diskProgressColors = {
+    0: 'Grey',
+    1: 'Green',
+    2: 'Blue',
+    3: 'Yellow',
+    4: 'Orange',
+    5: 'Red',
+};
+
+interface DiskStateProgressBarProps {
+    diskAllocatedPercent?: number;
+    severity?: keyof typeof diskProgressColors;
+    href?: string;
+}
+
+function DiskStateProgressBar({
+    diskAllocatedPercent = -1,
+    severity,
+    href,
+}: DiskStateProgressBarProps) {
+    const history = useContext(HistoryContext);
+    const onDiskClick = () => {
+        if (href) {
+            history.push(href);
+        }
+    };
+    return (
+        <div
+            className={
+                severity !== undefined
+                    ? b({[diskProgressColors[severity].toLowerCase()]: true})
+                    : undefined
+            }
+            onClick={onDiskClick}
+        >
+            {diskAllocatedPercent >= 0 && (
+                <React.Fragment>
+                    <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
+                    <div className={b('filled-title', {light: diskAllocatedPercent > 7})}>
+                        {`${Math.round(diskAllocatedPercent)}%`}
+                    </div>
+                </React.Fragment>
+            )}
+        </div>
+    );
+}
+
+export default DiskStateProgressBar;

package/dist/containers/StorageV2/Pdisk/Pdisk.scss

@@ -0,0 +1,32 @@
+.pdisk-storage {
+    flex-grow: 1;
+
+    margin-right: 10px;
+
+    cursor: pointer;
+
+    &:last-child {
+        margin-right: 0px;
+    }
+    &__popup-wrapper {
+        padding: 5px 10px;
+    }
+    &__popup-content {
+        display: grid;
+        column-gap: 5px;
+        justify-items: stretch;
+    }
+    &__popup-section-name {
+        margin: 5px 0;
+
+        text-align: center;
+
+        border-bottom: 1px solid var(--yc-color-line-generic);
+
+        font-weight: 500;
+        grid-column: 1 / 3;
+    }
+    &__property {
+        text-align: right;
+    }
+}

package/dist/containers/StorageV2/Pdisk/Pdisk.tsx

@@ -0,0 +1,167 @@
+import React, {useEffect, useState, useRef, useMemo} from 'react';
+import cn from 'bem-cn-lite';
+import _ from 'lodash';
+import {Popup} from '@yandex-cloud/uikit';
+//@ts-ignore
+import {bytesToGB} from '../../../utils/utils';
+//@ts-ignore
+import routes, {createHref} from '../../../routes';
+//@ts-ignore
+import {getPDiskId} from '../../../utils';
+import DiskStateProgressBar, {
+    diskProgressColors,
+} from '../DiskStateProgressBar/DiskStateProgressBar';
+
+import './Pdisk.scss';
+
+const b = cn('pdisk-storage');
+
+const stateSeverity = {
+    Initial: 0,
+    Normal: 1,
+    InitialFormatRead: 3,
+    InitialSysLogRead: 3,
+    InitialCommonLogRead: 3,
+    InitialFormatReadError: 5,
+    InitialSysLogReadError: 5,
+    InitialSysLogParseError: 5,
+    InitialCommonLogReadError: 5,
+    InitialCommonLogParseError: 5,
+    CommonLoggerInitError: 5,
+    OpenFileError: 5,
+    ChunkQuotaError: 5,
+    DeviceIoError: 5,
+};
+
+const colorSeverity = {
+    Grey: 0,
+    Green: 1,
+    Blue: 2,
+    Yellow: 3,
+    Orange: 4,
+    Red: 5,
+};
+type PDiskState = keyof typeof stateSeverity;
+
+interface PDiskProps {
+    NodeId: number;
+    Host?: string;
+    Path?: string;
+    Realtime?: string;
+    Device?: string;
+    AvailableSize?: string;
+    TotalSize?: string;
+    State?: PDiskState;
+    PDiskId: number;
+}
+
+const getStateSeverity = (pDiskState?: PDiskState) => {
+    return pDiskState ? stateSeverity[pDiskState] : colorSeverity.Grey;
+};
+
+function Pdisk(props: PDiskProps) {
+    const [severity, setSeverity] = useState(getStateSeverity(props.State));
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+
+    const anchor = useRef(null);
+
+    useEffect(() => {
+        const newSeverity = getStateSeverity(props.State);
+        if (severity !== newSeverity) {
+            setSeverity(newSeverity);
+        }
+    }, [props.State]);
+
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+    /* eslint-disable */
+    const preparePdiskData = () => {
+        const {AvailableSize, TotalSize, State, PDiskId, NodeId, Host, Path, Realtime, Device} =
+            props;
+        const errorColors = [
+            diskProgressColors[colorSeverity.Orange as keyof typeof diskProgressColors],
+            diskProgressColors[colorSeverity.Red as keyof typeof diskProgressColors],
+            diskProgressColors[colorSeverity.Yellow as keyof typeof diskProgressColors],
+        ];
+
+        const pdiskData: {property: string; value: string | number}[] = [
+            {property: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
+        ];
+
+        pdiskData.push({property: 'State', value: State || 'not available'});
+        NodeId && pdiskData.push({property: 'Node Id', value: NodeId});
+
+        Host && pdiskData.push({property: 'Host', value: Host});
+        Path && pdiskData.push({property: 'Path', value: Path});
+        pdiskData.push({
+            property: 'Available',
+            value: `${bytesToGB(AvailableSize)} of ${bytesToGB(TotalSize)}`,
+        });
+        Realtime &&
+            errorColors.includes(Realtime) &&
+            pdiskData.push({property: 'Realtime', value: Realtime});
+        Device &&
+            errorColors.includes(Device) &&
+            pdiskData.push({property: 'Device', value: Device});
+        return pdiskData;
+    };
+    /* eslint-enable */
+
+    const renderPopup = () => {
+        const pdiskData = preparePdiskData();
+        return (
+            <Popup
+                className={b('popup-wrapper')}
+                anchorRef={anchor}
+                open={isPopupVisible}
+                placement={['top']}
+                hasArrow
+            >
+                <div className={b('popup-content')}>
+                    <div className={b('popup-section-name')}>PDisk</div>
+                    {_.map(pdiskData, (row) => (
+                        <React.Fragment key={row.property}>
+                            <div className={b('property')}>{row.property}</div>
+                            <div className={b('value')}>{row.value}</div>
+                        </React.Fragment>
+                    ))}
+                </div>
+            </Popup>
+        );
+    };
+
+    const pdiskAllocatedPercent = useMemo(() => {
+        const {AvailableSize, TotalSize} = props;
+
+        if (!AvailableSize || !TotalSize) {
+            return;
+        }
+        return !isNaN(Number(AvailableSize)) && !isNaN(Number(TotalSize))
+            ? Math.round(((Number(TotalSize) - Number(AvailableSize)) * 100) / Number(TotalSize))
+            : undefined;
+    }, [props.AvailableSize, props.TotalSize]);
+
+    return (
+        <React.Fragment>
+            {renderPopup()}
+            <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
+                <DiskStateProgressBar
+                    diskAllocatedPercent={pdiskAllocatedPercent}
+                    severity={severity as keyof typeof diskProgressColors}
+                    // href={createHref(routes.pdisk, {id: props.PDiskId}, {node_id: props.NodeId})}
+                    href={createHref(routes.vdisk, null, {
+                        pdiskId: props.PDiskId,
+                        nodeId: props.NodeId,
+                    })}
+                />
+            </div>
+        </React.Fragment>
+    );
+}
+
+export default Pdisk;