ydb-embedded-ui 4.3.0 → 4.4.0

package/dist/containers/Pdisk/Pdisk.js

@@ -1,156 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import qs from 'qs';
-import {connect} from 'react-redux';
-
-import {Link} from 'react-router-dom';
-import {Loader} from '@gravity-ui/uikit';
-
-import InfoViewer from '../../components/InfoViewer/InfoViewer';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
-import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
-
-import {getPdiskInfo, clearStore} from '../../store/reducers/pdisk';
-import {PDISK_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
-import {formatStorageValues, calcUptime} from '../../utils';
-import {getDefaultNodePath} from '../Node/NodePages';
-
-import './Pdisk.scss';
-
-const b = cn('pdisk');
-
-class Pdisk extends React.Component {
-    static renderLoader() {
-        return (
-            <div className={'loader'}>
-                <Loader size="l" />
-            </div>
-        );
-    }
-
-    static propTypes = {
-        className: PropTypes.string,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        error: PropTypes.bool,
-        getPdiskInfo: PropTypes.func,
-        clearStore: PropTypes.func,
-        pdisk: PropTypes.object,
-        location: PropTypes.object,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    componentDidMount() {
-        const queryParams = qs.parse(this.props.location.search, {
-            ignoreQueryPrefix: true,
-        });
-        const nodeId = queryParams.node_id;
-        this.props.getPdiskInfo(nodeId);
-        this.reloadDescriptor = setInterval(
-            () => this.props.getPdiskInfo(nodeId),
-            PDISK_AUTO_RELOAD_INTERVAL,
-        );
-    }
-
-    componentWillUnmount() {
-        this.props.clearStore();
-        clearInterval(this.reloadDescriptor);
-    }
-
-    renderContent = () => {
-        const {
-            TotalSize,
-            AvailableSize,
-            ChangeTime,
-            Device,
-            Guid,
-            NodeId,
-            PDiskId,
-            Path,
-            Realtime,
-            State,
-        } = this.props.pdisk;
-
-        const pdiskInfo = [
-            {label: 'Device', value: <EntityStatus status={Device} />},
-            {label: 'Realtime', value: <EntityStatus status={Realtime} />},
-            {label: 'State', value: State},
-            {
-                label: 'Size',
-                value: (
-                    <ProgressViewer
-                        value={TotalSize - AvailableSize || 0}
-                        capacity={TotalSize || 0}
-                        formatValues={formatStorageValues}
-                        colorizeProgress={true}
-                        className={b('size')}
-                    />
-                ),
-            },
-            {label: 'ChangeTime', value: calcUptime(ChangeTime)},
-            {label: 'Path', value: Path},
-            {label: 'Guid', value: Guid},
-            {
-                label: 'NodeId',
-                value: (
-                    <Link className={b('link')} to={getDefaultNodePath(NodeId)}>
-                        {NodeId}
-                    </Link>
-                ),
-            },
-        ];
-
-        return (
-            <div className={b()}>
-                <div className={b('row')}>
-                    <span className={b('title')}>PDisk </span>
-                    <EntityStatus status={Device} name={PDiskId} />
-                </div>
-
-                <div className={b('column')}>
-                    <InfoViewer className={b('section')} info={pdiskInfo} />
-                </div>
-            </div>
-        );
-    };
-
-    render() {
-        const {loading, wasLoaded, error} = this.props;
-
-        if (loading && !wasLoaded) {
-            return Pdisk.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
-            return this.renderContent();
-        }
-    }
-}
-
-const mapStateToProps = (state, ownProps) => {
-    const {data, wasLoaded, loading, error} = state.pdisk;
-
-    const {id} = ownProps.match.params;
-    let pdisk;
-    if (data) {
-        pdisk = data.PDiskStateInfo.filter((disk) => disk.PDiskId === Number(id))[0];
-    }
-
-    return {
-        pdisk,
-        wasLoaded,
-        loading,
-        error,
-    };
-};
-
-const mapDispatchToProps = {
-    getPdiskInfo,
-    clearStore,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Pdisk);

package/dist/containers/Pdisk/Pdisk.scss

@@ -1,42 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.pdisk {
-    padding: 20px;
-    @include container-fluid();
-
-    .info-viewer__items {
-        grid-template-columns: auto;
-    }
-
-    &__row {
-        display: flex;
-    }
-
-    &__column {
-        display: flex;
-        flex-direction: column;
-    }
-
-    &__title {
-        margin-right: 16px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
-        text-transform: uppercase;
-    }
-
-    &__section {
-        padding: 15px 0;
-    }
-
-    &__size {
-        margin-top: -8px;
-    }
-
-    &__link {
-        text-decoration: none;
-
-        color: var(--yc-color-base-special);
-    }
-}

package/dist/containers/Pool/Pool.js

@@ -1,170 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import _ from 'lodash';
-
-import {Loader} from '@gravity-ui/uikit';
-import ReactList from 'react-list';
-
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
-import GroupTreeViewer from '../../components/GroupTreeViewer/GroupTreeViewer';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
-import {ProblemFilter} from '../../components/ProblemFilter/ProblemFilter';
-import {Illustration} from '../../components/Illustration';
-
-import {getPoolInfo} from '../../store/reducers/pool';
-import {AUTO_RELOAD_INTERVAL, ALL} from '../../utils/constants';
-import {changeFilter} from '../../store/reducers/settings';
-
-import './Pool.scss';
-
-const b = cn('pool');
-
-class Pool extends React.Component {
-    static renderLoader() {
-        return (
-            <div className={'loader'}>
-                <Loader size="l" />
-            </div>
-        );
-    }
-
-    static propTypes = {
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        error: PropTypes.bool,
-        getPoolInfo: PropTypes.func,
-        pool: PropTypes.object,
-        poolName: PropTypes.string,
-        match: PropTypes.object,
-        filter: PropTypes.string,
-        changeFilter: PropTypes.func,
-    };
-
-    static defaultProps = {
-        pool: {},
-    };
-
-    static filterGroups(groups, filter) {
-        return _.filter(groups, (item) => {
-            return filter === ALL || (item.Overall && item.Overall !== 'Green');
-        });
-    }
-
-    componentDidMount() {
-        const {poolName} = this.props.match.params;
-        this.props.getPoolInfo(decodeURIComponent(poolName));
-        this.reloadDescriptor = setInterval(
-            () => this.props.getPoolInfo(decodeURIComponent(poolName)),
-            AUTO_RELOAD_INTERVAL,
-        );
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.reloadDescriptor);
-    }
-
-    state = {
-        extendedGroups: new Set(),
-    };
-
-    makeHandleGroupClick = (groupIndex) => () => {
-        const {extendedGroups} = this.state;
-        const newExtendedGroups = new Set([...extendedGroups]);
-
-        if (newExtendedGroups.has(groupIndex)) {
-            newExtendedGroups.delete(groupIndex);
-        } else {
-            newExtendedGroups.add(groupIndex);
-        }
-
-        this.setState({extendedGroups: newExtendedGroups});
-    };
-
-    makeRenderGroups = (groups) => (index, key) => {
-        const group = groups[index];
-        const {extendedGroups} = this.state;
-
-        return (
-            <GroupTreeViewer
-                key={key}
-                group={group}
-                collapsed={!extendedGroups.has(index)}
-                onClick={this.makeHandleGroupClick(index)}
-            />
-        );
-    };
-
-    renderContent = () => {
-        const {pool, filter, changeFilter} = this.props;
-        const {extendedGroups} = this.state;
-
-        const breadcrumbsItems = [{text: 'Database'}, {text: 'Storage Pool'}];
-
-        if (pool && pool.StoragePools) {
-            const poolInfo = pool.StoragePools[0];
-            const filteredGroups = Pool.filterGroups(poolInfo.Groups, filter);
-
-            return (
-                <div className={b()}>
-                    <Breadcrumbs items={breadcrumbsItems} />
-                    <div className={b('row')}>
-                        <span className={b('title')}>Pool </span>
-                        <EntityStatus status={poolInfo.Overall} name={poolInfo.Name}></EntityStatus>
-                    </div>
-
-                    <div className={b('controls')}>
-                        <div className={b('title', {groups: true})}>Groups</div>
-                        <ProblemFilter value={filter} onChange={changeFilter} />
-                    </div>
-
-                    {filteredGroups.length === 0 ? (
-                        <Illustration name="thumbsUp" width="200" />
-                    ) : (
-                        <ReactList
-                            itemRenderer={this.makeRenderGroups(filteredGroups)}
-                            length={filteredGroups.length}
-                            itemSizeGetter={GroupTreeViewer.makeGetHeight(
-                                filteredGroups,
-                                extendedGroups,
-                            )}
-                            type="variable"
-                        />
-                    )}
-                </div>
-            );
-        }
-    };
-
-    render() {
-        const {loading, wasLoaded, error} = this.props;
-
-        if (loading && !wasLoaded) {
-            return Pool.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
-            return this.renderContent();
-        }
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {data: pool, wasLoaded, loading, error} = state.pool;
-
-    return {
-        pool,
-        wasLoaded,
-        loading,
-        error,
-        filter: state.settings.problemFilter,
-    };
-};
-
-const mapDispatchToProps = {
-    getPoolInfo,
-    changeFilter,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Pool);

package/dist/containers/Pool/Pool.scss

@@ -1,35 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.pool {
-    @include container-fluid();
-
-    &__row {
-        display: flex;
-    }
-
-    &__title {
-        margin-right: 16px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
-        text-transform: uppercase;
-
-        &_groups {
-            margin-right: 32px;
-        }
-    }
-
-    &__controls {
-        display: flex;
-        align-items: center;
-
-        margin: 25px 0 10px;
-    }
-
-    &__breadcrumbs {
-        padding: 20px 0;
-
-        font-size: var(--yc-text-body-2-font-size);
-    }
-}

package/dist/containers/Vdisk/Vdisk.js

@@ -1,158 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-
-import {Link} from 'react-router-dom';
-import {Loader} from '@gravity-ui/uikit';
-
-import InfoViewer from '../../components/InfoViewer/InfoViewer';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
-
-import {getVdiskInfo, clearStore} from '../../store/reducers/vdisk';
-import {VDISK_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
-import {formatBytes, calcUptime, stringifyVdiskId} from '../../utils';
-import routes, {createHref} from '../../routes';
-import {getDefaultNodePath} from '../Node/NodePages';
-
-import './Vdisk.scss';
-
-const b = cn('vdisk');
-
-class Vdisk extends React.Component {
-    static renderLoader() {
-        return (
-            <div className={'loader'}>
-                <Loader size="l" />
-            </div>
-        );
-    }
-
-    static propTypes = {
-        className: PropTypes.string,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        error: PropTypes.bool,
-        getVdiskInfo: PropTypes.func,
-        clearStore: PropTypes.func,
-        vdisk: PropTypes.object,
-        location: PropTypes.object,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    componentDidMount() {
-        const {id} = this.props.match.params;
-
-        this.props.getVdiskInfo(id);
-        this.reloadDescriptor = setInterval(
-            () => this.props.getVdiskInfo(id),
-            VDISK_AUTO_RELOAD_INTERVAL,
-        );
-    }
-
-    componentWillUnmount() {
-        this.props.clearStore();
-        clearInterval(this.reloadDescriptor);
-    }
-
-    renderContent = () => {
-        const {
-            AllocatedSize,
-            ChangeTime,
-            DiskSpace,
-            FrontQueues,
-            Guid,
-            NodeId,
-            PDiskId,
-            Replicated,
-            VDiskState,
-            VDiskId,
-        } = this.props.vdisk;
-
-        const vdiskInfo = [
-            {label: 'Allocated Size', value: formatBytes(AllocatedSize)},
-            {label: 'Change Time', value: calcUptime(ChangeTime)},
-            {label: 'Disk Space', value: <EntityStatus status={DiskSpace} />},
-            {label: 'Front Queues', value: <EntityStatus status={FrontQueues} />},
-            {label: 'Guid', value: Guid},
-            {
-                label: 'NodeId',
-                value: (
-                    <Link className={b('link')} to={getDefaultNodePath(NodeId)}>
-                        {NodeId}
-                    </Link>
-                ),
-            },
-            {
-                label: 'PDiskId',
-                value: (
-                    <Link
-                        className={b('link')}
-                        to={createHref(routes.pdisk, {id: PDiskId}, {node_id: NodeId})}
-                    >
-                        {PDiskId}
-                    </Link>
-                ),
-            },
-            {label: 'Replicated', value: Replicated ? '✓' : '☓'},
-            {
-                label: 'VDiskState',
-                value: VDiskState,
-            },
-        ];
-
-        return (
-            <div className={b()}>
-                <div className={b('row')}>
-                    <span className={b('title')}>VDisk </span>
-                    <EntityStatus
-                        status={VDiskState === 'OK' ? 'green' : 'red'}
-                        name={stringifyVdiskId(VDiskId)}
-                    />
-                </div>
-
-                <div className={b('column')}>
-                    <InfoViewer className={b('section')} info={vdiskInfo} />
-                </div>
-            </div>
-        );
-    };
-
-    render() {
-        const {loading, wasLoaded, error} = this.props;
-
-        if (loading && !wasLoaded) {
-            return Vdisk.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
-            return this.renderContent();
-        }
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {data, wasLoaded, loading, error} = state.vdisk;
-
-    let vdisk;
-    if (data) {
-        vdisk = data.VDiskStateInfo[0];
-    }
-
-    return {
-        vdisk,
-        wasLoaded,
-        loading,
-        error,
-    };
-};
-
-const mapDispatchToProps = {
-    getVdiskInfo,
-    clearStore,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Vdisk);

package/dist/containers/Vdisk/Vdisk.scss

@@ -1,42 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.vdisk {
-    padding: 20px;
-    @include container-fluid();
-
-    .info-viewer__items {
-        grid-template-columns: max-content;
-    }
-
-    &__row {
-        display: flex;
-    }
-
-    &__column {
-        display: flex;
-        flex-direction: column;
-    }
-
-    &__title {
-        margin-right: 16px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
-        text-transform: uppercase;
-    }
-
-    &__section {
-        padding: 15px 0;
-
-        .info-viewer__label {
-            min-width: 205px;
-        }
-    }
-
-    &__link {
-        text-decoration: none;
-
-        color: var(--yc-color-base-special);
-    }
-}