ydb-embedded-ui 0.1.0

package/dist/components/PoolBar/PoolBar.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+
+import './PoolBar.scss';
+
+const b = cn('pool-bar');
+
+const getBarType = (usage) => {
+    if (usage >= 75) {
+        return 'danger';
+    } else if (usage >= 50 && usage < 75) {
+        return 'warning';
+    } else {
+        return 'normal';
+    }
+};
+
+class PoolBar extends React.Component {
+    static propTypes = {
+        data: PropTypes.object,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+    };
+
+    bar = React.createRef();
+
+    _onBarHover = () => {
+        this.props.onMouseEnter(this.bar.current, this.props.data, 'pool');
+    };
+    _onBarLeave = () => {
+        this.props.onMouseLeave();
+    };
+    render() {
+        const {Usage: usage = 0} = this.props.data;
+        const usagePercents = Math.min(usage * 100, 100);
+        const type = getBarType(usagePercents);
+
+        return (
+            <div
+                ref={this.bar}
+                className={b({type})}
+                onMouseEnter={this._onBarHover}
+                onMouseLeave={this._onBarLeave}
+            >
+                <div style={{height: `${usagePercents}%`}} className={b('value', {type})} />
+            </div>
+        );
+    }
+}
+
+export default PoolBar;

package/dist/components/PoolBar/PoolBar.scss

@@ -0,0 +1,40 @@
+.pool-bar {
+    position: relative;
+    width: 7px;
+    height: 20px;
+    margin-right: 3px;
+    border-radius: 2px;
+    border: 1px solid;
+    cursor: pointer;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &_type_normal {
+        border-color: var(--yc-color-base-positive-heavy);
+    }
+    &_type_warning {
+        border-color: var(--yc-color-text-warning-heavy);
+    }
+    &_type_danger {
+        border-color: var(--yc-color-base-danger-heavy);
+    }
+
+    &__value {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        min-height: 1px;
+
+        &_type_normal {
+            background-color: var(--yc-color-base-positive-heavy);
+        }
+        &_type_warning {
+            background-color: var(--yc-color-text-warning-heavy);
+        }
+        &_type_danger {
+            background-color: var(--yc-color-base-danger-heavy);
+        }
+    }
+}

package/dist/components/PoolUsage/PoolUsage.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import './PoolUsage.scss';
+import PropTypes from 'prop-types';
+const b = cn('pool-usage');
+
+const formatUsage = (usage) => (typeof usage === 'undefined' ? '' : Math.floor(usage * 100));
+const getLineType = (fillWidth) => {
+    let fillColor = 'green';
+    if (fillWidth > 60 && fillWidth <= 80) {
+        fillColor = 'yellow';
+    } else if (fillWidth > 80) {
+        fillColor = 'red';
+    }
+
+    return fillColor;
+};
+export class PoolUsage extends React.Component {
+    static propTypes = {
+        data: PropTypes.object.isRequired,
+    };
+
+    render() {
+        const {data: pool = {}} = this.props;
+
+        const {Threads, Name = 'Unknown', Usage} = pool;
+        const dataExist = Usage && Threads;
+
+        const value = formatUsage(pool.Usage);
+        const fillWidth = value > 100 ? 100 : value;
+
+        return (
+            <div className={b()}>
+                <div className={b('info')}>
+                    <div className={b('pool-name')}>{Name}</div>
+                    {dataExist && (
+                        <div className={b('value')}>
+                            <div className={b('percents')}>{value < 1 ? '<1' : value}%</div>
+                            <div className={b('threads')}>(×{Threads})</div>
+                        </div>
+                    )}
+                </div>
+                <div className={b('visual')}>
+                    <div
+                        className={b('usage-line', {type: getLineType(fillWidth)})}
+                        style={{width: `${fillWidth}%`}}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default PoolUsage;

package/dist/components/PoolUsage/PoolUsage.scss

@@ -0,0 +1,65 @@
+.pool-usage {
+    font-size: var(--yc-text-body2-font-size);
+    line-height: var(--yc-text-body2-line-height);
+    &__info {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &__pool-name {
+        color: var(--yc-color-text-primary);
+    }
+
+    &__value {
+        display: flex;
+        align-items: center;
+    }
+
+    &__threads {
+        font-size: var(--yc-text-body-font-size);
+        color: var(--yc-color-text-hint);
+
+        .yc-root_theme_dark & {
+            color: var(--yc-color-text-hint);
+        }
+    }
+
+    &__percents {
+        color: var(--yc-color-text-primary);
+        font-size: var(--yc-text-body-font-size);
+        margin-right: 2px;
+    }
+
+    &__visual {
+        height: 6px;
+        font-size: var(--yc-text-body2-font-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        position: relative;
+        overflow: hidden;
+        background-color: var(--yc-color-base-generic-accent);
+    }
+
+    &__usage-line {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+
+        &_type_green {
+            background-color: var(--yc-color-base-positive-heavy);
+        }
+        &_type_blue {
+            background-color: var(--yc-color-base-info-heavy);
+        }
+        &_type_yellow {
+            background-color: var(--yc-color-text-warning-heavy);
+        }
+        &_type_red {
+            background-color: var(--yc-color-base-danger-heavy);
+        }
+    }
+}

package/dist/components/PoolsGraph/PoolsGraph.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+
+import PoolBar from '../PoolBar/PoolBar';
+
+import './PoolsGraph.scss';
+
+const b = cn('pools-graph');
+
+class PoolsGraph extends React.Component {
+    static propTypes = {
+        pools: PropTypes.arrayOf(PropTypes.object).isRequired,
+        onMouseLeave: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+    };
+    static defaultProps = {
+        pools: [],
+    };
+    render() {
+        const {pools} = this.props;
+
+        return (
+            <div className={b()}>
+                {pools.map((item, index) => (
+                    <PoolBar key={index} data={item} {...this.props} />
+                ))}
+            </div>
+        );
+    }
+}
+
+export default PoolsGraph;

package/dist/components/PoolsGraph/PoolsGraph.scss

@@ -0,0 +1,3 @@
+.pools-graph {
+    display: flex;
+}

package/dist/components/ProblemFilter/ProblemFilter.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+
+import {RadioButton} from '@yandex-cloud/uikit';
+
+import {ALL, PROBLEMS} from '../../utils/constants';
+
+export default function ProblemFilter(props) {
+    const {value, onChange, className} = props;
+
+    return (
+        <RadioButton value={value} onUpdate={(value) => onChange(value)} className={className}>
+            <RadioButton.Option value={ALL}>{ALL}</RadioButton.Option>
+            <RadioButton.Option value={PROBLEMS}>{PROBLEMS}</RadioButton.Option>
+        </RadioButton>
+    );
+}
+
+export const problemFilterType = PropTypes.oneOf([ALL, PROBLEMS]);
+
+ProblemFilter.propTypes = {
+    value: problemFilterType,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};

package/dist/components/ProgressViewer/ProgressViewer.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import './ProgressViewer.scss';
+import PropTypes from 'prop-types';
+const b = cn('progress-viewer');
+/*
+
+Описание props:
+1) value - величина прогресса
+2) capacity - предельно возможный прогресс
+3) formatValues - функция форматирования value и capacity
+4) percents - отображать ли заполненость в виде процентов
+5) className - кастомный класс
+6) colorizeProgress - менять ли цвет полосы прогресса в зависимости от его величины
+7) inverseColorize - инвертировать ли цвета при разукрашивании прогресса
+*/
+export class ProgressViewer extends React.Component {
+    static propTypes = {
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        capacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        formatValues: PropTypes.func,
+        percents: PropTypes.bool,
+        className: PropTypes.string,
+        size: PropTypes.oneOf(['xs', 's', 'ns', 'm', 'n', 'l', 'head']),
+        colorizeProgress: PropTypes.bool,
+        inverseColorize: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        size: 'ns',
+        colorizeProgress: false,
+        capacity: 100,
+        inverseColorize: false,
+    };
+
+    render() {
+        const {
+            value,
+            capacity,
+            formatValues,
+            percents,
+            size,
+            className,
+            colorizeProgress,
+            inverseColorize,
+        } = this.props;
+
+        let fillWidth = Math.round((parseFloat(value) / parseFloat(capacity)) * 100);
+        fillWidth = fillWidth > 100 ? 100 : fillWidth;
+
+        let valueText = Math.round(value),
+            capacityText = capacity,
+            divider = '/';
+        if (formatValues) {
+            [valueText, capacityText] = formatValues(value, capacity);
+        } else if (percents) {
+            valueText = fillWidth + '%';
+            capacityText = '';
+            divider = '';
+        }
+
+        let bg = inverseColorize ? 'scarlet' : 'apple';
+        if (colorizeProgress) {
+            if (fillWidth > 60 && fillWidth <= 80) {
+                bg = 'saffron';
+            } else if (fillWidth > 80) {
+                bg = inverseColorize ? 'apple' : 'scarlet';
+            }
+        }
+
+        const lineStyle = {
+            width: fillWidth + '%',
+        };
+
+        const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
+
+        if (!isNaN(fillWidth)) {
+            return (
+                <div className={b({size})}>
+                    <div className={b('line', {bg})} style={lineStyle}></div>
+                    <span className={b('text', {text})}>
+                        {`${valueText} ${divider} ${capacityText}`}
+                    </span>
+                </div>
+            );
+        }
+
+        return <div className={`${b({size})} ${className} error`}>no data</div>;
+    }
+}
+
+export default ProgressViewer;

package/dist/components/ProgressViewer/ProgressViewer.scss

@@ -0,0 +1,84 @@
+.progress-viewer {
+    min-width: 120px;
+    padding: 0 4px;
+    height: 23px;
+    font-size: var(--yc-text-body2-font-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--yc-color-text-light-primary);
+    background: var(--yc-color-base-generic-accent);
+    position: relative;
+    overflow: hidden;
+    border-radius: 4px;
+    white-space: nowrap;
+
+    &__line {
+        position: absolute;
+        height: 100%;
+        left: 0;
+        top: 0;
+
+        &_bg_scarlet {
+            background: var(--yc-color-base-danger-heavy);
+        }
+        &_bg_apple {
+            background: var(--yc-color-base-positive-heavy);
+        }
+        &_bg_saffron {
+            background: var(--yc-color-base-warning-heavy);
+        }
+    }
+
+    &__text {
+        position: relative;
+        z-index: 1;
+        &_text_contrast0 {
+            color: var(--yc-color-text-light-primary);
+        }
+        &_text_contrast70 {
+            color: var(--yc-color-text-complementary);
+        }
+    }
+
+    &_size_xs {
+        height: 18px;
+        font-size: 10px;
+        line-height: var(--yc-text-lead-line-height);
+    }
+
+    &_size_s {
+        height: 28px;
+        font-size: var(--yc-text-body-font-size);
+        line-height: 28px;
+    }
+    &_size_m {
+        height: 32px;
+        font-size: var(--yc-text-body2-font-size);
+        line-height: 32px;
+    }
+
+    &_size_ns {
+        height: 24px;
+        font-size: 13px;
+        line-height: var(--yc-text-lead-line-height);
+    }
+
+    &_size_n {
+        height: 36px;
+        font-size: var(--yc-text-body-font-size);
+        line-height: 36px;
+    }
+
+    &_size_l {
+        height: 38px;
+        font-size: var(--yc-text-lead-font-size);
+        line-height: var(--yc-text-lead-line-height);
+        line-height: 38px;
+    }
+
+    &_size_head {
+        font-size: var(--yc-text-body-font-size);
+        line-height: 36px;
+    }
+}