ydb-embedded-ui 0.1.0 → 1.0.1

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

@@ -1,11 +1,15 @@
 @import '../../../styles/mixins.scss';
 
 .query-editor {
+    position: relative;
+
     display: flex;
-    flex-direction: column;
     flex: 1 1 auto;
-    height: 100%;
-    position: relative;
+    flex-direction: column;
+
+    height: calc(100% - 56px);
+
+    @include query-data-table;
 
     & .yc-button__text {
         display: flex;
@@ -14,44 +18,69 @@
     }
 
     &__monaco {
+        position: relative;
+
         display: flex;
+
         width: 100%;
         height: 100%;
-        position: relative;
+        padding-top: 9px;
     }
 
     &__monaco-wrapper {
         width: 100%;
-        height: 100%;
+        height: calc(100% - 49px);
         min-height: 0;
     }
 
     &__pane-wrapper {
+        z-index: 2;
+
         display: flex;
         flex-direction: column;
-        height: 100%;
-        width: 100%;
+
+        background-color: var(--yc-color-base-background);
+    }
+
+    &__upper-controls {
+        position: absolute;
+        top: -38px;
+        right: 16px;
+
+        display: flex;
+        gap: 12px;
+
+        justify-content: flex-end;
+        align-items: center;
     }
 
     &__controls {
         display: flex;
+        flex: 0 0 40px;
         align-items: flex-end;
-        padding: 10px 0;
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        min-height: 28px;
 
-        & > * {
-            margin-right: 16px;
-        }
+        min-height: 40px;
+        padding: 5px 20px;
+
+        border-top: 1px solid var(--yc-color-line-generic);
+        border-bottom: 1px solid var(--yc-color-line-generic);
+        background-color: var(--yc-color-base-background);
+        gap: 12px;
     }
 
     &__control-run {
         display: flex;
         align-items: center;
-    }
+        .yc-select__option-text {
+            display: none;
+        }
 
-    &__run-switcher {
-        margin-left: 1px;
+        .yc-button__text {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+        }
     }
 
     &__history-controls {
@@ -61,9 +90,9 @@
 
     &__history-label {
         margin-right: 8px;
-    }
 
-    @include query-data-table;
+        color: var(--yc-color-text-secondary);
+    }
 
     &__cell {
         @include cell-container;

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

@@ -1,19 +1,27 @@
-import React, {useEffect, useState, useMemo} from 'react';
+import React, {useEffect, useState} from 'react';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
-import {Loader, Tabs} from '@yandex-cloud/uikit';
+import {Loader, RadioButton} 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,
+    getCompactTopology,
+    getTopology,
 } from '@yandex-cloud/paranoid';
 import {renderExplainNode} from '../../../../utils';
 import {explainVersions} from '../../../../store/reducers/explainQuery';
+import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
+import Divider from '../../../../components/Divider/Divider';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+
+import 'react-json-inspector/json-inspector.css';
+import './QueryExplain.scss';
+import {useDispatch, useSelector} from 'react-redux';
+import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
 const b = cn('kv-query-explain');
 
@@ -41,71 +49,98 @@ const EDITOR_OPTIONS = {
     wrappingIndent: 'indent',
 };
 
-const TabsIds = {
+const ExplainOptionIds = {
     schema: 'schema',
     json: 'json',
     ast: 'ast',
 };
 
-const tabsItems = [
-    {id: TabsIds.schema, title: 'Schema'},
-    {id: TabsIds.json, title: 'JSON'},
-    {id: TabsIds.ast, title: 'AST'},
+const explainOptions = [
+    {value: ExplainOptionIds.schema, content: 'Schema'},
+    {value: ExplainOptionIds.json, content: 'JSON'},
+    {value: ExplainOptionIds.ast, content: 'AST'},
 ];
 
+function GraphRoot(props) {
+    let paranoid;
+    useEffect(() => {
+        const {data, opts, shapes, version} = props;
+        if (version === explainVersions.v2) {
+            paranoid = getTopology('graphRoot', props.data, opts, shapes);
+            paranoid.render();
+        } else if (version === explainVersions.v1) {
+            paranoid = getCompactTopology('graphRoot', data, opts);
+            paranoid.renderCompactTopology();
+        }
+    }, []);
+
+    useEffect(() => {
+        const graphRoot = document.getElementById('graphRoot');
+
+        if (!graphRoot) {
+            throw new Error("Can't find element with id #graphRoot");
+        }
+
+        graphRoot.innerHTML = '';
+
+        const {data, opts} = props;
+        paranoid = getCompactTopology('graphRoot', data, opts);
+        paranoid.renderCompactTopology();
+    }, [props.opts.colors]);
+
+    useEffect(() => {
+        paranoid.updateData(props.data);
+    }, [props.data]);
+
+    return <div id="graphRoot" style={{height: '100vh'}} />;
+}
+
 function QueryExplain(props) {
-    const [activeTab, setActiveTab] = useState(TabsIds.schema);
+    const dispatch = useDispatch();
+    const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
+
+    const isFullscreen = useSelector((state) => state.fullscreen);
+
+    useEffect(() => {
+        return () => {
+            dispatch(disableFullscreen());
+        };
+    }, []);
 
     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) {
+        if (!props.ast && activeOption === ExplainOptionIds.ast) {
             props.astQuery();
         }
-    }, [activeTab]);
+    }, [activeOption]);
 
-    const onSelectTab = (tabId) => {
-        setActiveTab(tabId);
+    const onSelectOption = (tabId) => {
+        setActiveOption(tabId);
     };
 
-    const renderTextExplain = () => {
+    const renderLoader = () => {
         return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
+    const renderStub = () => {
+        const {explain} = props;
+        if (!explain) {
+            return 'Explain of query is empty';
+        }
+        if (!explain.nodes.length) {
+            return 'There is no explanation for the request';
+        }
+        return null;
+    };
+
+    const renderTextExplain = () => {
+        const content = (
             <JSONTree
                 data={props.explain?.pristine}
                 isExpanded={() => true}
@@ -115,14 +150,24 @@ function QueryExplain(props) {
                 }}
             />
         );
+        return (
+            <React.Fragment>
+                {content}
+                {renderStub()}
+                {isFullscreen && (
+                    <Fullscreen>
+                        <div className={b('inspector', {fullscreen: true})}>{content}</div>
+                    </Fullscreen>
+                )}
+            </React.Fragment>
+        );
     };
 
     const renderAstExplain = () => {
-        return props.loadingAst ? (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        ) : (
+        if (!props.ast) {
+            return 'There is no AST explanation for the request';
+        }
+        const content = (
             <div className={b('ast')}>
                 <MonacoEditor
                     language={LANGUAGE_S_EXPRESSION_ID}
@@ -132,35 +177,105 @@ function QueryExplain(props) {
                 />
             </div>
         );
+        return (
+            <React.Fragment>
+                {content}
+                {isFullscreen && <Fullscreen>{content}</Fullscreen>}
+            </React.Fragment>
+        );
     };
 
     const renderGraph = () => {
         const graphHeight = `${Math.max(graphDepth * 100, 200)}px`;
+
+        const content =
+            links && nodes && nodes.length ? (
+                <div
+                    className={b('explain-canvas-container', {
+                        hidden: activeOption !== ExplainOptionIds.schema,
+                    })}
+                    style={{
+                        height: isFullscreen ? '100%' : graphHeight,
+                        minHeight: graphHeight,
+                        width: '100%',
+                    }}
+                >
+                    <GraphRoot
+                        version={version}
+                        data={{links, nodes}}
+                        opts={{
+                            renderNodeTitle: renderExplainNode,
+                            textOverflow: TextOverflow.Normal,
+                            colors: theme === 'dark' ? DARK_COLORS : {},
+                            initialZoomFitsCanvas: true,
+                        }}
+                        shapes={{
+                            node: getYdbPlanNodeShape,
+                        }}
+                    />
+                </div>
+            ) : null;
         return (
-            <div
-                className={b('explain-canvas-container', {
-                    hidden: activeTab !== TabsIds.schema,
-                })}
-                style={{height: graphHeight, minHeight: graphHeight}}
-            >
-                {graph}
-            </div>
+            <React.Fragment>
+                {!isFullscreen && content}
+                {isFullscreen && <Fullscreen>{content}</Fullscreen>}
+                {renderStub()}
+            </React.Fragment>
         );
     };
 
+    const renderContent = () => {
+        const {error, loading, loadingAst} = props;
+        if (loading || loadingAst) {
+            return renderLoader();
+        }
+
+        if (error) {
+            return error.data ? error.data : error;
+        }
+
+        switch (activeOption) {
+            case ExplainOptionIds.json: {
+                return renderTextExplain();
+            }
+            case ExplainOptionIds.ast: {
+                return renderAstExplain();
+            }
+            case ExplainOptionIds.schema: {
+                return renderGraph();
+            }
+            default:
+                return null;
+        }
+    };
+
     return (
         <React.Fragment>
-            <div className={b('tabs-wrapper')}>
-                <Tabs
-                    items={tabsItems}
-                    onSelectTab={onSelectTab}
-                    activeTab={activeTab}
-                    className={b('tabs')}
-                />
+            <div className={b('controls')}>
+                <div className={b('controls-right')}>
+                    <QueryExecutionStatus hasError={Boolean(props.error)} />
+                    {!props.error && (
+                        <React.Fragment>
+                            <Divider />
+                            <RadioButton
+                                options={explainOptions}
+                                value={activeOption}
+                                onUpdate={onSelectOption}
+                            />
+                        </React.Fragment>
+                    )}
+                </div>
+                <div className={b('controls-left')}>
+                    <EnableFullscreenButton disabled={Boolean(props.error)} />
+                    <PaneVisibilityToggleButtons
+                        onCollapse={props.onCollapseResults}
+                        onExpand={props.onExpandResults}
+                        isCollapsed={props.isResultsCollapsed}
+                        initialDirection="bottom"
+                    />
+                </div>
             </div>
-            {activeTab === TabsIds.json && renderTextExplain()}
-            {activeTab === TabsIds.ast && renderAstExplain()}
-            {activeTab === TabsIds.schema && renderGraph()}
+            <div className={b('result')}>{renderContent()}</div>
         </React.Fragment>
     );
 }

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

@@ -1,42 +1,78 @@
 @import '../../../../styles/mixins.scss';
 
 .kv-query-explain {
-    &__tabs {
-        background-color: var(--yc-color-base-background);
+    &__result {
+        display: flex;
+        overflow: auto;
+        flex-grow: 1;
+        flex-direction: column;
+
+        margin-top: 20px;
+        padding: 0px 8px;
     }
-    &__tabs-wrapper {
+    &__controls {
         position: sticky;
+        z-index: 2;
         top: 0;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 12px 20px;
+
+        border-bottom: 1px solid var(--yc-color-line-generic);
         background-color: var(--yc-color-base-background);
-        padding-bottom: 20px;
-        z-index: 2;
+    }
+    &__controls-right {
+        display: flex;
+        gap: 12px;
+
+        height: 100%;
+    }
+    &__controls-left {
+        display: flex;
+        gap: 4px;
+        .yc-button__text {
+            margin: 0 6px;
+        }
     }
     &__explain-canvas-container {
-        margin-bottom: 20px;
         overflow-y: auto;
+
+        margin-bottom: 20px;
         &_hidden {
             display: none;
         }
     }
     &__inspector {
-        @include json-tree-styles();
         overflow-y: auto;
+
+        width: 100%;
+        @include json-tree-styles();
         &
             .json-inspector__leaf.json-inspector__leaf_root.json-inspector__leaf_expanded.json-inspector__leaf_composite {
             max-width: calc(100% - 50px);
         }
+
+        &_fullscreen {
+            padding: 10px;
+        }
     }
 
     &__ast {
+        width: 100%;
+        height: 100%;
         margin: 20px 0;
+
         white-space: pre-wrap;
-        height: 100%;
     }
     &__loader {
-        width: 100%;
-        margin-top: 20px;
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
+
+        width: 100%;
+        margin-top: 20px;
     }
 }

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

@@ -1,31 +1,61 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
-import {Tabs} from '@yandex-cloud/uikit';
+import {RadioButton} from '@yandex-cloud/uikit';
 import JSONTree from 'react-json-inspector';
 
+import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
+import Divider from '../../../../components/Divider/Divider';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {disableFullscreen} from '../../../../store/reducers/fullscreen';
+
 import './QueryResult.scss';
+import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
+import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 
 const b = cn('kv-query-result');
 
-const TabsIds = {
+const resultOptionsIds = {
     result: 'result',
     stats: 'stats',
 };
 
-const tabsItems = [
-    {id: TabsIds.result, title: 'Result'},
-    {id: TabsIds.stats, title: 'Stats'},
+const resultOptions = [
+    {value: resultOptionsIds.result, content: 'Result'},
+    {value: resultOptionsIds.stats, content: 'Stats'},
 ];
 
 function QueryResult(props) {
-    const [activeTab, setActiveTab] = useState(TabsIds.result);
+    const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
+    const isFullscreen = useSelector((state) => state.fullscreen);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        return () => {
+            dispatch(disableFullscreen());
+        };
+    }, []);
 
-    const onSelectTab = (tabId) => {
-        setActiveTab(tabId);
+    const onSelectSection = (value) => {
+        setActiveSection(value);
     };
 
-    const renderStats = () => {
+    const renderClipboardButton = () => {
+        const {textResults, copyDisabled} = props;
+
         return (
+            <CopyToClipboard
+                text={textResults}
+                title="Copy results"
+                toastText="Results were copied to clipboard successfully"
+                disabled={copyDisabled}
+            />
+        );
+    };
+
+    const renderStats = () => {
+        const content = (
             <JSONTree
                 data={props.stats}
                 isExpanded={() => true}
@@ -35,21 +65,60 @@ function QueryResult(props) {
                 }}
             />
         );
+        return (
+            <React.Fragment>
+                {content}
+                {isFullscreen && (
+                    <Fullscreen>
+                        <div className={b('inspector', {fullscreen: true})}>{content}</div>
+                    </Fullscreen>
+                )}
+            </React.Fragment>
+        );
+    };
+
+    const renderResult = () => {
+        const {result} = props;
+
+        return (
+            <React.Fragment>
+                {result}
+                {isFullscreen && <Fullscreen><div className={b('result', {fullscreen: true})}>{result}</div></Fullscreen>}
+            </React.Fragment>
+        );
     };
 
     return (
         <React.Fragment>
-            {props.stats && (
-                <Tabs
-                    items={tabsItems}
-                    onSelectTab={onSelectTab}
-                    activeTab={activeTab}
-                    className={b('tabs')}
-                />
-            )}
+            <div className={b('controls')}>
+                <div className={b('controls-right')}>
+                    <QueryExecutionStatus hasError={Boolean(props.error)} />
+
+                    {props.stats && !props.error && (
+                        <React.Fragment>
+                            <Divider />
+                            <RadioButton
+                                options={resultOptions}
+                                value={activeSection}
+                                onUpdate={onSelectSection}
+                            />
+                        </React.Fragment>
+                    )}
+                </div>
+                <div className={b('controls-left')}>
+                    {renderClipboardButton()}
+                    <EnableFullscreenButton disabled={Boolean(props.error)}/>
+                    <PaneVisibilityToggleButtons
+                        onCollapse={props.onCollapseResults}
+                        onExpand={props.onExpandResults}
+                        isCollapsed={props.isResultsCollapsed}
+                        initialDirection="bottom"
+                    />
+                </div>
+            </div>
             <div className={b('result')}>
-                {activeTab === TabsIds.result && props.result}
-                {activeTab === TabsIds.stats && renderStats()}
+                {activeSection === resultOptionsIds.result && renderResult()}
+                {activeSection === resultOptionsIds.stats && renderStats()}
             </div>
         </React.Fragment>
     );