From def8336db6331803d3d7aa9d9399c73610f71ecd Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Tue, 11 Feb 2020 13:45:28 +0100 Subject: [PATCH] [ML] Anomaly Detection: Fix jobs list default refresh. (#57086) * [ML] Fix anomaly detection jobs list default refresh. * [ML] Fix initial load of jobs list. * [ML] Fix blockRefresh check. * [ML] Fix blockRefresh check. * [ML] Fix passing globalState between main tabs and retain custom refreshInterval when loading jobs list. --- .../components/navigation_menu/main_tabs.tsx | 11 ++- .../navigation_menu/top_nav/top_nav.tsx | 7 +- .../jobs_list_view/jobs_list_view.js | 76 +++---------------- .../application/jobs/jobs_list/jobs.tsx | 9 ++- .../application/routing/routes/jobs_list.tsx | 31 +++++++- 5 files changed, 63 insertions(+), 71 deletions(-) diff --git a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx index 5735faa9c6f52c..dce5e7ad52b090 100644 --- a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx +++ b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx @@ -5,8 +5,13 @@ */ import React, { FC, useState } from 'react'; +import { encode } from 'rison-node'; + import { EuiTabs, EuiTab, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; + +import { useUrlState } from '../../util/url_state'; + import { TabId } from './navigation_menu'; export interface Tab { @@ -65,6 +70,7 @@ const TAB_DATA: Record = { }; export const MainTabs: FC = ({ tabId, disableLinks }) => { + const [globalState] = useUrlState('_g'); const [selectedTabId, setSelectedTabId] = useState(tabId); function onSelectedTabChanged(id: string) { setSelectedTabId(id); @@ -78,10 +84,13 @@ export const MainTabs: FC = ({ tabId, disableLinks }) => { const id = tab.id; const testSubject = TAB_DATA[id].testSubject; const defaultPathId = TAB_DATA[id].pathId || id; + // globalState (e.g. selected jobs and time range) should be retained when changing pages. + // appState will not be considered. + const fullGlobalStateString = globalState !== undefined ? `?_g=${encode(globalState)}` : ''; return ( diff --git a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx index c76967455fa424..a63a07b3ec5388 100644 --- a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx +++ b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx @@ -22,6 +22,11 @@ interface Duration { end: string; } +interface RefreshInterval { + pause: boolean; + value: number; +} + function getRecentlyUsedRangesFactory(timeHistory: TimeHistory) { return function(): Duration[] { return ( @@ -44,7 +49,7 @@ export const TopNav: FC = () => { const [globalState, setGlobalState] = useUrlState('_g'); const getRecentlyUsedRanges = getRecentlyUsedRangesFactory(timeHistory); - const [refreshInterval, setRefreshInterval] = useState( + const [refreshInterval, setRefreshInterval] = useState( globalState?.refreshInterval ?? timefilter.getRefreshInterval() ); useEffect(() => { diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js index 28f95b3c1ba211..6999f4c591eacb 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js +++ b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js @@ -5,7 +5,6 @@ */ import React, { Component } from 'react'; -import { timefilter } from 'ui/timefilter'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFlexGroup, @@ -35,13 +34,8 @@ import { UpgradeWarning } from '../../../../components/upgrade'; import { RefreshJobsListButton } from '../refresh_jobs_list_button'; import { isEqual } from 'lodash'; -import { - DEFAULT_REFRESH_INTERVAL_MS, - DELETING_JOBS_REFRESH_INTERVAL_MS, - MINIMUM_REFRESH_INTERVAL_MS, -} from '../../../../../../common/constants/jobs_list'; +import { DELETING_JOBS_REFRESH_INTERVAL_MS } from '../../../../../../common/constants/jobs_list'; -let jobsRefreshInterval = null; let deletingJobsRefreshTimeout = null; // 'isManagementTable' bool prop to determine when to configure table for use in Kibana management page @@ -67,21 +61,12 @@ export class JobsListView extends Component { this.showDeleteJobModal = () => {}; this.showStartDatafeedModal = () => {}; this.showCreateWatchFlyout = () => {}; - - this.blockRefresh = false; - this.refreshIntervalSubscription = null; } componentDidMount() { - if (this.props.isManagementTable === true) { - this.refreshJobSummaryList(true); - } else { - timefilter.disableTimeRangeSelector(); - timefilter.enableAutoRefreshSelector(); - - this.initAutoRefresh(); - this.initAutoRefreshUpdate(); + this.refreshJobSummaryList(true); + if (this.props.isManagementTable !== true) { // check to see if we need to open the start datafeed modal // after the page has rendered. This will happen if the user // has just created a job in the advanced wizard and selected to @@ -90,59 +75,18 @@ export class JobsListView extends Component { } } - componentWillUnmount() { - if (this.props.isManagementTable === undefined) { - if (this.refreshIntervalSubscription) this.refreshIntervalSubscription.unsubscribe(); - deletingJobsRefreshTimeout = null; - this.clearRefreshInterval(); - } - } - - initAutoRefresh() { - const { value } = timefilter.getRefreshInterval(); - if (value === 0) { - // the auto refresher starts in an off state - // so switch it on and set the interval to 30s - timefilter.setRefreshInterval({ - pause: false, - value: DEFAULT_REFRESH_INTERVAL_MS, - }); - } - - this.setAutoRefresh(); - } - - initAutoRefreshUpdate() { - // update the interval if it changes - this.refreshIntervalSubscription = timefilter.getRefreshIntervalUpdate$().subscribe({ - next: () => this.setAutoRefresh(), - }); - } - - setAutoRefresh() { - const { value, pause } = timefilter.getRefreshInterval(); - if (pause) { - this.clearRefreshInterval(); - } else { - this.setRefreshInterval(value); + componentDidUpdate(prevProps) { + if (prevProps.lastRefresh !== this.props.lastRefresh) { + this.refreshJobSummaryList(); } - // force load the jobs list when the refresh interval changes - this.refreshJobSummaryList(true); } - setRefreshInterval(interval) { - this.clearRefreshInterval(); - if (interval >= MINIMUM_REFRESH_INTERVAL_MS) { - this.blockRefresh = false; - jobsRefreshInterval = setInterval(() => this.refreshJobSummaryList(), interval); + componentWillUnmount() { + if (this.props.isManagementTable === undefined) { + deletingJobsRefreshTimeout = null; } } - clearRefreshInterval() { - this.blockRefresh = true; - clearInterval(jobsRefreshInterval); - } - openAutoStartDatafeedModal() { const job = checkForAutoStartDatafeed(); if (job !== undefined) { @@ -281,7 +225,7 @@ export class JobsListView extends Component { }; async refreshJobSummaryList(forceRefresh = false) { - if (forceRefresh === true || this.blockRefresh === false) { + if (forceRefresh === true || this.props.blockRefresh !== true) { // Set loading to true for jobs_list table for initial job loading if (this.state.loading === null) { this.setState({ loading: true }); diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/jobs.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/jobs.tsx index f820372e20c09a..c3c2550f476450 100644 --- a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/jobs.tsx +++ b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/jobs.tsx @@ -11,7 +11,14 @@ import { NavigationMenu } from '../../components/navigation_menu'; // @ts-ignore import { JobsListView } from './components/jobs_list_view'; -export const JobsPage: FC<{ props?: any }> = props => { +interface JobsPageProps { + blockRefresh?: boolean; + isManagementTable?: boolean; + isMlEnabledInSpace?: boolean; + lastRefresh?: number; +} + +export const JobsPage: FC = props => { return (
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 index e61c24426bde99..3d9a2adedc40d0 100644 --- 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 @@ -4,8 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { FC } from 'react'; +import React, { useEffect, FC } from 'react'; +import { useObservable } from 'react-use'; import { i18n } from '@kbn/i18n'; +import { timefilter } from 'ui/timefilter'; +import { DEFAULT_REFRESH_INTERVAL_MS } from '../../../../common/constants/jobs_list'; +import { mlTimefilterRefresh$ } from '../../services/timefilter_refresh_service'; +import { useUrlState } from '../../util/url_state'; import { MlRoute, PageLoader, PageProps } from '../router'; import { useResolver } from '../use_resolver'; import { basicResolvers } from '../resolvers'; @@ -32,9 +37,31 @@ export const jobListRoute: MlRoute = { const PageWrapper: FC = ({ config, deps }) => { const { context } = useResolver(undefined, undefined, config, basicResolvers(deps)); + const [globalState, setGlobalState] = useUrlState('_g'); + + const mlTimefilterRefresh = useObservable(mlTimefilterRefresh$); + const lastRefresh = mlTimefilterRefresh?.lastRefresh ?? 0; + const refreshValue = globalState?.refreshInterval?.value ?? 0; + const refreshPause = globalState?.refreshInterval?.pause ?? true; + 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 = + refreshValue === 0 && refreshPause === true + ? { pause: false, value: DEFAULT_REFRESH_INTERVAL_MS } + : { pause: refreshPause, value: refreshValue }; + setGlobalState({ refreshInterval }); + timefilter.setRefreshInterval(refreshInterval); + }, []); + return ( - + ); };