ydb-embedded-ui 0.1.0

package/dist/containers/Tenant/Compute/Compute.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {withRouter} from 'react-router-dom';
+import qs from 'qs';
+
+import {Loader} from '@yandex-cloud/uikit';
+
+import NodesViewer from '../../../components/NodesViewer/NodesViewer';
+
+import {backend} from '../../../store';
+import {hideTooltip, showTooltip} from '../../../store/reducers/tooltip';
+import {getNodes, clearNodes} from '../../../store/reducers/nodes';
+import {AUTO_RELOAD_INTERVAL} from '../../../utils/constants';
+
+import './Compute.scss';
+
+const b = cn('compute');
+
+class Compute extends React.Component {
+    static propTypes = {
+        className: PropTypes.string,
+        clearNodes: PropTypes.func,
+        tenantName: PropTypes.string,
+        nodes: PropTypes.object,
+        loading: PropTypes.bool,
+        error: PropTypes.object,
+        wasLoaded: PropTypes.bool,
+        getNodes: PropTypes.func,
+        hideTooltip: PropTypes.func,
+        showTooltip: PropTypes.func,
+        timeoutForRequest: PropTypes.number,
+    };
+
+    componentDidMount() {
+        const {getNodes, tenantName} = this.props;
+
+        if (tenantName) {
+            getNodes(tenantName);
+            this.reloadDescriptor = setInterval(() => getNodes(tenantName), AUTO_RELOAD_INTERVAL);
+        }
+    }
+
+    componentWillUnmount() {
+        this.props.clearNodes();
+        clearInterval(this.reloadDescriptor);
+    }
+
+    renderLoader() {
+        return (
+            <div className="loader">
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    render() {
+        const {nodes, loading, wasLoaded, error, tenantName} = this.props;
+        if (!tenantName) {
+            return <div className="error">no tenant name in the query string</div>;
+        } else if (loading && !wasLoaded) {
+            return this.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else {
+            return (
+                <div className={b()}>
+                    <NodesViewer
+                        backend={backend}
+                        nodes={nodes}
+                        path={tenantName}
+                        hideTooltip={this.props.hideTooltip}
+                        showTooltip={this.props.showTooltip}
+                        additionalNodesInfo={this.props.additionalNodesInfo}
+                    />
+                </div>
+            );
+        }
+    }
+}
+
+function mapStateToProps(state, ownProps) {
+    const {data, loading, wasLoaded, error, timeoutForRequest} = state.nodes;
+    const {search} = ownProps.location;
+    const queryParams = qs.parse(search, {
+        ignoreQueryPrefix: true,
+    });
+    const {name: tenantName} = queryParams;
+    const nodes = (data && data.Tenants && data.Tenants[0] && data.Tenants[0].Nodes) || {};
+    return {
+        nodes,
+        tenantName,
+        timeoutForRequest,
+        loading,
+        wasLoaded,
+        error,
+    };
+}
+
+const mapDispatchToProps = {
+    getNodes,
+    clearNodes,
+    hideTooltip,
+    showTooltip,
+};
+
+const ConnectedCompute = connect(mapStateToProps, mapDispatchToProps)(Compute);
+
+export default withRouter(ConnectedCompute);

package/dist/containers/Tenant/Compute/Compute.scss

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

package/dist/containers/Tenant/Describe/Describe.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
+import {Loader} from '@yandex-cloud/uikit';
+import JSONTree from 'react-json-inspector';
+
+import './Describe.scss';
+import 'react-json-inspector/json-inspector.css';
+
+const b = cn('kv-describe');
+
+const expandMap = new Map();
+
+class Describe extends React.Component {
+    static propTypes = {
+        error: PropTypes.string,
+        data: PropTypes.array,
+        loading: PropTypes.bool,
+    };
+
+    renderDescribeJson = () => {
+        const {data} = this.props;
+
+        return (
+            <JSONTree
+                data={data}
+                className={b('tree')}
+                onClick={({path}) => {
+                    const newValue = !(expandMap.get(path) || false);
+                    expandMap.set(path, newValue);
+                }}
+                searchOptions={{
+                    debounceTime: 300,
+                }}
+                isExpanded={(keypath) => {
+                    return expandMap.get(keypath) || false;
+                }}
+            />
+        );
+    };
+
+    render() {
+        const {error, loading, data, wasLoaded} = this.props;
+
+        if (loading && !wasLoaded) {
+            return (
+                <div className={b('loader-container')}>
+                    <Loader size="m" />
+                </div>
+            );
+        }
+
+        if (error) {
+            return <div className={b('message-container')}>{error.data || error}</div>;
+        }
+
+        if (!loading && !data) {
+            return <div className={b('message-container')}>Empty</div>;
+        }
+
+        return (
+            <div className={b()}>
+                <div className={b('result')}>{this.renderDescribeJson()}</div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {loading, error, currentDescribe, wasLoaded} = state.describe;
+
+    return {
+        data: currentDescribe,
+        loading,
+        error,
+        wasLoaded,
+    };
+};
+
+export default connect(mapStateToProps)(Describe);

package/dist/containers/Tenant/Describe/Describe.scss

@@ -0,0 +1,25 @@
+@import '../../../styles/mixins.scss';
+
+.kv-describe {
+    &__message-container {
+        padding: 15px 0;
+    }
+
+    &__result {
+        padding: 10px 20px 20px 0;
+        display: flex;
+        flex: 0 0 auto;
+        overflow: auto;
+    }
+
+    &__loader-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    &__tree {
+        @include json-tree-styles();
+    }
+}

package/dist/containers/Tenant/Healthcheck/Healthcheck.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Loader, Button} from '@yandex-cloud/uikit';
+
+import IssuesViewer from './IssuesViewer/IssuesViewer';
+
+import {getHealthcheckInfo} from '../../../store/reducers/healthcheckInfo';
+
+import './Healthcheck.scss';
+
+const b = cn('healthcheck');
+
+class Healthcheck extends React.Component {
+    static propTypes = {
+        data: PropTypes.object,
+        loading: PropTypes.bool,
+        error: PropTypes.object,
+        getHealthcheckInfo: PropTypes.func,
+        tenant: PropTypes.string,
+    };
+
+    componentDidMount() {
+        this.fetchHealthcheck();
+    }
+
+    fetchHealthcheck = () => {
+        const {tenant} = this.props;
+        this.props.getHealthcheckInfo(tenant);
+    };
+
+    renderLoader() {
+        return (
+            <div className="loader">
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    renderOverviewStatus = () => {
+        const {data} = this.props;
+        const {self_check_result: selfCheckResult} = data;
+        const modifier = selfCheckResult.toLowerCase();
+
+        return (
+            <div className={b('self-check-status')}>
+                <h3 className={b('self-check-status-label')}>Self check status</h3>
+                <div className={b('self-check-status-indicator', {[modifier]: true})} />
+                {selfCheckResult}
+                <div className={b('self-check-update')}>
+                    <Button size="s" onClick={this.fetchHealthcheck}>
+                        Update
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    renderHealthcheckIssues() {
+        const {data, showTooltip, hideTooltip} = this.props;
+        const {issue_log: issueLog} = data;
+
+        if (!issueLog) {
+            return null;
+        }
+
+        return (
+            <div className={b('issues')}>
+                <h3>Issues</h3>
+                <IssuesViewer
+                    issues={issueLog}
+                    showTooltip={showTooltip}
+                    hideTooltip={hideTooltip}
+                />
+            </div>
+        );
+    }
+
+    render() {
+        const {loading, error, data} = this.props;
+
+        if (loading) {
+            return this.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else if (data && data['self_check_result']) {
+            return (
+                <div className={b()}>
+                    {this.renderOverviewStatus()}
+                    {this.renderHealthcheckIssues()}
+                </div>
+            );
+        } else {
+            return <div className="error">no healthcheck data</div>;
+        }
+    }
+}
+
+function mapStateToProps(state) {
+    const {data, loading, wasLoaded, error} = state.healthcheckInfo;
+
+    return {
+        data,
+        loading,
+        wasLoaded,
+        error,
+    };
+}
+
+const mapDispatchToProps = {
+    getHealthcheckInfo,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Healthcheck);

package/dist/containers/Tenant/Healthcheck/Healthcheck.scss

@@ -0,0 +1,64 @@
+@import '../../../styles/mixins.scss';
+
+.healthcheck {
+    padding: 25px 20px 20px 20px;
+
+    &__message-container {
+        padding: 15px 0;
+    }
+
+    &__loader-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    &__self-check-status {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+
+    &__self-check-status-label {
+        margin: 0 10px 0 0;
+    }
+
+    &__self-check-update {
+        margin-left: 20px;
+    }
+
+    &__self-check-status-indicator {
+        width: 16px;
+        height: 16px;
+        border-radius: 4px;
+        margin-right: 4px;
+
+        &_good,
+        &_green {
+            background-color: var(--yc-color-base-positive-heavy);
+        }
+        &_degraded,
+        &_yellow {
+            background-color: var(--yc-color-base-warning-heavy);
+        }
+
+        &_blue {
+            background-color: var(--yc-color-base-info-heavy);
+        }
+
+        &_emergency,
+        &_red {
+            background: var(--yc-color-base-danger-heavy);
+        }
+        &_unspecified,
+        &_gray,
+        &_grey {
+            background: var(--yc-color-text-complementary);
+        }
+        &_maintenance_required,
+        &_orange {
+            background: var(--yc-color-text-warning-heavy);
+        }
+    }
+}

package/dist/containers/Tenant/Healthcheck/IssuesViewer/IssueViewer.scss

@@ -0,0 +1,164 @@
+@import '../../../../styles/mixins.scss';
+
+.issue {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    cursor: pointer;
+
+    margin-left: 36px;
+    .km-tree-view__arrow-icon + & {
+        margin-left: 0;
+    }
+
+    &_active {
+        background: var(--yc-color-base-info);
+        border-radius: 4px;
+    }
+
+    &__wpapper {
+        & .km-tree-view__node-wrapper {
+            height: 40px;
+
+            & .km-tree-view__arrow-icon {
+                display: flex;
+                align-items: center;
+                margin: 0;
+                width: 36px;
+                height: 36px;
+            }
+        }
+
+        & .tree-view_item {
+            margin: 0;
+        }
+    }
+
+    &__field {
+        padding: 0 10px;
+
+        &_status {
+            display: flex;
+            white-space: nowrap;
+            min-width: 470px;
+        }
+        &_type {
+            min-width: 160px;
+        }
+        &_additional {
+            color: var(--yc-color-text-link);
+            width: max-content;
+            cursor: pointer;
+
+            &:hover {
+                color: var(--yc-color-text-link-hover);
+            }
+        }
+        &_message {
+            width: 300px;
+            overflow: hidden;
+            white-space: normal;
+        }
+    }
+
+    &__field-tooltip {
+        &#{&} {
+            min-width: 500px;
+            max-width: 500px;
+        }
+    }
+
+    &__field-label {
+        color: var(--yc-color-text-secondary);
+    }
+}
+
+.indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 4px;
+    margin-right: 4px;
+
+    &_good,
+    &_green {
+        background-color: var(--yc-color-base-positive-heavy);
+    }
+    &_degraded,
+    &_yellow {
+        background-color: var(--yc-color-base-warning-heavy);
+    }
+
+    &_blue {
+        background-color: var(--yc-color-base-info-heavy);
+    }
+
+    &_emergency,
+    &_red {
+        background: var(--yc-color-base-danger-heavy);
+    }
+    &_unspecified,
+    &_gray,
+    &_grey {
+        background: var(--yc-color-text-complementary);
+    }
+    &_maintenance_required,
+    &_orange {
+        background: var(--yc-color-text-warning-heavy);
+    }
+}
+
+.issue-viewer {
+    display: flex;
+
+    &__tree {
+        padding-right: 20px;
+    }
+
+    &__checkbox {
+        margin: 5px 0 10px 0;
+    }
+
+    &__info-panel {
+        position: sticky;
+        top: 20px;
+        padding: 5px 20px 20px;
+        height: 100%;
+        width: 500px;
+        background: var(--yc-color-base-generic);
+        border-radius: 4px;
+    }
+
+    &__inspector {
+        @include json-tree-styles();
+
+        :not(.json-inspector__leaf_expanded).json-inspector__leaf_composite:before {
+            content: '';
+        }
+        .json-inspector__leaf_expanded.json-inspector__leaf_composite:before {
+            content: '';
+        }
+
+        & .json-inspector {
+            &__line:hover:after {
+                background: transparent;
+            }
+            &__show-original:hover:after,
+            &__show-original:hover:before {
+                color: transparent;
+            }
+
+            &__value_helper {
+                display: none;
+            }
+
+            &__value {
+                overflow: hidden;
+                word-break: break-all;
+
+                & > span {
+                    user-select: all;
+                }
+            }
+        }
+    }
+}