[ML] Add Anomaly Explorer charts embeddable

x-pack/plugins/ml/common/util/anomaly_utils.ts

@@ -27,10 +27,16 @@ export enum ENTITY_FIELD_TYPE {
   PARTITON = 'partition',
 }
 
+export const ENTITFY_FIELD_OPERATIONS = {
+  ADD: '+',
+  REMOVE: '-',
+} as const;
+
 export interface EntityField {
   fieldName: string;
   fieldValue: string | number | undefined;
   fieldType?: ENTITY_FIELD_TYPE;
+  operation?: typeof ENTITFY_FIELD_OPERATIONS[keyof typeof ENTITFY_FIELD_OPERATIONS];
 }
 
 // List of function descriptions for which actual values from record level results should be displayed.

x-pack/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx

@@ -10,7 +10,7 @@ import { EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { usePageUrlState } from '../../../util/url_state';
 
-interface TableInterval {
+export interface TableInterval {
   display: string;
   val: string;
 }
@@ -64,6 +64,14 @@ export const useTableInterval = (): [TableInterval, (v: TableInterval) => void]
 export const SelectInterval: FC = () => {
   const [interval, setInterval] = useTableInterval();
 
+  return <SelectIntervalUI interval={interval} setInterval={setInterval} />;
+};
+
+interface SelectIntervalUIProps {
+  interval: TableInterval;
+  setInterval: (interval: TableInterval) => void;
+}
+export const SelectIntervalUI: FC<SelectIntervalUIProps> = ({ interval, setInterval }) => {
   const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setInterval(optionValueToInterval(e.target.value));
   };

x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.tsx

@@ -38,7 +38,7 @@ const optionsMap = {
   [criticalLabel]: ANOMALY_THRESHOLD.CRITICAL,
 };
 
-interface TableSeverity {
+export interface TableSeverity {
   val: number;
   display: string;
   color: string;
@@ -67,7 +67,7 @@ export const SEVERITY_OPTIONS: TableSeverity[] = [
   },
 ];
 
-function optionValueToThreshold(value: number) {
+export function optionValueToThreshold(value: number) {
   // Get corresponding threshold object with required display and val properties from the specified value.
   let threshold = SEVERITY_OPTIONS.find((opt) => opt.val === value);
 
@@ -121,6 +121,14 @@ interface Props {
 export const SelectSeverity: FC<Props> = ({ classNames } = { classNames: '' }) => {
   const [severity, setSeverity] = useTableSeverity();
 
+  return <SelectSeverityUI severity={severity} setSeverity={setSeverity} />;
+};
+
+export const SelectSeverityUI: FC<{
+  classNames?: string;
+  severity: TableSeverity;
+  setSeverity: (s: TableSeverity) => void;
+}> = ({ classNames = '', severity, setSeverity }) => {
   const onChange = (valueDisplay: string) => {
     setSeverity(optionValueToThreshold(optionsMap[valueDisplay]));
   };

x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts

@@ -13,7 +13,6 @@ import { forkJoin, of, Observable, Subject } from 'rxjs';
 import { mergeMap, switchMap, tap } from 'rxjs/operators';
 
 import { useCallback, useMemo } from 'react';
-import { anomalyDataChange } from '../explorer_charts/explorer_charts_container_service';
 import { explorerService } from '../explorer_dashboard_service';
 import {
   getDateFormatTz,
@@ -35,6 +34,9 @@ import { mlResultsServiceProvider } from '../../services/results_service';
 import { isViewBySwimLaneData } from '../swimlane_container';
 import { ANOMALY_SWIM_LANE_HARD_LIMIT } from '../explorer_constants';
 import { TimefilterContract } from '../../../../../../../src/plugins/data/public';
+import { AnomalyExplorerChartsService } from '../../services/anomaly_explorer_charts_service';
+import { CombinedJob } from '../../../../common/types/anomaly_detection_jobs';
+import { mlJobService } from '../../services/job_service';
 
 // Memoize the data fetching methods.
 // wrapWithLastRefreshArg() wraps any given function and preprends a `lastRefresh` argument
@@ -52,7 +54,6 @@ const memoize = <T extends (...a: any[]) => any>(func: T, context?: any) => {
   return memoizeOne(wrapWithLastRefreshArg<T>(func, context) as any, memoizeIsEqual);
 };
 
-const memoizedAnomalyDataChange = memoize<typeof anomalyDataChange>(anomalyDataChange);
 const memoizedLoadAnnotationsTableData = memoize<typeof loadAnnotationsTableData>(
   loadAnnotationsTableData
 );
@@ -93,6 +94,7 @@ export const isLoadExplorerDataConfig = (arg: any): arg is LoadExplorerDataConfi
  */
 const loadExplorerDataProvider = (
   anomalyTimelineService: AnomalyTimelineService,
+  anomalyExplorerService: AnomalyExplorerChartsService,
   timefilter: TimefilterContract
 ) => {
   const memoizedLoadOverallData = memoize(
@@ -103,6 +105,11 @@ const loadExplorerDataProvider = (
     anomalyTimelineService.loadViewBySwimlane,
     anomalyTimelineService
   );
+  const memoizedAnomalyDataChange = memoize(
+    anomalyExplorerService.getAnomalyData,
+    anomalyExplorerService
+  );
+
   return (config: LoadExplorerDataConfig): Observable<Partial<ExplorerState>> => {
     if (!isLoadExplorerDataConfig(config)) {
       return of({});
@@ -124,6 +131,10 @@ const loadExplorerDataProvider = (
       viewByPerPage,
     } = config;
 
+    const combinedJobRecords: Record<string, CombinedJob> = selectedJobs.reduce((acc, job) => {
+      return { ...acc, [job.id]: mlJobService.getJob(job.id) };
+    }, {});
+
     const selectionInfluencers = getSelectionInfluencers(selectedCells, viewBySwimlaneFieldName);
     const jobIds = getSelectionJobIds(selectedCells, selectedJobs);
 
@@ -200,23 +211,29 @@ const loadExplorerDataProvider = (
       // and pass on the data we already fetched.
       tap(explorerService.setViewBySwimlaneLoading),
       // Trigger a side-effect to update the charts.
-      tap(({ anomalyChartRecords }) => {
+      tap(({ anomalyChartRecords, topFieldValues }) => {
         if (selectedCells !== undefined && Array.isArray(anomalyChartRecords)) {
           memoizedAnomalyDataChange(
             lastRefresh,
+            explorerService,
+            combinedJobRecords,
             swimlaneContainerWidth,
             anomalyChartRecords,
             timerange.earliestMs,
             timerange.latestMs,
+            timefilter,
             tableSeverity
           );
         } else {
           memoizedAnomalyDataChange(
             lastRefresh,
+            explorerService,
+            combinedJobRecords,
             swimlaneContainerWidth,
             [],
             timerange.earliestMs,
             timerange.latestMs,
+            timefilter,
             tableSeverity
           );
         }
@@ -291,12 +308,17 @@ export const useExplorerData = (): [Partial<ExplorerState> | undefined, (d: any)
   } = useMlKibana();
 
   const loadExplorerData = useMemo(() => {
+    const mlResultsServices = mlResultsServiceProvider(mlApiServices);
     const anomalyTimelineService = new AnomalyTimelineService(
       timefilter,
       uiSettings,
-      mlResultsServiceProvider(mlApiServices)
+      mlResultsServices
+    );
+    const anomalyExplorerService = new AnomalyExplorerChartsService(
+      mlApiServices,
+      mlResultsServices
     );
-    return loadExplorerDataProvider(anomalyTimelineService, timefilter);
+    return loadExplorerDataProvider(anomalyTimelineService, anomalyExplorerService, timefilter);
   }, []);
 
   const loadExplorerData$ = useMemo(() => new Subject<LoadExplorerDataConfig>(), []);

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

@@ -63,13 +63,16 @@ import { AnomalyTimeline } from './anomaly_timeline';
 import { FILTER_ACTION } from './explorer_constants';
 
 // Explorer Charts
-import { ExplorerChartsContainer } from './explorer_charts/explorer_charts_container';
+import { ExplorerChartsContainer } from './explorer_charts/embeddable_explorer_charts_container';
 
 // Anomalies Table
 import { AnomaliesTable } from '../components/anomalies_table/anomalies_table';
 
 import { getTimefilter, getToastNotifications } from '../util/dependency_cache';
 import { ANOMALY_DETECTION_DEFAULT_TIME_RANGE } from '../../../common/constants/settings';
+import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { ML_APP_URL_GENERATOR } from '../../../common/constants/ml_url_generator';
+import { getTimeBucketsFromCache } from '../util/time_buckets';
 
 const ExplorerPage = ({
   children,
@@ -136,7 +139,7 @@ const ExplorerPage = ({
   </div>
 );
 
-export class Explorer extends React.Component {
+export class ExplorerUI extends React.Component {
   static propTypes = {
     explorerState: PropTypes.object.isRequired,
     setSelectedCells: PropTypes.func.isRequired,
@@ -224,6 +227,13 @@ export class Explorer extends React.Component {
   updateLanguage = (language) => this.setState({ language });
 
   render() {
+    const {
+      share: {
+        urlGenerators: { getUrlGenerator },
+      },
+    } = this.props.kibana.services;
+    const mlUrlGenerator = getUrlGenerator(ML_APP_URL_GENERATOR);
+
     const { showCharts, severity, stoppedPartitions, selectedJobsRunning } = this.props;
 
     const {
@@ -276,6 +286,7 @@ export class Explorer extends React.Component {
 
     const timefilter = getTimefilter();
     const bounds = timefilter.getActiveBounds();
+    const timeBuckets = getTimeBucketsFromCache();
     const selectedJobIds = Array.isArray(selectedJobs) ? selectedJobs.map((job) => job.id) : [];
     return (
       <ExplorerPage
@@ -460,7 +471,11 @@ export class Explorer extends React.Component {
                 <EuiSpacer size="m" />
 
                 <div className="euiText explorer-charts">
-                  {showCharts && <ExplorerChartsContainer {...{ ...chartsData, severity }} />}
+                  {showCharts && (
+                    <ExplorerChartsContainer
+                      {...{ ...chartsData, severity, timefilter, mlUrlGenerator, timeBuckets }}
+                    />
+                  )}
                 </div>
 
                 <AnomaliesTable
@@ -476,3 +491,5 @@ export class Explorer extends React.Component {
     );
   }
 }
+
+export const Explorer = withKibana(ExplorerUI);