[ML] Anomaly Detection: Fixes hiding date picker for settings pages. (#…

…57544) - Fixes hiding the global date picker on anomaly detection settings pages. - Consolidates various timefilter usages for enabling/disabling the date picker into a useTimefilter() hook.
elastic · Feb 17, 2020 · 54f5cc1 · 54f5cc1
1 parent 5452400
commit 54f5cc1
Show file tree

Hide file tree

Showing 17 changed files with 139 additions and 70 deletions.
diff --git a/x-pack/legacy/plugins/ml/public/application/contexts/kibana/index.ts b/x-pack/legacy/plugins/ml/public/application/contexts/kibana/index.ts
@@ -6,3 +6,4 @@
 
 export { useMlKibana, StartServices, MlKibanaReactContextValue } from './kibana_context';
 export { useUiSettings } from './use_ui_settings_context';
+export { useTimefilter } from './use_timefilter';
diff --git a/x-pack/legacy/plugins/ml/public/application/contexts/kibana/use_timefilter.test.ts b/x-pack/legacy/plugins/ml/public/application/contexts/kibana/use_timefilter.test.ts
@@ -0,0 +1,65 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { useTimefilter } from './use_timefilter';
+
+jest.mock('./kibana_context', () => ({
+  useMlKibana: () => {
+    return {
+      services: {
+        data: {
+          query: {
+            timefilter: {
+              timefilter: {
+                disableTimeRangeSelector: jest.fn(),
+                disableAutoRefreshSelector: jest.fn(),
+                enableTimeRangeSelector: jest.fn(),
+                enableAutoRefreshSelector: jest.fn(),
+              },
+            },
+          },
+        },
+      },
+    };
+  },
+}));
+
+describe('useTimefilter', () => {
+  test('will not trigger any date picker settings by default', () => {
+    const { result } = renderHook(() => useTimefilter());
+    const timefilter = result.current;
+
+    expect(timefilter.disableTimeRangeSelector).toHaveBeenCalledTimes(0);
+    expect(timefilter.disableAutoRefreshSelector).toHaveBeenCalledTimes(0);
+    expect(timefilter.enableTimeRangeSelector).toHaveBeenCalledTimes(0);
+    expect(timefilter.enableTimeRangeSelector).toHaveBeenCalledTimes(0);
+  });
+
+  test('custom disabled overrides', () => {
+    const { result } = renderHook(() =>
+      useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false })
+    );
+    const timefilter = result.current;
+
+    expect(timefilter.disableTimeRangeSelector).toHaveBeenCalledTimes(1);
+    expect(timefilter.disableAutoRefreshSelector).toHaveBeenCalledTimes(1);
+    expect(timefilter.enableTimeRangeSelector).toHaveBeenCalledTimes(0);
+    expect(timefilter.enableTimeRangeSelector).toHaveBeenCalledTimes(0);
+  });
+
+  test('custom enabled overrides', () => {
+    const { result } = renderHook(() =>
+      useTimefilter({ timeRangeSelector: true, autoRefreshSelector: true })
+    );
+    const timefilter = result.current;
+
+    expect(timefilter.disableTimeRangeSelector).toHaveBeenCalledTimes(0);
+    expect(timefilter.disableAutoRefreshSelector).toHaveBeenCalledTimes(0);
+    expect(timefilter.enableTimeRangeSelector).toHaveBeenCalledTimes(1);
+    expect(timefilter.enableTimeRangeSelector).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/x-pack/legacy/plugins/ml/public/application/contexts/kibana/use_timefilter.ts b/x-pack/legacy/plugins/ml/public/application/contexts/kibana/use_timefilter.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 { useEffect } from 'react';
+
+import { useMlKibana } from './kibana_context';
+
+interface UseTimefilterOptions {
+  timeRangeSelector?: boolean;
+  autoRefreshSelector?: boolean;
+}
+
+export const useTimefilter = ({
+  timeRangeSelector,
+  autoRefreshSelector,
+}: UseTimefilterOptions = {}) => {
+  const { services } = useMlKibana();
+  const { timefilter } = services.data.query.timefilter;
+
+  useEffect(() => {
+    if (timeRangeSelector === true) {
+      timefilter.enableTimeRangeSelector();
+    } else if (timeRangeSelector === false) {
+      timefilter.disableTimeRangeSelector();
+    }
+
+    if (autoRefreshSelector === true) {
+      timefilter.enableAutoRefreshSelector();
+    } else if (autoRefreshSelector === false) {
+      timefilter.disableAutoRefreshSelector();
+    }
+  }, [timeRangeSelector, autoRefreshSelector]);
+
+  return timefilter;
+};
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx b/x-pack/legacy/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx
@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { isFullLicense } from '../license/check_license';
-import { useMlKibana } from '../contexts/kibana';
+import { useTimefilter } from '../contexts/kibana';
 
 import { NavigationMenu } from '../components/navigation_menu';
 
@@ -49,10 +49,7 @@ function startTrialDescription() {
 }
 
 export const DatavisualizerSelector: FC = () => {
-  const { services } = useMlKibana();
-  const { timefilter } = services.data.query.timefilter;
-  timefilter.disableTimeRangeSelector();
-  timefilter.disableAutoRefreshSelector();
+  useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
 
   const startTrialVisible = isFullLicense() === false;
 

diff --git a/...ck/legacy/plugins/ml/public/application/datavisualizer/file_based/file_datavisualizer.tsx b/...ck/legacy/plugins/ml/public/application/datavisualizer/file_based/file_datavisualizer.tsx
@@ -7,7 +7,7 @@
 import React, { FC, Fragment } from 'react';
 import { IUiSettingsClient } from 'src/core/public';
 
-import { useMlKibana } from '../../contexts/kibana';
+import { useTimefilter } from '../../contexts/kibana';
 import { NavigationMenu } from '../../components/navigation_menu';
 import { getIndexPatternsContract } from '../../util/index_utils';
 
@@ -19,10 +19,7 @@ export interface FileDataVisualizerPageProps {
 }
 
 export const FileDataVisualizerPage: FC<FileDataVisualizerPageProps> = ({ kibanaConfig }) => {
-  const { services } = useMlKibana();
-  const { timefilter } = services.data.query.timefilter;
-  timefilter.disableTimeRangeSelector();
-  timefilter.disableAutoRefreshSelector();
+  useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
   const indexPatterns = getIndexPatternsContract();
   return (
     <Fragment>

diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx
@@ -38,7 +38,7 @@ import { FullTimeRangeSelector } from '../../components/full_time_range_selector
 import { mlTimefilterRefresh$ } from '../../services/timefilter_refresh_service';
 import { useMlContext, SavedSearchQuery } from '../../contexts/ml';
 import { kbnTypeToMLJobType } from '../../util/field_types_utils';
-import { useMlKibana } from '../../contexts/kibana';
+import { useTimefilter } from '../../contexts/kibana';
 import { timeBasedIndexCheck, getQueryFromSavedSearch } from '../../util/index_utils';
 import { TimeBuckets } from '../../util/time_buckets';
 import { useUrlState } from '../../util/url_state';
@@ -97,11 +97,13 @@ function getDefaultPageState(): DataVisualizerPageState {
 }
 
 export const Page: FC = () => {
-  const { services } = useMlKibana();
   const mlContext = useMlContext();
 
-  const { timefilter } = services.data.query.timefilter;
   const { combinedQuery, currentIndexPattern, currentSavedSearch, kibanaConfig } = mlContext;
+  const timefilter = useTimefilter({
+    timeRangeSelector: currentIndexPattern.timeFieldName !== undefined,
+    autoRefreshSelector: true,
+  });
 
   const dataLoader = new DataLoader(currentIndexPattern, kibanaConfig);
   const [globalState, setGlobalState] = useUrlState('_g');
@@ -122,13 +124,6 @@ export const Page: FC = () => {
   const [lastRefresh, setLastRefresh] = useState(0);
 
   useEffect(() => {
-    if (currentIndexPattern.timeFieldName !== undefined) {
-      timefilter.enableTimeRangeSelector();
-    } else {
-      timefilter.disableTimeRangeSelector();
-    }
-
-    timefilter.enableAutoRefreshSelector();
     timeBasedIndexCheck(currentIndexPattern, true);
   }, []);
 

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/explorer.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/explorer.tsx
@@ -29,7 +29,7 @@ import { useTableInterval } from '../../components/controls/select_interval';
 import { useTableSeverity } from '../../components/controls/select_severity';
 import { useUrlState } from '../../util/url_state';
 import { ANOMALY_DETECTION_BREADCRUMB, ML_BREADCRUMB } from '../breadcrumbs';
-import { useMlKibana } from '../../contexts/kibana';
+import { useTimefilter } from '../../contexts/kibana';
 
 const breadcrumbs = [
   ML_BREADCRUMB,
@@ -70,8 +70,7 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
   const [appState, setAppState] = useUrlState('_a');
   const [globalState, setGlobalState] = useUrlState('_g');
   const [lastRefresh, setLastRefresh] = useState(0);
-  const { services } = useMlKibana();
-  const { timefilter } = services.data.query.timefilter;
+  const timefilter = useTimefilter({ timeRangeSelector: true, autoRefreshSelector: true });
 
   const { jobIds } = useJobSelection(jobsWithTimeRange, getDateFormatTz());
 
@@ -111,9 +110,6 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
   }, [globalState?.time?.from, globalState?.time?.to]);
 
   useEffect(() => {
-    timefilter.enableTimeRangeSelector();
-    timefilter.enableAutoRefreshSelector();
-
     const viewByFieldName = appState?.mlExplorerSwimlane?.viewByFieldName;
     if (viewByFieldName !== undefined) {
       explorerService.setViewBySwimlaneFieldName(viewByFieldName);

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/jobs_list.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/jobs_list.tsx
@@ -14,8 +14,8 @@ import { MlRoute, PageLoader, PageProps } from '../router';
 import { useResolver } from '../use_resolver';
 import { basicResolvers } from '../resolvers';
 import { JobsPage } from '../../jobs/jobs_list';
+import { useTimefilter } from '../../contexts/kibana';
 import { ANOMALY_DETECTION_BREADCRUMB, ML_BREADCRUMB } from '../breadcrumbs';
-import { useMlKibana } from '../../contexts/kibana';
 
 const breadcrumbs = [
   ML_BREADCRUMB,
@@ -36,8 +36,7 @@ export const jobListRoute: MlRoute = {
 
 const PageWrapper: FC<PageProps> = ({ deps }) => {
   const { context } = useResolver(undefined, undefined, deps.config, basicResolvers(deps));
-  const { services } = useMlKibana();
-  const { timefilter } = services.data.query.timefilter;
+  const timefilter = useTimefilter({ timeRangeSelector: false, autoRefreshSelector: true });
 
   const [globalState, setGlobalState] = useUrlState('_g');
 
@@ -48,9 +47,6 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
   const blockRefresh = refreshValue === 0 || refreshPause === true;
 
   useEffect(() => {
-    timefilter.disableTimeRangeSelector();
-    timefilter.enableAutoRefreshSelector();
-
     // If the refreshInterval defaults to 0s/pause=true, set it to 30s/pause=false,
     // otherwise pass on the globalState's settings to the date picker.
     const refreshInterval =

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/overview.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/overview.tsx
@@ -16,6 +16,7 @@ import { checkFullLicense } from '../../license/check_license';
 import { checkGetJobsPrivilege } from '../../privilege/check_privilege';
 import { getMlNodeCount } from '../../ml_nodes_check';
 import { loadMlServerInfo } from '../../services/ml_server_info';
+import { useTimefilter } from '../../contexts/kibana';
 import { ML_BREADCRUMB } from '../breadcrumbs';
 
 const breadcrumbs = [
@@ -41,6 +42,7 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
     getMlNodeCount,
     loadMlServerInfo,
   });
+  useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
 
   return (
     <PageLoader context={context}>

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/calendar_list.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/calendar_list.tsx
@@ -15,6 +15,7 @@ import { i18n } from '@kbn/i18n';
 import { MlRoute, PageLoader, PageProps } from '../../router';
 import { useResolver } from '../../use_resolver';
 
+import { useTimefilter } from '../../../contexts/kibana';
 import { checkFullLicense } from '../../../license/check_license';
 import { checkGetJobsPrivilege, checkPermission } from '../../../privilege/check_privilege';
 import { getMlNodeCount } from '../../../ml_nodes_check/check_ml_nodes';
@@ -45,6 +46,8 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
     getMlNodeCount,
   });
 
+  useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
+
   const canCreateCalendar = checkPermission('canCreateCalendar');
   const canDeleteCalendar = checkPermission('canDeleteCalendar');
 

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/calendar_new_edit.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/calendar_new_edit.tsx
@@ -15,6 +15,7 @@ import { i18n } from '@kbn/i18n';
 import { MlRoute, PageLoader, PageProps } from '../../router';
 import { useResolver } from '../../use_resolver';
 
+import { useTimefilter } from '../../../contexts/kibana';
 import { checkFullLicense } from '../../../license/check_license';
 import { checkGetJobsPrivilege, checkPermission } from '../../../privilege/check_privilege';
 import { checkMlNodesAvailable } from '../../../ml_nodes_check/check_ml_nodes';
@@ -77,6 +78,8 @@ const PageWrapper: FC<NewCalendarPageProps> = ({ location, mode, deps }) => {
     checkMlNodesAvailable,
   });
 
+  useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
+
   const canCreateCalendar = checkPermission('canCreateCalendar');
   const canDeleteCalendar = checkPermission('canDeleteCalendar');
 

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/filter_list.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/filter_list.tsx
@@ -15,6 +15,7 @@ import { i18n } from '@kbn/i18n';
 import { MlRoute, PageLoader, PageProps } from '../../router';
 import { useResolver } from '../../use_resolver';
 
+import { useTimefilter } from '../../../contexts/kibana';
 import { checkFullLicense } from '../../../license/check_license';
 import { checkGetJobsPrivilege, checkPermission } from '../../../privilege/check_privilege';
 import { getMlNodeCount } from '../../../ml_nodes_check/check_ml_nodes';
@@ -46,6 +47,8 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
     getMlNodeCount,
   });
 
+  useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
+
   const canCreateFilter = checkPermission('canCreateFilter');
   const canDeleteFilter = checkPermission('canDeleteFilter');
 

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/filter_list_new_edit.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/filter_list_new_edit.tsx
@@ -15,6 +15,7 @@ import { i18n } from '@kbn/i18n';
 import { MlRoute, PageLoader, PageProps } from '../../router';
 import { useResolver } from '../../use_resolver';
 
+import { useTimefilter } from '../../../contexts/kibana';
 import { checkFullLicense } from '../../../license/check_license';
 import { checkGetJobsPrivilege, checkPermission } from '../../../privilege/check_privilege';
 import { checkMlNodesAvailable } from '../../../ml_nodes_check/check_ml_nodes';
@@ -77,6 +78,8 @@ const PageWrapper: FC<NewFilterPageProps> = ({ location, mode, deps }) => {
     checkMlNodesAvailable,
   });
 
+  useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
+
   const canCreateFilter = checkPermission('canCreateFilter');
   const canDeleteFilter = checkPermission('canDeleteFilter');
 

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/settings.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/settings/settings.tsx
@@ -14,6 +14,7 @@ import React, { FC } from 'react';
 import { MlRoute, PageLoader, PageProps } from '../../router';
 import { useResolver } from '../../use_resolver';
 
+import { useTimefilter } from '../../../contexts/kibana';
 import { checkFullLicense } from '../../../license/check_license';
 import { checkGetJobsPrivilege, checkPermission } from '../../../privilege/check_privilege';
 import { getMlNodeCount } from '../../../ml_nodes_check/check_ml_nodes';
@@ -35,6 +36,8 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
     getMlNodeCount,
   });
 
+  useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
+
   const canGetFilters = checkPermission('canGetFilters');
   const canGetCalendars = checkPermission('canGetCalendars');
 

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.test.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.test.tsx
@@ -12,33 +12,7 @@ import { I18nProvider } from '@kbn/i18n/react';
 
 import { TimeSeriesExplorerUrlStateManager } from './timeseriesexplorer';
 
-jest.mock('ui/new_platform', () => ({
-  npStart: {
-    plugins: {
-      data: {
-        query: {
-          timefilter: {
-            timefilter: {
-              enableTimeRangeSelector: jest.fn(),
-              enableAutoRefreshSelector: jest.fn(),
-              getRefreshInterval: jest.fn(),
-              setRefreshInterval: jest.fn(),
-              getTime: jest.fn(),
-              isAutoRefreshSelectorEnabled: jest.fn(),
-              isTimeRangeSelectorEnabled: jest.fn(),
-              getRefreshIntervalUpdate$: jest.fn(),
-              getTimeUpdate$: jest.fn(),
-              getEnabledUpdated$: jest.fn(),
-            },
-            history: { get: jest.fn() },
-          },
-        },
-      },
-    },
-  },
-}));
-
-jest.mock('../../contexts/kibana', () => ({
+jest.mock('../../contexts/kibana/kibana_context', () => ({
   useMlKibana: () => {
     return {
       services: {
@@ -47,6 +21,8 @@ jest.mock('../../contexts/kibana', () => ({
           query: {
             timefilter: {
               timefilter: {
+                disableTimeRangeSelector: jest.fn(),
+                disableAutoRefreshSelector: jest.fn(),
                 enableTimeRangeSelector: jest.fn(),
                 enableAutoRefreshSelector: jest.fn(),
                 getRefreshInterval: jest.fn(),