[ML] Reactive time-range selection in SMV (#51008)

* [ML] http service to TS, add httpCall using fromFetch

* [ML] types, add esSearchRx

* [ML] timeresiesexplorer_contans to ts

* [ML] timeseries_search_service to TS, add getMetricDataRx

* [ML] result service with observables

* [ML] update resolvers, forecast data support

* [ML] wip timeseriesexplorer

* [ML] fix state update for zoom

* [ML] skip loading update

* [ML] cleanup contextChartSelected

* [ML] add to subscriptions

* [ML] update imports

* [ML] timeseriesexplorer_utils

* [ML] refactor result service

* [ML] getAnnotations

* [ML] rename subject

* [ML] fix explorer and unit tests

* [ML] fix forecast

* [ML] replace skipWhilte with filter

* [ML] rename http$

* [ML] rename esSearch$

* [ML] remove filter operator, check for contextChartData before calculating the default range

* [ML] remove casting for FocusData

* [ML] replace with an arrow function

* [ML] fix Job import path

* [ML] fix annotations

Author: darnautov

x-pack/legacy/plugins/ml/common/util/job_utils.d.ts

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Job } from '../../public/application/jobs/new_job/common/job_creator/configs';
+
 export interface ValidationMessage {
   id: string;
 }
@@ -39,3 +41,5 @@ export function validateModelMemoryLimitUnits(
 export function processCreatedBy(customSettings: { created_by?: string }): void;
 
 export function mlFunctionToESAggregation(functionName: string): string | null;
+
+export function isModelPlotEnabled(job: Job, detectorIndex: number, entityFields: any[]): boolean;

x-pack/legacy/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js

@@ -87,7 +87,7 @@ const AnnotationsTable = injectI18n(class AnnotationsTable extends Component {
         earliestMs: null,
         latestMs: null,
         maxAnnotations: ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE
-      }).then((resp) => {
+      }).toPromise().then((resp) => {
         this.setState((prevState, props) => ({
           annotations: resp.annotations[props.jobs[0].job_id] || [],
           errorMessage: undefined,

x-pack/legacy/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.test.js

@@ -24,13 +24,17 @@ jest.mock('../../../services/job_service', () => ({
   }
 }));
 
-jest.mock('../../../services/ml_api_service', () => ({
-  ml: {
-    annotations: {
-      getAnnotations: jest.fn().mockResolvedValue({ annotations: [] })
+jest.mock('../../../services/ml_api_service', () => {
+  const { of } = require('rxjs');
+  const mockAnnotations$ = of({ annotations: [] });
+  return {
+    ml: {
+      annotations: {
+        getAnnotations: jest.fn().mockReturnValue(mockAnnotations$)
+      }
     }
-  }
-}));
+  };}
+);
 
 describe('AnnotationsTable', () => {
   test('Minimal initialization without props.', () => {

x-pack/legacy/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js

@@ -124,7 +124,7 @@ export function explorerChartsContainerServiceFactory(callback) {
           range.min,
           range.max,
           config.interval
-        );
+        ).toPromise();
       } else {
         // Extract the partition, by, over fields on which to filter.
         const criteriaFields = [];
@@ -169,7 +169,7 @@ export function explorerChartsContainerServiceFactory(callback) {
             range.min,
             range.max,
             interval
-          )
+          ).toPromise()
             .then((resp) => {
               // Return data in format required by the explorer charts.
               const results = resp.results;
@@ -201,7 +201,7 @@ export function explorerChartsContainerServiceFactory(callback) {
         range.min,
         range.max,
         ANOMALIES_MAX_RESULTS
-      );
+      ).toPromise();
     }
 
     // Query 3 - load any scheduled events for the job.
@@ -213,7 +213,7 @@ export function explorerChartsContainerServiceFactory(callback) {
         config.interval,
         1,
         MAX_SCHEDULED_EVENTS
-      );
+      ).toPromise();
     }
 
     // Query 4 - load context data distribution

x-pack/legacy/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.test.js

@@ -47,36 +47,39 @@ jest.mock('../../services/job_service', () => ({
   }
 }));
 
-jest.mock('../../services/results_service', () => ({
-  mlResultsService: {
-    getMetricData(indices) {
+jest.mock('../../services/results_service', () => {
+  const { of } = require('rxjs');
+  return {
+    mlResultsService: {
+      getMetricData(indices) {
       // this is for 'call anomalyChangeListener with actual series config'
-      if (indices[0] === 'farequote-2017') {
-        return Promise.resolve(mockSeriesPromisesResponse[0][0]);
-      }
-      // this is for 'filtering should skip values of null'
-      return Promise.resolve(mockMetricClone);
-    },
-    getRecordsForCriteria() {
-      return Promise.resolve(mockSeriesPromisesResponse[0][1]);
-    },
-    getScheduledEventsByBucket() {
-      return Promise.resolve(mockSeriesPromisesResponse[0][2]);
-    },
-    getEventDistributionData(indices) {
+        if (indices[0] === 'farequote-2017') {
+          return of(mockSeriesPromisesResponse[0][0]);
+        }
+        // this is for 'filtering should skip values of null'
+        return of(mockMetricClone);
+      },
+      getRecordsForCriteria() {
+        return of(mockSeriesPromisesResponse[0][1]);
+      },
+      getScheduledEventsByBucket() {
+        return of(mockSeriesPromisesResponse[0][2]);
+      },
+      getEventDistributionData(indices) {
       // this is for 'call anomalyChangeListener with actual series config'
-      if (indices[0] === 'farequote-2017') {
-        return Promise.resolve([]);
+        if (indices[0] === 'farequote-2017') {
+          return Promise.resolve([]);
+        }
+        // this is for 'filtering should skip values of null' and
+        // resolves with a dummy object to trigger the processing
+        // of the event distribution chartdata filtering
+        return Promise.resolve([{
+          entity: 'mock'
+        }]);
       }
-      // this is for 'filtering should skip values of null' and
-      // resolves with a dummy object to trigger the processing
-      // of the event distribution chartdata filtering
-      return Promise.resolve([{
-        entity: 'mock'
-      }]);
     }
-  }
-}));
+  };
+});
 
 jest.mock('../../util/string_utils', () => ({
   mlEscape(d) { return d; }

x-pack/legacy/plugins/ml/public/application/explorer/explorer_utils.js

@@ -417,7 +417,7 @@ export function loadAnnotationsTableData(selectedCells, selectedJobs, interval,
       earliestMs: timeRange.earliestMs,
       latestMs: timeRange.latestMs,
       maxAnnotations: ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE
-    }).then((resp) => {
+    }).toPromise().then((resp) => {
       if (resp.error !== undefined || resp.annotations === undefined) {
         return resolve([]);
       }
@@ -477,7 +477,7 @@ export async function loadAnomaliesTableData(
       ANOMALIES_TABLE_DEFAULT_QUERY_SIZE,
       MAX_CATEGORY_EXAMPLES,
       influencersFilterQuery
-    ).then((resp) => {
+    ).toPromise().then((resp) => {
       const anomalies = resp.anomalies;
       const detectorsByJob = mlJobService.detectorsByJob;
       anomalies.forEach((anomaly) => {

x-pack/legacy/plugins/ml/public/application/jobs/new_job/common/results_loader/results_loader.ts

@@ -150,15 +150,17 @@ export class ResultsLoader {
     if (agg === null) {
       return { [dtrIndex]: [emptyModelItem] };
     }
-    const resp = await mlResultsService.getModelPlotOutput(
-      this._jobCreator.jobId,
-      dtrIndex,
-      [],
-      this._lastModelTimeStamp,
-      this._jobCreator.end,
-      `${this._chartInterval.getInterval().asMilliseconds()}ms`,
-      agg.mlModelPlotAgg
-    );
+    const resp = await mlResultsService
+      .getModelPlotOutput(
+        this._jobCreator.jobId,
+        dtrIndex,
+        [],
+        this._lastModelTimeStamp,
+        this._jobCreator.end,
+        `${this._chartInterval.getInterval().asMilliseconds()}ms`,
+        agg.mlModelPlotAgg
+      )
+      .toPromise();
 
     return this._createModel(resp, dtrIndex);
   }

x-pack/legacy/plugins/ml/public/application/services/forecast_service.d.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { Observable } from 'rxjs';
+import { Job } from '../jobs/new_job/common/job_creator/configs';
+
+export interface ForecastData {
+  success: boolean;
+  results: any;
+}
+
+export const mlForecastService: {
+  getForecastData: (
+    job: Job,
+    detectorIndex: number,
+    forecastId: string,
+    entityFields: any[],
+    earliestMs: number,
+    latestMs: number,
+    interval: string,
+    aggType: any
+  ) => Observable<ForecastData>;
+};