[ML] Refactor get_job_id_url util function & clean up

Author: qn895

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx

@@ -111,7 +111,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   const [sortField, setSortField] = useState<string>(DataFrameAnalyticsListColumn.id);
   const [sortDirection, setSortDirection] = useState<SortDirection>(SORT_DIRECTION.ASC);
 
-  const [urlFilterIdCleared, setUrlFilterIdCleared] = useState<boolean>(false);
+  const [jobIdSelected, setJobIdSelected] = useState<boolean>(false);
   const disabled =
     !checkPermission('canCreateDataFrameAnalytics') ||
     !checkPermission('canStartStopDataFrameAnalytics');
@@ -124,17 +124,19 @@ export const DataFrameAnalyticsList: FC<Props> = ({
     blockRefresh
   );
 
+  // Query text/job_id based on url but only after getAnalytics is done first
+  // jobIdSelected makes sure the query is only run once since analytics is being refreshed constantly
   const selectedId = getSelectedJobIdFromUrl(window.location.href);
   useEffect(() => {
-    if (urlFilterIdCleared === false && analytics.length > 0) {
+    if (jobIdSelected === false && analytics.length > 0) {
       if (selectedId !== undefined) {
-        setUrlFilterIdCleared(true);
+        setJobIdSelected(true);
         setQueryText(selectedId);
         const selectedIdQuery: Query = EuiSearchBar.Query.parse(selectedId);
         onQueryChange({ query: selectedIdQuery, error: undefined });
       }
     }
-  }, [urlFilterIdCleared, analytics]);
+  }, [jobIdSelected, analytics]);
 
   // Subscribe to the refresh observable to trigger reloading the analytics list.
   useRefreshAnalyticsList({

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx

@@ -19,8 +19,7 @@ import {
   EuiLink,
   RIGHT_ALIGNMENT,
 } from '@elastic/eui';
-// @ts-ignore
-import { getJobIdUrl } from '../../../../../jobs/jobs_list/components/utils';
+import { getJobIdUrl } from '../../../../../util/get_job_id_url';
 
 import { getAnalysisType, DataFrameAnalyticsId } from '../../../../common';
 import { CreateAnalyticsFormProps } from '../../hooks/use_create_analytics_form';
@@ -138,9 +137,9 @@ export const progressColumn = {
   'data-test-subj': 'mlAnalyticsTableColumnProgress',
 };
 
-export const getDFAnalyticsJobIdLink = (item: DataFrameAnalyticsListRow) => {
-  return <EuiLink href={getJobIdUrl('data_frame_analytics', item.id)}>{item.id}</EuiLink>;
-};
+export const getDFAnalyticsJobIdLink = (item: DataFrameAnalyticsListRow) => (
+  <EuiLink href={getJobIdUrl('data_frame_analytics', item.id)}>{item.id}</EuiLink>
+);
 
 export const getColumns = (
   expandedRowItemIds: DataFrameAnalyticsId[],

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js

@@ -14,7 +14,7 @@ import { toLocaleString } from '../../../../util/string_utils';
 import { ResultLinks, actionsMenuContent } from '../job_actions';
 import { JobDescription } from './job_description';
 import { JobIcon } from '../../../../components/job_message_icon';
-import { getJobIdUrl } from '../utils';
+import { getJobIdUrl } from '../../../../util/get_job_id_url';
 
 import { EuiBadge, EuiBasicTable, EuiButtonIcon, EuiLink, EuiScreenReaderOnly } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';

x-pack/plugins/ml/public/application/jobs/jobs_list/components/utils.js

@@ -10,7 +10,7 @@ import rison from 'rison-node';
 
 import { mlJobService } from '../../../services/job_service';
 import { ml } from '../../../services/ml_api_service';
-import { getToastNotifications, getBasePath } from '../../../util/dependency_cache';
+import { getToastNotifications } from '../../../util/dependency_cache';
 import { JOB_STATE, DATAFEED_STATE } from '../../../../../common/constants/states';
 import { parseInterval } from '../../../../../common/util/parse_interval';
 import { i18n } from '@kbn/i18n';
@@ -367,18 +367,6 @@ function jobProperty(job, prop) {
   return job[propMap[prop]];
 }
 
-export function getJobIdUrl(tabId, jobId) {
-  // Create url for filtering by job id for kibana management table
-  const settings = {
-    jobId,
-  };
-  const encoded = rison.encode(settings);
-  const url = `?mlManagement=${encoded}`;
-  const basePath = getBasePath();
-
-  return `${basePath.get()}/app/ml#/${tabId}${url}`;
-}
-
 function getUrlVars(url) {
   const vars = {};
   url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(_, key, value) {
@@ -408,15 +396,3 @@ export function clearSelectedJobIdFromUrl(url) {
     }
   }
 }
-
-export function resetMlJobUrl(tabId, url) {
-  // Change current window's url to just the generic tab url without the job ID
-  if (typeof url === 'string') {
-    url = decodeURIComponent(url);
-    if (url.includes('mlManagement') && url.includes('jobId')) {
-      const urlParams = getUrlVars(url);
-      const clearedParams = `ml#/${tabId}?_g=${urlParams._g}`;
-      window.history.replaceState({}, document.title, clearedParams);
-    }
-  }
-}

x-pack/plugins/ml/public/application/util/get_job_id_url.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 rison from 'rison-node';
+
+import { getBasePath } from './dependency_cache';
+
+export function getJobIdUrl(tabId: string, jobId: string): string {
+  // Create url for filtering by job id for kibana management table
+  const settings = {
+    jobId,
+  };
+  const encoded = rison.encode(settings);
+  const url = `?mlManagement=${encoded}`;
+  const basePath = getBasePath();
+
+  return `${basePath.get()}/app/ml#/${tabId}${url}`;
+}