ydb-embedded-ui 4.3.0 → 4.4.1

package/dist/components/VerticalBars/VerticalBars.tsx

@@ -1,38 +0,0 @@
-import cn from 'bem-cn-lite';
-import {useMemo} from 'react';
-
-import './VerticalBars.scss';
-
-const b = cn('ydb-bars');
-
-const calculateValuesInPercents = (values: number[]) => {
-    const max = Math.max(...values);
-
-    if (!max) {
-        return values;
-    }
-
-    const res = [];
-
-    for (const value of values) {
-        res.push((value / max) * 100);
-    }
-
-    return res;
-};
-
-interface VerticalBarsProps {
-    values: number[];
-}
-
-export const VerticalBars = ({values}: VerticalBarsProps) => {
-    const preparedValues = useMemo(() => calculateValuesInPercents(values), [values]);
-
-    const getBars = () => {
-        return preparedValues.map((value, index) => {
-            return <div key={index} style={{height: `${value}%`}} className={b('value')} />;
-        });
-    };
-
-    return <div className={b()}>{getBars()}</div>;
-};

package/dist/components/VerticalBars/index.ts

@@ -1 +0,0 @@
-export * from './VerticalBars';

package/dist/containers/Group/Group.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import {getGroupInfo, clearStore} from '../../store/reducers/group';
-import FullGroupViewer from '../../components/FullGroupViewer/FullGroupViewer';
-import {Loader} from '@gravity-ui/uikit';
-import {GROUP_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
-import './Group.scss';
-
-const b = cn('group');
-
-class Group 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,
-        getGroupInfo: PropTypes.func,
-        clearStore: PropTypes.func,
-        group: PropTypes.object,
-        location: PropTypes.object,
-        match: PropTypes.object,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    componentDidMount() {
-        const {id} = this.props.match.params;
-        this.props.getGroupInfo(id);
-        this.reloadDescriptor = setInterval(
-            () => this.props.getGroupInfo(id),
-            GROUP_AUTO_RELOAD_INTERVAL,
-        );
-    }
-
-    componentWillUnmount() {
-        this.props.clearStore();
-        clearInterval(this.reloadDescriptor);
-    }
-
-    renderContent = () => {
-        const {className, group} = this.props;
-        return (
-            <div className={`${b()} ${className}`}>
-                <FullGroupViewer group={group} />
-            </div>
-        );
-    };
-
-    render() {
-        const {loading, wasLoaded, error, group} = this.props;
-
-        if (loading && !wasLoaded) {
-            return Group.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else if (group) {
-            return this.renderContent();
-        } else {
-            return <div className="error">no data</div>;
-        }
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {data, wasLoaded, loading, error} = state.group;
-
-    let group;
-    if (data) {
-        group = data.StoragePools[0].Groups[0];
-    }
-
-    return {
-        group,
-        wasLoaded,
-        loading,
-        error,
-    };
-};
-
-const mapDispatchToProps = {
-    getGroupInfo,
-    clearStore,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Group);

package/dist/containers/Group/Group.scss

@@ -1,6 +0,0 @@
-@import '../../styles/mixins';
-
-.group {
-    overflow: auto;
-    @include flex-container();
-}

package/dist/containers/Header/Host/Host.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import {Link as ExternalLink} from '@gravity-ui/uikit';
-
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import {Tag} from '../../../components/Tag';
-
-import {calcUptime} from '../../../utils';
-import {customBackend} from '../../../store';
-
-import './Host.scss';
-
-const b = cn('host');
-
-export default class Host extends React.Component {
-    static propTypes = {
-        host: PropTypes.object,
-        singleClusterMode: PropTypes.bool,
-    };
-
-    renderStatus = () => {
-        const {host} = this.props;
-
-        return (
-            <div className={b('status')}>
-                <EntityStatus size="m" status={host.SystemState} name={'Internal viewer'} />
-            </div>
-        );
-    };
-
-    render() {
-        const {host, backend, singleClusterMode} = this.props;
-        const uptime = calcUptime(host.StartTime);
-
-        let link = backend + '/internal';
-
-        if (singleClusterMode && !customBackend) {
-            link = `/internal`;
-        }
-
-        return (
-            <div className={b()}>
-                <div className={b('common')}>
-                    {link ? (
-                        <ExternalLink href={link}>{this.renderStatus()}</ExternalLink>
-                    ) : (
-                        this.renderStatus()
-                    )}
-                    <Tag text={host.DataCenter} />
-                </div>
-                <div className={b('info')}>
-                    <div className={b('info-item')}>
-                        <div className={b('label')}>Uptime</div>
-                        <div className={b('value')}>{uptime}</div>
-                    </div>
-                    <div className={b('info-item')}>
-                        <div className={b('label')}>Version</div>
-                        <div className={b('value')}>{host.Version}</div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}

package/dist/containers/Header/Host/Host.scss

@@ -1,50 +0,0 @@
-.host {
-    display: flex;
-    flex-direction: column;
-
-    &__common {
-        display: flex;
-        align-items: center;
-
-        margin-bottom: 4px;
-    }
-    &__status {
-        display: flex;
-
-        margin-right: 15px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
-    }
-    &__info {
-        display: flex;
-        align-items: center;
-    }
-    &__info-item {
-        display: flex;
-
-        margin-right: 20px;
-
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-    &__label {
-        margin-right: 10px;
-
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
-
-        color: var(--yc-color-text-hint);
-
-        .yc-root_theme_dark & {
-            color: var(--yc-color-text-hint);
-        }
-    }
-    &__value {
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
-
-        color: var(--yc-color-text-primary);
-    }
-}

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);
-    }
-}