ydb-embedded-ui 0.1.0

package/dist/containers/Nodes/Nodes.js

@@ -0,0 +1,193 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
+
+import DataTable from '@yandex-cloud/react-data-table';
+import {Loader, TextInput, Label} from '@yandex-cloud/uikit';
+
+import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {withSearch} from '../../HOCS';
+import {AUTO_RELOAD_INTERVAL, ALL} from '../../utils/constants';
+import {getFilteredNodes} from '../../store/reducers/clusterNodes';
+import {getNodes} from '../../store/reducers/nodes';
+import {changeFilter} from '../../store/reducers/settings';
+import {calcUptime} from '../../utils';
+import {getNodesColumns} from '../../utils/getNodesColumns';
+
+import './Nodes.scss';
+
+const b = cn('cluster-nodes');
+
+const tableSettings = {
+    displayIndices: false,
+    stickyHead: DataTable.MOVING,
+    syncHeadOnResize: true,
+    dynamicRender: true,
+};
+
+class Nodes extends React.Component {
+    static renderLoader() {
+        return (
+            <div className={'loader'}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    static propTypes = {
+        loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
+        error: PropTypes.bool,
+        getNodesList: PropTypes.func,
+        nodes: PropTypes.array,
+        showTooltip: PropTypes.func,
+        hideTooltip: PropTypes.func,
+        searchQuery: PropTypes.string,
+        handleSearchQuery: PropTypes.func,
+        filter: problemFilterType,
+        changeFilter: PropTypes.func,
+        className: PropTypes.string,
+        singleClusterMode: PropTypes.bool,
+        additionalNodesInfo: PropTypes.object,
+    };
+
+    componentDidMount() {
+        this.props.getNodesList();
+        this.reloadDescriptor = setInterval(() => this.props.getNodesList(), AUTO_RELOAD_INTERVAL);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.reloadDescriptor);
+    }
+
+    handleSearchQueryChange = (search) => {
+        this.props.handleSearchQuery(search);
+    };
+
+    handleFilterChange = (filter) => {
+        this.props.changeFilter(filter);
+    };
+
+    renderControls() {
+        const {searchQuery, filter, nodes} = this.props;
+
+        return (
+            <div className={b('controls')}>
+                <div className={b('controls-left')}>
+                    <TextInput
+                        className={b('search')}
+                        size="s"
+                        placeholder="Host name…"
+                        text={searchQuery}
+                        onUpdate={this.handleSearchQueryChange}
+                        hasClear
+                    />
+                    <ProblemFilter value={filter} onChange={this.handleFilterChange} />
+                    <Label theme="info" size="m">{`Nodes: ${nodes.length}`}</Label>
+                </div>
+            </div>
+        );
+    }
+
+    renderTable = () => {
+        const {
+            nodes = [],
+            filter,
+            searchQuery,
+            showTooltip,
+            hideTooltip,
+            singleClusterMode,
+            additionalNodesInfo = {},
+        } = this.props;
+
+        const columns = getNodesColumns({
+            showTooltip,
+            hideTooltip,
+            singleClusterMode,
+            getNodeRef: additionalNodesInfo.getNodeRef,
+        });
+
+        let preparedNodes = searchQuery
+            ? nodes.filter((node) =>
+                  node.Host
+                      ? node.Host.includes(searchQuery) || String(node.NodeId).includes(searchQuery)
+                      : true,
+              )
+            : nodes;
+        preparedNodes = preparedNodes.map((node) => ({
+            ...node,
+            uptime: calcUptime(node.StartTime),
+        }));
+
+        if (preparedNodes.length === 0) {
+            if (filter === ALL) {
+                return <div className="error">no nodes data</div>;
+            }
+            return <div className="no-problem" />;
+        }
+
+        return (
+            <div className={b('table-wrapper')}>
+                <div className={b('table-content')}>
+                    <DataTable
+                        theme="internal"
+                        data={preparedNodes}
+                        columns={columns}
+                        settings={tableSettings}
+                        initialSortOrder={{
+                            columnId: 'NodeId',
+                            order: DataTable.ASCENDING,
+                        }}
+                    />
+                </div>
+            </div>
+        );
+    };
+
+    renderContent = () => {
+        return (
+            <div className={b(null, this.props.className)}>
+                {this.renderControls()}
+                {this.renderTable()}
+            </div>
+        );
+    };
+
+    render() {
+        const {loading, wasLoaded, error} = this.props;
+
+        if (loading && !wasLoaded) {
+            return Nodes.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else {
+            return this.renderContent();
+        }
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {wasLoaded, loading, error} = state.nodes;
+
+    const nodes = getFilteredNodes(state);
+    return {
+        singleClusterMode: state.singleClusterMode,
+        nodes,
+        wasLoaded,
+        loading,
+        error,
+        filter: state.settings.problemFilter,
+    };
+};
+
+const mapDispatchToProps = {
+    getNodesList: getNodes,
+    hideTooltip,
+    showTooltip,
+    changeFilter,
+};
+
+export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Nodes));

package/dist/containers/Nodes/Nodes.scss

@@ -0,0 +1,50 @@
+@import '../../styles/mixins.scss';
+
+.cluster-nodes {
+    overflow: auto;
+
+    &__search {
+        width: 255px;
+        margin: 0 15px 0 0;
+    }
+
+    &__controls {
+        display: flex;
+        justify-content: space-between;
+
+        margin: 17px 0;
+    }
+
+    &__controls-left {
+        display: flex;
+        align-items: center;
+
+        & > * {
+            margin-right: 25px;
+        }
+    }
+
+    &__show-all-wrapper {
+        position: sticky;
+        left: 0;
+
+        margin-bottom: 15px;
+    }
+
+    &__table-wrapper {
+        overflow: auto;
+        @include flex-container();
+    }
+
+    &__table-content {
+        overflow: auto;
+
+        @include freeze-nth-column(1);
+        @include freeze-nth-column(2, 80px);
+        @include freeze-nth-column(3, 120px);
+
+        @include table-styles;
+        @include table-sticky-styles;
+    }
+    @include flex-container();
+}

package/dist/containers/Pdisk/Pdisk.js

@@ -0,0 +1,159 @@
+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 '@yandex-cloud/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 routes, {createHref} from '../../routes';
+
+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={createHref(routes.node, {id: NodeId, activeTab: 'storage'})}
+                    >
+                        {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

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

package/dist/containers/Pool/Pool.js

@@ -0,0 +1,169 @@
+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 '@yandex-cloud/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, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+
+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: problemFilterType,
+        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 ? (
+                        <div className="no-problem" />
+                    ) : (
+                        <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

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