ydb-embedded-ui 0.1.0

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

@@ -0,0 +1,71 @@
+@import '../../../styles/mixins.scss';
+
+.query-editor {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: 100%;
+    position: relative;
+
+    & .yc-button__text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__monaco {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    &__monaco-wrapper {
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+    }
+
+    &__pane-wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+    }
+
+    &__controls {
+        display: flex;
+        align-items: flex-end;
+        padding: 10px 0;
+        border-bottom: 1px solid var(--yc-color-line-generic);
+        min-height: 28px;
+
+        & > * {
+            margin-right: 16px;
+        }
+    }
+
+    &__control-run {
+        display: flex;
+        align-items: center;
+    }
+
+    &__run-switcher {
+        margin-left: 1px;
+    }
+
+    &__history-controls {
+        display: flex;
+        align-items: center;
+    }
+
+    &__history-label {
+        margin-right: 8px;
+    }
+
+    @include query-data-table;
+
+    &__cell {
+        @include cell-container;
+    }
+}

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

@@ -0,0 +1,168 @@
+import React, {useEffect, useState, useMemo} from 'react';
+import cn from 'bem-cn-lite';
+import MonacoEditor from 'react-monaco-editor';
+import {Loader, Tabs} from '@yandex-cloud/uikit';
+import JSONTree from 'react-json-inspector';
+import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
+
+import './QueryExplain.scss';
+import {
+    TopologyWrapper,
+    CompactTopologyWrapper,
+    TextOverflow,
+    getYdbPlanNodeShape,
+} from '@yandex-cloud/paranoid';
+import {renderExplainNode} from '../../../../utils';
+import {explainVersions} from '../../../../store/reducers/explainQuery';
+
+const b = cn('kv-query-explain');
+
+const DARK_COLORS = {
+    success: 'rgba(59,201,53,0.75)',
+    error: '#bf3230',
+    warning: '#cc6810',
+    mute: 'rgba(255,255,255,0.15)',
+    stroke: 'rgba(255,255,255,0.17)',
+    fill: '#313037',
+    nodeFill: '#3b3a41',
+    nodeShadow: 'rgba(0,0,0,0.2)',
+    titleColor: 'rgba(255,255,255,0.7)',
+    textColor: 'rgba(255,255,255,0.55)',
+    buttonBorderColor: 'rgba(255,255,255,0.07)',
+};
+
+const EDITOR_OPTIONS = {
+    automaticLayout: true,
+    selectOnLineNumbers: true,
+    readOnly: true,
+    minimap: {
+        enabled: false,
+    },
+    wrappingIndent: 'indent',
+};
+
+const TabsIds = {
+    schema: 'schema',
+    json: 'json',
+    ast: 'ast',
+};
+
+const tabsItems = [
+    {id: TabsIds.schema, title: 'Schema'},
+    {id: TabsIds.json, title: 'JSON'},
+    {id: TabsIds.ast, title: 'AST'},
+];
+
+function QueryExplain(props) {
+    const [activeTab, setActiveTab] = useState(TabsIds.schema);
+
+    const {explain = {}, theme} = props;
+    const {links, nodes, version, graphDepth} = explain;
+
+    const graph = useMemo(() => {
+        if (links && nodes) {
+            if (version === explainVersions.v2) {
+                return (
+                    <TopologyWrapper
+                        data={{links, nodes}}
+                        opts={{
+                            renderNodeTitle: renderExplainNode,
+                            textOverflow: TextOverflow.Normal,
+                            colors: theme === 'dark' ? DARK_COLORS : {},
+                            initialZoomFitsCanvas: true,
+                        }}
+                        shapes={{
+                            node: getYdbPlanNodeShape,
+                        }}
+                    />
+                );
+            } else if (version === explainVersions.v1) {
+                return (
+                    <CompactTopologyWrapper
+                        data={{links, nodes}}
+                        opts={{
+                            renderNodeTitle: renderExplainNode,
+                            textOverflow: TextOverflow.Normal,
+                            colors: theme === 'dark' ? DARK_COLORS : {},
+                            initialZoomFitsCanvas: true,
+                        }}
+                    />
+                );
+            }
+            return 'The explanation format of the query is not supported';
+        }
+        return null;
+    }, [links, nodes, theme, version]);
+
+    useEffect(() => {
+        if (!props.ast && activeTab === TabsIds.ast) {
+            props.astQuery();
+        }
+    }, [activeTab]);
+
+    const onSelectTab = (tabId) => {
+        setActiveTab(tabId);
+    };
+
+    const renderTextExplain = () => {
+        return (
+            <JSONTree
+                data={props.explain?.pristine}
+                isExpanded={() => true}
+                className={b('inspector')}
+                searchOptions={{
+                    debounceTime: 300,
+                }}
+            />
+        );
+    };
+
+    const renderAstExplain = () => {
+        return props.loadingAst ? (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        ) : (
+            <div className={b('ast')}>
+                <MonacoEditor
+                    language={LANGUAGE_S_EXPRESSION_ID}
+                    value={props.ast}
+                    options={EDITOR_OPTIONS}
+                    wrappingIndent="indent"
+                />
+            </div>
+        );
+    };
+
+    const renderGraph = () => {
+        const graphHeight = `${Math.max(graphDepth * 100, 200)}px`;
+        return (
+            <div
+                className={b('explain-canvas-container', {
+                    hidden: activeTab !== TabsIds.schema,
+                })}
+                style={{height: graphHeight, minHeight: graphHeight}}
+            >
+                {graph}
+            </div>
+        );
+    };
+
+    return (
+        <React.Fragment>
+            <div className={b('tabs-wrapper')}>
+                <Tabs
+                    items={tabsItems}
+                    onSelectTab={onSelectTab}
+                    activeTab={activeTab}
+                    className={b('tabs')}
+                />
+            </div>
+            {activeTab === TabsIds.json && renderTextExplain()}
+            {activeTab === TabsIds.ast && renderAstExplain()}
+            {activeTab === TabsIds.schema && renderGraph()}
+        </React.Fragment>
+    );
+}
+
+export default QueryExplain;

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

@@ -0,0 +1,42 @@
+@import '../../../../styles/mixins.scss';
+
+.kv-query-explain {
+    &__tabs {
+        background-color: var(--yc-color-base-background);
+    }
+    &__tabs-wrapper {
+        position: sticky;
+        top: 0;
+        background-color: var(--yc-color-base-background);
+        padding-bottom: 20px;
+        z-index: 2;
+    }
+    &__explain-canvas-container {
+        margin-bottom: 20px;
+        overflow-y: auto;
+        &_hidden {
+            display: none;
+        }
+    }
+    &__inspector {
+        @include json-tree-styles();
+        overflow-y: auto;
+        &
+            .json-inspector__leaf.json-inspector__leaf_root.json-inspector__leaf_expanded.json-inspector__leaf_composite {
+            max-width: calc(100% - 50px);
+        }
+    }
+
+    &__ast {
+        margin: 20px 0;
+        white-space: pre-wrap;
+        height: 100%;
+    }
+    &__loader {
+        width: 100%;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

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

@@ -0,0 +1,58 @@
+import React, {useState} from 'react';
+import cn from 'bem-cn-lite';
+import {Tabs} from '@yandex-cloud/uikit';
+import JSONTree from 'react-json-inspector';
+
+import './QueryResult.scss';
+
+const b = cn('kv-query-result');
+
+const TabsIds = {
+    result: 'result',
+    stats: 'stats',
+};
+
+const tabsItems = [
+    {id: TabsIds.result, title: 'Result'},
+    {id: TabsIds.stats, title: 'Stats'},
+];
+
+function QueryResult(props) {
+    const [activeTab, setActiveTab] = useState(TabsIds.result);
+
+    const onSelectTab = (tabId) => {
+        setActiveTab(tabId);
+    };
+
+    const renderStats = () => {
+        return (
+            <JSONTree
+                data={props.stats}
+                isExpanded={() => true}
+                className={b('inspector')}
+                searchOptions={{
+                    debounceTime: 300,
+                }}
+            />
+        );
+    };
+
+    return (
+        <React.Fragment>
+            {props.stats && (
+                <Tabs
+                    items={tabsItems}
+                    onSelectTab={onSelectTab}
+                    activeTab={activeTab}
+                    className={b('tabs')}
+                />
+            )}
+            <div className={b('result')}>
+                {activeTab === TabsIds.result && props.result}
+                {activeTab === TabsIds.stats && renderStats()}
+            </div>
+        </React.Fragment>
+    );
+}
+
+export default QueryResult;

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

@@ -0,0 +1,24 @@
+@import '../../../../styles/mixins.scss';
+
+.kv-query-result {
+    &__result {
+        overflow: auto;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        & .data-table__table-wrapper {
+            padding-bottom: 0;
+        }
+    }
+    &__tabs {
+        position: sticky;
+        top: 0;
+        background-color: var(--yc-color-base-background);
+        z-index: 2;
+    }
+    &__inspector {
+        @include json-tree-styles();
+        max-width: calc(100% - 50px);
+    }
+}

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

@@ -0,0 +1,171 @@
+import React, {useState, useMemo, useRef} from 'react';
+import _ from 'lodash';
+import cn from 'bem-cn-lite';
+import {useSelector} from 'react-redux';
+import {Dialog, DropdownMenu, Popup, TextInput, Button} from '@yandex-cloud/uikit';
+
+import SavedQueries from '../SavedQueries/SavedQueries';
+import Icon from '../../../../components/Icon/Icon';
+
+import './SaveQuery.scss';
+
+const b = cn('kv-save-query');
+
+const EMBEDDED_VERSION_WARNING =
+    'Please be aware: after cookies delete your saved queries will be lost.';
+
+function SaveQuery({
+    savedQueries,
+    onSaveQuery,
+    saveButtonDisabled,
+    changeUserInput,
+    onDeleteQuery,
+}) {
+    const singleClusterMode = useSelector((state) => state.singleClusterMode);
+    const [isDialogVisible, setIsDialogVisible] = useState(false);
+    const [isEmbeddedWarningVisible, setIsEmbeddedWarningVisible] = useState(false);
+    const [queryName, setQueryName] = useState('');
+    const [validationError, setValidationError] = useState(null);
+    const [queryNameToEdit, setQueryNameToEdit] = useState(null);
+
+    const warningRef = useRef();
+
+    const hasSavedQueries = useMemo(() => savedQueries && savedQueries.length > 0, [savedQueries]);
+
+    const onSaveQueryClick = () => {
+        setIsDialogVisible(true);
+        setQueryNameToEdit(null);
+    };
+
+    const onCloseDialog = () => {
+        setIsDialogVisible(false);
+        setQueryName('');
+        setValidationError(null);
+    };
+
+    const onQueryNameChange = (value) => {
+        setQueryName(value);
+        setValidationError(validateQueryName(value));
+    };
+
+    const onEmbeddedWarningOpen = () => {
+        setIsEmbeddedWarningVisible(true);
+    };
+    const onEmbeddedWarningClose = () => {
+        setIsEmbeddedWarningVisible(false);
+    };
+
+    const validateQueryName = (value) => {
+        if (_.some(savedQueries, (q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
+            return 'This name already exists';
+        }
+        return null;
+    };
+
+    const onSaveClick = () => {
+        if (queryName && !validationError) {
+            onSaveQuery(queryName);
+        }
+        onCloseDialog();
+    };
+
+    const onEditQueryClick = () => {
+        onSaveQuery(queryNameToEdit);
+        setQueryNameToEdit(null);
+    };
+
+    const renderDialog = () => {
+        return (
+            <Dialog open={isDialogVisible} hasCloseButton={false} size="s" onClose={onCloseDialog}>
+                <Dialog.Header caption="Save query" />
+                <Dialog.Body className={b('dialog-body')}>
+                    <span className={b('field-title', 'required')}>Query name</span>
+                    <div className={b('control-wrapper')}>
+                        <TextInput
+                            placeholder="Enter query name"
+                            text={queryName}
+                            onUpdate={onQueryNameChange}
+                            hasClear
+                        />
+                        <span className={b('error')}>{validationError}</span>
+                    </div>
+                </Dialog.Body>
+                <Dialog.Footer
+                    textButtonApply="Save"
+                    textButtonCancel="Cancel"
+                    onClickButtonCancel={onCloseDialog}
+                    onClickButtonApply={onSaveClick}
+                    propsButtonApply={{
+                        disabled: !queryName || Boolean(validationError),
+                    }}
+                />
+            </Dialog>
+        );
+    };
+
+    const renderSaveButton = (onClick) => {
+        return (
+            <Button onClick={onClick} disabled={saveButtonDisabled}>
+                Save query
+            </Button>
+        );
+    };
+
+    const renderSaveDropdownMenu = () => {
+        const items = [
+            {
+                action: onSaveQueryClick,
+                text: 'Save as new',
+            },
+            {
+                action: onEditQueryClick,
+                text: 'Edit existing',
+            },
+        ];
+        return (
+            <DropdownMenu items={items} switcher={renderSaveButton()} popupPlacement={['top']} />
+        );
+    };
+
+    const renderEmbeddedVersionWarning = () => {
+        return (
+            <React.Fragment>
+                <Popup
+                    className={b('embedded-popup')}
+                    anchorRef={warningRef}
+                    placement={['top']}
+                    open={isEmbeddedWarningVisible}
+                    hasArrow
+                >
+                    {EMBEDDED_VERSION_WARNING}
+                </Popup>
+                <div
+                    className={b('embedded-tooltip')}
+                    ref={warningRef}
+                    onMouseEnter={onEmbeddedWarningOpen}
+                    onMouseLeave={onEmbeddedWarningClose}
+                >
+                    <Icon name="question" height={18} width={18} viewBox="0 0 24 24" />
+                </div>
+            </React.Fragment>
+        );
+    };
+
+    return (
+        <React.Fragment>
+            {queryNameToEdit ? renderSaveDropdownMenu() : renderSaveButton(onSaveQueryClick)}
+            {isDialogVisible && renderDialog()}
+            {hasSavedQueries && (
+                <SavedQueries
+                    savedQueries={savedQueries}
+                    changeUserInput={changeUserInput}
+                    onDeleteQuery={onDeleteQuery}
+                    setQueryNameToEdit={setQueryNameToEdit}
+                />
+            )}
+            {singleClusterMode && renderEmbeddedVersionWarning()}
+        </React.Fragment>
+    );
+}
+
+export default SaveQuery;

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

@@ -0,0 +1,51 @@
+@import '../../../../styles/mixins.scss';
+
+.kv-save-query {
+    &__dialog-body {
+        display: flex;
+        align-items: flex-start;
+    }
+    &__field-title {
+        @include body2-typography();
+        line-height: 32px;
+        font-weight: 500;
+        white-space: nowrap;
+        margin-right: 12px;
+        &.required {
+            &::after {
+                content: '*';
+                color: var(--yc-color-text-danger);
+            }
+        }
+    }
+    &__control-wrapper {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    &__error {
+        display: inline-block;
+        height: 17px;
+        color: var(--yc-color-text-danger);
+    }
+    &__embedded-tooltip {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        color: var(--yc-color-text-secondary);
+        margin-left: -10px;
+        &:hover {
+            cursor: pointer;
+            color: var(--yc-color-text-complementary);
+        }
+    }
+
+    &__embedded-popup {
+        padding: 10px;
+        border-radius: 5px;
+        max-width: 150px !important;
+        &::before {
+            border-radius: 5px;
+        }
+    }
+}