ydb-embedded-ui 0.1.0

package/dist/containers/Tenant/Network/NodeNetwork/NodeNetwork.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import './NodeNetwork.scss';
+const b = cn('node-network');
+
+const getNodeModifier = (connected, capacity) => {
+    const percents = Math.floor((connected / capacity) * 100);
+    if (percents === 100) {
+        return 'green';
+    } else if (percents >= 70) {
+        return 'yellow';
+    } else if (percents >= 1) {
+        return 'red';
+    } else {
+        return 'gray';
+    }
+};
+
+export class NodeNetwork extends React.Component {
+    static propTypes = {
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        nodeId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        connected: PropTypes.number,
+        capacity: PropTypes.number,
+        rack: PropTypes.string,
+        status: PropTypes.string,
+        onClick: PropTypes.func,
+        showID: PropTypes.bool,
+        isBlurred: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        onMouseEnter: () => {},
+        onMouseLeave: () => {},
+        onClick: () => {},
+    };
+
+    node = React.createRef();
+
+    _onNodeHover = () => {
+        const {onMouseEnter, nodeId, connected, capacity, rack} = this.props;
+        const popupData = {nodeId, connected, capacity, rack};
+        onMouseEnter(this.node.current, popupData, 'node');
+    };
+    _onNodeLeave = () => {
+        this.props.onMouseLeave();
+    };
+
+    render() {
+        const {nodeId, connected, capacity, status, onClick, showID, isBlurred} = this.props;
+        return (
+            <div
+                ref={this.node}
+                className={b({
+                    [status?.toLowerCase() || getNodeModifier(connected, capacity)]: true,
+                    id: showID,
+                    blur: isBlurred,
+                })}
+                onMouseEnter={this._onNodeHover}
+                onMouseLeave={this._onNodeLeave}
+                onClick={() => onClick(nodeId)}
+            >
+                {showID && nodeId}
+            </div>
+        );
+    }
+}
+
+export default NodeNetwork;

package/dist/containers/Tenant/Network/NodeNetwork/NodeNetwork.scss

@@ -0,0 +1,52 @@
+.node-network {
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    padding: 0 5px;
+    display: inline-block;
+    border-radius: 4px;
+    text-align: center;
+    color: var(--yc-color-text-complementary);
+    text-transform: uppercase;
+    font-size: 12px;
+    line-height: 14px;
+    cursor: pointer;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    border: 1px solid transparent;
+
+    &_id {
+        width: 42px;
+        height: 14px;
+    }
+
+    &_blur {
+        opacity: 0.25;
+    }
+
+    &_gray {
+        background: var(--yc-color-text-secondary);
+    }
+
+    &_black {
+        background-color: var(--yc-color-text-primary);
+        color: var(--yc-color-text-light-primary);
+    }
+
+    &_green {
+        background-color: var(--yc-color-base-positive-heavy);
+    }
+
+    &_yellow {
+        background-color: var(--yc-color-base-warning-heavy);
+    }
+
+    &_red {
+        background-color: var(--yc-color-text-yandex-red);
+    }
+
+    &:hover {
+        border: 1px solid var(--yc-color-text-primary);
+    }
+}

package/dist/containers/Tenant/Preview/Preview.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import DataTable from '@yandex-cloud/react-data-table';
+import {Loader} from '@yandex-cloud/uikit';
+
+import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
+import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
+import {prepareQueryResponse} from '../../../utils/index';
+
+import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Schema/SchemaMain/SchemaMain';
+import {AutoFetcher} from '../../Cluster/Cluster';
+
+import './Preview.scss';
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+    syncHeadOnResize: true,
+    stickyHead: DataTable.MOVING,
+};
+
+const b = cn('kv-preview');
+
+class Preview extends React.Component {
+    static propTypes = {
+        sendQuery: PropTypes.func,
+        database: PropTypes.string,
+        table: PropTypes.string,
+        error: PropTypes.string,
+        data: PropTypes.array,
+        loading: PropTypes.bool,
+        type: PropTypes.string,
+        showTooltip: PropTypes.func,
+        hideTooltip: PropTypes.func,
+        partCount: PropTypes.string,
+    };
+
+    autofetcher;
+
+    componentDidMount() {
+        this.sendQueryForPreview();
+        this.autofetcher = new AutoFetcher();
+        if (this.props.autorefresh) {
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.sendQueryForPreview());
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const {table, hideTooltip, autorefresh, setQueryOptions} = this.props;
+
+        if (prevProps.table !== table) {
+            this.sendQueryForPreview();
+            hideTooltip();
+            setQueryOptions({
+                wasLoaded: false,
+                data: undefined,
+            });
+        }
+
+        if (autorefresh && !prevProps.autorefresh) {
+            this.sendQueryForPreview();
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.sendQueryForPreview());
+        }
+        if (!autorefresh && prevProps.autorefresh) {
+            this.autofetcher.stop();
+        }
+    }
+
+    componentWillUnmount() {
+        this.autofetcher.stop();
+    }
+
+    sendQueryForPreview = () => {
+        const {sendQuery, database, table, type} = this.props;
+
+        if (type !== TABLE_TYPE && type !== OLAP_TABLE_TYPE) {
+            return;
+        }
+
+        const query = `--!syntax_v1\nselect * from \`${table}\` limit 32`;
+        sendQuery({
+            query,
+            database: database,
+            action: 'execute-scan',
+            path: table,
+        });
+    };
+
+    renderTable = () => {
+        const {data, showTooltip} = this.props;
+
+        let columns = [];
+        if (data && data.length > 0) {
+            columns = Object.keys(data[0]).map((key) => ({
+                name: key,
+                render: ({value}) => {
+                    return (
+                        <span
+                            className={b('cell')}
+                            onClick={(e) => showTooltip(e.target, value, 'cell')}
+                        >
+                            {value}
+                        </span>
+                    );
+                },
+            }));
+        }
+
+        const preparedData = prepareQueryResponse(data);
+
+        return <DataTable columns={columns} data={preparedData} settings={TABLE_SETTINGS} />;
+    };
+
+    render() {
+        const {error, loading, data = [], type, wasLoaded} = this.props;
+
+        if (type !== TABLE_TYPE && type !== OLAP_TABLE_TYPE) {
+            return <div className={b('message-container')}>Not available</div>;
+        }
+
+        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.length === 0) {
+            return <div className={b('message-container')}>Table is empty</div>;
+        }
+
+        return (
+            <div className={b()}>
+                <div className={b('result')}>{this.renderTable()}</div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {data = [], loading, error, wasLoaded} = state.preview;
+    const {autorefresh} = state.schema;
+
+    return {
+        data,
+        loading,
+        error,
+        autorefresh,
+        wasLoaded,
+    };
+};
+
+const mapDispatchToProps = {
+    sendQuery,
+    showTooltip,
+    hideTooltip,
+    setQueryOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Preview);

package/dist/containers/Tenant/Preview/Preview.scss

@@ -0,0 +1,20 @@
+@import '../../../styles/mixins.scss';
+
+.kv-preview {
+    &__message-container {
+        padding: 15px 0;
+    }
+
+    &__loader-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    @include query-data-table;
+
+    &__cell {
+        @include cell-container;
+    }
+}