Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -368,6 +370,7 @@ export default function QueryEditor(props: QueryEditorProps) {
tenantName={tenantName}
path={path}
showPreview={showPreview}
queryText={lastExecutedQueryText}
/>
</div>
</SplitPane>
Expand All @@ -386,6 +389,7 @@ interface ResultProps {
tenantName: string;
path: string;
showPreview?: boolean;
queryText: string;
}
function Result({
resultVisibilityState,
Expand All @@ -397,6 +401,7 @@ function Result({
tenantName,
path,
showPreview,
queryText,
}: ResultProps) {
if (showPreview) {
return <Preview database={tenantName} path={path} type={type} />;
Expand All @@ -412,6 +417,7 @@ function Result({
isResultsCollapsed={resultVisibilityState.collapsed}
onExpandResults={onExpandResultHandler}
onCollapseResults={onCollapseResultHandler}
queryText={queryText}
/>
);
}
Expand Down
28 changes: 24 additions & 4 deletions src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -83,6 +83,7 @@ interface ExecuteResultProps {
tenantName: string;
onCollapseResults: VoidFunction;
onExpandResults: VoidFunction;
queryText?: string;
}

export function QueryResultViewer({
Expand All @@ -91,6 +92,7 @@ export function QueryResultViewer({
isResultsCollapsed,
theme,
tenantName,
queryText,
onCollapseResults,
onExpandResults,
}: ExecuteResultProps) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -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"
/>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import {cn} from '../../../../../../utils/cn';
export const b = cn('query-info-dropdown');
Loading
Loading