refactor: merge query result components

Author: artemmufazalov

src/containers/Tenant/Query/ExecuteResult/utils.ts

@@ -48,10 +48,10 @@ import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
 } from '../../utils/paneVisibilityToggleHelpers';
-import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
-import {ExplainResult} from '../ExplainResult/ExplainResult';
 import {Preview} from '../Preview/Preview';
 import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
+import {ExecuteResult} from '../QueryResult/ExecuteResult';
+import {ExplainResult} from '../QueryResult/ExplainResult';
 import {QuerySettingsDialog} from '../QuerySettingsDialog/QuerySettingsDialog';
 import {SAVE_QUERY_DIALOG} from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';

src/containers/Tenant/Query/ExplainResult/i18n/en.json

@@ -34,10 +34,6 @@
         padding-left: 10px;
     }
 
-    &__error {
-        padding: 15px 10px;
-    }
-
     &__controls {
         position: sticky;
         z-index: 2;
@@ -67,22 +63,6 @@
         gap: 4px;
     }
 
-    &__inspector {
-        overflow: auto;
-
-        width: 100%;
-        height: 100%;
-        padding: 15px 10px;
-        @include json-tree-styles();
-    }
-
-    &__explain-canvas-container {
-        overflow-y: auto;
-
-        width: 100%;
-        height: 100%;
-    }
-
     &__elapsed-label {
         margin-left: var(--g-spacing-3);
     }

src/containers/Tenant/Query/ExplainResult/i18n/index.ts

@@ -2,39 +2,36 @@ import React from 'react';
 
 import type {ControlGroupOption} from '@gravity-ui/uikit';
 import {ClipboardButton, RadioButton, Tabs, Text} from '@gravity-ui/uikit';
-import JSONTree from 'react-json-inspector';
 
 import Divider from '../../../../components/Divider/Divider';
 import ElapsedTime from '../../../../components/ElapsedTime/ElapsedTime';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
-import {YDBGraph} from '../../../../components/Graph/Graph';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 import {QueryResultTable} from '../../../../components/QueryResultTable/QueryResultTable';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 import type {QueryResult} from '../../../../store/reducers/query/types';
-import type {TKqpStatsQuery} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
 import {getArray} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
 import {USE_SHOW_PLAN_SVG_KEY} from '../../../../utils/constants';
 import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatters';
 import {useSetting, useTypedDispatch} from '../../../../utils/hooks';
-import {parseQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import {CancelQueryButton} from '../CancelQueryButton/CancelQueryButton';
-import {SimplifiedPlan} from '../ExplainResult/components/SimplifiedPlan/SimplifiedPlan';
-import {ResultIssues} from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
 import {QuerySettingsBanner} from '../QuerySettingsBanner/QuerySettingsBanner';
 import {getPreparedResult} from '../utils/getPreparedResult';
 import {isQueryCancelledError} from '../utils/isQueryCancelledError';
 
-import {PlanToSvgButton} from './PlanToSvgButton';
-import {TraceButton} from './TraceButton';
+import {Graph} from './components/Graph/Graph';
+import {PlanToSvgButton} from './components/PlanToSvgButton/PlanToSvgButton';
+import {QueryJSONViewer} from './components/QueryJSONViewer/QueryJSONViewer';
+import {QueryResultError} from './components/QueryResultError/QueryResultError';
+import {SimplifiedPlan} from './components/SimplifiedPlan/SimplifiedPlan';
+import {TraceButton} from './components/TraceButton/TraceButton';
 import i18n from './i18n';
-import {getPlan} from './utils';
 
 import './ExecuteResult.scss';
 
@@ -71,18 +68,17 @@ export function ExecuteResult({
     const dispatch = useTypedDispatch();
     const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
-    const {error, isLoading, queryId, data} = result;
+    const {error, isLoading, queryId, data = {}} = result;
+    const {preparedPlan, simplifiedPlan, stats} = data;
 
-    const stats: TKqpStatsQuery | undefined = data?.stats;
     const resultsSetsCount = data?.resultSets?.length || 0;
     const currentResult = data?.resultSets?.[selectedResultSet];
-    const {plan, simplifiedPlan} = React.useMemo(() => getPlan(data), [data]);
 
     const resultOptions: ControlGroupOption<SectionID>[] = [
         {value: resultOptionsIds.result, content: i18n('action.result')},
         {value: resultOptionsIds.stats, content: i18n('action.stats')},
     ];
-    if (plan) {
+    if (preparedPlan) {
         resultOptions.push({value: resultOptionsIds.schema, content: i18n('action.schema')});
     }
     if (simplifiedPlan?.plan) {
@@ -92,8 +88,6 @@ export function ExecuteResult({
         });
     }
 
-    const parsedError = parseQueryError(error);
-
     React.useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
@@ -177,69 +171,21 @@ export function ExecuteResult({
         );
     };
 
-    const renderStats = () => {
-        return (
-            <div className={b('inspector')}>
-                <JSONTree
-                    data={stats}
-                    isExpanded={() => true}
-                    searchOptions={{
-                        debounceTime: 300,
-                    }}
-                />
-            </div>
-        );
-    };
-
-    const renderSchema = () => {
-        const isEnoughDataForGraph = plan?.links && plan?.nodes && plan?.nodes.length;
-
-        if (!isEnoughDataForGraph) {
-            return i18n('description.graph-is-not-supported');
-        }
-
-        return (
-            <div className={b('explain-canvas-container')}>
-                <YDBGraph key={theme} data={plan} />
-            </div>
-        );
-    };
-
-    const renderSimplified = () => {
-        const {plan} = simplifiedPlan ?? {};
-        if (!plan) {
-            return null;
-        }
-        return <SimplifiedPlan plan={plan} />;
-    };
-
-    const renderIssues = () => {
-        if (!parsedError) {
-            return null;
-        }
-
-        if (typeof parsedError === 'object') {
-            return <ResultIssues data={parsedError} />;
-        }
-
-        return <div className={b('error')}>{parsedError}</div>;
-    };
-
     const renderResultSection = () => {
-        if (error && !isQueryCancelledError(error)) {
-            return renderIssues();
+        if (error) {
+            return <QueryResultError error={error} />;
         }
         if (activeSection === resultOptionsIds.result) {
             return renderResult();
         }
         if (activeSection === resultOptionsIds.stats) {
-            return renderStats();
+            return <QueryJSONViewer data={stats} />;
         }
         if (activeSection === resultOptionsIds.schema) {
-            return renderSchema();
+            return <Graph theme={theme} explain={preparedPlan} />;
         }
-        if (activeSection === resultOptionsIds.simplified) {
-            return renderSimplified();
+        if (activeSection === resultOptionsIds.simplified && simplifiedPlan?.plan) {
+            return <SimplifiedPlan plan={simplifiedPlan.plan} />;
         }
 
         return null;

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -7,9 +7,6 @@
         flex-grow: 1;
         flex-direction: column;
     }
-    &__text-message {
-        padding: 15px 20px;
-    }
 
     &__controls {
         position: sticky;

src/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss renamed to src/containers/Tenant/Query/QueryResult/ExecuteResult.scss

@@ -14,7 +14,6 @@ import type {ValueOf} from '../../../../types/common';
 import {cn} from '../../../../utils/cn';
 import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatters';
 import {useTypedDispatch} from '../../../../utils/hooks';
-import {parseQueryErrorToString} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import {CancelQueryButton} from '../CancelQueryButton/CancelQueryButton';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
@@ -23,8 +22,10 @@ import {isQueryCancelledError} from '../utils/isQueryCancelledError';
 
 import {Ast} from './components/Ast/Ast';
 import {Graph} from './components/Graph/Graph';
+import {QueryJSONViewer} from './components/QueryJSONViewer/QueryJSONViewer';
+import {QueryResultError} from './components/QueryResultError/QueryResultError';
 import {SimplifiedPlan} from './components/SimplifiedPlan/SimplifiedPlan';
-import {TextExplain} from './components/TextExplain/TextExplain';
+import {StubMessage} from './components/Stub/Stub';
 import i18n from './i18n';
 
 import './ExplainResult.scss';
@@ -75,7 +76,7 @@ export function ExplainResult({
     isResultsCollapsed,
 }: ExplainResultProps) {
     const dispatch = useTypedDispatch();
-    const [activeOption, setActiveOption] = React.useState<QueryExplainTab>(
+    const [activeSection, setActiveSection] = React.useState<QueryExplainTab>(
         EXPLAIN_OPTIONS_IDS.schema,
     );
     const [isPending, startTransition] = React.useTransition();
@@ -91,29 +92,25 @@ export function ExplainResult({
 
     const renderStub = () => {
         return (
-            <div className={b('text-message')}>
-                {i18n('description.empty-result', {
-                    activeOption: EXPLAIN_OPTIONS_NAMES[activeOption],
+            <StubMessage
+                message={i18n('description.empty-result', {
+                    activeSection: EXPLAIN_OPTIONS_NAMES[activeSection],
                 })}
-            </div>
+            />
         );
     };
 
     const renderContent = () => {
-        if (isQueryCancelledError(error)) {
-            return null;
-        }
-
         if (error) {
-            return <div className={b('text-message')}>{parseQueryErrorToString(error)}</div>;
+            return <QueryResultError error={error} />;
         }
 
-        switch (activeOption) {
+        switch (activeSection) {
             case EXPLAIN_OPTIONS_IDS.json: {
                 if (!explain?.pristine) {
                     return renderStub();
                 }
-                return <TextExplain explain={explain.pristine} />;
+                return <QueryJSONViewer data={explain.pristine} />;
             }
             case EXPLAIN_OPTIONS_IDS.ast: {
                 if (!ast) {
@@ -140,7 +137,7 @@ export function ExplainResult({
     };
 
     const getStatsToCopy = () => {
-        switch (activeOption) {
+        switch (activeSection) {
             case EXPLAIN_OPTIONS_IDS.json:
                 return explain?.pristine;
             case EXPLAIN_OPTIONS_IDS.ast:
@@ -152,8 +149,20 @@ export function ExplainResult({
         }
     };
 
-    const statsToCopy = getStatsToCopy();
-    const copyText = getStringifiedData(statsToCopy);
+    const renderClipboardButton = () => {
+        const statsToCopy = getStatsToCopy();
+        const copyText = getStringifiedData(statsToCopy);
+        if (!copyText) {
+            return null;
+        }
+        return (
+            <ClipboardButton
+                text={copyText}
+                view="flat-secondary"
+                title={i18n('action.copy', {activeSection})}
+            />
+        );
+    };
 
     return (
         <React.Fragment>
@@ -170,9 +179,9 @@ export function ExplainResult({
                                 <Divider />
                                 <RadioButton
                                     options={explainOptions}
-                                    value={activeOption}
+                                    value={activeSection}
                                     onUpdate={(tabId) => {
-                                        startTransition(() => setActiveOption(tabId));
+                                        startTransition(() => setActiveSection(tabId));
                                     }}
                                 />
                             </React.Fragment>
@@ -186,13 +195,7 @@ export function ExplainResult({
                     ) : null}
                 </div>
                 <div className={b('controls-left')}>
-                    {copyText && (
-                        <ClipboardButton
-                            text={copyText}
-                            view="flat-secondary"
-                            title={i18n('action.copy', {activeOption})}
-                        />
-                    )}
+                    {renderClipboardButton()}
                     <EnableFullscreenButton disabled={Boolean(error)} />
                     <PaneVisibilityToggleButtons
                         onCollapse={onCollapseResults}