diff --git a/packages/ui/src/ui/pages/chyt/ChytCliqueActions/ChytCliqueActions.tsx b/packages/ui/src/ui/pages/chyt/ChytCliqueActions/ChytCliqueActions.tsx index 6881b8cdfb..ea720c99b3 100644 --- a/packages/ui/src/ui/pages/chyt/ChytCliqueActions/ChytCliqueActions.tsx +++ b/packages/ui/src/ui/pages/chyt/ChytCliqueActions/ChytCliqueActions.tsx @@ -1,12 +1,9 @@ import React from 'react'; import {useDispatch, useSelector} from 'react-redux'; -import {useHistory} from 'react-router'; import cn from 'bem-cn-lite'; import {Button, DropdownMenu, DropdownMenuItem} from '@gravity-ui/uikit'; -import {Page} from '../../../../shared/constants/settings'; - import Icon from '../../../components/Icon/Icon'; import {getCluster, isQueryTrackerAllowed} from '../../../store/selectors/global'; import {updateQueryDraft} from '../../../pages/query-tracker/module/query/actions'; @@ -19,23 +16,47 @@ import './ChytCliqueActions.scss'; const block = cn('chyt-clique-actions'); +export function useCliqueOnSqlAction(openWidget: () => void) { + const cluster = useSelector(getCluster); + const allowQueryTracker = useSelector(isQueryTrackerAllowed); + const dispatch = useDispatch(); + + return React.useCallback( + (alias: string) => { + if (allowQueryTracker) { + setTimeout(() => { + dispatch( + updateQueryDraft({ + engine: QueryEngine.CHYT, + query: `SELECT 1;`, + settings: {cluster, clique: alias}, + }), + ); + }, 500); + openWidget(); + } else { + UIFactory.onChytAliasSqlClick({alias, cluster}); + } + }, + [cluster, openWidget, allowQueryTracker, dispatch], + ); +} + export function ChytCliqueActions({ alias, pool, showAllButtons, allButtonsClassName, onAction, + onSqlClick, }: { showAllButtons?: boolean; allButtonsClassName?: string; alias: string; pool?: string; + onSqlClick: (alias: string) => void; onAction?: (action: 'remove' | 'start' | 'stop') => void; }) { - const dispatch = useDispatch(); - const history = useHistory(); - const allowQueryTracker = useSelector(isQueryTrackerAllowed); - const [visibleConfirmation, setVisibleConirmation] = React.useState< undefined | 'remove' | 'start' | 'stop' >(); @@ -64,28 +85,8 @@ export function ChytCliqueActions({ const menuItems: Array> = [[start, stop], [remove]]; - const cluster = useSelector(getCluster); - const sqlButton = ( - ); diff --git a/packages/ui/src/ui/pages/chyt/ChytPageClique/ChytPageClique.tsx b/packages/ui/src/ui/pages/chyt/ChytPageClique/ChytPageClique.tsx index 77bbdce71d..e6f8b285c7 100644 --- a/packages/ui/src/ui/pages/chyt/ChytPageClique/ChytPageClique.tsx +++ b/packages/ui/src/ui/pages/chyt/ChytPageClique/ChytPageClique.tsx @@ -17,6 +17,8 @@ import {OperationId} from '../../../components/OperationId/OperationId'; import StatusLabel from '../../../components/StatusLabel/StatusLabel'; import {UserCard} from '../../../components/UserLink/UserLink'; +import {useQueryWidgetSidePanel} from '../../../pages/query-tracker/QueryWidget/side-panel'; + import {chytCliqueLoad, chytResetCurrentClique} from '../../../store/actions/chyt/clique'; import { getChytCliqueData, @@ -28,7 +30,7 @@ import {getCluster} from '../../../store/selectors/global'; import {Page} from '../../../../shared/constants/settings'; import {CliqueState} from '../components/CliqueState'; -import {ChytCliqueActions} from '../ChytCliqueActions/ChytCliqueActions'; +import {ChytCliqueActions, useCliqueOnSqlAction} from '../ChytCliqueActions/ChytCliqueActions'; import {ChytPageCliqueTabs} from './ChytPageCliqueTabs'; import {ChytSpecletEditButton} from './ChytPageCliqueSpeclet'; import cn from 'bem-cn-lite'; @@ -58,6 +60,9 @@ export function ChytPageClique(props: RouteComponentProps<{alias: string}>) { useUpdater(update); + const {openWidget, widgetContent} = useQueryWidgetSidePanel(); + const onSqlClick = useCliqueOnSqlAction(openWidget); + return (
@@ -80,6 +85,7 @@ export function ChytPageClique(props: RouteComponentProps<{alias: string}>) { update(); } }} + onSqlClick={onSqlClick} /> @@ -88,6 +94,7 @@ export function ChytPageClique(props: RouteComponentProps<{alias: string}>) { + {widgetContent}
); } diff --git a/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx b/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx index 7e76cf59c8..c2a98fbd9d 100644 --- a/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx +++ b/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx @@ -30,15 +30,16 @@ import {ChytInfo} from '../../../store/reducers/chyt/list'; import {Page} from '../../../../shared/constants/settings'; import {CHYT_TABLE_TITLES} from '../../../constants/chyt-page'; import {OperationPool} from '../../../components/OperationPool/OperationPool'; +import {useQueryWidgetSidePanel} from '../../../pages/query-tracker/QueryWidget/side-panel'; import {CliqueState} from '../components/CliqueState'; -import {ChytCliqueActions} from '../ChytCliqueActions/ChytCliqueActions'; +import {ChytCliqueActions, useCliqueOnSqlAction} from '../ChytCliqueActions/ChytCliqueActions'; import './ChytPageListTable.scss'; const block = cn('chyt-page-list-table'); -function useChytListColumns(cluster: string) { +function useChytListColumns(cluster: string, onSqlClick: (alias: string) => void) { const checkedColumns = useSelector(getChytListVisibleColumns); const columns: Array> = React.useMemo(() => { @@ -237,7 +238,11 @@ function useChytListColumns(cluster: string) { render({row}) { return ( - + ); }, @@ -245,7 +250,7 @@ function useChytListColumns(cluster: string) { width: 60, } as Column, ]; - }, [cluster, checkedColumns]); + }, [cluster, checkedColumns, onSqlClick]); return columns; } @@ -299,16 +304,22 @@ function ChytPageListTable() { const items = useSelector(getChytListTableItems); const cluster = useSelector(getCluster); - const columns = useChytListColumns(cluster); + const {openWidget, widgetContent} = useQueryWidgetSidePanel(); + const onSqlClick = useCliqueOnSqlAction(openWidget); + + const columns = useChytListColumns(cluster, onSqlClick); return ( - + + + {widgetContent} + ); }