From 573bb1af1c9094f061681219e9bb532a5454fa21 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Fri, 17 Jan 2020 15:53:17 +0100
Subject: [PATCH] [ML] Fix no jobs page prompt.

---
 .../routing/routes/timeseriesexplorer.tsx     | 13 ++++-
 .../{index.js => index.ts}                    |  0
 ...s => timeseriesexplorer_no_jobs_found.tsx} |  0
 .../timeseriesexplorer/timeseriesexplorer.js  | 52 ++----------------
 .../timeseriesexplorer_page.tsx               | 54 +++++++++++++++++++
 5 files changed, 69 insertions(+), 50 deletions(-)
 rename x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/{index.js => index.ts} (100%)
 rename x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/{timeseriesexplorer_no_jobs_found.js => timeseriesexplorer_no_jobs_found.tsx} (100%)
 create mode 100644 x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
index dda3d1e8ea3cf3..f824faf7845c64 100644
--- a/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
@@ -28,6 +28,8 @@ import {
   getAutoZoomDuration,
   validateJobSelection,
 } from '../../timeseriesexplorer/timeseriesexplorer_utils';
+import { TimeSeriesExplorerPage } from '../../timeseriesexplorer/timeseriesexplorer_page';
+import { TimeseriesexplorerNoJobsFound } from '../../timeseriesexplorer/components/timeseriesexplorer_no_jobs_found';
 import { useUrlState } from '../../util/url_state';
 import { useTableInterval } from '../../components/controls/select_interval';
 import { useTableSeverity } from '../../components/controls/select_severity';
@@ -163,10 +165,11 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   } = isJobChange ? undefined : appState?.mlTimeSeriesExplorer?.zoom;
 
   const selectedJob = selectedJobId !== undefined ? mlJobService.getJob(selectedJobId) : undefined;
+  const timeSeriesJobs = createTimeSeriesJobData(mlJobService.jobs);
 
   let autoZoomDuration: number | undefined;
   if (selectedJobId !== undefined && selectedJob !== undefined) {
-    autoZoomDuration = getAutoZoomDuration(createTimeSeriesJobData(mlJobService.jobs), selectedJob);
+    autoZoomDuration = getAutoZoomDuration(timeSeriesJobs, selectedJob);
   }
 
   const appStateHandler = useCallback(
@@ -267,6 +270,14 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   const tzConfig = config.get('dateFormat:tz');
   const dateFormatTz = tzConfig !== 'Browser' ? tzConfig : moment.tz.guess();
 
+  if (timeSeriesJobs.length === 0) {
+    return (
+      <TimeSeriesExplorerPage dateFormatTz={dateFormatTz}>
+        <TimeseriesexplorerNoJobsFound />
+      </TimeSeriesExplorerPage>
+    );
+  }
+
   if (selectedJobId === undefined || autoZoomDuration === undefined || bounds === undefined) {
     return null;
   }
diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/index.js b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/index.js
rename to x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/index.ts
diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/timeseriesexplorer_no_jobs_found.js b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/timeseriesexplorer_no_jobs_found.tsx
similarity index 100%
rename from x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/timeseriesexplorer_no_jobs_found.js
rename to x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_no_jobs_found/timeseriesexplorer_no_jobs_found.tsx
diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
index 9e32bae6c0597f..f3d8692bfb3e97 100644
--- a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -24,7 +24,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  EuiProgress,
   EuiSelect,
   EuiSpacer,
   EuiText,
@@ -49,14 +48,12 @@ import { AnomaliesTable } from '../components/anomalies_table/anomalies_table';
 import { ChartTooltip } from '../components/chart_tooltip';
 import { EntityControl } from './components/entity_control';
 import { ForecastingModal } from './components/forecasting_modal/forecasting_modal';
-import { JobSelector } from '../components/job_selector';
 import { LoadingIndicator } from '../components/loading_indicator/loading_indicator';
-import { NavigationMenu } from '../components/navigation_menu';
 import { SelectInterval } from '../components/controls/select_interval/select_interval';
 import { SelectSeverity } from '../components/controls/select_severity/select_severity';
 import { TimeseriesChart } from './components/timeseries_chart/timeseries_chart';
-import { TimeseriesexplorerNoJobsFound } from './components/timeseriesexplorer_no_jobs_found';
 import { TimeseriesexplorerNoChartData } from './components/timeseriesexplorer_no_chart_data';
+import { TimeSeriesExplorerPage } from './timeseriesexplorer_page';
 
 import { ml } from '../services/ml_api_service';
 import { mlFieldFormatService } from '../services/field_format_service';
@@ -153,33 +150,6 @@ function getTimeseriesexplorerDefaultState() {
   };
 }
 
-const TimeSeriesExplorerPage = ({ children, jobSelectorProps, loading, resizeRef }) => (
-  <Fragment>
-    <NavigationMenu tabId="timeseriesexplorer" />
-    {/* Show animated progress bar while loading */}
-    {loading && <EuiProgress className="mlTimeSeriesExplorerProgress" color="primary" size="xs" />}
-    {/* Show a progress bar with progress 0% when not loading.
-        If we'd just show no progress bar when not loading it would result in a flickering height effect. */}
-    {!loading && (
-      <EuiProgress
-        className="mlTimeSeriesExplorerProgress"
-        value={0}
-        max={100}
-        color="primary"
-        size="xs"
-      />
-    )}
-    <JobSelector {...jobSelectorProps} />
-    <div
-      className="ml-time-series-explorer"
-      ref={resizeRef}
-      data-test-subj="mlPageSingleMetricViewer"
-    >
-      {children}
-    </div>
-  </Fragment>
-);
-
 const containerPadding = 24;
 
 export class TimeSeriesExplorer extends React.Component {
@@ -1091,26 +1061,10 @@ export class TimeSeriesExplorer extends React.Component {
       autoZoomDuration,
     };
 
-    const jobSelectorProps = {
-      dateFormatTz,
-      singleSelection: true,
-      timeseriesOnly: true,
-    };
-
     const jobs = createTimeSeriesJobData(mlJobService.jobs);
 
-    if (jobs.length === 0) {
-      return (
-        <TimeSeriesExplorerPage jobSelectorProps={jobSelectorProps} resizeRef={this.resizeRef}>
-          <TimeseriesexplorerNoJobsFound />
-        </TimeSeriesExplorerPage>
-      );
-    }
-
     if (selectedDetectorIndex === undefined || mlJobService.getJob(selectedJobId) === undefined) {
-      return (
-        <TimeSeriesExplorerPage jobSelectorProps={jobSelectorProps} resizeRef={this.resizeRef} />
-      );
+      return <TimeSeriesExplorerPage dateFormatTz={dateFormatTz} resizeRef={this.resizeRef} />;
     }
 
     const selectedJob = mlJobService.getJob(selectedJobId);
@@ -1155,7 +1109,7 @@ export class TimeSeriesExplorer extends React.Component {
 
     return (
       <TimeSeriesExplorerPage
-        jobSelectorProps={jobSelectorProps}
+        dateFormatTz={dateFormatTz}
         loading={loading}
         resizeRef={this.resizeRef}
       >
diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx
new file mode 100644
index 00000000000000..9da1a79232fce5
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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 { EuiProgress } from '@elastic/eui';
+
+import { JobSelector } from '../components/job_selector';
+import { NavigationMenu } from '../components/navigation_menu';
+
+interface TimeSeriesExplorerPageProps {
+  dateFormatTz: string;
+  loading?: boolean;
+  resizeRef?: any;
+}
+
+export const TimeSeriesExplorerPage: FC<TimeSeriesExplorerPageProps> = ({
+  children,
+  dateFormatTz,
+  loading,
+  resizeRef,
+}) => {
+  return (
+    <>
+      <NavigationMenu tabId="timeseriesexplorer" />
+      {/* Show animated progress bar while loading */}
+      {loading === true && (
+        <EuiProgress className="mlTimeSeriesExplorerProgress" color="primary" size="xs" />
+      )}
+      {/* Show a progress bar with progress 0% when not loading.
+        If we'd just show no progress bar when not loading it would result in a flickering height effect. */}
+      {loading === false && (
+        <EuiProgress
+          className="mlTimeSeriesExplorerProgress"
+          value={0}
+          max={100}
+          color="primary"
+          size="xs"
+        />
+      )}
+      <JobSelector dateFormatTz={dateFormatTz} singleSelection={true} timeseriesOnly={true} />
+      <div
+        className="ml-time-series-explorer"
+        ref={resizeRef}
+        data-test-subj="mlPageSingleMetricViewer"
+      >
+        {children}
+      </div>
+    </>
+  );
+};