ydb-embedded-ui 4.3.0 → 4.4.1

package/dist/components/FullGroupViewer/FullGroupViewer.js

@@ -1,147 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-
-import DataTable from '@gravity-ui/react-data-table';
-
-import InfoViewer from '../InfoViewer/InfoViewer';
-import EntityStatus from '../EntityStatus/EntityStatus';
-import ProgressViewer from '../ProgressViewer/ProgressViewer';
-import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
-
-import {stringifyVdiskId, formatStorageValues} from '../../utils';
-import {DEFAULT_TABLE_SETTINGS, PDISK_CATEGORIES} from '../../utils/constants';
-import routes, {createHref} from '../../routes';
-
-import './FullGroupViewer.scss';
-
-const b = cn('full-group-viewer');
-
-const tableSettings = {
-    ...DEFAULT_TABLE_SETTINGS,
-    stickyHead: DataTable.FIXED,
-};
-
-class FullGroupViewer extends React.Component {
-    static propTypes = {
-        className: PropTypes.string,
-        group: PropTypes.object.isRequired,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    renderContent = () => {
-        const {group} = this.props;
-        const data = group.VDisks;
-        const columns = [
-            {
-                name: 'VDiskId',
-                header: 'VDisk',
-                render: ({value, row}) => (
-                    <EntityStatus
-                        status={row.Overall}
-                        name={stringifyVdiskId(value)}
-                        path={createHref(routes.vdisk, null, {
-                            vdiskId: stringifyVdiskId(value),
-                        })}
-                    />
-                ),
-            },
-            {
-                name: 'pdisk',
-                header: 'PDisk',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) =>
-                    row.PDisk ? (
-                        <EntityStatus
-                            path={createHref(
-                                routes.pdisk,
-                                {id: row.PDisk.PDiskId},
-                                {node_id: row.PDisk.NodeId},
-                            )}
-                            status={row.PDisk.Overall}
-                            name={`${row.NodeId}-${row.PDisk.PDiskId}`}
-                        />
-                    ) : (
-                        <div className="error">—</div>
-                    ),
-            },
-            {
-                name: 'space',
-                header: 'Space',
-                width: '150px',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) =>
-                    row.PDisk ? (
-                        <ProgressViewer
-                            capacity={row.PDisk.TotalSize}
-                            value={row.PDisk.TotalSize - row.PDisk.AvailableSize}
-                            formatValues={formatStorageValues}
-                        />
-                    ) : (
-                        <div className="error">—</div>
-                    ),
-            },
-            {
-                name: 'category',
-                header: 'Category',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) =>
-                    row.PDisk ? (
-                        PDISK_CATEGORIES[row.PDisk.Category]
-                    ) : (
-                        <div className="error">—</div>
-                    ),
-                align: DataTable.RIGHT,
-            },
-            {
-                name: 'path',
-                header: 'Path',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) => (row.PDisk ? row.PDisk.Path : <div className="error">—</div>),
-            },
-            {
-                name: 'guid',
-                header: 'Guid',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) => (row.PDisk ? row.PDisk.Guid : <div className="error">—</div>),
-                align: DataTable.RIGHT,
-            },
-        ];
-
-        const groupInfo = [
-            {label: 'Generation', value: group.GroupGeneration},
-            {label: 'Latency', value: <EntityStatus status={group.Latency} />},
-            {label: 'Erasure', value: group.ErasureSpecies},
-        ];
-
-        const breadcrumbsItems = [{text: 'Database'}, {text: 'Storage Pool'}, {text: 'BS Group'}];
-
-        return (
-            <React.Fragment>
-                <Breadcrumbs items={breadcrumbsItems} />
-                <InfoViewer className={b('section')} info={groupInfo} title={'Info'} />
-                <DataTable
-                    cls={b('disks')}
-                    columns={columns}
-                    data={data}
-                    settings={tableSettings}
-                />
-            </React.Fragment>
-        );
-    };
-
-    render() {
-        const {className, group} = this.props;
-
-        return (
-            <div className={`${b()} ${className}`}>
-                {group ? this.renderContent() : <div className="error">no group data</div>}
-            </div>
-        );
-    }
-}
-
-export default FullGroupViewer;

package/dist/components/FullGroupViewer/FullGroupViewer.scss

@@ -1,35 +0,0 @@
-@import '../../styles/mixins';
-
-.full-group-viewer {
-    overflow: auto;
-    @include container-fluid();
-    @include flex-container();
-
-    &__section {
-        display: inline-block;
-
-        min-width: 315px;
-        margin-right: 40px;
-
-        border-radius: 5px;
-
-        .info-viewer__label {
-            min-width: 75px;
-        }
-    }
-
-    .info-viewer__items {
-        grid-template-columns: max-content;
-    }
-
-    .data-table {
-        overflow: auto;
-
-        margin-top: 50px;
-        @include flex-container();
-    }
-
-    .data-table__table {
-        width: 100%;
-    }
-}

package/dist/components/GroupTreeViewer/GroupTreeViewer.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {withRouter} from 'react-router';
-
-import {TreeView} from 'ydb-ui-components';
-
-import GroupViewer from '../GroupViewer/GroupViewer';
-import PDiskViewer from '../PDiskViewer/PDiskViewer';
-import EntityStatus from '../EntityStatus/EntityStatus';
-import {stringifyVdiskId} from '../../utils';
-import routes, {createHref} from '../../routes';
-import {backend} from '../../store';
-
-import './GroupTreeViewer.scss';
-
-const b = cn('group-tree-viewer');
-
-class GroupTreeViewer extends React.Component {
-    static propTypes = {
-        group: PropTypes.object.isRequired,
-        collapsed: PropTypes.bool,
-        onClick: PropTypes.func,
-    };
-
-    static ITEM_HEIGHT_COLLAPSED = 38;
-    static GROUP_ITEM_HEIGHT = 34;
-
-    static makeGetHeight = (groups, extendedGroups) => (index) => {
-        const {VDisks} = groups[index];
-        const countVDisks = VDisks?.length;
-        const parentHeight = GroupTreeViewer.ITEM_HEIGHT_COLLAPSED;
-        const childHeight = GroupTreeViewer.GROUP_ITEM_HEIGHT;
-
-        if (extendedGroups.has(index)) {
-            return parentHeight + countVDisks * childHeight;
-        }
-
-        return parentHeight;
-    };
-
-    render() {
-        const {group, collapsed, onClick} = this.props;
-        const label2 = (
-            <div>
-                <GroupViewer key={group.GroupID} group={group} />
-            </div>
-        );
-        if (group && Object.keys(group).length) {
-            return (
-                <div className={b()}>
-                    <TreeView
-                        key={group.GroupID}
-                        name={label2}
-                        collapsed={collapsed}
-                        onClick={onClick}
-                    >
-                        {group.VDisks?.map((disk, diskIndex) => (
-                            <div key={diskIndex} className={b('row')}>
-                                <EntityStatus
-                                    className={b('disk')}
-                                    status={disk.Overall}
-                                    name={stringifyVdiskId(disk.VDiskId)}
-                                    label="VDiskID"
-                                    path={createHref(routes.vdisk, null, {
-                                        vdiskId: stringifyVdiskId(disk.VDiskId),
-                                    })}
-                                />
-
-                                <PDiskViewer
-                                    className={b('disk')}
-                                    disk={disk.PDisk}
-                                    key={disk.Guid}
-                                    backend={backend}
-                                />
-                            </div>
-                        ))}
-                    </TreeView>
-                </div>
-            );
-        } else {
-            return <div className={b()}>No data</div>;
-        }
-    }
-}
-
-export default withRouter(GroupTreeViewer);

package/dist/components/GroupTreeViewer/GroupTreeViewer.scss

@@ -1,16 +0,0 @@
-.group-tree-viewer {
-    &__row {
-        display: flex;
-        align-items: center;
-
-        height: 34px;
-    }
-
-    &__disk {
-        margin: 8px 10px 8px 20px;
-    }
-
-    &__vdisk {
-        margin-right: 25px;
-    }
-}

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