ydb-embedded-ui 0.1.0

package/dist/components/EntityStatus/EntityStatus.scss

@@ -0,0 +1,81 @@
+.entity-status {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: center;
+    font-size: var(--yc-text-body2-font-size);
+    line-height: var(--yc-text-body2-line-height);
+
+    &__clipboard-button {
+        visibility: hidden;
+        margin-left: 5px;
+        color: var(--yc-color-text-secondary);
+
+        &_visible {
+            visibility: visible;
+        }
+    }
+
+    a {
+        color: var(--yc-color-text-link);
+        text-decoration: none;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    a:hover {
+        color: var(--yc-color-text-link-hover);
+    }
+
+    &__label {
+        margin-right: 2px;
+        color: var(--yc-color-text-complementary);
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+    }
+
+    &__name {
+        white-space: nowrap;
+    }
+
+    &__status-icon {
+        border-radius: 3px;
+        margin-right: 8px;
+
+        &_size_xs {
+            min-width: 16px;
+            height: 16px;
+        }
+        &_size_m {
+            min-width: 18px;
+            height: 18px;
+        }
+
+        &_state_running,
+        &_state_green {
+            background-color: var(--yc-color-base-positive-heavy);
+        }
+        &_state_yellow {
+            background-color: var(--yc-color-base-warning-heavy);
+        }
+        &_state_blue {
+            background-color: var(--yc-color-base-info-heavy);
+        }
+
+        &_state_red {
+            background: var(--yc-color-base-danger-heavy);
+        }
+        &_state_gray,
+        &_state_grey {
+            background: var(--yc-color-text-complementary);
+        }
+        &_state_orange {
+            background: var(--yc-color-text-warning-heavy);
+        }
+    }
+
+    &_size_m {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+    }
+}

package/dist/components/FullGroupViewer/FullGroupViewer.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+
+import DataTable from '@yandex-cloud/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 {PDISK_CATEGORIES} from '../../utils/constants';
+import routes, {createHref} from '../../routes';
+
+import './FullGroupViewer.scss';
+
+const b = cn('full-group-viewer');
+
+const tableSettings = {
+    displayIndices: false,
+    stickyHead: DataTable.FIXED,
+    syncHeadOnResize: true,
+    dynamicRender: true,
+};
+
+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

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

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+
+import InfoViewer from '../InfoViewer/InfoViewer';
+import EntityStatus from '../EntityStatus/EntityStatus';
+import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import PoolUsage from '../PoolUsage/PoolUsage';
+import Tags from '../Tags/Tags';
+import Icon from '../Icon/Icon';
+
+import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
+import {calcUptime} from '../../utils';
+
+import './FullNodeViewer.scss';
+
+const b = cn('full-node-viewer');
+
+class FullNodeViewer extends React.Component {
+    static propTypes = {
+        className: PropTypes.string,
+        node: PropTypes.object.isRequired,
+        backend: PropTypes.string,
+        singleClusterMode: PropTypes.bool,
+        additionalNodesInfo: PropTypes.object,
+    };
+
+    static defaultProps = {
+        className: '',
+    };
+
+    render() {
+        const {node, className, additionalNodesInfo={}} = this.props;
+        const nodeHref = additionalNodesInfo.getNodeRef
+            ? additionalNodesInfo.getNodeRef(node)
+            : undefined;
+
+        const commonInfo = [
+            {label: 'Version', value: node.Version},
+            {label: 'Uptime', value: calcUptime(node.StartTime)},
+            {label: 'DC', value: node.DataCenterDescription},
+            {label: 'Rack', value: node.Rack},
+        ];
+
+        const averageInfo = node.LoadAverage.map((load, loadIndex) => ({
+            label: LOAD_AVERAGE_TIME_INTERVALS[`${loadIndex}`],
+            value: <ProgressViewer value={load} percents={true} colorizeProgress={true} />,
+        }));
+
+        return (
+            <div className={`${b()} ${className}`}>
+                {node ? (
+                    <div>
+                        <div className={b('row')}>
+                            <div className={b('title')}>Node</div>
+                            <EntityStatus status={node.SystemState} name={node.Host} />
+                            {nodeHref && (
+                                <a
+                                    rel="noopener noreferrer"
+                                    className={b('link', {external: true})}
+                                    href={nodeHref}
+                                    target="_blank"
+                                >
+                                    <Icon name="external" />
+                                </a>
+                            )}
+
+                            <div className={b('row', {id: true})}>
+                                <label className={b('label', {id: true})}>NodeID</label>
+                                <label>{node.NodeId}</label>
+                            </div>
+
+                            <Tags tags={[node.DataCenter]} />
+                            <Tags tags={node.Roles} tagsType="blue" />
+                        </div>
+
+                        <div className={b('common-info')}>
+                            <div>
+                                <div className={b('section-title')}>Pools</div>
+                                <div className={b('section', {pools: true})}>
+                                    {node.PoolStats.map((pool, poolIndex) => (
+                                        <PoolUsage key={poolIndex} data={pool} />
+                                    ))}
+                                </div>
+                            </div>
+
+                            <InfoViewer
+                                title="Common info"
+                                className={b('section')}
+                                info={commonInfo}
+                            />
+
+                            <InfoViewer
+                                title="Load average"
+                                className={b('section', {average: true})}
+                                info={averageInfo}
+                            />
+                        </div>
+                    </div>
+                ) : (
+                    <div className="error">no data</div>
+                )}
+            </div>
+        );
+    }
+}
+
+export default FullNodeViewer;

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -0,0 +1,78 @@
+@import '../../styles/mixins.scss';
+
+.full-node-viewer {
+    @include container-fluid();
+    font-size: var(--yc-text-body2-font-size);
+    line-height: var(--yc-text-body2-line-height);
+
+    &__title {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        margin: 0 20px 0 0;
+        font-weight: 500;
+        text-transform: uppercase;
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+        margin: 15px 0;
+
+        &_id {
+            margin: 0 15px 0 24px;
+        }
+    }
+
+    &__common-info {
+        display: flex;
+        align-items: stretch;
+        justify-content: flex-start;
+    }
+
+    &__section {
+        padding: 15px;
+        margin-right: 20px;
+        border-radius: 10px;
+
+        &_pools {
+            padding: 15px 15px 15px 0;
+            display: grid;
+            grid-template-columns: 110px 110px;
+            grid-gap: 7px 20px;
+        }
+    }
+
+    .info-viewer__label {
+        min-width: 60px;
+    }
+
+    &__label {
+        color: var(--yc-color-text-hint);
+        font-size: var(--yc-text-body2-font-size);
+        min-width: 100px;
+        margin-right: 25px;
+        line-height: 18px;
+        white-space: nowrap;
+
+        .yc-root_theme_dark & {
+            color: var(--yc-color-text-hint);
+        }
+
+        &_id {
+            min-width: auto;
+            margin-right: 10px;
+        }
+    }
+
+    &__section-title {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        margin: 15px 0 0 0;
+        font-weight: 500;
+    }
+
+    &__link {
+        margin-left: 5px;
+        @extend .link;
+    }
+}

package/dist/components/GroupTreeViewer/GroupTreeViewer.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {withRouter} from 'react-router';
+
+import GroupViewer from '../GroupViewer/GroupViewer';
+import PDiskViewer from '../PDiskViewer/PDiskViewer';
+import EntityStatus from '../EntityStatus/EntityStatus';
+import TreeView from '../TreeView/TreeView';
+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}
+                        nodeLabel={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

@@ -0,0 +1,17 @@
+@import '../../styles/react-treeview';
+
+.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

@@ -0,0 +1,100 @@
+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

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