[ML] Do not show lens flyout for single compatible layer (#132537)

* [ML] Do not show lens flyout for single compatible layer * adding comment * correcting button icon
elastic · May 23, 2022 · f110118 · f110118
1 parent 907b2e4
commit f110118
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 38 deletions.
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/job_from_lens/create_job.ts b/x-pack/plugins/ml/public/application/jobs/new_job/job_from_lens/create_job.ts
@@ -13,6 +13,7 @@ import type { DataViewsContract } from '@kbn/data-views-plugin/public';
 import { Filter, Query, DataViewBase } from '@kbn/es-query';
 
 import type {
+  Embeddable,
   LensPublicStart,
   LensSavedObjectAttributes,
   FieldBasedIndexPatternColumn,
@@ -40,6 +41,7 @@ import {
   isTermsField,
   isStringField,
   getMlFunction,
+  getJobsItemsFromEmbeddable,
 } from './utils';
 
 type VisualizationType = Awaited<ReturnType<LensPublicStart['getXyVisTypes']>>[number];
@@ -123,7 +125,17 @@ export async function canCreateAndStashADJob(
     console.error(error);
   }
 }
-export async function getLayers(
+
+export async function getResultLayersFromEmbeddable(
+  embeddable: Embeddable,
+  dataViewClient: DataViewsContract,
+  lens: LensPublicStart
+): Promise<LayerResult[]> {
+  const { vis } = getJobsItemsFromEmbeddable(embeddable);
+  return getLayers(vis, dataViewClient, lens);
+}
+
+async function getLayers(
   vis: LensSavedObjectAttributes,
   dataViewClient: DataViewsContract,
   lens: LensPublicStart

diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/job_from_lens/index.ts b/x-pack/plugins/ml/public/application/jobs/new_job/job_from_lens/index.ts
@@ -7,6 +7,6 @@
 
 export type { LayerResult } from './create_job';
 export { resolver } from './route_resolver';
-export { getLayers } from './create_job';
+export { getResultLayersFromEmbeddable } from './create_job';
 export { convertLensToADJob } from './convert_lens_to_job_action';
 export { getJobsItemsFromEmbeddable, isCompatibleVisualizationType } from './utils';
diff --git a/x-pack/plugins/ml/public/embeddables/lens/lens_vis_layer_selection_flyout/flyout.tsx b/x-pack/plugins/ml/public/embeddables/lens/lens_vis_layer_selection_flyout/flyout.tsx
@@ -7,9 +7,7 @@
 
 import React, { FC } from 'react';
 import type { Embeddable } from '@kbn/lens-plugin/public';
-import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
-import type { LensPublicStart } from '@kbn/lens-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import {
@@ -25,16 +23,21 @@ import {
 } from '@elastic/eui';
 
 import { FlyoutBody } from './flyout_body';
+import type { LayerResult } from '../../../application/jobs/new_job/job_from_lens';
 
 interface Props {
+  layerResults: LayerResult[];
   embeddable: Embeddable;
-  data: DataPublicPluginStart;
   share: SharePluginStart;
-  lens: LensPublicStart;
   onClose: () => void;
 }
 
-export const LensLayerSelectionFlyout: FC<Props> = ({ onClose, embeddable, data, share, lens }) => {
+export const LensLayerSelectionFlyout: FC<Props> = ({
+  onClose,
+  layerResults,
+  embeddable,
+  share,
+}) => {
   return (
     <>
       <EuiFlyoutHeader hasBorder>
@@ -57,10 +60,9 @@ export const LensLayerSelectionFlyout: FC<Props> = ({ onClose, embeddable, data,
       <EuiFlyoutBody className="mlLensToJobFlyoutBody">
         <FlyoutBody
           onClose={onClose}
+          layerResults={layerResults}
           embeddable={embeddable}
-          data={data}
           share={share}
-          lens={lens}
         />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>

diff --git a/x-pack/plugins/ml/public/embeddables/lens/lens_vis_layer_selection_flyout/flyout_body.tsx b/x-pack/plugins/ml/public/embeddables/lens/lens_vis_layer_selection_flyout/flyout_body.tsx
@@ -5,11 +5,9 @@
  * 2.0.
  */
 
-import React, { FC, useState, useEffect, useMemo } from 'react';
+import React, { FC } from 'react';
 import type { Embeddable } from '@kbn/lens-plugin/public';
-import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
-import type { LensPublicStart } from '@kbn/lens-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import './style.scss';
@@ -24,43 +22,26 @@ import {
   EuiHorizontalRule,
 } from '@elastic/eui';
 
-import {
-  getLayers,
-  getJobsItemsFromEmbeddable,
-  convertLensToADJob,
-} from '../../../application/jobs/new_job/job_from_lens';
+import { convertLensToADJob } from '../../../application/jobs/new_job/job_from_lens';
 import type { LayerResult } from '../../../application/jobs/new_job/job_from_lens';
 import { CREATED_BY_LABEL } from '../../../../common/constants/new_job';
 import { extractErrorMessage } from '../../../../common/util/errors';
 
 interface Props {
+  layerResults: LayerResult[];
   embeddable: Embeddable;
-  data: DataPublicPluginStart;
   share: SharePluginStart;
-  lens: LensPublicStart;
   onClose: () => void;
 }
 
-export const FlyoutBody: FC<Props> = ({ onClose, embeddable, data, share, lens }) => {
-  const embeddableItems = useMemo(() => getJobsItemsFromEmbeddable(embeddable), [embeddable]);
-
-  const [layerResult, setLayerResults] = useState<LayerResult[]>([]);
-
-  useEffect(() => {
-    const { vis } = embeddableItems;
-
-    getLayers(vis, data.dataViews, lens).then((layers) => {
-      setLayerResults(layers);
-    });
-  }, []);
-
+export const FlyoutBody: FC<Props> = ({ onClose, layerResults, embeddable, share }) => {
   function createADJob(layerIndex: number) {
     convertLensToADJob(embeddable, share, layerIndex);
   }
 
   return (
     <>
-      {layerResult.map((layer, i) => (
+      {layerResults.map((layer, i) => (
         <>
           <EuiSplitPanel.Outer grow>
             <EuiSplitPanel.Inner>
@@ -103,12 +84,17 @@ export const FlyoutBody: FC<Props> = ({ onClose, embeddable, data, share, lens }
                     </EuiFlexItem>
                   </EuiFlexGroup>
                   <EuiSpacer size="m" />
-                  <EuiButton onClick={createADJob.bind(null, i)} size="s" color="success">
+                  <EuiButton
+                    onClick={createADJob.bind(null, i)}
+                    size="s"
+                    color="success"
+                    iconType="popout"
+                    iconSide="right"
+                  >
                     <FormattedMessage
                       id="xpack.ml.embeddables.lensLayerFlyout.createJobButton"
                       defaultMessage="Create job from this layer"
-                    />{' '}
-                    <EuiIcon type="popout" />
+                    />
                   </EuiButton>
                 </>
               ) : (

diff --git a/x-pack/plugins/ml/public/embeddables/lens/show_flyout.tsx b/x-pack/plugins/ml/public/embeddables/lens/show_flyout.tsx
@@ -23,6 +23,11 @@ import { DashboardConstants } from '@kbn/dashboard-plugin/public';
 import { getMlGlobalServices } from '../../application/app';
 import { LensLayerSelectionFlyout } from './lens_vis_layer_selection_flyout';
 
+import {
+  getResultLayersFromEmbeddable,
+  convertLensToADJob,
+} from '../../application/jobs/new_job/job_from_lens';
+
 export async function showLensVisToADJobFlyout(
   embeddable: Embeddable,
   coreStart: CoreStart,
@@ -39,6 +44,14 @@ export async function showLensVisToADJobFlyout(
 
   return new Promise(async (resolve, reject) => {
     try {
+      // do not show the flyout if the results only contain one layer
+      // and that layer can be used for creating an AD job
+      const layerResults = await getResultLayersFromEmbeddable(embeddable, data.dataViews, lens);
+      if (layerResults.length === 1 && layerResults[0].isCompatible) {
+        convertLensToADJob(embeddable, share, 0);
+        return resolve();
+      }
+
       const onFlyoutClose = () => {
         flyoutSession.close();
         resolve();
@@ -56,9 +69,8 @@ export async function showLensVisToADJobFlyout(
                   onFlyoutClose();
                   resolve();
                 }}
-                data={data}
+                layerResults={layerResults}
                 share={share}
-                lens={lens}
               />
             </KibanaContextProvider>,
             theme$