[ML] Fix Single Metric Viewer for jobs that hasn't been run (elastic#…

…129063)
sorenlouv · Apr 4, 2022 · 9b85ae9 · 9b85ae9
1 parent eedb66b
commit 9b85ae9
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
@@ -46,6 +46,7 @@ import type { TimeSeriesExplorerAppState } from '../../../../common/types/locato
 import type { TimeRangeBounds } from '../../util/time_buckets';
 import { useJobSelectionFlyout } from '../../contexts/ml/use_job_selection_flyout';
 import { useRefresh } from '../use_refresh';
+import { TimeseriesexplorerNoChartData } from '../../timeseriesexplorer/components/timeseriesexplorer_no_chart_data';
 
 export const timeSeriesExplorerRouteFactory = (
   navigateToPath: NavigateToPath,
@@ -321,6 +322,14 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
     );
   }
 
+  if (!bounds) {
+    return (
+      <TimeSeriesExplorerPage dateFormatTz={dateFormatTz}>
+        <TimeseriesexplorerNoChartData />
+      </TimeSeriesExplorerPage>
+    );
+  }
+
   const zoomProp: AppStateZoom | undefined =
     typeof selectedForecastId === 'string' && selectedForecastIdProp === undefined
       ? undefined

diff --git a/...timeseriesexplorer_no_chart_data/index.js → ...timeseriesexplorer_no_chart_data/index.ts b/...timeseriesexplorer_no_chart_data/index.js → ...timeseriesexplorer_no_chart_data/index.ts
diff --git a/..._data/timeseriesexplorer_no_chart_data.js → ...data/timeseriesexplorer_no_chart_data.tsx b/..._data/timeseriesexplorer_no_chart_data.js → ...data/timeseriesexplorer_no_chart_data.tsx
@@ -9,13 +9,15 @@
  * React component for rendering EuiEmptyPrompt when no results were found.
  */
 
-import React from 'react';
-
+import React, { FC } from 'react';
 import { EuiEmptyPrompt } from '@elastic/eui';
-
 import { i18n } from '@kbn/i18n';
+import type { Entity } from '../entity_control/entity_control';
 
-export const TimeseriesexplorerNoChartData = ({ dataNotChartable, entities }) => (
+export const TimeseriesexplorerNoChartData: FC<{
+  dataNotChartable?: boolean;
+  entities?: Entity[];
+}> = ({ dataNotChartable, entities }) => (
   <EuiEmptyPrompt
     iconType="iInCircle"
     title={
@@ -32,7 +34,7 @@ export const TimeseriesexplorerNoChartData = ({ dataNotChartable, entities }) =>
             defaultMessage: `Model plot is not collected for the selected {entityCount, plural, one {entity} other {entities}}
 and the source data cannot be plotted for this detector.`,
             values: {
-              entityCount: entities.length,
+              entityCount: entities!.length,
             },
           })}
         </p>

diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/get_controls_for_detector.ts b/x-pack/plugins/ml/public/application/timeseriesexplorer/get_controls_for_detector.ts
@@ -16,7 +16,7 @@ export function getControlsForDetector(
   selectedDetectorIndex: number,
   selectedEntities: Record<string, any>,
   selectedJobId: JobId
-) {
+): Entity[] {
   const selectedJob = mlJobService.getJob(selectedJobId);
 
   const entities: Entity[] = [];

diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_page.tsx
@@ -19,7 +19,7 @@ import { useMlKibana } from '../contexts/kibana';
 import { MlPageHeader } from '../components/page_header';
 
 interface TimeSeriesExplorerPageProps {
-  dateFormatTz: string;
+  dateFormatTz?: string;
   resizeRef?: any;
   noSingleMetricJobsFound?: boolean;
 }
@@ -56,7 +56,7 @@ export const TimeSeriesExplorerPage: FC<TimeSeriesExplorerPageProps> = ({
         </MlPageHeader>
 
         {noSingleMetricJobsFound ? null : (
-          <JobSelector dateFormatTz={dateFormatTz} singleSelection={true} timeseriesOnly={true} />
+          <JobSelector dateFormatTz={dateFormatTz!} singleSelection={true} timeseriesOnly={true} />
         )}
 
         {children}