[ML] Add MlAnnotationUpdatesContext.Provider, rename file

elastic · Nov 17, 2020 · 2165da7 · 2165da7
1 parent 0cf7ad0
commit 2165da7
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 26 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.test.tsx b/x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.test.tsx
@@ -14,7 +14,7 @@ import { Annotation } from '../../../../../common/types/annotations';
 import { AnnotationUpdatesService } from '../../../services/annotations_service';
 
 import { AnnotationFlyout } from './index';
-import { MlAnnotationUpdatesContext } from '../../../contexts/ml/use_ml_annotation_updates';
+import { MlAnnotationUpdatesContext } from '../../../contexts/ml/ml_annotation_updates_context';
 
 jest.mock('../../../util/dependency_cache', () => ({
   getToastNotifications: () => ({ addSuccess: jest.fn(), addDanger: jest.fn() }),
@@ -24,7 +24,7 @@ const annotationUpdatesService = new AnnotationUpdatesService();
 
 const MlAnnotationUpdatesContextProvider = ({ children }: { children: React.ReactElement }) => {
   return (
-    <MlAnnotationUpdatesContext.Provider value={{ annotationUpdatesService }}>
+    <MlAnnotationUpdatesContext.Provider value={annotationUpdatesService}>
       <IntlProvider>{children}</IntlProvider>
     </MlAnnotationUpdatesContext.Provider>
   );

diff --git a/x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx b/x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx
@@ -47,7 +47,7 @@ import {
 } from '../../../../../common/types/annotations';
 import { PartitionFieldsType } from '../../../../../common/types/anomalies';
 import { PARTITION_FIELDS } from '../../../../../common/constants/anomalies';
-import { MlAnnotationUpdatesContext } from '../../../contexts/ml/use_ml_annotation_updates';
+import { MlAnnotationUpdatesContext } from '../../../contexts/ml/ml_annotation_updates_context';
 
 interface ViewableDetector {
   index: number;
@@ -415,7 +415,7 @@ export class AnnotationFlyoutUI extends Component<CommonProps & Props> {
 }
 
 export const AnnotationFlyout: FC<any> = (props) => {
-  const { annotationUpdatesService } = useContext(MlAnnotationUpdatesContext);
+  const annotationUpdatesService = useContext(MlAnnotationUpdatesContext);
   const annotationProp = useObservable(annotationUpdatesService.isAnnotationInitialized$());
 
   const cancelEditingHandler = useCallback(() => {

diff --git a/...ugins/ml/public/application/components/annotations/annotations_table/annotations_table.js b/...ugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
@@ -50,7 +50,7 @@ import { withKibana } from '../../../../../../../../src/plugins/kibana_react/pub
 import { ML_APP_URL_GENERATOR, ML_PAGES } from '../../../../../common/constants/ml_url_generator';
 import { PLUGIN_ID } from '../../../../../common/constants/app';
 import { timeFormatter } from '../../../../../common/util/date_utils';
-import { MlAnnotationUpdatesContext } from '../../../contexts/ml/use_ml_annotation_updates';
+import { MlAnnotationUpdatesContext } from '../../../contexts/ml/ml_annotation_updates_context';
 
 const CURRENT_SERIES = 'current_series';
 /**
@@ -695,6 +695,6 @@ class AnnotationsTableUI extends Component {
 }
 
 export const AnnotationsTable = withKibana((props) => {
-  const { annotationUpdatesService } = useContext(MlAnnotationUpdatesContext);
+  const annotationUpdatesService = useContext(MlAnnotationUpdatesContext);
   return <AnnotationsTableUI annotationUpdatesService={annotationUpdatesService} {...props} />;
 });
diff --git a/.../contexts/ml/use_ml_annotation_updates.ts → ...texts/ml/ml_annotation_updates_context.ts b/.../contexts/ml/use_ml_annotation_updates.ts → ...texts/ml/ml_annotation_updates_context.ts
@@ -7,10 +7,8 @@
 import { createContext } from 'react';
 import { AnnotationUpdatesService } from '../../services/annotations_service';
 
-export interface MlAnnotationUpdatesContextValue {
-  annotationUpdatesService: AnnotationUpdatesService;
-}
+export type MlAnnotationUpdatesContextValue = AnnotationUpdatesService;
 
-export const MlAnnotationUpdatesContext = createContext<MlAnnotationUpdatesContextValue>({
-  annotationUpdatesService: new AnnotationUpdatesService(),
-});
+export const MlAnnotationUpdatesContext = createContext<MlAnnotationUpdatesContextValue>(
+  new AnnotationUpdatesService()
+);
diff --git a/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useEffect, useState, useCallback } from 'react';
+import React, { FC, useEffect, useState, useCallback, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 
 import { i18n } from '@kbn/i18n';
@@ -34,6 +34,8 @@ import { getBreadcrumbWithUrlForApp } from '../breadcrumbs';
 import { useTimefilter } from '../../contexts/kibana';
 import { isViewBySwimLaneData } from '../../explorer/swimlane_container';
 import { JOB_ID } from '../../../../common/constants/anomalies';
+import { MlAnnotationUpdatesContext } from '../../contexts/ml/ml_annotation_updates_context';
+import { AnnotationUpdatesService } from '../../services/annotations_service';
 
 export const explorerRouteFactory = (
   navigateToPath: NavigateToPath,
@@ -59,10 +61,13 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
     jobs: mlJobService.loadJobsWrapper,
     jobsWithTimeRange: () => ml.jobs.jobsWithTimerange(getDateFormatTz()),
   });
+  const annotationUpdatesService = useMemo(() => new AnnotationUpdatesService(), []);
 
   return (
     <PageLoader context={context}>
-      <ExplorerUrlStateManager jobsWithTimeRange={results.jobsWithTimeRange.jobs} />
+      <MlAnnotationUpdatesContext.Provider value={annotationUpdatesService}>
+        <ExplorerUrlStateManager jobsWithTimeRange={results.jobsWithTimeRange.jobs} />
+      </MlAnnotationUpdatesContext.Provider>
     </PageLoader>
   );
 };

diff --git a/x-pack/plugins/ml/public/application/routing/routes/jobs_list.tsx b/x-pack/plugins/ml/public/application/routing/routes/jobs_list.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, FC } from 'react';
+import React, { useEffect, FC, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { i18n } from '@kbn/i18n';
 
@@ -19,6 +19,8 @@ import { basicResolvers } from '../resolvers';
 import { JobsPage } from '../../jobs/jobs_list';
 import { useTimefilter } from '../../contexts/kibana';
 import { getBreadcrumbWithUrlForApp } from '../breadcrumbs';
+import { AnnotationUpdatesService } from '../../services/annotations_service';
+import { MlAnnotationUpdatesContext } from '../../contexts/ml/ml_annotation_updates_context';
 
 export const jobListRouteFactory = (navigateToPath: NavigateToPath, basePath: string): MlRoute => ({
   path: '/jobs',
@@ -57,10 +59,13 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
     setGlobalState({ refreshInterval });
     timefilter.setRefreshInterval(refreshInterval);
   }, []);
+  const annotationUpdatesService = useMemo(() => new AnnotationUpdatesService(), []);
 
   return (
     <PageLoader context={context}>
-      <JobsPage blockRefresh={blockRefresh} lastRefresh={lastRefresh} />
+      <MlAnnotationUpdatesContext.Provider value={annotationUpdatesService}>
+        <JobsPage blockRefresh={blockRefresh} lastRefresh={lastRefresh} />
+      </MlAnnotationUpdatesContext.Provider>
     </PageLoader>
   );
 };
diff --git a/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
@@ -5,7 +5,7 @@
  */
 
 import { isEqual } from 'lodash';
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import usePrevious from 'react-use/lib/usePrevious';
 import moment from 'moment';
 
@@ -39,7 +39,8 @@ import { basicResolvers } from '../resolvers';
 import { getBreadcrumbWithUrlForApp } from '../breadcrumbs';
 import { useTimefilter } from '../../contexts/kibana';
 import { useToastNotificationService } from '../../services/toast_notification_service';
-
+import { AnnotationUpdatesService } from '../../services/annotations_service';
+import { MlAnnotationUpdatesContext } from '../../contexts/ml/ml_annotation_updates_context';
 export const timeSeriesExplorerRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
@@ -64,13 +65,16 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
     jobs: mlJobService.loadJobsWrapper,
     jobsWithTimeRange: () => ml.jobs.jobsWithTimerange(getDateFormatTz()),
   });
+  const annotationUpdatesService = useMemo(() => new AnnotationUpdatesService(), []);
 
   return (
     <PageLoader context={context}>
-      <TimeSeriesExplorerUrlStateManager
-        config={deps.config}
-        jobsWithTimeRange={results.jobsWithTimeRange.jobs}
-      />
+      <MlAnnotationUpdatesContext.Provider value={annotationUpdatesService}>
+        <TimeSeriesExplorerUrlStateManager
+          config={deps.config}
+          jobsWithTimeRange={results.jobsWithTimeRange.jobs}
+        />
+      </MlAnnotationUpdatesContext.Provider>
     </PageLoader>
   );
 };

diff --git a/.../ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/.../ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -50,7 +50,7 @@ import {
   unhighlightFocusChartAnnotation,
   ANNOTATION_MIN_WIDTH,
 } from './timeseries_chart_annotations';
-import { MlAnnotationUpdatesContext } from '../../../contexts/ml/use_ml_annotation_updates';
+import { MlAnnotationUpdatesContext } from '../../../contexts/ml/ml_annotation_updates_context';
 
 const focusZoomPanelHeight = 25;
 const focusChartHeight = 310;
@@ -1799,7 +1799,7 @@ class TimeseriesChartIntl extends Component {
 }
 
 export const TimeseriesChart = (props) => {
-  const { annotationUpdatesService } = useContext(MlAnnotationUpdatesContext);
+  const annotationUpdatesService = useContext(MlAnnotationUpdatesContext);
   const annotationProp = useObservable(annotationUpdatesService.isAnnotationInitialized$());
 
   if (annotationProp === undefined) {

diff --git a/...lication/timeseriesexplorer/components/timeseries_chart/timeseries_chart_with_tooltip.tsx b/...lication/timeseriesexplorer/components/timeseries_chart/timeseries_chart_with_tooltip.tsx
@@ -16,7 +16,7 @@ import { useMlKibana, useNotifications } from '../../../contexts/kibana';
 import { getBoundsRoundedToInterval } from '../../../util/time_buckets';
 import { ANNOTATION_EVENT_USER } from '../../../../../common/constants/annotations';
 import { getControlsForDetector } from '../../get_controls_for_detector';
-import { MlAnnotationUpdatesContext } from '../../../contexts/ml/use_ml_annotation_updates';
+import { MlAnnotationUpdatesContext } from '../../../contexts/ml/ml_annotation_updates_context';
 
 interface TimeSeriesChartWithTooltipsProps {
   bounds: any;
@@ -51,7 +51,7 @@ export const TimeSeriesChartWithTooltips: FC<TimeSeriesChartWithTooltipsProps> =
     },
   } = useMlKibana();
 
-  const { annotationUpdatesService } = useContext(MlAnnotationUpdatesContext);
+  const annotationUpdatesService = useContext(MlAnnotationUpdatesContext);
 
   const [annotationData, setAnnotationData] = useState<Annotation[]>([]);