From 7c3150c2f8069459b706af25b8ec67f6f3c344a1 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Sat, 13 Jul 2019 09:51:27 +0100
Subject: [PATCH 1/2] [ML] Adding job json preview

---
 .../ml_job_editor/{index.js => index.ts}      |  1 -
 .../ml_job_editor/ml_job_editor.d.ts          |  8 +++
 .../common/job_creator/job_creator.ts         |  8 +++
 .../components/summary_step/json_flyout.tsx   | 58 +++++++++++++++++++
 .../pages/components/summary_step/summary.tsx | 25 ++++++--
 5 files changed, 95 insertions(+), 5 deletions(-)
 rename x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/{index.js => index.ts} (99%)
 create mode 100644 x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/ml_job_editor.d.ts
 create mode 100644 x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/json_flyout.tsx

diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/index.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/index.ts
similarity index 99%
rename from x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/index.js
rename to x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/index.ts
index dc1bb83bf3f4d..913dc4a9510f3 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/index.js
+++ b/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';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/ml_job_editor.d.ts b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/ml_job_editor/ml_job_editor.d.ts
new file mode 100644
index 0000000000000..a5af8a872f754
--- /dev/null
+++ b/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;
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/job_creator.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/job_creator.ts
index dc21813cfc55f..234ac7c9307f6 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/job_creator.ts
+++ b/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);
+  }
 }
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/json_flyout.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/json_flyout.tsx
new file mode 100644
index 0000000000000..e2bb85bfdb318
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx
index d6cdccbc87c00..69406ff38f155 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx
+++ b/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, setsSowJsonFlyout] = useState(false);
 
   function setProgressWrapper(p: number) {
     setProgress(p);
@@ -30,6 +32,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
   }, []);
 
   function start() {
+    setsSowJsonFlyout(false);
     jobCreator.createAndStartJob();
   }
 
@@ -43,6 +46,10 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
     window.open(url, '_blank');
   }
 
+  function toggleJsonFlyout() {
+    setsSowJsonFlyout(!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={() => setsSowJsonFlyout(false)} jobCreator={jobCreator} />
+              )}
+              &emsp;
+            </Fragment>
           )}
           {progress === 100 && (
             <Fragment>

From 849717bc03c3f143f8658fc670a3c333f77851b7 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Sat, 13 Jul 2019 09:52:43 +0100
Subject: [PATCH 2/2] fix typo

---
 .../new_job_new/pages/components/summary_step/summary.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx
index 69406ff38f155..94660e7fe2e4a 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx
@@ -21,7 +21,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
 
   const { jobCreator } = useContext(JobCreatorContext);
   const [progress, setProgress] = useState(0);
-  const [showJsonFlyout, setsSowJsonFlyout] = useState(false);
+  const [showJsonFlyout, setShowJsonFlyout] = useState(false);
 
   function setProgressWrapper(p: number) {
     setProgress(p);
@@ -32,7 +32,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
   }, []);
 
   function start() {
-    setsSowJsonFlyout(false);
+    setShowJsonFlyout(false);
     jobCreator.createAndStartJob();
   }
 
@@ -47,7 +47,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
   }
 
   function toggleJsonFlyout() {
-    setsSowJsonFlyout(!showJsonFlyout);
+    setShowJsonFlyout(!showJsonFlyout);
   }
 
   return (
@@ -77,7 +77,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
                 Preview job JSON
               </EuiButtonEmpty>
               {showJsonFlyout && (
-                <JsonFlyout closeFlyout={() => setsSowJsonFlyout(false)} jobCreator={jobCreator} />
+                <JsonFlyout closeFlyout={() => setShowJsonFlyout(false)} jobCreator={jobCreator} />
               )}
               &emsp;
             </Fragment>