[ML] Rewrite Log rate analysis flyout to load asynchronously

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 (
+                <EmbeddableLogRateAnalysisUserInput
+                  pluginStart={pluginStart}
+                  logRateAnalysisControlsApi={logRateAnalysisControlsApi}
+                  onConfirm={(result) => {
+                    logRateAnalysisControlsApi.updateUserInput(result);
+                    closeFlyout();
+                  }}
+                  onCancel={() => {
+                    logRateAnalysisControlsApi.updateUserInput(initState);
+                    closeFlyout();
+                  }}
+                  initialState={initState}
+                />
+              );
+            },
+          });
         },
         dataLoading$,
         blockingError$,

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 (
+    <LogRateAnalysisEmbeddableInitializer
+      dataViews={pluginStart.data.dataViews}
+      IndexPatternSelect={pluginStart.unifiedSearch.ui.IndexPatternSelect}
+      initialInput={initialState}
+      onCreate={onConfirm}
+      onCancel={onCancel}
+      onPreview={handlePreview}
+      isNewPanel={Boolean(isNewPanel)}
+    />
+  );
+}

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<
         }}
       >
         <EuiTitle size="s" data-test-subj="inlineEditingFlyoutLabel">
-          <h2>
+          <h2 id="logRateAnalysisConfig">
             {isNewPanel
               ? i18n.translate('xpack.aiops.embeddableLogRateAnalysis.config.title.new', {
                   defaultMessage: 'Create log rate analysis',

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,13 +16,15 @@ 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,
 } from '../embeddables/log_rate_analysis/types';
 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 (
+            <EmbeddableLogRateAnalysisUserInput
+              isNewPanel={true}
+              pluginStart={pluginStart}
+              logRateAnalysisControlsApi={embeddable}
+              onConfirm={(updatedState) => {
+                embeddable.updateUserInput(updatedState);
+                closeFlyout();
+              }}
+              onCancel={() => {
+                presentationContainerParent.removePanel(embeddable.uuid);
+                closeFlyout();
+              }}
+            />
+          );
+        },
+      });
     },
   };
 }