ydb-embedded-ui 0.1.0

package/dist/containers/Tenant/TopQueries/TopQueries.js

@@ -0,0 +1,184 @@
+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 DataTable from '@yandex-cloud/react-data-table';
+
+import {changeUserInput} from '../../../store/reducers/executeQuery';
+import {sendQuery, setQueryOptions} from '../../../store/reducers/executeTopQueries';
+import {QUERY} from '../Schema/SchemaPages';
+import TruncatedQuery from '../../../components/TruncatedQuery/TruncatedQuery';
+import {AutoFetcher} from '../../Cluster/Cluster';
+import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../Schema/SchemaMain/SchemaMain';
+
+import './TopQueries.scss';
+
+const b = cn('kv-top-queries');
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+    syncHeadOnResize: true,
+    stickyHead: DataTable.MOVING,
+    highlightRows: true,
+};
+const MAX_QUERY_HEIGHT = 10;
+const COLUMNS = [
+    {
+        name: 'CPUTimeUs',
+        width: 140,
+        sortAccessor: (row) => Number(row['CPUTimeUs']),
+    },
+    {
+        name: 'QueryText',
+        width: 500,
+        sortable: false,
+        // eslint-disable-next-line
+        render: ({value}) => <TruncatedQuery value={value} maxQueryHeight={MAX_QUERY_HEIGHT} />,
+    },
+];
+const getQueryText = (path) => `
+--!syntax_v1
+$last = (
+    SELECT
+        MAX(IntervalEnd)
+    FROM \`${path}/.sys/top_queries_by_cpu_time_one_hour\`
+);
+SELECT
+    CPUTime as CPUTimeUs,
+    QueryText
+FROM \`${path}/.sys/top_queries_by_cpu_time_one_hour\`
+WHERE IntervalEnd IN $last
+`;
+
+class TopQueries extends React.Component {
+    static propTypes = {
+        error: PropTypes.string,
+        sendQuery: PropTypes.func,
+        path: PropTypes.string,
+        data: PropTypes.array,
+        loading: PropTypes.bool,
+        changeSchemaTab: PropTypes.func,
+        currentSchema: PropTypes.object,
+    };
+
+    autofetcher;
+
+    componentDidMount() {
+        this.autofetcher = new AutoFetcher();
+        this.getTopQueries();
+    }
+
+    componentDidUpdate(prevProps) {
+        const {autorefresh, path, setQueryOptions} = this.props;
+
+        if (autorefresh && !prevProps.autorefresh) {
+            this.getTopQueries();
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.getTopQueries());
+        }
+        if (!autorefresh && prevProps.autorefresh) {
+            this.autofetcher.stop();
+        }
+
+        if (path !== prevProps.path) {
+            setQueryOptions({
+                wasLoaded: false,
+                data: undefined,
+            });
+        }
+    }
+
+    componentWillUnmount() {
+        this.autofetcher.stop();
+    }
+
+    getTopQueries() {
+        const {path} = this.props;
+        const query = getQueryText(path);
+        this.props.sendQuery({query, database: path, action: 'execute-scan'});
+    }
+
+    onRowClick = (row) => {
+        const {QueryText: input} = row;
+        const {changeUserInput, changeSchemaTab} = this.props;
+
+        changeUserInput({input});
+        changeSchemaTab(QUERY);
+    };
+
+    renderTable = () => {
+        const {data} = this.props;
+
+        if (!data) {
+            return null;
+        }
+
+        return (
+            <DataTable
+                columns={COLUMNS}
+                data={data}
+                settings={TABLE_SETTINGS}
+                onRowClick={this.onRowClick}
+            />
+        );
+    };
+
+    renderResult = () => {
+        return (
+            <div className={b('table-wrapper')}>
+                <div className={b('table-content')}>{this.renderTable()}</div>
+            </div>
+        );
+    };
+
+    render() {
+        const {error, loading, data, wasLoaded, type} = this.props;
+
+        if (loading && !wasLoaded) {
+            return (
+                <div className={b('loader-container')}>
+                    <Loader size="m" />
+                </div>
+            );
+        }
+
+        let message;
+        if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
+            message = 'No data';
+        } else if (error && !error.isCancelled) {
+            message = (error.data || error).slice(0, 300);
+        } else if (!loading && !data) {
+            message = 'No data';
+        }
+
+        if (message) {
+            return <div className={b('message-container')}>{message}</div>;
+        }
+
+        return (
+            <div className={b()}>
+                <div className={b('result')}>{this.renderResult()}</div>
+            </div>
+        );
+    }
+}
+const mapStateToProps = (state) => {
+    const {loading, data, error, wasLoaded} = state.executeTopQueries;
+    const {autorefresh} = state.schema;
+    return {
+        loading,
+        data,
+        error,
+        wasLoaded,
+        autorefresh,
+    };
+};
+
+const mapDispatchToProps = {
+    sendQuery,
+    changeUserInput,
+    setQueryOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TopQueries);

package/dist/containers/Tenant/TopQueries/TopQueries.scss

@@ -0,0 +1,53 @@
+@import '../../../styles/mixins.scss';
+
+.kv-top-queries {
+    &__message-container {
+        padding: 15px 0;
+    }
+
+    &__loader-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    @include query-data-table;
+
+    &__owner-container {
+        margin: 10px;
+
+        .yc-staff-card {
+            display: inline-block;
+        }
+    }
+
+    &__text {
+        font-size: var(--yc-text-body-font-size);
+        line-height: var(--yc-text-body-line-height);
+        color: var(--yc-color-text-primary);
+
+        &::first-letter {
+            color: var(--yc-color-text-danger);
+        }
+    }
+
+    &__result &__table-content {
+        & .data-table {
+            &,
+            &__table {
+                width: 100%;
+            }
+            &__td {
+                word-break: break-word;
+                white-space: pre;
+                vertical-align: top;
+            }
+
+            &__row {
+                cursor: pointer;
+                max-height: 80px;
+            }
+        }
+    }
+}

package/dist/containers/Tenant/TopShards/TopShards.js

@@ -0,0 +1,171 @@
+import {useContext, useEffect, useMemo} from 'react';
+import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
+import InternalLink from '../../../components/InternalLink/InternalLink';
+import {Loader} from '@yandex-cloud/uikit';
+import DataTable from '@yandex-cloud/react-data-table';
+import routes, {createHref} from '../../../routes';
+
+import {sendShardQuery, setShardQueryOptions} from '../../../store/reducers/shardsWorkload';
+import {setCurrentSchemaPath, getSchema} from '../../../store/reducers/schema';
+import {AutoFetcher} from '../../Cluster/Cluster';
+
+import './TopShards.scss';
+import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../Schema/SchemaMain/SchemaMain';
+import HistoryContext from '../../../contexts/HistoryContext';
+
+const b = cn('top-shards');
+const bLink = cn('yc-link');
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+    syncHeadOnResize: true,
+    stickyHead: DataTable.MOVING,
+};
+
+const tableColumnsNames = {
+    TabletId: 'TabletId',
+    CPUCores: 'CPUCores',
+    Path: 'Path',
+};
+
+const autofetcher = new AutoFetcher();
+
+function prepareCPUWorkloadValue(value) {
+    return `${(value * 100).toFixed(2)}%`;
+}
+
+function TopShards({
+    sendShardQuery,
+    currentSchemaPath,
+    path,
+    loading,
+    data,
+    error,
+    setCurrentSchemaPath,
+    getSchema,
+    autorefresh,
+    wasLoaded,
+    setShardQueryOptions,
+    type,
+}) {
+    useEffect(() => {
+        if (autorefresh) {
+            autofetcher.start();
+            autofetcher.fetch(() => sendShardQuery({database: path, path: currentSchemaPath}));
+        } else {
+            autofetcher.stop();
+        }
+        return () => {
+            autofetcher.stop();
+        };
+    }, [autorefresh]);
+
+    useEffect(() => {
+        sendShardQuery({database: path, path: currentSchemaPath});
+        setShardQueryOptions({
+            wasLoaded: false,
+            data: undefined,
+        });
+    }, [currentSchemaPath]);
+
+    const renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="l" />
+            </div>
+        );
+    };
+
+    const history = useContext(HistoryContext);
+
+    const onSchemaClick = (schemaPath) => {
+        return () => {
+            setCurrentSchemaPath(schemaPath);
+            getSchema({path: schemaPath});
+            history.go(0);
+        };
+    };
+
+    const tableColumns = useMemo(() => {
+        return [
+            {
+                name: tableColumnsNames.Path,
+                // eslint-disable-next-line
+                render: ({value}) => {
+                    return (
+                        <span onClick={onSchemaClick(value)} className={bLink({view: 'normal'})}>
+                            {value}
+                        </span>
+                    );
+                },
+            },
+            {
+                name: tableColumnsNames.CPUCores,
+                // eslint-disable-next-line
+                render: ({value}) => {
+                    return prepareCPUWorkloadValue(value);
+                },
+                align: DataTable.RIGHT,
+            },
+            {
+                name: tableColumnsNames.TabletId,
+                // eslint-disable-next-line
+                render: ({value}) => {
+                    return (
+                        <InternalLink to={createHref(routes.tablet, {id: value})}>
+                            {value}
+                        </InternalLink>
+                    );
+                },
+            },
+        ];
+    }, []);
+
+    const renderContent = () => {
+        if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
+            return <div className={b('no-data')}>No data</div>;
+        }
+        if (error) {
+            return error.data;
+        }
+        return data && data.length > 0 ? (
+            <div className={b('table')}>
+                <DataTable
+                    columns={tableColumns}
+                    data={data}
+                    settings={TABLE_SETTINGS}
+                    className={b('table')}
+                    theme="internal"
+                />
+            </div>
+        ) : (
+            data
+        );
+    };
+
+    return <div className={b()}>{loading && !wasLoaded ? renderLoader() : renderContent()}</div>;
+}
+
+const mapStateToProps = (state) => {
+    const {loading, data, error, wasLoaded} = state.shardsWorkload;
+    const {Path} = state.schema.currentSchema;
+    const {autorefresh} = state.schema;
+    return {
+        loading,
+        data,
+        error,
+        currentSchemaPath: Path,
+        autorefresh,
+        wasLoaded,
+    };
+};
+
+const mapDispatchToProps = {
+    sendShardQuery,
+    setCurrentSchemaPath,
+    getSchema,
+    setShardQueryOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TopShards);

package/dist/containers/Tenant/TopShards/TopShards.scss

@@ -0,0 +1,23 @@
+.top-shards {
+    height: 100%;
+    padding-top: 10px;
+
+    background-color: var(--yc-color-base-background);
+    &__loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        height: 100%;
+    }
+
+    &__table {
+        overflow: auto;
+
+        margin-top: 5px;
+    }
+
+    &__no-data {
+        margin-top: 5px;
+    }
+}