ydb-embedded-ui 0.1.0

package/dist/containers/Tenant/Schema/SchemaNode/SchemaNode.scss

@@ -0,0 +1,41 @@
+.schema-node {
+    display: flex;
+    align-items: center;
+
+    .tree-view_item {
+        padding: 5px 0;
+        margin: 0;
+        flex-wrap: wrap;
+    }
+
+    .tree-view_children {
+        padding-left: 15px;
+        margin: 0;
+    }
+
+    &__label {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        cursor: pointer;
+        padding: 0 5px;
+        border-radius: 3px;
+        height: 20px;
+
+        &:hover {
+            background-color: var(--yc-color-base-info-hover);
+        }
+    }
+
+    &_active > .tree-view > .tree-view_item &__label {
+        background-color: var(--yc-color-base-info);
+    }
+
+    &__name {
+        display: inline;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        margin-left: 6px;
+    }
+}

package/dist/containers/Tenant/Schema/SchemaPages.js

@@ -0,0 +1,56 @@
+export const QUERY = 'Query';
+export const INFO = 'Info';
+export const PREVIEW = 'Preview';
+export const TABLETS = 'Tablets';
+export const GRAPH = 'Graph';
+export const DESCRIBE = 'Describe';
+export const ACL = 'ACL';
+export const TOP_QUERIES = 'Top queries';
+export const TOP_SHARDS = 'Top shards';
+export const HOT_KEYS = 'Hot keys';
+
+export const GENERAL_SCHEMA_PAGES = [
+    {
+        id: INFO,
+        name: 'Info',
+    },
+    {
+        id: PREVIEW,
+        name: 'Preview',
+    },
+    {
+        id: GRAPH,
+        name: 'Graph',
+    },
+    {
+        id: DESCRIBE,
+        name: DESCRIBE,
+    },
+    {
+        id: QUERY,
+        name: 'Query',
+    },
+    {
+        id: TABLETS,
+        name: 'Tablets',
+    },
+    {
+        id: ACL,
+        name: 'ACL',
+    },
+    {
+        id: TOP_QUERIES,
+        name: 'Top queries',
+    },
+    {
+        id: TOP_SHARDS,
+        name: 'Top shards',
+    },
+];
+
+export const TABLE_SCHEMA_PAGES = [
+    {
+        id: HOT_KEYS,
+        name: 'Hot keys',
+    },
+];

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {Loader} from '@yandex-cloud/uikit';
+import {getSchema} from '../../../../store/reducers/schema';
+import './SchemaTree.scss';
+
+import SchemaNode from '../SchemaNode/SchemaNode';
+
+const b = cn('schema');
+
+class SchemaTree extends React.Component {
+    static propTypes = {
+        className: PropTypes.string,
+        loading: PropTypes.bool,
+        error: PropTypes.object,
+        schema: PropTypes.object,
+        wasLoaded: PropTypes.bool,
+        getSchema: PropTypes.func,
+        path: PropTypes.string.isRequired,
+        tenantPath: PropTypes.string,
+    };
+
+    componentDidMount() {
+        const {path: tenantPath, getSchema} = this.props;
+
+        getSchema({path: tenantPath});
+    }
+
+    emptySchema = React.createRef();
+
+    renderLoader() {
+        return (
+            <div className="loader">
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    removeArrow = () => {
+        // А как еще эту задачу решить, кроме как лезть в DOM?
+        const nodeWithArrow =
+            // eslint-disable-next-line react/no-find-dom-node
+            ReactDOM.findDOMNode(this)?.parentNode?.parentNode?.querySelector('.tree-view_arrow');
+        if (nodeWithArrow) {
+            nodeWithArrow.setAttribute('style', 'visibility: hidden');
+        }
+
+        return '';
+    };
+
+    showEmptyNode() {
+        const {tenantPath, schema} = this.props;
+        if (schema.Path === tenantPath) {
+            return 'no data';
+        } else {
+            return String(this.removeArrow());
+        }
+    }
+
+    renderContent = () => {
+        const {schema, path} = this.props;
+        if (schema && schema.Status === 'StatusSuccess') {
+            return (
+                <div className={b()}>
+                    {schema && schema.PathDescription && schema.PathDescription.Children ? (
+                        schema.PathDescription.Children.map((it, key) => (
+                            <SchemaNode key={key} fullPath={path} data={it} />
+                        ))
+                    ) : (
+                        <div ref={this.emptySchema}>{this.showEmptyNode()}</div>
+                    )}
+                </div>
+            );
+        } else {
+            return this.renderLoader();
+        }
+    };
+
+    render() {
+        const {loading, wasLoaded, error, currentSchema: schema} = this.props;
+        if (loading && !wasLoaded) {
+            return this.renderLoader();
+        } else if (
+            (error && !error.isCancelled) ||
+            (schema && schema.Status === 'StatusAccessDenied')
+        ) {
+            return <div>{error?.statusText || 'Access denied'}</div>;
+        } else {
+            return this.renderContent();
+        }
+    }
+}
+
+function mapStateToProps(state, ownProps) {
+    const {data: schema = {}, loading, wasLoaded, error, currentSchema} = state.schema;
+    const tenantPath = state.tenant.tenant.Name;
+    const {path} = ownProps;
+    return {
+        tenantPath,
+        schema: schema[`${path}`],
+        loading,
+        wasLoaded,
+        error,
+        currentSchema,
+    };
+}
+
+const mapDispatchToProps = {
+    getSchema,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SchemaTree);

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.scss

@@ -0,0 +1,13 @@
+@import '../../../../styles/mixins.scss';
+
+.schema {
+    .tree-view_item {
+        padding: 2px 0;
+        margin: 0;
+    }
+
+    .tree-view_children {
+        padding-left: 15px;
+        margin: 0;
+    }
+}

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import './SchemaViewer.scss';
+
+import find from 'lodash/find';
+
+import Icon from '../../../../components/Icon/Icon';
+
+const b = cn('schema-viewer');
+
+class SchemaViewer extends React.Component {
+    static propTypes = {
+        data: PropTypes.arrayOf(PropTypes.object),
+    };
+    render() {
+        const {data = {}} = this.props;
+        const keyColumnsIds = data.KeyColumnIds ?? [];
+        const keyColumns = keyColumnsIds.map((key) => {
+            const keyColumn = find(data.Columns, {Id: key});
+            return keyColumn;
+        });
+        const restColumns = data.Columns?.filter((item) => !keyColumnsIds.includes(item.Id)) ?? [];
+
+        const columns = [...keyColumns, ...restColumns];
+
+        return (
+            <div className={b()}>
+                <div className={b('title')}>Schema</div>
+                {columns.length > 0 ? (
+                    <table className={b('table')}>
+                        {columns.map((info, key) => (
+                            <tr key={key} className={b('row')}>
+                                <td>
+                                    {keyColumnsIds.includes(info.Id) && (
+                                        <div className={b('key-icon')}>
+                                            <Icon
+                                                name="key"
+                                                viewBox="0 0 12 7"
+                                                width={12}
+                                                height={7}
+                                            />
+                                        </div>
+                                    )}
+                                </td>
+                                <td className={b('type')}>
+                                    <span>{info.Type}</span>
+                                </td>
+                                <td className={b('name')}>
+                                    <span>{info.Name}</span>
+                                </td>
+                            </tr>
+                        ))}
+                    </table>
+                ) : (
+                    <div>no schema data</div>
+                )}
+            </div>
+        );
+    }
+}
+
+export default SchemaViewer;

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss

@@ -0,0 +1,28 @@
+.schema-viewer {
+    &__title {
+        font-weight: 500;
+    }
+    &__row {
+        position: relative;
+        margin-bottom: 5px;
+    }
+    &__key-icon {
+        display: flex;
+        align-items: center;
+    }
+    &__table {
+        background: none;
+        text-align: left;
+        margin-top: -6px;
+
+        td {
+            padding: 5px 2px;
+        }
+    }
+    &__type {
+        color: var(--yc-color-text-secondary);
+    }
+    &__name {
+        padding-left: 10px !important;
+    }
+}

package/dist/containers/Tenant/Tenant.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {Link} from 'react-router-dom';
+import cn from 'bem-cn-lite';
+import qs from 'qs';
+
+import {Loader, Tabs} from '@yandex-cloud/uikit';
+
+import TenantOverview from '../../components/TenantOverview/TenantOverview';
+import Storage from '../StorageV2/Storage';
+import Compute from '../Tenant/Compute/Compute';
+import SchemaMain from '../Tenant/Schema/SchemaMain/SchemaMain';
+import Network from '../Tenant/Network/Network';
+import EmptyState from '../../components/EmptyState/EmptyState';
+import {INFO} from './Schema/SchemaPages';
+import Healthcheck from './Healthcheck/Healthcheck';
+import {HEALTHCHECK, STORAGE, COMPUTE, SCHEMA, TENANT_PAGES, NETWORK} from './TenantPages';
+
+import Icon from '../../components/Icon/Icon';
+
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {getTenantInfo, clearTenant} from '../../store/reducers/tenant';
+import routes, {createHref} from '../../routes';
+
+import './Tenant.scss';
+
+const b = cn('tenant-page');
+
+class Tenant extends React.Component {
+    static propTypes = {
+        history: PropTypes.object,
+        name: PropTypes.string,
+        getTenantInfo: PropTypes.func,
+        tenant: PropTypes.object,
+        loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
+        error: PropTypes.bool,
+        clearTenant: PropTypes.func,
+        activeTab: PropTypes.string,
+        systemTablets: PropTypes.array,
+        hideTooltip: PropTypes.func,
+        showTooltip: PropTypes.func,
+        tenantName: PropTypes.string,
+        schemaTab: PropTypes.string,
+        additionalTenantInfo: PropTypes.func,
+        additionalNodesInfo: PropTypes.object,
+        getBackend: PropTypes.func,
+    };
+    componentDidMount() {
+        const {tenantName} = this.props;
+        if (tenantName) {
+            this.props.getTenantInfo({path: tenantName});
+        }
+    }
+    renderLoader() {
+        return (
+            <div className={b('loader')}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+    renderTabs() {
+        const {activeTab, tenantName} = this.props;
+
+        const pages = TENANT_PAGES.map((page) => {
+            return {
+                ...page,
+                path: createHref(routes.tenant, {page: page.id}, {name: tenantName}),
+                title: (
+                    <div className={b('tab-label')}>
+                        {page.icon}
+                        {page.name}
+                    </div>
+                ),
+            };
+        });
+
+        return (
+            <div className={b('tabs')}>
+                <Tabs
+                    items={pages}
+                    activeTab={activeTab}
+                    wrapTo={({path, id}, node) => (
+                        <Link to={path} key={id} className={b('tab')}>
+                            {node}
+                        </Link>
+                    )}
+                    allowNotSelected={true}
+                />
+            </div>
+        );
+    }
+    renderTabContent() {
+        const {activeTab, tenantName, schemaTab, queryParams, getBackend} = this.props;
+
+        switch (activeTab) {
+            case HEALTHCHECK: {
+                return (
+                    <Healthcheck
+                        tenant={tenantName}
+                        hideTooltip={this.props.hideTooltip}
+                        showTooltip={this.props.showTooltip}
+                    />
+                );
+            }
+            case STORAGE: {
+                return (
+                    <div className={b('storage')}>
+                        <Storage tenant={tenantName} />
+                    </div>
+                );
+            }
+            case COMPUTE: {
+                return <Compute additionalNodesInfo={this.props.additionalNodesInfo} />;
+            }
+            case SCHEMA: {
+                return (
+                    <SchemaMain
+                        activeTab={schemaTab}
+                        tenantName={tenantName}
+                        tenantActiveTab={activeTab}
+                        queryParams={queryParams}
+                        getBackend={getBackend}
+                    />
+                );
+            }
+            case NETWORK: {
+                return <Network path={tenantName} />;
+            }
+            default:
+                return false;
+        }
+    }
+    render() {
+        const {tenant, loading, status} = this.props;
+        const {SystemTablets} = tenant;
+        if (status === 403) {
+            return (
+                <EmptyState
+                    title="403 Access denied"
+                    image={
+                        <Icon name="accessDenied" viewBox="0 0 240 240" width={240} height={240} />
+                    }
+                />
+            );
+        }
+
+        return loading ? (
+            this.renderLoader()
+        ) : (
+            <div className={b()}>
+                <div className={b('info')}>
+                    <TenantOverview
+                        systemTablets={SystemTablets}
+                        tenant={tenant}
+                        hideTooltip={this.props.hideTooltip}
+                        showTooltip={this.props.showTooltip}
+                        additionalTenantInfo={this.props.additionalTenantInfo}
+                    />
+                    {this.renderTabs()}
+                </div>
+                <div className={b('content')}>{this.renderTabContent()}</div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state, ownProps) => {
+    const queryParams = qs.parse(ownProps.location.search, {
+        ignoreQueryPrefix: true,
+    });
+    const {name: tenantName, schemaTab = INFO} = queryParams;
+
+    const {tenant = {}, systemTablets = [], loading, data: {status} = {}} = state.tenant;
+    const {page: activeTab} = ownProps.match.params;
+    const {NodeId: currentBackendId} = state.host.data;
+
+    return {
+        activeTab,
+        tenant,
+        systemTablets,
+        tenantName,
+        loading,
+        schemaTab,
+        currentBackendId,
+        status,
+        queryParams,
+    };
+};
+
+const mapDispatchToProps = {
+    getTenantInfo,
+    clearTenant,
+    hideTooltip,
+    showTooltip,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Tenant);

package/dist/containers/Tenant/Tenant.scss

@@ -0,0 +1,94 @@
+@import '../../styles/mixins.scss';
+
+.tenant-page {
+    overflow: auto;
+
+    font-size: var(--yc-text-body2-font-size);
+    line-height: var(--yc-text-body2-line-height);
+
+    .yc-tabs {
+        overflow: initial;
+    }
+
+    &__tab-label {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    &__loader {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        justify-content: center;
+    }
+
+    &__content {
+        overflow: auto;
+        @include flex-container();
+    }
+
+    &__storage {
+        overflow: auto;
+
+        height: 100%;
+
+        padding-left: 20px;
+    }
+
+    &__tabs {
+        padding: 0 15px;
+
+        &_schema {
+            overflow: auto;
+
+            height: 100%;
+            padding: 0;
+            @include flex-container();
+        }
+    }
+
+    &__tab {
+        margin-right: 40px;
+
+        text-decoration: none;
+
+        &:first-letter {
+            text-transform: uppercase;
+        }
+    }
+
+    &__row {
+        display: flex;
+        align-items: flex-start;
+
+        &_schema {
+            height: 100%;
+        }
+
+        &_schema-tags {
+            align-items: center;
+        }
+    }
+
+    &__schema-wrapper {
+        overflow: auto;
+
+        min-width: 300px;
+        height: 100%;
+        padding-top: 15px;
+        padding-left: 8px;
+    }
+
+    &__schema-tabs-wrapper {
+        overflow: auto;
+
+        width: 100%;
+        height: 100%;
+        padding: 15px 0 0 15px;
+
+        border-left: 1px solid rgba(0, 0, 0, 0.07);
+        @include flex-container();
+    }
+    @include flex-container();
+}

package/dist/containers/Tenant/TenantPages.js

@@ -0,0 +1,35 @@
+import Icon from '../../components/Icon/Icon';
+
+export const HEALTHCHECK = 'healthcheck';
+export const STORAGE = 'storage';
+export const COMPUTE = 'compute';
+export const SCHEMA = 'schema';
+export const NETWORK = 'network';
+
+export const TENANT_PAGES = [
+    {
+        id: SCHEMA,
+        name: 'Schema',
+        icon: <Icon name="schema" viewBox="0 0 576 512" />,
+    },
+    {
+        id: STORAGE,
+        name: 'Storage',
+        icon: <Icon name="storage" viewBox="0 0 448 512" />,
+    },
+    {
+        id: COMPUTE,
+        name: 'Compute',
+        icon: <Icon name="compute" viewBox="0 0 384 512" />,
+    },
+    {
+        id: NETWORK,
+        name: 'Network',
+        icon: <Icon name="network" viewBox="0 0 640 512" />,
+    },
+    {
+        id: HEALTHCHECK,
+        name: 'Healthcheck',
+        icon: <Icon name="healthcheck" viewBox="0 0 512 512" />,
+    },
+];