ydb-embedded-ui 0.1.0

package/dist/components/TabletsViewer/TabletsViewer.js

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

@@ -0,0 +1,37 @@
+.tablets-viewer {
+    &__grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 125px);
+        grid-gap: 8px;
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+        margin: 0;
+    }
+
+    &__tablet-label {
+        color: var(--yc-color-text-hint);
+        font-size: var(--yc-text-body-font-size);
+        margin-right: 20px;
+        line-height: 18px;
+        white-space: nowrap;
+        min-width: 60px;
+        text-transform: capitalize;
+
+        .yc-root_theme_dark & {
+            color: var(--yc-color-text-hint);
+        }
+    }
+
+    &__title {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        font-weight: 500;
+        line-height: 20px;
+        font-weight: bold;
+        margin: 0;
+        margin-bottom: 16px;
+    }
+}

package/dist/components/Tag/Tag.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import './Tag.scss';
+
+const b = cn('tag');
+
+export const Tag = ({text, type}) => {
+    return <div className={b({type})}>{text}</div>;
+};
+
+Tag.propTypes = {
+    text: PropTypes.string,
+    type: PropTypes.string,
+};

package/dist/components/Tag/Tag.scss

@@ -0,0 +1,17 @@
+.tag {
+    padding: 2px 5px;
+    text-transform: uppercase;
+    background: var(--yc-color-base-generic);
+    border-radius: 3px;
+    font-size: 12px;
+    color: var(--yc-color-text-primary);
+    margin-right: 5px;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &_type_blue {
+        background-color: var(--yc-color-celestial-thunder);
+    }
+}

package/dist/components/Tags/Tags.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+
+import {Tag} from '../Tag/Tag';
+
+import './Tags.scss';
+
+const b = cn('tags');
+
+class Tags extends React.Component {
+    static propTypes = {
+        className: PropTypes.string,
+        tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+        tagsType: PropTypes.string,
+    };
+
+    static defaultProps = {
+        className: '',
+    };
+
+    render() {
+        const {tags, className, tagsType} = this.props;
+
+        return (
+            <div className={`${b()} ${className}`}>
+                {tags &&
+                    tags.map((tag, tagIndex) => (
+                        <Tag text={tag} key={tagIndex} type={tagsType}></Tag>
+                    ))}
+            </div>
+        );
+    }
+}
+
+export default Tags;

package/dist/components/Tags/Tags.scss

@@ -0,0 +1,5 @@
+.tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}

package/dist/components/TenantOverview/TenantOverview.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+
+import {Collapse} from '../Collapse/Collapse';
+import EntityStatus from '../EntityStatus/EntityStatus';
+import InfoViewer from '../InfoViewer/InfoViewer';
+import PoolUsage from '../PoolUsage/PoolUsage';
+import Tablet from '../Tablet/Tablet';
+import InternalLink from '../InternalLink/InternalLink';
+
+import {TABLET_STATES} from '../../utils/constants';
+import {formatCPU} from '../../utils';
+import {bytesToGB} from '../../utils/utils';
+import routes, {createHref} from '../../routes';
+import {HEALTHCHECK} from '../../containers/Tenant/TenantPages';
+
+import './TenantOverview.scss';
+
+const b = cn('tenant-overview');
+
+const renderName = (tenant) => {
+    if (tenant) {
+        const {Name} = tenant;
+        return (
+            <React.Fragment>
+                <InternalLink to={createHref(routes.tenant, {page: HEALTHCHECK}, {name: Name})}>
+                    <EntityStatus status={tenant.State} />
+                </InternalLink>
+                <span>{Name}</span>
+            </React.Fragment>
+        );
+    }
+
+    return <div>no tenant data</div>;
+};
+
+class TenantOverview extends React.Component {
+    static propTypes = {
+        tenant: PropTypes.object,
+        hideTooltip: PropTypes.func,
+        showTooltip: PropTypes.func,
+        systemTablets: PropTypes.array,
+        additionalTenantInfo: PropTypes.func,
+    };
+
+    onChangeCollapseState = () => {
+        window.dispatchEvent(new Event('resize'));
+    };
+
+    render() {
+        const {tenant, systemTablets, hideTooltip, showTooltip} = this.props;
+        const {
+            Metrics = {},
+            PoolStats,
+            StateStats = [],
+            MemoryUsed,
+            CoresUsed,
+            StorageGroups,
+            StorageAllocatedSize,
+            Type,
+        } = tenant;
+
+        const memoryRaw = MemoryUsed ?? Metrics.Memory;
+
+        const memory = (memoryRaw && bytesToGB(memoryRaw)) || 'no data';
+        const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || 'no data';
+        const storageGroups = StorageGroups ?? 'no data';
+        const blobStorage = (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || 'no data';
+        const storageEfficiency =
+            Metrics.Storage && StorageAllocatedSize
+                ? `${((Metrics.Storage * 100) / StorageAllocatedSize).toFixed(2)}%`
+                : 'no data';
+
+        const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
+
+        const cpu = formatCPU(cpuRaw);
+
+        const metricsInfo = [
+            {label: 'Type', value: Type},
+            {label: 'Memory', value: memory},
+            {label: 'CPU', value: cpu},
+            {label: 'Tablet storage', value: storage},
+            {label: 'Storage groups', value: storageGroups},
+            {label: 'Blob storage', value: blobStorage},
+            {label: 'Storage efficiency', value: storageEfficiency},
+        ];
+
+        const tabletsInfo = StateStats.map((info) => ({
+            label: TABLET_STATES[info.VolatileState],
+            value: info.Count,
+        }));
+
+        const collapseTitle = <span className={b('collapse-title')}>Database info</span>;
+
+        return (
+            <div className={b()}>
+                <div className={b('top')}>
+                    <span className={b('top-label')}>database</span>
+                    {renderName(tenant)}
+                    {this.props.additionalTenantInfo &&
+                        this.props.additionalTenantInfo(
+                            this.props.tenant.Name,
+                            this.props.tenant.Type,
+                        )}
+                    <div className={b('system-tablets')}>
+                        {systemTablets &&
+                            systemTablets.map((tablet, tabletIndex) => (
+                                <Tablet
+                                    onMouseEnter={showTooltip}
+                                    onMouseLeave={hideTooltip}
+                                    key={tabletIndex}
+                                    tablet={tablet}
+                                />
+                            ))}
+                    </div>
+                </div>
+                <Collapse title={collapseTitle} onChange={this.onChangeCollapseState} titleSize="m">
+                    <div className={b('common-info')}>
+                        {PoolStats ? (
+                            <div>
+                                <div className={b('section-title')}>Pools</div>
+                                <div className={b('section', {pools: true})}>
+                                    {PoolStats.map((pool, poolIndex) => (
+                                        <PoolUsage key={poolIndex} data={pool} />
+                                    ))}
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="error">no pools data</div>
+                        )}
+                        <InfoViewer
+                            title="Metrics"
+                            className={b('section', {metrics: true})}
+                            info={metricsInfo}
+                        />
+
+                        <div className={b('section')}>
+                            <InfoViewer info={tabletsInfo} title="Tablets" />
+                        </div>
+                    </div>
+                </Collapse>
+            </div>
+        );
+    }
+}
+
+export default TenantOverview;

package/dist/components/TenantOverview/TenantOverview.scss

@@ -0,0 +1,75 @@
+.tenant-overview {
+    padding: 15px;
+
+    &__top {
+        display: flex;
+        align-items: center;
+
+        margin-bottom: 10px;
+    }
+
+    &__top-label {
+        margin-right: 16px;
+
+        text-transform: uppercase;
+
+        font-size: var(--yc-text-body2-font-size);
+        font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
+    }
+
+    &__common-info {
+        display: flex;
+        align-items: stretch;
+        justify-content: flex-start;
+
+        padding-left: 12px;
+    }
+
+    &__system-tablets {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        margin-left: 15px;
+    }
+
+    &__collapse-title {
+        font-size: var(--yc-text-body2-font-size);
+        font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
+        //text-transform: uppercase;
+    }
+
+    &__section {
+        margin-right: 20px;
+        padding: 0 15px 0 0;
+
+        border-radius: 10px;
+
+        &_metrics {
+            .info-viewer__label {
+                min-width: 150px;
+            }
+            .info-viewer__value {
+                min-width: 100px;
+            }
+        }
+
+        &_pools {
+            display: grid;
+
+            padding: 15px 15px 0 0;
+            grid-template-columns: 110px 110px;
+            grid-gap: 7px 20px;
+        }
+    }
+
+    &__section-title {
+        margin: 0;
+
+        font-size: var(--yc-text-body2-font-size);
+        font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
+    }
+}

package/dist/components/TreeView/TreeView.js

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import TreeViewBase from 'react-treeview';
+import Icon from '../Icon/Icon';
+
+import './TreeView.scss';
+
+const b = cn('km-tree-view');
+
+const TreeView = (props) => {
+    const {
+        children,
+        nodeLabel,
+        onClick,
+        collapsed,
+        clickableLabel = false,
+        className,
+        hasArrow = true,
+        ...rest
+    } = props;
+
+    const newNodeLabel = (
+        <div
+            className={b('node-wrapper', {clickable: clickableLabel})}
+            onClick={clickableLabel ? onClick : undefined}
+        >
+            {hasArrow ? (
+                <span
+                    className={b('arrow-icon', {extended: !collapsed})}
+                    onClick={clickableLabel ? undefined : onClick}
+                >
+                    <Icon name="arrow-right" viewBox="0 0 6 11" width="6" height="11" />
+                </span>
+            ) : null}
+            {nodeLabel}
+        </div>
+    );
+
+    return (
+        <TreeViewBase
+            {...rest}
+            treeViewClassName={b(null, className)}
+            nodeLabel={newNodeLabel}
+            collapsed={collapsed}
+        >
+            {children}
+        </TreeViewBase>
+    );
+};
+
+TreeView.propTypes = {
+    children: PropTypes.any,
+    nodeLabel: PropTypes.node,
+    onClick: PropTypes.func,
+    collapsed: PropTypes.bool,
+    clickableLabel: PropTypes.bool,
+    className: PropTypes.string,
+};
+
+export default TreeView;

package/dist/components/TreeView/TreeView.scss

@@ -0,0 +1,30 @@
+.km-tree-view {
+    & .tree-view_arrow {
+        display: none;
+    }
+
+    &__node-wrapper {
+        display: flex;
+        align-items: center;
+
+        &_clickable {
+            cursor: pointer;
+        }
+    }
+
+    &__arrow-icon {
+        display: flex;
+        justify-content: center;
+        width: 11px;
+        margin-right: 8px;
+        cursor: pointer;
+
+        &_extended {
+            transform: rotate(90deg);
+        }
+
+        & .yc-icon {
+            vertical-align: middle;
+        }
+    }
+}

package/dist/components/TruncatedQuery/TruncatedQuery.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+
+import './TruncatedQuery.scss';
+
+const b = cn('kv-truncated-query');
+
+function TruncatedQuery({value, maxQueryHeight}) {
+    const lines = value.split('\n');
+    const truncated = lines.length > maxQueryHeight;
+
+    if (truncated) {
+        const content = lines.slice(0, maxQueryHeight).join('\n');
+        const message =
+            '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
+        return (
+            <React.Fragment>
+                <span className={b()}>{content}</span>
+                <span className={b({color: 'secondary'})}>{message}</span>
+            </React.Fragment>
+        );
+    }
+    return value;
+}
+
+export default TruncatedQuery;

package/dist/components/TruncatedQuery/TruncatedQuery.scss

@@ -0,0 +1,12 @@
+.kv-truncated-query {
+    word-break: break-word;
+    white-space: pre;
+    vertical-align: top;
+    max-width: 100%;
+
+    &_color {
+        &_secondary {
+            color: var(--yc-color-text-secondary);
+        }
+    }
+}

package/dist/containers/App/App.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {I18N, i18n} from '../../utils/i18n';
+
+import ContentWrapper, {Content} from './Content';
+import AsideNavigation from '../AsideNavigation/AsideNavigation';
+
+import {getUser} from '../../store/reducers/authentication';
+import {registerLanguages} from '../../utils/monaco';
+
+import './App.scss';
+
+registerLanguages();
+
+class App extends React.Component {
+    static propTypes = {
+        isAuthenticated: PropTypes.bool,
+        children: PropTypes.node,
+    };
+
+    constructor(props) {
+        super(props);
+        i18n.setLang(I18N.LANGS.en);
+    }
+
+    componentDidMount() {
+        const {isAuthenticated, getUser} = this.props;
+        if (isAuthenticated) {
+            getUser();
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const {isAuthenticated, getUser, internalUser} = this.props;
+        if (isAuthenticated && (!prevProps.isAuthenticated || !internalUser)) {
+            getUser();
+        }
+    }
+
+    renderContentWithNavigation() {
+        return (
+            <AsideNavigation>
+                <Content singleClusterMode={this.props.singleClusterMode} />
+            </AsideNavigation>
+        );
+    }
+
+    render() {
+        return <ContentWrapper>{this.renderContentWithNavigation()}</ContentWrapper>;
+    }
+}
+
+function mapStateToProps(state) {
+    return {
+        isAuthenticated: state.authentication.isAuthenticated,
+        internalUser: state.authentication.user,
+        singleClusterMode: state.singleClusterMode,
+    };
+}
+
+const mapDispatchToProps = {
+    getUser,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);