feat: download dump with all info (#1862)

Author: astandrik

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

@@ -103,6 +103,7 @@ export default function QueryEditor(props: QueryEditorProps) {
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting<QueryAction>(
         LAST_USED_QUERY_ACTION_KEY,
     );
+    const [lastExecutedQueryText, setLastExecutedQueryText] = React.useState<string>('');
 
     const [sendQuery] = queryApi.useUseSendQueryMutation();
 
@@ -140,6 +141,7 @@ export default function QueryEditor(props: QueryEditorProps) {
         const query = text ?? input;
 
         setLastUsedQueryAction(QUERY_ACTIONS.execute);
+        setLastExecutedQueryText(query);
         if (!isEqual(lastQueryExecutionSettings, querySettings)) {
             resetBanner();
             setLastQueryExecutionSettings(querySettings);
@@ -172,7 +174,7 @@ export default function QueryEditor(props: QueryEditorProps) {
 
     const handleGetExplainQueryClick = useEventHandler(() => {
         setLastUsedQueryAction(QUERY_ACTIONS.explain);
-
+        setLastExecutedQueryText(input);
         if (!isEqual(lastQueryExecutionSettings, querySettings)) {
             resetBanner();
             setLastQueryExecutionSettings(querySettings);
@@ -368,6 +370,7 @@ export default function QueryEditor(props: QueryEditorProps) {
                         tenantName={tenantName}
                         path={path}
                         showPreview={showPreview}
+                        queryText={lastExecutedQueryText}
                     />
                 </div>
             </SplitPane>
@@ -386,6 +389,7 @@ interface ResultProps {
     tenantName: string;
     path: string;
     showPreview?: boolean;
+    queryText: string;
 }
 function Result({
     resultVisibilityState,
@@ -397,6 +401,7 @@ function Result({
     tenantName,
     path,
     showPreview,
+    queryText,
 }: ResultProps) {
     if (showPreview) {
         return <Preview database={tenantName} path={path} type={type} />;
@@ -412,6 +417,7 @@ function Result({
                 isResultsCollapsed={resultVisibilityState.collapsed}
                 onExpandResults={onExpandResultHandler}
                 onCollapseResults={onCollapseResultHandler}
+                queryText={queryText}
             />
         );
     }

src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx

@@ -27,7 +27,7 @@ import {isQueryCancelledError} from '../utils/isQueryCancelledError';
 
 import {Ast} from './components/Ast/Ast';
 import {Graph} from './components/Graph/Graph';
-import {PlanToSvgButton} from './components/PlanToSvgButton/PlanToSvgButton';
+import {QueryInfoDropdown} from './components/QueryInfoDropdown/QueryInfoDropdown';
 import {QueryJSONViewer} from './components/QueryJSONViewer/QueryJSONViewer';
 import {QueryResultError} from './components/QueryResultError/QueryResultError';
 import {ResultSetsViewer} from './components/ResultSetsViewer/ResultSetsViewer';
@@ -83,6 +83,7 @@ interface ExecuteResultProps {
     tenantName: string;
     onCollapseResults: VoidFunction;
     onExpandResults: VoidFunction;
+    queryText?: string;
 }
 
 export function QueryResultViewer({
@@ -91,6 +92,7 @@ export function QueryResultViewer({
     isResultsCollapsed,
     theme,
     tenantName,
+    queryText,
     onCollapseResults,
     onExpandResults,
 }: ExecuteResultProps) {
@@ -180,6 +182,26 @@ export function QueryResultViewer({
         );
     };
 
+    const renderQueryInfoDropdown = () => {
+        if (isLoading || isQueryCancelledError(error)) {
+            return null;
+        }
+
+        return (
+            <QueryInfoDropdown
+                queryResultsInfo={{
+                    queryText,
+                    ast: data.ast,
+                    stats: data.stats,
+                    plan: data.plan,
+                }}
+                error={error}
+                database={tenantName}
+                hasPlanToSvg={Boolean(data?.plan && useShowPlanToSvg && isExecute)}
+            />
+        );
+    };
+
     const renderStubMessage = () => {
         return (
             <StubMessage
@@ -268,16 +290,14 @@ export function QueryResultViewer({
                 {data?.traceId && isExecute ? (
                     <TraceButton traceId={data.traceId} isTraceReady={result.isTraceReady} />
                 ) : null}
-                {data?.plan && useShowPlanToSvg && isExecute ? (
-                    <PlanToSvgButton plan={data?.plan} database={tenantName} />
-                ) : null}
             </div>
         );
     };
 
     const renderRightControls = () => {
         return (
             <div className={b('controls-right')}>
+                {renderQueryInfoDropdown()}
                 {renderClipboardButton()}
                 <EnableFullscreenButton />
                 <PaneVisibilityToggleButtons

src/containers/Tenant/Query/QueryResult/components/PlanToSvgButton/PlanToSvgButton.tsx

@@ -0,0 +1,17 @@
+.query-info-dropdown {
+    &__menu-item {
+        align-items: start;
+    }
+
+    &__menu-item-content {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--g-spacing-1) 0;
+    }
+
+    &__icon {
+        margin-top: var(--g-spacing-2);
+        margin-right: var(--g-spacing-2);
+    }
+}

src/containers/Tenant/Query/QueryResult/components/QueryInfoDropdown/QueryInfoDropdown.scss

@@ -0,0 +1,60 @@
+import {Ellipsis} from '@gravity-ui/icons';
+import type {ButtonProps} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, DropdownMenu} from '@gravity-ui/uikit';
+
+import i18n from '../../i18n';
+
+import {b} from './shared';
+import type {QueryResultsInfo} from './useQueryInfoMenuItems';
+import {useQueryInfoMenuItems} from './useQueryInfoMenuItems';
+
+import './QueryInfoDropdown.scss';
+
+export interface QueryInfoDropdownProps {
+    queryResultsInfo: QueryResultsInfo;
+    database: string;
+    hasPlanToSvg: boolean;
+    error?: unknown;
+}
+
+export function QueryInfoDropdown({
+    queryResultsInfo,
+    database,
+    hasPlanToSvg,
+    error,
+}: QueryInfoDropdownProps) {
+    const {isLoading, items} = useQueryInfoMenuItems({
+        queryResultsInfo,
+        database,
+        hasPlanToSvg,
+        error,
+    });
+
+    const renderSwitcher = (props: ButtonProps) => {
+        return (
+            <ActionTooltip title={i18n('tooltip_actions')}>
+                <Button view="flat-secondary" loading={isLoading} disabled={isLoading} {...props}>
+                    <Button.Icon>
+                        <Ellipsis />
+                    </Button.Icon>
+                </Button>
+            </ActionTooltip>
+        );
+    };
+
+    if (!items.length) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu
+            popupProps={{
+                placement: ['bottom-end', 'left'],
+            }}
+            switcherWrapperClassName={b('query-info-switcher-wrapper')}
+            renderSwitcher={renderSwitcher}
+            items={items}
+            size="xl"
+        />
+    );
+}

src/containers/Tenant/Query/QueryResult/components/QueryInfoDropdown/QueryInfoDropdown.tsx

@@ -0,0 +1,2 @@
+import {cn} from '../../../../../../utils/cn';
+export const b = cn('query-info-dropdown');