ydb-embedded-ui 0.1.0

package/dist/containers/Tenant/QueryEditor/SavedQueries/SavedQueries.js

@@ -0,0 +1,156 @@
+import React, {useRef, useState} from 'react';
+import _ from 'lodash';
+import cn from 'bem-cn-lite';
+import {Dialog, Popup, Button} from '@yandex-cloud/uikit';
+
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import Icon from '../../../../components/Icon/Icon';
+import './SavedQueries.scss';
+
+const b = cn('saved-queries');
+
+const MAX_QUERY_HEIGHT = 3;
+
+function SavedQueries({savedQueries, changeUserInput, onDeleteQuery, setQueryNameToEdit}) {
+    const [isSavedQueriesVisible, setIsSavedQueriesVisible] = useState(false);
+    const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
+    const [queryNameToDelete, setQueryNameToDelete] = useState(null);
+
+    const [popupForceRender, setPopupForceRender] = useState(null);
+    const anchor = useRef(null);
+
+    const onShowSavedQueriesClick = () => {
+        setIsSavedQueriesVisible(true);
+    };
+
+    const onCloseSavedQueries = () => {
+        setIsSavedQueriesVisible(false);
+    };
+
+    const onSavedQueryClick = (queryText, queryName) => {
+        return () => {
+            changeUserInput({input: queryText});
+            setQueryNameToEdit(queryName);
+            setIsSavedQueriesVisible(false);
+        };
+    };
+
+    const onDeleteQueryClick = (queryName) => {
+        return (event) => {
+            event.stopPropagation();
+            setIsDeleteDialogVisible(true);
+            setQueryNameToDelete(queryName);
+        };
+    };
+
+    const closeDeleteDialog = () => {
+        setIsDeleteDialogVisible(false);
+        setQueryNameToDelete(null);
+    };
+
+    const onClickCancelDelete = (e) => {
+        e.stopPropagation();
+        closeDeleteDialog();
+    };
+
+    const onConfirmDeleteClick = (e) => {
+        e.stopPropagation();
+        onDeleteQuery(queryNameToDelete);
+        closeDeleteDialog();
+        setPopupForceRender(queryNameToDelete);
+    };
+
+    const renderDialog = () => {
+        return (
+            <Dialog
+                open={isDeleteDialogVisible}
+                hasCloseButton={false}
+                size="s"
+                onClose={onClickCancelDelete}
+            >
+                <Dialog.Header caption="Delete query" />
+                <Dialog.Body className={b('dialog-body')}>
+                    Are you sure you want to delete query
+                    <span className={b('dialog-query-name')}>{` ${queryNameToDelete}?`}</span>
+                </Dialog.Body>
+                <Dialog.Footer
+                    textButtonApply="Delete"
+                    textButtonCancel="Cancel"
+                    onClickButtonCancel={onClickCancelDelete}
+                    onClickButtonApply={onConfirmDeleteClick}
+                />
+            </Dialog>
+        );
+    };
+    const renderSavedQueries = () => {
+        return (
+            <Popup
+                key={popupForceRender}
+                className={b('popup-wrapper')}
+                anchorRef={anchor}
+                open={isSavedQueriesVisible}
+                placement={['top']}
+                onClose={onCloseSavedQueries}
+            >
+                <div className={b()}>
+                    <div className={b('saved-queries-row', {header: true})}>
+                        <div className={b('query-name')}>Name</div>
+                        <div className={b('query-body', {header: true})}>
+                            <span>QueryText</span>
+                        </div>
+                    </div>
+                    <div>
+                        {_.sortBy(savedQueries, (query) => query.name.toLowerCase()).map(
+                            (query) => {
+                                return (
+                                    <div
+                                        className={b('saved-queries-row')}
+                                        onClick={onSavedQueryClick(query.body, query.name)}
+                                        key={query.name}
+                                    >
+                                        <div className={b('query-name')}>{query.name}</div>
+                                        <div className={b('query-body')}>
+                                            <TruncatedQuery
+                                                value={query.body}
+                                                maxQueryHeight={MAX_QUERY_HEIGHT}
+                                            />
+                                        </div>
+                                        <div className={b('query-controls')}>
+                                            <Icon
+                                                name="pencil"
+                                                viewBox="0 0 24 24"
+                                                height={14}
+                                                width={14}
+                                                className={b('control-button')}
+                                            />
+                                            <Icon
+                                                name="trash"
+                                                viewBox="0 0 24 24"
+                                                height={14}
+                                                width={14}
+                                                className={b('control-button')}
+                                                onClick={onDeleteQueryClick(query.name)}
+                                            />
+                                        </div>
+                                    </div>
+                                );
+                            },
+                        )}
+                    </div>
+                </div>
+            </Popup>
+        );
+    };
+
+    return (
+        <React.Fragment>
+            <Button ref={anchor} onClick={onShowSavedQueriesClick}>
+                Saved queries
+            </Button>
+            {isSavedQueriesVisible && renderSavedQueries()}
+            {isDeleteDialogVisible && queryNameToDelete && renderDialog()}
+        </React.Fragment>
+    );
+}
+
+export default SavedQueries;

package/dist/containers/Tenant/QueryEditor/SavedQueries/SavedQueries.scss

@@ -0,0 +1,82 @@
+$popup-width: 700px;
+
+.saved-queries {
+    $block: &;
+    padding: 12px 16px 12px;
+    &__popup-wrapper {
+        border-radius: 4px;
+        width: $popup-width;
+        max-width: $popup-width !important;
+        // max-height: 70vh;
+        overflow: hidden;
+        :nth-child(2) {
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+
+        &::before {
+            border-radius: 4px;
+            width: $popup-width;
+        }
+    }
+    &__saved-queries-row {
+        display: flex;
+        align-items: center;
+        padding: 8px 5px;
+        border-bottom: 1px solid var(--yc-color-line-generic);
+        &:hover {
+            color: var(--yc-color-text-link-hover);
+            background: var(--yc-color-base-simple-hover);
+            cursor: pointer;
+            #{$block}__query-controls {
+                display: flex;
+            }
+        }
+        &_header {
+            font-weight: 500;
+            &:hover {
+                color: var(--yc-color-text-primary);
+                background: var(--yc-color-base-background);
+                cursor: auto;
+            }
+        }
+    }
+    &__query-name {
+        margin-right: 8px;
+        flex-basis: 90px;
+        max-width: 90px;
+        flex-shrink: 0;
+        flex-grow: 0;
+        white-space: pre-wrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: 500;
+    }
+    &__query-body {
+        flex-grow: 1;
+        white-space: pre;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 75%;
+        &_header {
+            display: flex;
+            justify-content: center;
+        }
+    }
+    &__query-controls {
+        display: none;
+    }
+    &__control-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        color: var(--yc-color-text-hint);
+        &:hover {
+            color: var(--yc-color-text-secondary);
+        }
+    }
+    &__dialog-query-name {
+        font-weight: 500;
+    }
+}

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

@@ -0,0 +1,149 @@
+import {useEffect, useMemo} from 'react';
+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 Icon from '../../../../components/Icon/Icon';
+
+import {AutoFetcher} from '../../../Cluster/Cluster';
+import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
+
+import './HotKeys.scss';
+
+const b = cn('hot-keys');
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+    syncHeadOnResize: true,
+    stickyHead: DataTable.MOVING,
+    stickyTop: 0,
+};
+
+const tableColumnsIds = {
+    accessSample: 'accessSample',
+    keyValues: 'keyValues',
+};
+
+const autofetcher = new AutoFetcher();
+
+function HotKeys({
+    getHotKeys,
+    currentSchemaPath,
+    loading,
+    wasLoaded,
+    error,
+    data,
+    autorefresh,
+    setHotKeysOptions,
+    currentSchema,
+}) {
+    useEffect(() => {
+        getHotKeys(currentSchemaPath);
+        if (autorefresh) {
+            autofetcher.start();
+            autofetcher.fetch(() => getHotKeys(currentSchemaPath));
+        } else {
+            autofetcher.stop();
+        }
+        return () => {
+            autofetcher.stop();
+        };
+    }, [autorefresh]);
+
+    useEffect(() => {
+        getHotKeys(currentSchemaPath);
+        setHotKeysOptions({
+            wasLoaded: false,
+            data: undefined,
+        });
+    }, [currentSchemaPath]);
+
+    const renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="l" />
+            </div>
+        );
+    };
+
+    const tableColumns = useMemo(() => {
+        const keyColumnsIds = currentSchema?.PathDescription?.Table?.KeyColumnNames;
+
+        return [
+            {
+                name: tableColumnsIds.accessSample,
+                header: 'Samples',
+                sortable: false,
+                align: DataTable.RIGHT,
+            },
+            ...keyColumnsIds?.map((col, index) => ({
+                name: col,
+                header: (
+                    <div className={b('primary-key-column')}>
+                        <Icon name="key" viewBox="0 0 12 7" width={12} height={7} />
+                        {col}
+                    </div>
+                ),
+                render: ({row}) => row[tableColumnsIds.keyValues][index],
+                align: DataTable.RIGHT,
+                sortable: false,
+            })),
+        ];
+    }, [currentSchema]);
+
+    const renderStub = () => {
+        return <div className={b('stub')}>Cluster version does not support hot keys viewing</div>;
+    };
+
+    const renderContent = () => {
+        if (error) {
+            return error.data;
+        }
+        return data !== null ? (
+            <div className={b('table-content')}>
+                <DataTable
+                    columns={tableColumns}
+                    data={data}
+                    settings={TABLE_SETTINGS}
+                    theme="internal"
+                    initialSortOrder={{
+                        columnId: tableColumnsIds.accessSample,
+                        order: DataTable.DESCENDING,
+                    }}
+                />
+            </div>
+        ) : (
+            <div className={b('stub')}>No information about hot keys</div>
+        );
+    };
+
+    return !loading && data === undefined ? (
+        renderStub()
+    ) : (
+        <div className={b()}>{loading && !wasLoaded ? renderLoader() : renderContent()}</div>
+    );
+}
+
+const mapStateToProps = (state) => {
+    const {loading, data, error, wasLoaded} = state.hotKeys;
+    const {currentSchema = {}} = state.schema;
+    const {Path} = currentSchema;
+    const {autorefresh} = state.schema;
+    return {
+        loading,
+        data,
+        error,
+        currentSchemaPath: Path,
+        autorefresh,
+        wasLoaded,
+        currentSchema,
+    };
+};
+
+const mapDispatchToProps = {
+    getHotKeys,
+    setHotKeysOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(HotKeys);

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

@@ -0,0 +1,48 @@
+@import '../../../../styles/mixins.scss';
+
+.hot-keys {
+    display: flex;
+    overflow: auto;
+    align-items: flex-start;
+    flex-direction: column;
+    flex-grow: 1;
+
+    max-height: 100%;
+
+    background-color: var(--yc-color-base-background);
+
+    &__table-content {
+        overflow: auto;
+        height: 100%;
+        width: 100%;
+        @include freeze-nth-column(1);
+    }
+
+    &__header {
+        position: sticky;
+        z-index: 2;
+        top: 0px;
+        left: 0;
+
+        width: 100%;
+        padding: 10px 0;
+
+        background-color: var(--yc-color-base-background);
+    }
+    &__loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+    }
+    &__stub {
+        margin: 10px;
+    }
+    &__primary-key-column {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+}

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import './Info.scss';
+
+import SchemaInfoViewer from '../../../Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer';
+import SchemaViewer from '../../../Tenant/Schema/SchemaViewer/SchemaViewer';
+import {OLAP_TABLE_TYPE} from '../SchemaMain/SchemaMain';
+
+const b = cn('schema-info');
+
+function prepareOlapTableSchema(tableSchema) {
+    const {Name, Schema = {}} = tableSchema;
+    const {Columns, KeyColumnNames} = Schema;
+    const KeyColumnIds = KeyColumnNames?.map((name) => {
+        const column = Columns?.find((el) => el.Name === name);
+        return column.Id;
+    });
+
+    return {
+        Columns,
+        KeyColumnNames,
+        Name,
+        KeyColumnIds,
+    };
+}
+
+function prepareOlapTableGeneral(tableData, olapStats) {
+    const {ColumnShardCount} = tableData;
+    const Bytes = olapStats?.reduce((acc, el) => {
+        acc += parseInt(el.Bytes) ?? 0;
+        return acc;
+    }, 0);
+    const Rows = olapStats?.reduce((acc, el) => {
+        acc += parseInt(el.Rows) ?? 0;
+        return acc;
+    }, 0);
+    const tabletIds = olapStats?.reduce((acc, el) => {
+        acc.add(el.TabletId);
+        return acc;
+    }, new Set());
+
+    return {
+        PathDescription: {
+            TableStats: {
+                ColumnShardCount,
+                Bytes: Bytes?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
+                Rows: Rows?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
+                Parts: tabletIds?.size ?? 0,
+            },
+        },
+    };
+}
+
+class Info extends React.Component {
+    static propTypes = {
+        fullPath: PropTypes.string,
+        currentItem: PropTypes.string,
+        tableSchema: PropTypes.object,
+        olapStats: PropTypes.array,
+        type: PropTypes.string,
+    };
+    render() {
+        const {currentItem, tableSchema, olapStats} = this.props;
+        const fullPath = currentItem.Path;
+
+        const schema =
+            this.props.type === OLAP_TABLE_TYPE ? prepareOlapTableSchema(tableSchema) : tableSchema;
+
+        const data =
+            this.props.type === OLAP_TABLE_TYPE
+                ? prepareOlapTableGeneral(tableSchema, olapStats)
+                : currentItem;
+
+        return (
+            <div className={b()}>
+                <SchemaInfoViewer fullPath={fullPath} data={data} />
+                {schema && <SchemaViewer data={schema} />}
+            </div>
+        );
+    }
+}
+
+export default Info;

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

@@ -0,0 +1,3 @@
+.schema-info {
+    display: flex;
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import './SchemaInfoViewer.scss';
+
+import {formatCPU, formatBytes} from '../../../../utils';
+
+import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
+
+const b = cn('schema-viewer');
+
+class SchemaInfoViewer extends React.Component {
+    static propTypes = {
+        data: PropTypes.object.isRequired,
+    };
+    formatTabletMetricsValue = (key, value) => {
+        if (key === 'CPU') {
+            return formatCPU(value);
+        } else if (key === 'Memory' || key === 'Storage') {
+            return formatBytes(value);
+        } else {
+            return value;
+        }
+    };
+    render() {
+        const {data} = this.props;
+
+        if (data) {
+            const {TableStats = {}, TabletMetrics = {}} = data.PathDescription;
+            const tableStatsInfo =
+                TableStats &&
+                Object.keys(TableStats).map((key) => ({
+                    label: key,
+                    value: TableStats[key].toString(),
+                }));
+
+            const tabletMetricsInfo =
+                TableStats &&
+                Object.keys(TabletMetrics).map((key) => ({
+                    label: key,
+                    value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
+                }));
+
+            let generalInfo = Object.assign(tableStatsInfo, tabletMetricsInfo);
+            generalInfo = Object.assign(generalInfo);
+
+            const infoLength = Object.keys(generalInfo).length;
+
+            return (
+                <div className={b()}>
+                    <div className={b('item')}>
+                        {Boolean(infoLength) && (
+                            <>
+                                <div className={b('title')}>General</div>
+                                <InfoViewer info={generalInfo}></InfoViewer>
+                            </>
+                        )}
+                    </div>
+                </div>
+            );
+        } else {
+            return <div className="error">no schema data</div>;
+        }
+    }
+}
+
+export default SchemaInfoViewer;

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

@@ -0,0 +1,21 @@
+.schema-viewer {
+    padding: 20px;
+    overflow: auto;
+
+    &__item {
+        margin-bottom: 20px;
+
+        .info-viewer__items {
+            grid-template-columns: minmax(max-content, 280px);
+        }
+    }
+
+    &__title {
+        margin: 0;
+        color: var(--yc-color-text-primary);
+        font-size: var(--yc-text-body2-font-size);
+        font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
+        margin-bottom: 15px;
+    }
+}