ydb-embedded-ui 0.1.0

package/dist/components/Hotkey/Hotkey.js

@@ -0,0 +1,102 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+import key from 'keymaster';
+
+const propTypes = {
+    settings: PropTypes.arrayOf(
+        PropTypes.shape({
+            keys: PropTypes.string.isRequired,
+            handler: PropTypes.func.isRequired,
+            scope: PropTypes.string,
+            preventDefault: PropTypes.bool,
+        }),
+    ).isRequired,
+};
+
+function eventOnInput(evt) {
+    const tagName = (evt.target || evt.srcElement).tagName;
+
+    return /^(INPUT|TEXTAREA|SELECT)$/.test(tagName);
+}
+
+export default class Hotkey extends Component {
+    componentDidMount() {
+        const {settings} = this.props;
+
+        if (!key) {
+            return;
+        }
+
+        this.preparedSettings = this.prepareSettings(settings);
+
+        // To use hotkeys inside inputs we need to specify scope, other events are filtered.
+        key.filter = function (evt) {
+            const currentScope = key.getScope();
+
+            return !(eventOnInput(evt) && currentScope === 'all');
+        };
+
+        this.preparedSettings.forEach((setting) => {
+            this.bindKey(setting.combo, setting.scope, setting.handler, setting.preventDefault);
+        });
+    }
+
+    componentWillUnmount() {
+        if (!key) {
+            return;
+        }
+
+        this.preparedSettings.forEach((setting) => {
+            this.unbindKey(setting.combo, setting.scope);
+        });
+    }
+
+    prepareSettings(settings) {
+        const preparedSettings = [];
+
+        settings.forEach((item) => {
+            const keyCombinations = item.keys.split(/\s*,\s*/);
+            const scopes = item.scope.split(/\s*,\s*/);
+            const preventDefault =
+                typeof item.preventDefault !== 'undefined' ? item.preventDefault : true;
+
+            keyCombinations.forEach((combo) => {
+                scopes.forEach((scope) => {
+                    if (typeof item.handler === 'function') {
+                        preparedSettings.push({
+                            combo: combo,
+                            scope: scope,
+                            handler: item.handler,
+                            preventDefault: preventDefault,
+                        });
+                    }
+                });
+            });
+        });
+
+        return preparedSettings;
+    }
+
+    bindKey(combination, scope, handler, preventDefault) {
+        key(combination, scope, (evt, shortcut) => {
+            if (key.getScope() === shortcut.scope) {
+                handler(evt, shortcut);
+
+                if (preventDefault) {
+                    evt.preventDefault();
+                }
+            }
+        });
+    }
+
+    unbindKey(combination, scope) {
+        key.unbind(combination, scope);
+    }
+
+    render() {
+        return null;
+    }
+}
+
+Hotkey.propTypes = propTypes;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import {Icon as UiKitIcon} from '@yandex-cloud/uikit';
+
+export default function Icon({name, height, width, viewBox, className, onClick}) {
+    return (
+        <UiKitIcon
+            data={{id: `icon.${name}`, viewBox}}
+            height={height}
+            width={width}
+            className={className}
+            onClick={onClick}
+        />
+    );
+}
+
+Icon.propTypes = {
+    name: PropTypes.string.isRequired,
+    height: PropTypes.number,
+    width: PropTypes.number,
+    viewBox: PropTypes.string,
+};
+Icon.defaultProps = {
+    height: 16,
+    width: 16,
+    viewBox: '0 0 16 16',
+};

package/dist/components/InfoViewer/InfoViewer.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import './InfoViewer.scss';
+
+const b = cn('info-viewer');
+
+class InfoViewer extends React.Component {
+    render() {
+        const {info, className, title} = this.props;
+
+        return (
+            <div className={`${b()} ${className}`}>
+                {title && <div className={b('title')}>{title}</div>}
+                {info && info.length > 0 ? (
+                    <div className={b('items')}>
+                        {info.map((data, infoIndex) => (
+                            <div className={b('row')} key={infoIndex}>
+                                <div className={b('label')}>
+                                    {data.label}
+                                    <div className={b('dots')}></div>
+                                </div>
+
+                                <div className={b('value')}>{data.value}</div>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <div>no {title} data</div>
+                )}
+            </div>
+        );
+    }
+}
+
+InfoViewer.propTypes = {
+    className: PropTypes.string,
+    info: PropTypes.array.isRequired,
+    title: PropTypes.string,
+    dots: PropTypes.bool,
+};
+
+InfoViewer.defaultProps = {
+    className: '',
+};
+
+export default InfoViewer;

package/dist/components/InfoViewer/InfoViewer.scss

@@ -0,0 +1,48 @@
+.info-viewer {
+    font-size: var(--yc-text-body2-font-size);
+    line-height: var(--yc-text-body2-line-height);
+    &__title {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        font-weight: 500;
+        margin: 0 0 16px;
+    }
+
+    &__items {
+        display: grid;
+        grid-template-columns: max-content max-content;
+        grid-column-gap: 15px;
+        grid-row-gap: 7px;
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+        align-items: flex-end;
+        height: 24px;
+    }
+
+    &__label {
+        color: var(--yc-color-text-primary);
+        // font-size: var(--yc-text-body-font-size);
+        white-space: nowrap;
+        max-width: 200px;
+        min-width: 200px;
+        align-items: baseline;
+        display: flex;
+        flex: 1 1 auto;
+    }
+
+    &__dots {
+        min-width: 20px;
+        display: flex;
+        flex: 1 1 auto;
+        border-bottom: 1px dotted var(--yc-color-text-complementary);
+        margin: 0 2px;
+    }
+
+    &__value {
+        white-space: nowrap;
+        display: flex;
+    }
+}

package/dist/components/InternalLink/InternalLink.js

@@ -0,0 +1,15 @@
+import cn from 'bem-cn-lite';
+
+import {Link} from 'react-router-dom';
+
+const bLink = cn('yc-link');
+
+export default function InternalLink({to, children, onClick, className}) {
+    return to ? (
+        <Link className={bLink({view: 'normal'}, className)} to={to} onClick={onClick}>
+            {children}
+        </Link>
+    ) : (
+        children
+    );
+}

package/dist/components/NodesViewer/NodesViewer.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import {connect} from 'react-redux';
+
+import {TextInput, Label} from '@yandex-cloud/uikit';
+import DataTable from '@yandex-cloud/react-data-table';
+
+import ProblemFilter, {problemFilterType} from '../ProblemFilter/ProblemFilter';
+
+import {withSearch} from '../../HOCS';
+import {calcUptime} from '../../utils';
+import {ALL} from '../../utils/constants';
+import {changeFilter} from '../../store/reducers/settings';
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {getNodesColumns} from '../../utils/getNodesColumns';
+
+import './NodesViewer.scss';
+
+const b = cn('nodes-viewer');
+
+const tableSettings = {
+    displayIndices: false,
+    stickyHead: DataTable.MOVING,
+    syncHeadOnResize: true,
+    dynamicRender: true,
+};
+
+class NodesViewer extends React.PureComponent {
+    static propTypes = {
+        nodes: PropTypes.array.isRequired,
+        className: PropTypes.string,
+        searchQuery: PropTypes.string,
+        handleSearchQuery: PropTypes.func,
+        showTooltip: PropTypes.func,
+        hideTooltip: PropTypes.func,
+        filter: problemFilterType,
+        changeFilter: PropTypes.func,
+        showControls: PropTypes.bool,
+        additionalNodesInfo: PropTypes.object,
+    };
+
+    static defaultProps = {
+        className: '',
+        showSearch: true,
+        showControls: true,
+    };
+
+    state = {
+        filteredNodes: [],
+        nodesToShow: [],
+    };
+
+    static getDerivedStateFromProps(props, state) {
+        const {nodes, filter} = props;
+        if (!_.isEqual(nodes, state.nodes)) {
+            return {
+                nodes,
+                filteredNodes: NodesViewer.filterNodes(nodes, filter),
+            };
+        }
+        return null;
+    }
+
+    static filterNodes(nodes, filter) {
+        if (filter === ALL) {
+            return nodes;
+        }
+
+        return _.filter(nodes, (node) => {
+            return node.Overall && node.Overall !== 'Green';
+        });
+    }
+
+    static selectNodesToShow(nodes, searchQuery) {
+        let preparedNodes = nodes;
+        if (nodes && Array.isArray(nodes)) {
+            preparedNodes = nodes
+                .map((node) => {
+                    node.uptime = calcUptime(node.StartTime);
+                    return node;
+                })
+                /*  Filter by nodes with the Host field.
+                If a node does not have a Host field it is also
+                included in the filter and displayed with a dash in the corresponding column
+            */
+                .filter((node) => (node.Host ? node.Host.includes(searchQuery) : true));
+        }
+        return preparedNodes;
+    }
+
+    onChangeProblemFilter = (filter) => {
+        const {nodes, changeFilter} = this.props;
+        const filteredNodes = NodesViewer.filterNodes(nodes, filter);
+
+        changeFilter(filter);
+        this.setState({filteredNodes});
+    };
+
+    renderControls() {
+        const {searchQuery, handleSearchQuery, filter} = this.props;
+        const nodesToShow = NodesViewer.selectNodesToShow(this.state.filteredNodes, searchQuery);
+
+        return (
+            <div className={b('controls')}>
+                <TextInput
+                    className={b('search')}
+                    size="s"
+                    placeholder="Host name…"
+                    text={searchQuery}
+                    onUpdate={handleSearchQuery}
+                    hasClear
+                />
+                <ProblemFilter value={filter} onChange={this.onChangeProblemFilter} />
+                <Label theme="info" size="m">{`Nodes: ${nodesToShow.length}`}</Label>
+            </div>
+        );
+    }
+
+    render() {
+        const {
+            className,
+            searchQuery,
+            path,
+            filter,
+            showControls,
+            hideTooltip,
+            showTooltip,
+            additionalNodesInfo={},
+        } = this.props;
+        const {filteredNodes} = this.state;
+
+        const columns = getNodesColumns({
+            tabletsPath: path,
+            hideTooltip,
+            showTooltip,
+            getNodeRef: additionalNodesInfo.getNodeRef,
+        });
+
+        if (filteredNodes && Array.isArray(filteredNodes)) {
+            const nodesToShow = NodesViewer.selectNodesToShow(filteredNodes, searchQuery);
+
+            return (
+                <div className={`${b()} ${className}`}>
+                    {showControls ? this.renderControls() : null}
+                    <div className={b('table-wrapper')}>
+                        {nodesToShow.length === 0 ? (
+                            <div className="no-problem" />
+                        ) : (
+                            <div className={b('table-content')}>
+                                <DataTable
+                                    theme="internal"
+                                    key={filter}
+                                    data={nodesToShow}
+                                    columns={columns}
+                                    settings={tableSettings}
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+
+        return <div className="error">no nodes data</div>;
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+        filter: state.settings.problemFilter,
+    };
+};
+
+const mapDispatchToProps = {
+    changeFilter,
+    hideTooltip,
+    showTooltip,
+};
+
+const ConnectedNodesViewer = connect(mapStateToProps, mapDispatchToProps)(NodesViewer);
+export default withSearch(ConnectedNodesViewer);

package/dist/components/NodesViewer/NodesViewer.scss

@@ -0,0 +1,66 @@
+@import '../../styles/mixins.scss';
+
+.nodes-viewer {
+    @include flex-container();
+    overflow: auto;
+
+    &__controls {
+        margin: 25px 0 20px 20px;
+        display: flex;
+        align-items: center;
+
+        & > * {
+            margin-right: 25px;
+        }
+    }
+
+    &__name {
+        color: var(--yc-color-base-special);
+        cursor: pointer;
+        text-decoration: none;
+        display: inline-block;
+    }
+
+    &__search {
+        width: 255px;
+    }
+
+    &__progress {
+        margin: 0 auto;
+    }
+
+    &__tablets {
+        padding: 0 !important;
+        overflow-x: auto;
+
+        .tablets-viewer__grid {
+            justify-content: center;
+            grid-template-columns: 125px;
+        }
+    }
+
+    &__table-wrapper {
+        @include flex-container();
+        overflow: auto;
+    }
+
+    &__table-content {
+        overflow: auto;
+        height: 100%;
+        @include freeze-nth-column(1);
+        @include freeze-nth-column(2, 80px);
+        @include freeze-nth-column(3, 120px);
+
+        @include table-styles;
+        @include table-sticky-styles;
+    }
+    &__version-tooltip {
+        width: 100%;
+        span {
+            display: block;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}

package/dist/components/PDiskViewer/PDiskViewer.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+
+import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import EntityStatus from '../EntityStatus/EntityStatus';
+
+import {formatStorageValues} from '../../utils';
+import routes, {createHref} from '../../routes';
+
+import './PDiskViewer.scss';
+
+const b = cn('pdisk-viewer');
+
+class PDiskViewer extends React.Component {
+    static propTypes = {
+        disk: PropTypes.object.isRequired,
+        className: PropTypes.string,
+    };
+
+    static defaultProps = {
+        className: '',
+    };
+
+    render() {
+        const {disk, className} = this.props;
+
+        if (disk) {
+            return (
+                <div className={`${b()} ${className}`}>
+                    {disk && (
+                        <div className={b('item')}>
+                            <EntityStatus
+                                status={disk.Realtime}
+                                path={createHref(
+                                    routes.pdisk,
+                                    {id: disk.PDiskId},
+                                    {node_id: disk.NodeId},
+                                )}
+                                label="PDiskID"
+                                name={disk.PDiskId}
+                            />
+                        </div>
+                    )}
+
+                    {disk && (
+                        <div className={b('item')}>
+                            <EntityStatus
+                                status={'green'}
+                                label="NodeID"
+                                path={createHref(routes.node, {
+                                    id: disk.NodeId,
+                                    activeTab: 'storage',
+                                })}
+                                name={disk.NodeId}
+                            />
+                        </div>
+                    )}
+
+                    {disk && (
+                        <ProgressViewer
+                            value={disk.TotalSize - disk.AvailableSize || 0}
+                            capacity={disk.TotalSize || 0}
+                            formatValues={formatStorageValues}
+                            colorizeProgress={true}
+                            className={b('size')}
+                        />
+                    )}
+                    <div className={b('item')}>
+                        {disk && <div className={b('label')}>{disk.Path || 'no path'}</div>}
+                    </div>
+                </div>
+            );
+        } else {
+            return <div className="error">no PDisk data</div>;
+        }
+    }
+}
+
+export default PDiskViewer;

package/dist/components/PDiskViewer/PDiskViewer.scss

@@ -0,0 +1,40 @@
+.pdisk-viewer {
+    display: flex;
+    align-items: center;
+
+    &__item,
+    &__size {
+        margin-right: 24px;
+        color: var(--yc-color-text-complementary);
+        font-size: var(--yc-text-body2-font-size);
+        line-height: 0;
+    }
+
+    &__item .entity-status {
+        min-width: 100px;
+    }
+
+    &__item .entity-status a {
+        overflow: initial;
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+    }
+
+    &__size {
+        width: 120px;
+        color: var(--yc-color-text-complementary);
+        font-size: 10px;
+    }
+
+    &__label {
+        margin: 0 5px;
+        &_link {
+            color: var(--yc-color-base-special);
+            text-decoration: none;
+            display: inline-block;
+        }
+    }
+}

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {Button} from '@yandex-cloud/uikit';
+import Icon from '../Icon/Icon';
+import Hotkey from '../Hotkey/Hotkey';
+
+import './Pagination.scss';
+
+const b = cn('elements-pagination');
+
+const paginationControlComponent = PropTypes.shape({
+    handler: PropTypes.func,
+    disabled: PropTypes.bool,
+    hotkey: PropTypes.string,
+    hotkeyScope: PropTypes.string,
+    hotkeyHandler: PropTypes.func,
+    tooltip: PropTypes.string,
+}).isRequired;
+
+export default class Pagination extends React.Component {
+    static propTypes = {
+        previous: paginationControlComponent,
+        next: paginationControlComponent,
+    };
+
+    renderComponent(name, control) {
+        const hotkeySettings = [
+            {
+                keys: control.hotkey,
+                scope: control.hotkeyScope,
+                handler: control.hotkeyHandler,
+            },
+        ];
+
+        return (
+            <React.Fragment>
+                <Button
+                    view="outlined"
+                    onClick={control.handler}
+                    disabled={control.disabled}
+                    title={control.tooltip}
+                    className={b('control')}
+                >
+                    <Icon name={name} viewBox="0 0 6 11" width="6" height="11" />
+                </Button>
+                <Hotkey settings={hotkeySettings} />
+            </React.Fragment>
+        );
+    }
+
+    render() {
+        const {previous, next} = this.props;
+
+        return (
+            <div className={b()}>
+                {this.renderComponent('previous', previous)}
+                <div className={b('divider')} />
+                {this.renderComponent('next', next)}
+            </div>
+        );
+    }
+}

package/dist/components/Pagination/Pagination.scss

@@ -0,0 +1,25 @@
+.elements-pagination {
+    display: flex;
+    padding-left: 1px;
+
+    &__divider {
+        border-left: 1px solid var(--yc-color-line-generic);
+    }
+
+    &__control {
+        margin: 0 -1px;
+        display: flex;
+        align-items: center;
+    }
+
+    &__icon {
+        color: var(--yc-color-text-primary);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__control:hover {
+        z-index: 5;
+    }
+}