diff --git a/src/platform/plugins/shared/data/moon.yml b/src/platform/plugins/shared/data/moon.yml index b7087e6237ae8..62cafe00ce8b9 100644 --- a/src/platform/plugins/shared/data/moon.yml +++ b/src/platform/plugins/shared/data/moon.yml @@ -70,6 +70,7 @@ dependsOn: - '@kbn/apm-utils' - '@kbn/std' - '@kbn/core-elasticsearch-server' + - '@kbn/css-utils' tags: - plugin - prod diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/inspect_flyout/index.ts b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/inspect_flyout/index.ts new file mode 100644 index 0000000000000..91d893e0b8d08 --- /dev/null +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/inspect_flyout/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +export { InspectFlyout } from './inspect_flyout'; diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/inspect_flyout/inspect_flyout.tsx b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/inspect_flyout/inspect_flyout.tsx new file mode 100644 index 0000000000000..7158366e25fac --- /dev/null +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/inspect_flyout/inspect_flyout.tsx @@ -0,0 +1,80 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { EuiFlyoutBody, EuiSpacer, EuiText, type UseEuiTheme } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import React from 'react'; +import { css } from '@emotion/react'; +import { CodeEditor } from '@kbn/code-editor'; +import { useMemoCss } from '@kbn/css-utils/public/use_memo_css'; +import type { UISession } from '../../types'; + +interface InspectFlyoutProps { + searchSession: UISession; +} + +export const InspectFlyout: React.FC = ({ searchSession }) => { + const styles = useMemoCss(componentStyles); + + const renderInfo = () => { + return ( +
+ +
+ ); + }; + + return ( + + + +

+ +

+ + + {renderInfo()} + + + ); +}; + +const componentStyles = { + flyout: css({ + '.euiFlyoutBody__overflowContent': { + height: '100%', + overflow: 'hidden', + '> div': { + height: '100%', + }, + }, + }), + jsonCodeEditor: ({ euiTheme }: UseEuiTheme) => + css({ + height: `calc(100% - ${euiTheme.size.l})`, + }), +}; diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/get_action.tsx b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/get_action.tsx index b5ffa884c4493..1237c24e49858 100644 --- a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/get_action.tsx +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/get_action.tsx @@ -21,11 +21,12 @@ export const getAction = ( api: SearchSessionsMgmtAPI, actionType: ACTION, uiSession: UISession, - core: CoreStart + core: CoreStart, + isWithinFlyout: boolean = false ): IClickActionDescriptor | null => { switch (actionType) { case ACTION.INSPECT: - return createInspectActionDescriptor(api, uiSession, core); + return createInspectActionDescriptor(api, uiSession, core, isWithinFlyout); case ACTION.DELETE: return createDeleteActionDescriptor(api, uiSession, core); case ACTION.EXTEND: diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/inspect_button.tsx b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/inspect_button.tsx index 442301ee18bcf..e9746d2b01236 100644 --- a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/inspect_button.tsx +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/inspect_button.tsx @@ -7,106 +7,20 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiFlyoutBody, EuiFlyoutHeader, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; -import React, { Fragment } from 'react'; -import { css } from '@emotion/react'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; import type { CoreStart } from '@kbn/core/public'; -import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public'; -import { toMountPoint } from '@kbn/react-kibana-mount'; -import { CodeEditor } from '@kbn/code-editor'; import type { UISession } from '../../../types'; import type { IClickActionDescriptor } from './types'; import type { SearchSessionsMgmtAPI } from '../../../lib/api'; - -interface InspectFlyoutProps { - searchSession: UISession; -} - -const InspectFlyout: React.FC = ({ searchSession }) => { - const renderInfo = () => { - return ( - - - - ); - }; - - return ( - <> - - -

- -

- - - - - -

- -

- - - {renderInfo()} - - - - ); -}; - -interface InspectFlyoutWrapperProps { - searchSession: UISession; - uiSettings: CoreStart['uiSettings']; - settings: CoreStart['settings']; - theme: CoreStart['theme']; -} - -const InspectFlyoutWrapper: React.FC = ({ - searchSession, - uiSettings, - settings, - theme, -}) => { - const { Provider: KibanaReactContextProvider } = createKibanaReactContext({ - uiSettings, - settings, - theme, - }); - - return ( - - - - ); -}; +import { InspectFlyout } from '../../inspect_flyout'; export const createInspectActionDescriptor = ( api: SearchSessionsMgmtAPI, uiSession: UISession, - core: CoreStart + core: CoreStart, + isWithinFlyout: boolean = false ): IClickActionDescriptor => ({ iconType: 'document', label: ( @@ -117,26 +31,18 @@ export const createInspectActionDescriptor = ( /> ), onClick: async () => { - const flyoutWrapper = ( - - ); - const overlay = core.overlays.openFlyout(toMountPoint(flyoutWrapper, core)); + const overlay = core.overlays.openSystemFlyout(, { + id: `inspect-background-search-${uiSession.id}`, + title: i18n.translate('data.sessions.management.backgroundSearchFlyoutTitle', { + defaultMessage: 'Inspect {name}', + values: { name: uiSession.name }, + }), + flyoutMenuProps: { hideTitle: false }, + size: 'm', + session: isWithinFlyout ? 'inherit' : 'start', + type: 'overlay', + outsideClickCloses: true, + }); await overlay.onClose; }, }); - -const styles = { - flyout: css({ - '.euiFlyoutBody__overflowContent': { - height: '100%', - '> div': { - height: '100%', - }, - }, - }), -}; diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/popover_actions.tsx b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/popover_actions.tsx index 31bfa9e8b7041..d3f7b15d97a39 100644 --- a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/popover_actions.tsx +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/popover_actions.tsx @@ -28,6 +28,7 @@ interface PopoverActionItemsProps { onActionComplete: OnActionComplete; core: CoreStart; allowedActions?: UISession['actions']; + isWithinFlyout?: boolean; } export const PopoverActionsMenu = ({ @@ -36,6 +37,7 @@ export const PopoverActionsMenu = ({ session, core, allowedActions, + isWithinFlyout = false, }: PopoverActionItemsProps) => { const [isPopoverOpen, setPopover] = useState(false); @@ -71,7 +73,7 @@ export const PopoverActionsMenu = ({ }) || []; // Generic set of actions - up to the API to return what is available const items = actions.reduce((itemSet, actionType) => { - const actionDef = getAction(api, actionType, session, core); + const actionDef = getAction(api, actionType, session, core, isWithinFlyout); if (actionDef) { const { label, iconType, onClick } = actionDef; diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/types.ts b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/types.ts index 04521fd89f9b8..712019c8f0906 100644 --- a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/types.ts +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/actions/types.ts @@ -6,13 +6,14 @@ * your election, the "Elastic License 2.0", the "GNU Affero General Public * License v3.0 only", or the "Server Side Public License, v 1". */ -import type extendSessionIcon from './icons/extend_session.svg'; + +import type { IconType } from '@elastic/eui'; export type OnActionComplete = () => void; export type OnActionDismiss = () => void; export interface IClickActionDescriptor { label: React.ReactNode; - iconType: 'trash' | 'cancel' | typeof extendSessionIcon; + iconType: IconType; onClick: () => Promise | void; } diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/columns/actions.tsx b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/columns/actions.tsx index a5e13fe3aea9d..157c8c3f41532 100644 --- a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/columns/actions.tsx +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/columns/actions.tsx @@ -22,11 +22,13 @@ export const actionsColumn = ({ core, onActionComplete, allowedActions, + isWithinFlyout = false, }: { core: CoreStart; api: SearchSessionsMgmtAPI; onActionComplete: OnActionComplete; allowedActions?: UISession['actions']; + isWithinFlyout?: boolean; }): EuiBasicTableColumn => ({ field: 'actions', name: i18n.translate('data.mgmt.searchSessions.table.headerActions', { @@ -47,6 +49,7 @@ export const actionsColumn = ({ core={core} allowedActions={allowedActions} onActionComplete={onActionComplete} + isWithinFlyout={isWithinFlyout} /> diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.test.tsx b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.test.tsx index 0dfa2d99555c2..13709dd683db1 100644 --- a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.test.tsx +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.test.tsx @@ -52,7 +52,6 @@ const setup = () => { render( { }; describe('', () => { - it('render the title', () => { - setup(); - expect(screen.getByText('Background searches')).toBeVisible(); - }); - it('renders the table', () => { setup(); expect(screen.getByTestId('searchSessionsMgmtUiTable')).toBeVisible(); diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.tsx b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.tsx index a6ae5583fbadb..027e90bc96be4 100644 --- a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.tsx +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/flyout.tsx @@ -10,11 +10,10 @@ import { EuiBetaBadge, EuiButtonEmpty, - EuiFlexGroup, + EuiFlexItem, EuiFlyoutBody, EuiFlyoutFooter, - EuiFlyoutHeader, - EuiTitle, + EuiSpacer, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; @@ -29,7 +28,6 @@ import { getColumns } from './get_columns'; import type { ISearchSessionEBTManager } from '../../ebt_manager'; export const Flyout = ({ - flyoutId, api, coreStart, usageCollector, @@ -42,7 +40,6 @@ export const Flyout = ({ onBackgroundSearchOpened, onClose, }: { - flyoutId: string; api: SearchSessionsMgmtAPI; coreStart: CoreStart; usageCollector: SearchUsageCollector; @@ -61,20 +58,11 @@ export const Flyout = ({ return ( <> - - - -

- -

- - {technicalPreviewLabel} - - + + {technicalPreviewLabel} + + ['getColumns']; @@ -33,6 +32,6 @@ export const getColumns: GetColumnsFn = ({ core, api, onActionComplete, - allowedActions: [ACTION.EXTEND, ACTION.RENAME, ACTION.DELETE], + isWithinFlyout: true, }), ]; diff --git a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/get_flyout.tsx b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/get_flyout.tsx index 9cb3a56b44cb6..610911100b5d3 100644 --- a/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/get_flyout.tsx +++ b/src/platform/plugins/shared/data/public/search/session/sessions_mgmt/flyout/get_flyout.tsx @@ -8,11 +8,9 @@ */ import React from 'react'; +import { i18n } from '@kbn/i18n'; import type { CoreStart } from '@kbn/core/public'; -import { toMountPoint } from '@kbn/react-kibana-mount'; -import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public'; import type { SharePluginStart } from '@kbn/share-plugin/public'; -import { htmlIdGenerator } from '@elastic/eui'; import type { ISessionsClient } from '../../../..'; import { SearchSessionsMgmtAPI } from '../lib/api'; import type { SearchUsageCollector } from '../../../collectors'; @@ -22,8 +20,6 @@ import type { BackgroundSearchOpenedHandler } from '../types'; import { FLYOUT_WIDTH } from './constants'; import type { ISearchSessionEBTManager } from '../../ebt_manager'; -const flyoutIdGenerator = htmlIdGenerator('searchSessionsFlyout'); - export function openSearchSessionsFlyout({ coreStart, kibanaVersion, @@ -53,42 +49,40 @@ export function openSearchSessionsFlyout({ usageCollector, featureFlags: coreStart.featureFlags, }); - const { Provider: KibanaReactContextProvider } = createKibanaReactContext(coreStart); - const flyoutId = flyoutIdGenerator(); const closeFlyout = async () => { await flyout.close(); attrs.onClose?.(); }; - const flyout = coreStart.overlays.openFlyout( - toMountPoint( - coreStart.rendering.addContext( - - { - attrs.onBackgroundSearchOpened?.(params); - closeFlyout(); - }} - appId={attrs.appId} - api={api} - coreStart={coreStart} - usageCollector={usageCollector} - ebtManager={ebtManager} - config={config} - kibanaVersion={kibanaVersion} - locators={share.url.locators} - trackingProps={{ openedFrom: attrs.trackingProps.openedFrom }} - /> - - ), - coreStart - ), + const flyout = coreStart.overlays.openSystemFlyout( + { + attrs.onBackgroundSearchOpened?.(params); + closeFlyout(); + }} + appId={attrs.appId} + api={api} + coreStart={coreStart} + usageCollector={usageCollector} + ebtManager={ebtManager} + config={config} + kibanaVersion={kibanaVersion} + locators={share.url.locators} + trackingProps={{ openedFrom: attrs.trackingProps.openedFrom }} + />, { + id: 'backgroundSearchesFlyout', + title: i18n.translate('data.sessions.management.backgroundSearchesFlyoutTitle', { + defaultMessage: 'Background searches', + }), + flyoutMenuProps: { hideTitle: false }, size: FLYOUT_WIDTH, - ['aria-labelledby']: flyoutId, + session: 'start', + type: 'overlay', + ownFocus: true, + outsideClickCloses: true, onClose: closeFlyout, } ); diff --git a/src/platform/plugins/shared/data/tsconfig.json b/src/platform/plugins/shared/data/tsconfig.json index 9ec9e8bf4bada..e394e8b130d58 100644 --- a/src/platform/plugins/shared/data/tsconfig.json +++ b/src/platform/plugins/shared/data/tsconfig.json @@ -66,6 +66,7 @@ "@kbn/apm-utils", "@kbn/std", "@kbn/core-elasticsearch-server", + "@kbn/css-utils" ], "exclude": ["target/**/*"] } diff --git a/x-pack/platform/plugins/private/translations/translations/de-DE.json b/x-pack/platform/plugins/private/translations/translations/de-DE.json index edb00f6add63e..924fe40e8cfa7 100644 --- a/x-pack/platform/plugins/private/translations/translations/de-DE.json +++ b/x-pack/platform/plugins/private/translations/translations/de-DE.json @@ -2497,10 +2497,8 @@ "data.searchSessions.sessionService.backgroundSearchEditNameError": "Der Name der Hintergrundsuche konnte nicht bearbeitet werden", "data.searchSessions.sessionService.backgroundSearchObjectFetchError": "Abrufen der Hintergrund-Suchinformationen fehlgeschlagen", "data.session_mgmt.close_flyout": "Schließen", - "data.session_mgmt.flyout_title": "Hintergrundsuchen", "data.session_mgmt.technical_preview_label": "Technische Vorschau", "data.sessions.management.backgroundSearchFlyoutText": "Konfiguration für diese Hintergrundsuche", - "data.sessions.management.backgroundSearchFlyoutTitle": "Hintergrundsuche inspizieren", "dataGridInTableSearch.buttonNextMatch": "Weiter", "dataGridInTableSearch.buttonPreviousMatch": "Vorherige", "dataGridInTableSearch.buttonSearch": "In der Tabelle suchen", diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json index 1e37d31f8a469..dee376d792dc3 100644 --- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json +++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json @@ -2501,10 +2501,8 @@ "data.searchSessions.sessionService.backgroundSearchEditNameError": "Impossible de modifier le nom de la recherche en arrière-plan", "data.searchSessions.sessionService.backgroundSearchObjectFetchError": "Échec de la récupération des informations de la recherche en arrière-plan", "data.session_mgmt.close_flyout": "Fermer", - "data.session_mgmt.flyout_title": "Recherches en arrière-plan", "data.session_mgmt.technical_preview_label": "Version d'évaluation technique", "data.sessions.management.backgroundSearchFlyoutText": "Configuration pour cette recherche en arrière-plan", - "data.sessions.management.backgroundSearchFlyoutTitle": "Inspecter la rechercher en arrière-plan", "dataGridInTableSearch.buttonNextMatch": "Suivant", "dataGridInTableSearch.buttonPreviousMatch": "Précédent", "dataGridInTableSearch.buttonSearch": "Trouver dans le tableau", diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json index 1b95dbf677422..43dc4d0001faa 100644 --- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json +++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json @@ -2516,10 +2516,8 @@ "data.searchSessions.sessionService.backgroundSearchEditNameError": "バックグラウンド検索の名前を編集できませんでした", "data.searchSessions.sessionService.backgroundSearchObjectFetchError": "バックグラウンド検索情報の取得に失敗しました", "data.session_mgmt.close_flyout": "閉じる", - "data.session_mgmt.flyout_title": "バックグラウンド検索", "data.session_mgmt.technical_preview_label": "テクニカルプレビュー", "data.sessions.management.backgroundSearchFlyoutText": "このバックグラウンド検索の設定", - "data.sessions.management.backgroundSearchFlyoutTitle": "バックグラウンド検索を検査", "dataGridInTableSearch.buttonNextMatch": "次へ", "dataGridInTableSearch.buttonPreviousMatch": "前へ", "dataGridInTableSearch.buttonSearch": "テーブルで検索", diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json index f2aa9c80d7eb6..7cd5068ad1631 100644 --- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json +++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json @@ -2515,10 +2515,8 @@ "data.searchSessions.sessionService.backgroundSearchEditNameError": "无法编辑后台搜索名称。", "data.searchSessions.sessionService.backgroundSearchObjectFetchError": "无法提取背景搜索信息", "data.session_mgmt.close_flyout": "关闭", - "data.session_mgmt.flyout_title": "后台搜索", "data.session_mgmt.technical_preview_label": "技术预览", "data.sessions.management.backgroundSearchFlyoutText": "此后台搜索的配置", - "data.sessions.management.backgroundSearchFlyoutTitle": "检查后台搜索", "dataGridInTableSearch.buttonNextMatch": "下一步", "dataGridInTableSearch.buttonPreviousMatch": "上一步", "dataGridInTableSearch.buttonSearch": "在表中查找",