[ML] Adding json preview

x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/index.js → x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/index.ts

@@ -4,5 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
 export { MLJobEditor, EDITOR_MODE } from './ml_job_editor';

x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/ml_job_editor.d.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export function MLJobEditor(props: any): any;
+export const EDITOR_MODE: any;

x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/job_creator.ts

@@ -313,4 +313,12 @@ export class JobCreator {
     }
     return null;
   }
+
+  public get formattedJobJson() {
+    return JSON.stringify(this._job_config, null, 2);
+  }
+
+  public get formattedDatafeedJson() {
+    return JSON.stringify(this._datafeed_config, null, 2);
+  }
 }

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/json_flyout.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import {
+  EuiFlyout,
+  EuiFlyoutFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiSpacer,
+} from '@elastic/eui';
+import { JobCreator } from '../../../common/job_creator';
+import { MLJobEditor } from '../../../../jobs_list/components/ml_job_editor';
+
+interface Props {
+  jobCreator: JobCreator;
+  closeFlyout: () => void;
+}
+export const JsonFlyout: FC<Props> = ({ jobCreator, closeFlyout }) => {
+  return (
+    <EuiFlyout onClose={closeFlyout} hideCloseButton size="l">
+      <EuiFlyoutBody>
+        <EuiFlexGroup>
+          <Contents title="Job configuration JSON" value={jobCreator.formattedJobJson} />
+          <Contents title="Datafeed configuration JSON" value={jobCreator.formattedDatafeedJson} />
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+              Close
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};
+
+const Contents: FC<{ title: string; value: string }> = ({ title, value }) => {
+  const EDITOR_HEIGHT = '800px';
+  return (
+    <EuiFlexItem>
+      <EuiTitle size="s">
+        <h5>{title}</h5>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <MLJobEditor value={value} height={EDITOR_HEIGHT} readOnly={true} />
+    </EuiFlexItem>
+  );
+};

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx

@@ -5,12 +5,13 @@
  */
 
 import React, { Fragment, FC, useContext, useState, useEffect } from 'react';
-import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
+import { EuiButton, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui';
 import { WizardNav } from '../../../../../data_frame/components/wizard_nav';
 import { WIZARD_STEPS, StepProps } from '../step_types';
 import { JobCreatorContext } from '../job_creator_context';
 import { KibanaContext, isKibanaContext } from '../../../../../data_frame/common/kibana_context';
 import { mlJobService } from '../../../../../services/job_service';
+import { JsonFlyout } from './json_flyout';
 
 export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) => {
   const kibanaContext = useContext(KibanaContext);
@@ -20,6 +21,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
 
   const { jobCreator } = useContext(JobCreatorContext);
   const [progress, setProgress] = useState(0);
+  const [showJsonFlyout, setShowJsonFlyout] = useState(false);
 
   function setProgressWrapper(p: number) {
     setProgress(p);
@@ -30,6 +32,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
   }, []);
 
   function start() {
+    setShowJsonFlyout(false);
     jobCreator.createAndStartJob();
   }
 
@@ -43,6 +46,10 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
     window.open(url, '_blank');
   }
 
+  function toggleJsonFlyout() {
+    setShowJsonFlyout(!showJsonFlyout);
+  }
+
   return (
     <Fragment>
       {isCurrentStep && (
@@ -61,9 +68,19 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
           )}
           <EuiHorizontalRule />
           {progress < 100 && (
-            <EuiButton onClick={start} isDisabled={progress > 0}>
-              Create job
-            </EuiButton>
+            <Fragment>
+              <EuiButton onClick={start} isDisabled={progress > 0}>
+                Create job
+              </EuiButton>
+              &emsp;
+              <EuiButtonEmpty size="s" onClick={toggleJsonFlyout} isDisabled={progress > 0}>
+                Preview job JSON
+              </EuiButtonEmpty>
+              {showJsonFlyout && (
+                <JsonFlyout closeFlyout={() => setShowJsonFlyout(false)} jobCreator={jobCreator} />
+              )}
+              &emsp;
+            </Fragment>
           )}
           {progress === 100 && (
             <Fragment>