ensure analytics can handle jobid in url. rename util function

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

@@ -105,11 +105,12 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   const [selectedIdFromUrlInitialized, setSelectedIdFromUrlInitialized] = useState(false);
   useEffect(() => {
     if (selectedIdFromUrlInitialized === false && analytics.length > 0) {
-      const { ids, isGroup } = getSelectedIdFromUrl(window.location.href);
-      const selectedIdFromUrl = ids ?? ids[0];
-      if (selectedIdFromUrl) {
+      const urlValues = getSelectedIdFromUrl(window.location.href);
+
+      if (urlValues.ids !== undefined) {
+        const queryText = urlValues.isGroup ? getGroupQueryText(urlValues.ids) : urlValues.ids[0];
         setSelectedIdFromUrlInitialized(true);
-        setSearchQueryText(isGroup ? getGroupQueryText(selectedIdFromUrl) : selectedIdFromUrl);
+        setSearchQueryText(queryText);
       }
     }
   }, [selectedIdFromUrlInitialized, analytics]);

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

@@ -19,7 +19,7 @@ import {
   EuiLink,
   RIGHT_ALIGNMENT,
 } from '@elastic/eui';
-import { getJobIdUrl } from '../../../../../util/get_job_id_url';
+import { getSelectedIdsUrl } from '../../../../../util/get_selected_ids_url';
 
 import { getAnalysisType, DataFrameAnalyticsId } from '../../../../common';
 import {
@@ -137,7 +137,7 @@ export const progressColumn = {
 };
 
 export const getDFAnalyticsJobIdLink = (item: DataFrameAnalyticsListRow) => (
-  <EuiLink href={getJobIdUrl('data_frame_analytics', item.id)}>{item.id}</EuiLink>
+  <EuiLink href={getSelectedIdsUrl('data_frame_analytics', item.id)}>{item.id}</EuiLink>
 );
 
 export const useColumns = (

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

@@ -8,19 +8,28 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { JobGroup } from '../job_group';
+import { getSelectedIdsUrl } from '../../../../util/get_selected_ids_url';
 
-export function JobDescription({ job }) {
+export function JobDescription({ job, isManagementTable }) {
   return (
     <React.Fragment>
       <div className="job-description">
         {job.description} &nbsp;
-        {job.groups.map((group) => (
-          <JobGroup key={group} name={group} />
-        ))}
+        {job.groups.map((group) => {
+          if (isManagementTable === true) {
+            return (
+              <a key={group} href={getSelectedIdsUrl('jobs', [group], true)}>
+                <JobGroup name={group} />
+              </a>
+            );
+          }
+          return <JobGroup key={group} name={group} />;
+        })}
       </div>
     </React.Fragment>
   );
 }
 JobDescription.propTypes = {
   job: PropTypes.object.isRequired,
+  isManagementTable: PropTypes.bool,
 };

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 '../../../../util/get_job_id_url';
+import { getSelectedIdsUrl } from '../../../../util/get_selected_ids_url';
 import { TIME_FORMAT } from '../../../../../../common/constants/time_format';
 
 import { EuiBadge, EuiBasicTable, EuiButtonIcon, EuiLink, EuiScreenReaderOnly } from '@elastic/eui';
@@ -71,7 +71,7 @@ export class JobsList extends Component {
       return id;
     }
 
-    return <EuiLink href={getJobIdUrl('jobs', id)}>{id}</EuiLink>;
+    return <EuiLink href={getSelectedIdsUrl('jobs', id)}>{id}</EuiLink>;
   }
 
   getPageOfJobs(index, size, sortField, sortDirection) {
@@ -189,7 +189,9 @@ export class JobsList extends Component {
         sortable: true,
         field: 'description',
         'data-test-subj': 'mlJobListColumnDescription',
-        render: (description, item) => <JobDescription job={item} />,
+        render: (description, item) => (
+          <JobDescription job={item} isManagementTable={isManagementTable} />
+        ),
         textOnly: true,
         width: '20%',
       },

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

@@ -379,7 +379,7 @@ export function getSelectedIdFromUrl(url) {
       const urlParams = getUrlVars(url);
       const decodedJson = rison.decode(urlParams.mlManagement);
 
-      result.ids = isGroup ? decodedJson.groupIds : [decodedJson.jobId];
+      result.ids = isGroup ? decodedJson.groupIds : decodedJson.jobId;
       result.isGroup = isGroup;
     }
   }

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

@@ -0,0 +1,29 @@
+/*
+ * 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 enum TAB_IDS {
+  DATA_FRAME_ANALYTICS = 'data_frame_analytics',
+  ANOMALY_DETECTION = 'jobs',
+}
+
+export function getSelectedIdsUrl(
+  tabId: string,
+  ids: string | string[],
+  isGroup: boolean = false
+): string {
+  // Create url for filtering by job id or group ids for kibana management table
+  const settings = {
+    [isGroup ? 'groupIds' : 'jobId']: Array.isArray(ids) ? ids : [ids],
+  };
+  const encoded = rison.encode(settings);
+  const url = `?mlManagement=${encoded}`;
+  const basePath = getBasePath();
+
+  return `${basePath.get()}/app/ml#/${tabId}${url}`;
+}