ydb-embedded-ui 0.1.0

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -0,0 +1,412 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
+import qs from 'qs';
+import _ from 'lodash';
+
+import {Loader, Progress} from '@yandex-cloud/uikit';
+import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import ReactList from 'react-list';
+
+import Tablet from '../../components/Tablet/Tablet';
+
+import {COLORS_PRIORITY, TABLET_COLOR_TO_STATES, TABLETS_STATES} from '../../utils/constants';
+import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
+import {
+    getTabletsInfo,
+    clearWasLoadingFlag,
+    setStateFilter,
+    setTypeFilter,
+    getFilteredTablets,
+    getTablets,
+} from '../../store/reducers/tabletsFilters';
+
+import './TabletsFilters.scss';
+
+// чтобы при очень маленьком проценте все равно были видны проблемные места, установим минимальный процент в 3
+const minOverallPercentValue = 3;
+
+const b = cn('tablets-filters');
+
+class TabletsFilters extends React.Component {
+    static propTypes = {
+        wasLoaded: PropTypes.bool,
+        loading: PropTypes.bool,
+        showTooltip: PropTypes.func,
+        hideTooltip: PropTypes.func,
+        getTabletsInfo: PropTypes.func,
+        timeoutForRequest: PropTypes.number,
+        path: PropTypes.string,
+        clearWasLoadingFlag: PropTypes.func,
+        nodes: PropTypes.array,
+        tablets: PropTypes.array,
+        filteredTablets: PropTypes.array,
+        setStateFilter: PropTypes.func,
+        setTypeFilter: PropTypes.func,
+        stateFilter: PropTypes.array,
+        typeFilter: PropTypes.array,
+        error: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
+    };
+
+    static renderLoader() {
+        return (
+            <div className={'loader'}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    static parseNodes = (nodes) => {
+        if (Array.isArray(nodes)) {
+            return nodes.map(Number).filter(Number.isInteger);
+        }
+    };
+
+    static getStateFiltersFromColor = (color) => {
+        return TABLET_COLOR_TO_STATES[color] || [color];
+    };
+
+    static CONTROL_WIDTH = 220;
+    static POPUP_WIDTH = 300;
+
+    state = {
+        nodeFilter: [],
+        tenantPath: '',
+    };
+
+    reloadDescriptor = -1;
+
+    componentDidMount() {
+        const {setStateFilter, setTypeFilter} = this.props;
+
+        const queryParams = qs.parse(this.props.location.search, {
+            ignoreQueryPrefix: true,
+        });
+        const {nodeIds, type, path, state} = queryParams;
+        const nodes = TabletsFilters.parseNodes(nodeIds);
+        const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
+
+        setStateFilter(stateFilter);
+        setTypeFilter([type]);
+
+        this.setState({nodeFilter: nodes, tenantPath: path}, () => {
+            this.makeRequest();
+        });
+    }
+
+    componentDidUpdate(prevProps) {
+        const {loading, error} = this.props;
+        if (!error && prevProps.path && this.props.path && prevProps.path !== this.props.path) {
+            this.props.clearWasLoadingFlag();
+            this.getTablets();
+        }
+
+        if (!error && !loading && this.reloadDescriptor === -1) {
+            this.getTablets();
+        }
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.reloadDescriptor);
+    }
+
+    makeRequest = () => {
+        const {nodeFilter, tenantPath} = this.state;
+
+        this.props.getTabletsInfo({nodes: nodeFilter, path: [tenantPath]});
+    };
+
+    getTablets = () => {
+        const {timeoutForRequest} = this.props;
+        clearInterval(this.reloadDescriptor);
+        this.reloadDescriptor = setTimeout(() => {
+            this.makeRequest();
+            this.reloadDescriptor = -1;
+        }, timeoutForRequest);
+    };
+
+    handleNodeFilterChange = (nodeFilter) => {
+        this.setState({nodeFilter}, () => {
+            this.props.clearWasLoadingFlag();
+            this.makeRequest();
+        });
+    };
+
+    handleStateFilterChange = (stateFilter) => {
+        const {setStateFilter} = this.props;
+        setStateFilter(stateFilter);
+    };
+
+    handleTypeFilterChange = (typeFilter) => {
+        const {setTypeFilter} = this.props;
+        setTypeFilter(typeFilter);
+    };
+
+    renderTablet = (index, key) => {
+        const {filteredTablets, hideTooltip, showTooltip, size} = this.props;
+
+        return (
+            <Tablet
+                onMouseLeave={hideTooltip}
+                onMouseEnter={showTooltip}
+                tablet={filteredTablets[index]}
+                key={key}
+                size={size}
+                className={b('tablet')}
+            />
+        );
+    };
+
+    renderOverall = (tablets) => {
+        const {hideTooltip, showTooltip} = this.props;
+        const tabletsCount = tablets.length;
+
+        const substractPercentsFromMaxPercents = (statesForOverallProgress, substractValue) => {
+            Object.keys(statesForOverallProgress).some((key) => {
+                if (statesForOverallProgress[key] > 10) {
+                    statesForOverallProgress[key] -= minOverallPercentValue - substractValue;
+                    return true;
+                }
+                return false;
+            });
+        };
+
+        // определим, сколько таблеток какого цвета имеется в tablets
+        const statesForOverallProgress = tablets.reduce((acc, tablet) => {
+            const color = tablet.Overall.toLowerCase();
+            if (!acc[color]) {
+                acc[color] = 1;
+            } else {
+                acc[color]++;
+            }
+
+            return acc;
+        }, {});
+
+        const tooltipData = [];
+
+        // подсчитаем, сколько процентов составляет каждый цвет в statesForOverallProgress и заодно сгенерируем информацию для тултипа
+        Object.keys(statesForOverallProgress).forEach((key) => {
+            const percents = (statesForOverallProgress[key] / tabletsCount) * 100;
+            const value = statesForOverallProgress[key];
+            statesForOverallProgress[key] = percents;
+            tooltipData.push({color: key, percents, value, total: tablets.length});
+        });
+
+        // заменим все проценты, значения которых меньше 3 на тройку
+        Object.keys(statesForOverallProgress).forEach((key) => {
+            if (statesForOverallProgress[key] < minOverallPercentValue) {
+                substractPercentsFromMaxPercents(
+                    statesForOverallProgress,
+                    statesForOverallProgress[key],
+                );
+                statesForOverallProgress[key] = minOverallPercentValue;
+            }
+        });
+
+        const memoryProgress = 100;
+        const stack = Object.keys(statesForOverallProgress).map((key) => ({
+            color: `var(--color-status-${key}-solid-70)`,
+            colorKey: key,
+            value: statesForOverallProgress[key],
+        }));
+
+        // сортируем наш stack, чтобы цвета были в порядке "зеленый, оранжевый, желтый, красный, черный"
+        stack.sort((a, b) => COLORS_PRIORITY[b.colorKey] - COLORS_PRIORITY[a.colorKey]);
+
+        return (
+            <div className={b('row', {overall: true})}>
+                <span className={b('label', {overall: true})}>Overall</span>
+                <div
+                    onMouseLeave={hideTooltip}
+                    onMouseEnter={(e) => showTooltip(e.target, tooltipData, 'tabletsOverall')}
+                >
+                    <Progress value={memoryProgress} stack={stack} />
+                </div>
+            </div>
+        );
+    };
+
+    renderContent = () => {
+        const {nodeFilter, tenantPath} = this.state;
+        const {tablets, filteredTablets, nodes, stateFilter, typeFilter, error} = this.props;
+
+        const states = TABLETS_STATES.map((item) => ({value: item, content: item}));
+        const types = Array.from(new Set(...[_.map(tablets, (tblt) => tblt.Type)])).map((item) => ({
+            value: item,
+            content: item,
+        }));
+
+        const nodesForSelect = _.map(nodes, (node) => ({
+            content: node.Id,
+            value: node.Id,
+            meta: node.Host,
+        }));
+
+        return (
+            <div className={b()}>
+                {/* {this.renderOverall(tablets)} */}
+
+                <div className={b('tenant')}>
+                    <span className={b('label')}>Database: </span> {tenantPath}
+                </div>
+                <MemoizedFilters
+                    nodesForSelect={nodesForSelect}
+                    nodeFilter={nodeFilter}
+                    onChangeNodes={this.handleNodeFilterChange}
+                    states={states}
+                    stateFilter={stateFilter}
+                    onChangeStates={this.handleStateFilterChange}
+                    types={types}
+                    typeFilter={typeFilter}
+                    onChangeTypes={this.handleTypeFilterChange}
+                />
+
+                {error && <div className="error">{error}</div>}
+
+                {filteredTablets.length > 0 ? (
+                    <div className={b('items')}>
+                        <ReactList
+                            itemRenderer={this.renderTablet}
+                            length={filteredTablets.length}
+                            type="uniform"
+                        />
+                    </div>
+                ) : (
+                    !error && <div className={b('empty-message')}>no tablets</div>
+                )}
+            </div>
+        );
+    };
+
+    render() {
+        const {loading, wasLoaded, error} = this.props;
+
+        if (loading && !wasLoaded) {
+            return TabletsFilters.renderLoader();
+        } else if (error && typeof error === 'object') {
+            return <div>{error.statusText}</div>;
+        } else {
+            return this.renderContent();
+        }
+    }
+}
+
+const Filters = ({
+    nodesForSelect,
+    nodeFilter,
+    onChangeNodes,
+
+    states,
+    stateFilter,
+    onChangeStates,
+
+    types,
+    typeFilter,
+    onChangeTypes,
+}) => {
+    return (
+        <div className={b('filters')}>
+            <div className={b('filter-wrapper')}>
+                <Select
+                    multiple
+                    label="Node ID"
+                    showApply
+                    showItemMeta
+                    width={TabletsFilters.CONTROL_WIDTH}
+                    popupWidth={TabletsFilters.POPUP_WIDTH}
+                    placeholder="All"
+                    options={nodesForSelect}
+                    value={nodeFilter}
+                    onUpdate={onChangeNodes}
+                    renderOption={(option) => {
+                        return (
+                            <div className={b('node')}>
+                                <div>{option.content}</div>
+                                <div className={b('node-meta')}>{option.meta}</div>
+                            </div>
+                        );
+                    }}
+                    getOptionHeight={() => 40}
+                />
+            </div>
+
+            <div className={b('filter-wrapper')}>
+                <Select
+                    multiple
+                    label="multiple"
+                    showApply
+                    width={TabletsFilters.CONTROL_WIDTH}
+                    placeholder="All"
+                    options={states}
+                    value={stateFilter}
+                    onUpdate={onChangeStates}
+                />
+            </div>
+
+            <div className={b('filter-wrapper')}>
+                <Select
+                    multiple
+                    label="Types"
+                    showApply
+                    width={TabletsFilters.CONTROL_WIDTH}
+                    placeholder="All"
+                    options={types}
+                    value={typeFilter}
+                    onUpdate={onChangeTypes}
+                />
+            </div>
+        </div>
+    );
+};
+
+Filters.propTypes = {
+    nodesForSelect: PropTypes.array,
+    nodeFilter: PropTypes.array,
+    onChangeNodes: PropTypes.func,
+
+    states: PropTypes.array,
+    stateFilter: PropTypes.array,
+    onChangeStates: PropTypes.func,
+
+    types: PropTypes.array,
+    typeFilter: PropTypes.array,
+    onChangeTypes: PropTypes.func,
+};
+
+const MemoizedFilters = React.memo(Filters, (prevProps, nextProps) => {
+    return (
+        _.isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
+        _.isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
+        _.isEqual(prevProps.typeFilter, nextProps.typeFilter)
+    );
+});
+
+const mapStateToProps = (state) => {
+    const {nodes, wasLoaded, loading, timeoutForRequest, stateFilter, typeFilter, error} =
+        state.tabletsFilters;
+
+    return {
+        tablets: getTablets(state),
+        filteredTablets: getFilteredTablets(state),
+        nodes,
+        timeoutForRequest,
+        wasLoaded,
+        loading,
+        stateFilter,
+        typeFilter,
+        error,
+    };
+};
+
+const mapDispatchToProps = {
+    getTabletsInfo,
+    hideTooltip,
+    showTooltip,
+    clearWasLoadingFlag,
+    setStateFilter,
+    setTypeFilter,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TabletsFilters);

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -0,0 +1,104 @@
+@import '../../styles/mixins';
+
+.tablets-filters {
+    @include flex-container();
+    overflow: auto;
+    max-height: 400px;
+    // max-width: 400px;
+
+    &__node {
+        font-size: var(--yc-text-body-font-size);
+        line-height: var(--yc-text-body-line-height);
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__node-meta {
+        color: var(--yc-color-text-secondary);
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+
+        &_overall {
+            margin: 15px 20px;
+
+            .yc-progress {
+                width: 300px;
+                margin: 0;
+            }
+        }
+    }
+
+    &__label {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        font-weight: 500;
+        text-transform: uppercase;
+        margin-right: 16px;
+
+        &_overall {
+            margin-right: 15px;
+        }
+    }
+
+    &__items {
+        display: flex;
+        flex-wrap: wrap;
+        flex: 1 1 auto;
+        overflow: auto;
+        padding: 5px 20px;
+    }
+
+    &__items-wrapper {
+        overflow: auto;
+    }
+
+    &__filters {
+        display: flex;
+        align-items: center;
+        margin: 10px 0;
+        padding: 0 20px;
+    }
+
+    &__filter-label {
+        margin-right: 15px;
+        white-space: nowrap;
+    }
+
+    &__filter-wrapper {
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+    }
+
+    &__filter-control {
+        margin-right: 10px;
+        min-width: 100px;
+        max-width: 200px;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &__tablet {
+        margin-bottom: 2px;
+    }
+
+    &__empty-message {
+        display: flex;
+        justify-content: center;
+    }
+
+    &__tenant {
+        padding: 20px 20px 10px 20px;
+    }
+
+    .tablet {
+        display: inline-block;
+        text-align: center;
+        line-height: 18px;
+    }
+}

package/dist/containers/Tenant/Acl/Acl.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import _ from 'lodash';
+import {connect} from 'react-redux';
+import {Loader} from '@yandex-cloud/uikit';
+import DataTable from '@yandex-cloud/react-data-table';
+
+import './Acl.scss';
+
+const b = cn('kv-acl');
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+    syncHeadOnResize: true,
+    stickyHead: DataTable.MOVING,
+};
+const COLUMN_WIDTH = 140;
+const COLUMNS = [
+    {
+        name: 'AccessType',
+        header: 'Access Type',
+        sortable: false,
+        width: COLUMN_WIDTH,
+    },
+    {
+        name: 'AccessRights',
+        header: 'Access Rights',
+        render: ({value}) => {
+            return _.map(value, (item, index) => {
+                return <div key={index}>{item}</div>;
+            });
+        },
+        width: COLUMN_WIDTH,
+        sortable: false,
+    },
+    {
+        name: 'Subject',
+        sortable: false,
+        // eslint-disable-next-line react/display-name
+        render: ({value}) => {
+            return Acl.prepareLogin(value);
+        },
+        width: COLUMN_WIDTH,
+    },
+    {
+        name: 'InheritanceType',
+        header: 'Inheritance Type',
+        render: ({value}) => {
+            return _.map(value, (item, index) => {
+                return <div key={index}>{item}</div>;
+            });
+        },
+        width: COLUMN_WIDTH,
+        sortable: false,
+    },
+];
+
+class Acl extends React.Component {
+    static propTypes = {
+        error: PropTypes.string,
+        acl: PropTypes.array,
+        loading: PropTypes.bool,
+    };
+
+    static prepareLogin = (value) => {
+        if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
+            const login = value.split('@')[0];
+            return login;
+        }
+
+        return value;
+    };
+
+    renderTable = () => {
+        const {acl} = this.props;
+
+        if (!acl) {
+            return null;
+        }
+
+        return <DataTable columns={COLUMNS} data={acl} settings={TABLE_SETTINGS} />;
+    };
+
+    renderOwner = () => {
+        const {owner} = this.props;
+
+        if (!owner) {
+            return null;
+        }
+
+        return (
+            <div className={b('owner-container')}>
+                <span className={b('owner-label')}>Owner: </span>
+                {Acl.prepareLogin(owner)}
+            </div>
+        );
+    };
+    renderResult = () => {
+        return (
+            <React.Fragment>
+                {this.renderOwner()}
+                {this.renderTable()}
+            </React.Fragment>
+        );
+    };
+
+    render() {
+        const {error, loading, acl, owner, wasLoaded} = this.props;
+
+        if (loading && !wasLoaded) {
+            return (
+                <div className={b('loader-container')}>
+                    <Loader size="m" />
+                </div>
+            );
+        }
+
+        if (error && !error.isCancelled) {
+            const message = (error.data || error).slice(0, 100);
+
+            return <div className={b('message-container')}>{message}</div>;
+        }
+
+        if (!loading && !acl && !owner) {
+            return <div className={b('message-container')}>Empty</div>;
+        }
+
+        return (
+            <div className={b()}>
+                <div className={b('result')}>{this.renderResult()}</div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {loading, error, acl, owner, wasLoaded} = state.schemaAcl;
+
+    return {
+        acl,
+        owner,
+        loading,
+        error,
+        wasLoaded,
+    };
+};
+
+export default connect(mapStateToProps)(Acl);

package/dist/containers/Tenant/Acl/Acl.scss

@@ -0,0 +1,34 @@
+@import '../../../styles/mixins.scss';
+
+.kv-acl {
+    &__message-container {
+        padding: 15px 0;
+    }
+
+    &__loader-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    @include query-data-table;
+
+    &__owner-container {
+        margin: 10px;
+
+        .yc-staff-card {
+            display: inline-block;
+        }
+    }
+
+    &__text {
+        font-size: var(--yc-text-body-font-size);
+        line-height: var(--yc-text-body-line-height);
+        color: var(--yc-color-text-primary);
+
+        &::first-letter {
+            color: var(--yc-color-text-danger);
+        }
+    }
+}