diff --git a/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/embeddable_log_rate_analysis_factory.tsx b/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/embeddable_log_rate_analysis_factory.tsx index 2da4f7198c71a..1ddae8a5a55f1 100644 --- a/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/embeddable_log_rate_analysis_factory.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/embeddable_log_rate_analysis_factory.tsx @@ -13,6 +13,8 @@ import type { StartServicesAccessor } from '@kbn/core-lifecycle-browser'; import type { DataView } from '@kbn/data-views-plugin/common'; import type { EmbeddableFactory } from '@kbn/embeddable-plugin/public'; import { i18n } from '@kbn/i18n'; +import { openLazyFlyout } from '@kbn/presentation-util'; + import { type SerializedPanelState, apiHasExecutionContext, @@ -36,6 +38,7 @@ import type { AiopsPluginStart, AiopsPluginStartDeps } from '../../types'; import { initializeLogRateAnalysisControls } from './initialize_log_rate_analysis_analysis_controls'; import type { LogRateAnalysisEmbeddableApi, LogRateAnalysisEmbeddableState } from './types'; import { getDataviewReferences } from '../get_dataview_references'; +import { EmbeddableLogRateAnalysisUserInput } from './log_rate_analysis_config_input'; export type EmbeddableLogRateAnalysisType = typeof EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE; @@ -130,26 +133,34 @@ export const getLogRateAnalysisEmbeddableFactory = ( }), isEditingEnabled: () => true, onEdit: async () => { - try { - const { resolveEmbeddableLogRateAnalysisUserInput } = await import( - './resolve_log_rate_analysis_config_input' - ); - - const result = await resolveEmbeddableLogRateAnalysisUserInput( - coreStart, - pluginStart, - parentApi, - uuid, - false, - logRateAnalysisControlsApi, - undefined, - serializeLogRateAnalysisChartState() - ); - - logRateAnalysisControlsApi.updateUserInput(result); - } catch (e) { - return Promise.reject(); - } + openLazyFlyout({ + core: coreStart, + parentApi, + flyoutProps: { + hideCloseButton: true, + focusedPanelId: uuid, + 'data-test-subj': 'aiopsLogRateAnalysisEmbeddableInitializer', + 'aria-labelledby': 'logRateAnalysisConfig', + }, + loadContent: async ({ closeFlyout }) => { + const initState = serializeLogRateAnalysisChartState(); + return ( + { + logRateAnalysisControlsApi.updateUserInput(result); + closeFlyout(); + }} + onCancel={() => { + logRateAnalysisControlsApi.updateUserInput(initState); + closeFlyout(); + }} + initialState={initState} + /> + ); + }, + }); }, dataLoading$, blockingError$, diff --git a/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/log_rate_analysis_config_input.tsx b/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/log_rate_analysis_config_input.tsx new file mode 100644 index 0000000000000..b59024b8b10b6 --- /dev/null +++ b/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/log_rate_analysis_config_input.tsx @@ -0,0 +1,45 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import type { AiopsPluginStartDeps } from '../../types'; +import { LogRateAnalysisEmbeddableInitializer } from './log_rate_analysis_embeddable_initializer'; +import type { LogRateAnalysisComponentApi, LogRateAnalysisEmbeddableState } from './types'; + +export function EmbeddableLogRateAnalysisUserInput({ + pluginStart, + logRateAnalysisControlsApi, + onCancel, + onConfirm, + initialState, + isNewPanel, +}: { + pluginStart: AiopsPluginStartDeps; + logRateAnalysisControlsApi: LogRateAnalysisComponentApi; + onCancel: () => void; + onConfirm: (newUpdate: LogRateAnalysisEmbeddableState) => void; + initialState?: LogRateAnalysisEmbeddableState; + isNewPanel?: boolean; +}) { + const handlePreview = async (nextUpdate: LogRateAnalysisEmbeddableState) => { + if (logRateAnalysisControlsApi) { + logRateAnalysisControlsApi.updateUserInput(nextUpdate); + } + }; + + return ( + + ); +} diff --git a/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/log_rate_analysis_embeddable_initializer.tsx b/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/log_rate_analysis_embeddable_initializer.tsx index 329c202780bdc..ca3592da3bcb0 100644 --- a/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/log_rate_analysis_embeddable_initializer.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/log_rate_analysis_embeddable_initializer.tsx @@ -141,7 +141,7 @@ export const LogRateAnalysisEmbeddableInitializer: FC< }} > -

+

{isNewPanel ? i18n.translate('xpack.aiops.embeddableLogRateAnalysis.config.title.new', { defaultMessage: 'Create log rate analysis', diff --git a/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/resolve_log_rate_analysis_config_input.tsx b/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/resolve_log_rate_analysis_config_input.tsx deleted file mode 100644 index 8a9ec1dfc826d..0000000000000 --- a/x-pack/platform/plugins/shared/aiops/public/embeddables/log_rate_analysis/resolve_log_rate_analysis_config_input.tsx +++ /dev/null @@ -1,94 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import type { CoreStart } from '@kbn/core/public'; -import { tracksOverlays } from '@kbn/presentation-util'; -import { toMountPoint } from '@kbn/react-kibana-mount'; -import React from 'react'; -import type { AiopsPluginStartDeps } from '../../types'; -import { LogRateAnalysisEmbeddableInitializer } from './log_rate_analysis_embeddable_initializer'; -import type { LogRateAnalysisComponentApi, LogRateAnalysisEmbeddableState } from './types'; - -export async function resolveEmbeddableLogRateAnalysisUserInput( - coreStart: CoreStart, - pluginStart: AiopsPluginStartDeps, - parentApi: unknown, - focusedPanelId: string, - isNewPanel: boolean, - logRateAnalysisControlsApi: LogRateAnalysisComponentApi, - deletePanel?: () => void, - initialState?: LogRateAnalysisEmbeddableState -): Promise { - const { overlays } = coreStart; - - const overlayTracker = tracksOverlays(parentApi) ? parentApi : undefined; - - let hasChanged = false; - return new Promise(async (resolve, reject) => { - try { - const cancelChanges = () => { - if (isNewPanel && deletePanel) { - deletePanel(); - } else if (hasChanged && logRateAnalysisControlsApi && initialState) { - // Reset to initialState in case user has changed the preview state - logRateAnalysisControlsApi.updateUserInput(initialState); - } - - flyoutSession.close(); - overlayTracker?.clearOverlays(); - }; - - const update = async (nextUpdate: LogRateAnalysisEmbeddableState) => { - resolve(nextUpdate); - flyoutSession.close(); - overlayTracker?.clearOverlays(); - }; - - const preview = async (nextUpdate: LogRateAnalysisEmbeddableState) => { - if (logRateAnalysisControlsApi) { - logRateAnalysisControlsApi.updateUserInput(nextUpdate); - hasChanged = true; - } - }; - - const flyoutSession = overlays.openFlyout( - toMountPoint( - , - coreStart - ), - { - ownFocus: true, - size: 's', - type: 'push', - paddingSize: 'm', - hideCloseButton: true, - 'data-test-subj': 'aiopsLogRateAnalysisEmbeddableInitializer', - 'aria-labelledby': 'logRateAnalysisConfig', - onClose: () => { - reject(); - flyoutSession.close(); - overlayTracker?.clearOverlays(); - }, - } - ); - - if (tracksOverlays(parentApi)) { - parentApi.openOverlay(flyoutSession, { focusedPanelId }); - } - } catch (error) { - reject(error); - } - }); -} diff --git a/x-pack/platform/plugins/shared/aiops/public/ui_actions/create_log_rate_analysis_actions.tsx b/x-pack/platform/plugins/shared/aiops/public/ui_actions/create_log_rate_analysis_actions.tsx index 162067036a156..f11b33c99564c 100644 --- a/x-pack/platform/plugins/shared/aiops/public/ui_actions/create_log_rate_analysis_actions.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/ui_actions/create_log_rate_analysis_actions.tsx @@ -5,7 +5,9 @@ * 2.0. */ +import React from 'react'; import { i18n } from '@kbn/i18n'; +import { openLazyFlyout } from '@kbn/presentation-util'; import type { PresentationContainer } from '@kbn/presentation-containers'; import type { EmbeddableApiContext } from '@kbn/presentation-publishing'; import type { UiActionsActionDefinition } from '@kbn/ui-actions-plugin/public'; @@ -14,6 +16,7 @@ import type { CoreStart } from '@kbn/core-lifecycle-browser'; import { EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE } from '@kbn/aiops-log-rate-analysis/constants'; import { AIOPS_EMBEDDABLE_GROUPING } from '@kbn/aiops-common/constants'; +import { v4 } from 'uuid'; import type { LogRateAnalysisEmbeddableApi, LogRateAnalysisEmbeddableInitialState, @@ -21,6 +24,7 @@ import type { import type { AiopsPluginStartDeps } from '../types'; import type { LogRateAnalysisActionContext } from './log_rate_analysis_action_context'; +import { EmbeddableLogRateAnalysisUserInput } from '../embeddables/log_rate_analysis/log_rate_analysis_config_input'; const parentApiIsCompatible = async ( parentApi: unknown @@ -49,43 +53,52 @@ export function createAddLogRateAnalysisEmbeddableAction( const presentationContainerParent = await parentApiIsCompatible(context.embeddable); if (!presentationContainerParent) throw new IncompatibleActionError(); - try { - const { resolveEmbeddableLogRateAnalysisUserInput } = await import( - '../embeddables/log_rate_analysis/resolve_log_rate_analysis_config_input' - ); + const uuid = v4(); - const initialState: LogRateAnalysisEmbeddableInitialState = { - dataViewId: undefined, - }; + openLazyFlyout({ + core: coreStart, + parentApi: context.embeddable, + flyoutProps: { + hideCloseButton: true, + focusedPanelId: uuid, + 'data-test-subj': 'aiopsLogRateAnalysisEmbeddableInitializer', + 'aria-labelledby': 'logRateAnalysisConfig', + }, + loadContent: async ({ closeFlyout }) => { + const initialState: LogRateAnalysisEmbeddableInitialState = { + dataViewId: undefined, + }; - const embeddable = await presentationContainerParent.addNewPanel< - object, - LogRateAnalysisEmbeddableApi - >({ - panelType: EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE, - serializedState: { rawState: initialState }, - }); + const embeddable = await presentationContainerParent.addNewPanel< + object, + LogRateAnalysisEmbeddableApi + >({ + panelType: EMBEDDABLE_LOG_RATE_ANALYSIS_TYPE, + serializedState: { rawState: initialState }, + maybePanelId: uuid, + }); - if (!embeddable) { - return; - } + if (!embeddable) { + return; + } - const deletePanel = () => { - presentationContainerParent.removePanel(embeddable.uuid); - }; - - resolveEmbeddableLogRateAnalysisUserInput( - coreStart, - pluginStart, - context.embeddable, - embeddable.uuid, - true, - embeddable, - deletePanel - ); - } catch (e) { - return Promise.reject(); - } + return ( + { + embeddable.updateUserInput(updatedState); + closeFlyout(); + }} + onCancel={() => { + presentationContainerParent.removePanel(embeddable.uuid); + closeFlyout(); + }} + /> + ); + }, + }); }, }; }