[ML] ad jobs with usePageUrlState

elastic · Nov 17, 2020 · 15724fc · 15724fc
1 parent 7c4a4c8
commit 15724fc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 27 deletions.
diff --git a/...plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/job_filter_bar.tsx b/...plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/job_filter_bar.tsx
@@ -22,8 +22,6 @@ import { JobGroup } from '../job_group';
 import { useMlKibana } from '../../../../contexts/kibana';
 
 interface JobFilterBarProps {
-  jobId: string;
-  groupIds: string[];
   setFilters: (query: Query | null) => void;
   queryText?: string;
 }
@@ -75,7 +73,7 @@ export const JobFilterBar: FC<JobFilterBarProps> = ({ queryText, setFilters }) =
 
   useEffect(() => {
     setFilters(queryInstance);
-  }, []);
+  }, [queryText]);
 
   const filters: SearchFilterConfig[] = useMemo(
     () => [

diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/jobs.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/jobs.tsx
@@ -4,11 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC } from 'react';
 import { NavigationMenu } from '../../components/navigation_menu';
 // @ts-ignore
 import { JobsListView } from './components/jobs_list_view/index';
-import { useUrlState } from '../../util/url_state';
+import { usePageUrlState } from '../../util/url_state';
+import { ML_PAGES } from '../../../../common/constants/ml_url_generator';
 
 interface JobsPageProps {
   blockRefresh?: boolean;
@@ -33,33 +34,15 @@ export const getDefaultAnomalyDetectionJobsListState = (): AnomalyDetectionJobsL
 });
 
 export const JobsPage: FC<JobsPageProps> = (props) => {
-  const [appState, setAppState] = useUrlState('_a');
-
-  const jobListState: AnomalyDetectionJobsListState = useMemo(() => {
-    return {
-      ...getDefaultAnomalyDetectionJobsListState(),
-      ...(appState ?? {}),
-    };
-  }, [appState]);
-
-  const onJobsViewStateUpdate = useCallback(
-    (update: Partial<AnomalyDetectionJobsListState>) => {
-      setAppState({
-        ...jobListState,
-        ...update,
-      });
-    },
-    [appState, setAppState]
+  const [pageState, setPageState] = usePageUrlState(
+    ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
+    getDefaultAnomalyDetectionJobsListState()
   );
 
   return (
     <div data-test-subj="mlPageJobManagement">
       <NavigationMenu tabId="anomaly_detection" />
-      <JobsListView
-        {...props}
-        jobsViewState={jobListState}
-        onJobsViewStateUpdate={onJobsViewStateUpdate}
-      />
+      <JobsListView {...props} jobsViewState={pageState} onJobsViewStateUpdate={setPageState} />
     </div>
   );
 };