ydb-embedded-ui 4.3.0 → 4.4.0

package/dist/components/GroupViewer/GroupViewer.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import EntityStatus from '../EntityStatus/EntityStatus';
-import ProgressViewer from '../ProgressViewer/ProgressViewer';
-
-import routes, {createHref} from '../../routes';
-import {formatStorageValues, formatThroughput, formatIOPS} from '../../utils';
-
-import './GroupViewer.scss';
-
-const b = cn('group-viewer');
-
-class GroupViewer extends React.Component {
-    static propTypes = {
-        group: PropTypes.object.isRequired,
-        className: PropTypes.string,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    render() {
-        const {group, className} = this.props;
-        const {
-            GroupID = 'no id',
-            Overall = 'gray',
-            VDisks,
-            ErasureSpecies,
-            Latency = 'gray',
-            AcquiredIOPS,
-            AcquiredSize,
-            AcquiredThroughput,
-            MaximumIOPS,
-            MaximumSize,
-            MaximumThroughput,
-        } = group;
-        if (group && Object.keys(group).length) {
-            return (
-                <div className={`${b()} ${className}`}>
-                    <div className={b('group')}>
-                        <EntityStatus
-                            name={GroupID}
-                            status={Overall}
-                            path={createHref(routes.group, {id: GroupID})}
-                            className={b('name')}
-                        />
-                    </div>
-
-                    <div className={b('latency')}>
-                        <EntityStatus name="Latency" status={Latency} />
-                    </div>
-
-                    <div className={b('label')}>{(VDisks && VDisks.length) || 0} Vdisks</div>
-                    <div className={b('label')}>{ErasureSpecies || 'no ErasureSpecies info'}</div>
-                    <div className={b('vdisks')}>
-                        {VDisks?.map((disk) => (
-                            <div key={disk.Guid} className={b('disk-overall')}>
-                                <EntityStatus status={disk.Overall} />
-                            </div>
-                        ))}
-                    </div>
-
-                    <div className={b('progress')}>
-                        <ProgressViewer
-                            value={AcquiredSize}
-                            capacity={MaximumSize}
-                            colorizeProgress={true}
-                            formatValues={formatStorageValues}
-                        />
-                    </div>
-
-                    <div className={b('progress')}>
-                        <ProgressViewer
-                            value={AcquiredIOPS}
-                            capacity={MaximumIOPS}
-                            colorizeProgress={true}
-                            formatValues={formatIOPS}
-                        />
-                    </div>
-
-                    <div className={b('progress')}>
-                        <ProgressViewer
-                            value={AcquiredThroughput}
-                            capacity={MaximumThroughput}
-                            colorizeProgress={true}
-                            formatValues={formatThroughput}
-                        />
-                    </div>
-                </div>
-            );
-        } else {
-            return <div className={b()}>No data</div>;
-        }
-    }
-}
-
-export default GroupViewer;

package/dist/components/GroupViewer/GroupViewer.scss

@@ -1,45 +0,0 @@
-.group-viewer {
-    display: flex;
-    align-items: center;
-    &__group {
-        margin-right: 20px;
-    }
-
-    &__label {
-        margin-right: 20px;
-
-        font-size: var(--yc-text-body-1-font-size);
-
-        color: var(--yc-color-text-complementary);
-    }
-
-    &__name {
-        display: inline-block;
-
-        text-decoration: none;
-
-        color: var(--yc-color-base-special);
-
-        &:before {
-            transform: translateY(3px);
-        }
-    }
-
-    &__latency {
-        margin-right: 20px;
-    }
-
-    &__vdisks {
-        display: flex;
-    }
-
-    &__disk-overall {
-        .entity-status:before {
-            margin-right: 5px;
-        }
-    }
-
-    &__progress {
-        margin-right: 10px;
-    }
-}

package/dist/components/PDiskViewer/PDiskViewer.js

@@ -1,79 +0,0 @@
-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 {getDefaultNodePath} from '../../containers/Node/NodePages';
-
-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={getDefaultNodePath(disk.NodeId)}
-                                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

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

package/dist/components/TabletsViewer/TabletsViewer.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-import {formatNumber} from '../../utils';
-import './TabletsViewer.scss';
-
-import {TABLET_STATES} from '../../utils/constants';
-
-const b = cn('tablets-viewer');
-
-const prepareStates = (states) => {
-    return states.map((state) => {
-        return {
-            label: TABLET_STATES[state.VolatileState],
-            count: formatNumber(state.Count),
-        };
-    });
-};
-
-class TabletsViewer extends React.Component {
-    static propTypes = {
-        tablets: PropTypes.array,
-    };
-    renderTabletInfo = (item, index) => {
-        return (
-            <div key={index} className={b('row')}>
-                <div className={b('tablet-label')}>{item.label}</div>
-                <span>{item.count}</span>
-            </div>
-        );
-    };
-    render() {
-        const {tablets = []} = this.props;
-        const preparedStates = prepareStates(tablets);
-
-        return (
-            <div className={b()}>
-                <div className={b('grid')}>{preparedStates.map(this.renderTabletInfo)}</div>
-            </div>
-        );
-    }
-}
-
-export default TabletsViewer;

package/dist/components/TabletsViewer/TabletsViewer.scss

@@ -1,40 +0,0 @@
-.tablets-viewer {
-    &__grid {
-        display: grid;
-        grid-gap: 8px;
-
-        grid-template-columns: repeat(auto-fill, 125px);
-    }
-
-    &__row {
-        display: flex;
-        align-items: center;
-
-        margin: 0;
-    }
-
-    &__tablet-label {
-        min-width: 60px;
-        margin-right: 20px;
-
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: 18px;
-        white-space: nowrap;
-        text-transform: capitalize;
-
-        color: var(--yc-color-text-hint);
-
-        .yc-root_theme_dark & {
-            color: var(--yc-color-text-hint);
-        }
-    }
-
-    &__title {
-        margin: 0;
-        margin-bottom: 16px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: bold;
-        line-height: 20px;
-    }
-}

package/dist/components/VerticalBars/VerticalBars.scss

@@ -1,15 +0,0 @@
-.ydb-bars {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-
-    height: 20px;
-
-    &__value {
-        width: 6px;
-        min-height: 3px;
-        margin-right: 2px;
-
-        background-color: var(--yc-color-infographics-info-heavy);
-    }
-}

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