From 9d6d00f5a24697fe8ab6e558b55c0530a2902ac2 Mon Sep 17 00:00:00 2001 From: Maksim Efremov Date: Thu, 14 Dec 2023 20:43:30 +0300 Subject: [PATCH] chore(ChytCliqueActions): use side-panel for SQL [YTFRONT-3683] --- .../ChytCliqueActions/ChytCliqueActions.tsx | 57 ++++++++++--------- .../chyt/ChytPageClique/ChytPageClique.tsx | 9 ++- .../chyt/ChytPageList/ChytPageListTable.tsx | 35 ++++++++---- .../query-tracker/QueryWidget/side-panel.tsx | 2 +- 4 files changed, 61 insertions(+), 42 deletions(-) diff --git a/packages/ui/src/ui/pages/chyt/ChytCliqueActions/ChytCliqueActions.tsx b/packages/ui/src/ui/pages/chyt/ChytCliqueActions/ChytCliqueActions.tsx index 6881b8cdf..ea720c99b 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 77bbdce71..e6f8b285c 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 7e76cf59c..c2a98fbd9 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} + ); } diff --git a/packages/ui/src/ui/pages/query-tracker/QueryWidget/side-panel.tsx b/packages/ui/src/ui/pages/query-tracker/QueryWidget/side-panel.tsx index d9c5420d7..d6686632d 100644 --- a/packages/ui/src/ui/pages/query-tracker/QueryWidget/side-panel.tsx +++ b/packages/ui/src/ui/pages/query-tracker/QueryWidget/side-panel.tsx @@ -11,7 +11,7 @@ import Loader from '../../../components/Loader/Loader'; export const QueryWidgetLazy = React.lazy(() => import('./index')); export const QueryWidgetPortal = withSplit( - withLazyLoading(QueryWidgetLazy, ), + withLazyLoading(QueryWidgetLazy, ), ); export function useQueryWidgetSidePanel() {