keep groupIds as array of strings and jobId as single string

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

@@ -105,13 +105,17 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   const [selectedIdFromUrlInitialized, setSelectedIdFromUrlInitialized] = useState(false);
   useEffect(() => {
     if (selectedIdFromUrlInitialized === false && analytics.length > 0) {
-      const urlValues = getSelectedIdFromUrl(window.location.href);
+      const { jobId, groupIds } = getSelectedIdFromUrl(window.location.href);
+      let queryText = '';
 
-      if (urlValues.ids !== undefined) {
-        const queryText = urlValues.isGroup ? getGroupQueryText(urlValues.ids) : urlValues.ids[0];
-        setSelectedIdFromUrlInitialized(true);
-        setSearchQueryText(queryText);
+      if (groupIds !== undefined) {
+        queryText = getGroupQueryText(groupIds);
+      } else if (jobId !== undefined) {
+        queryText = jobId;
       }
+
+      setSelectedIdFromUrlInitialized(true);
+      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 { getSelectedIdsUrl } from '../../../../../util/get_selected_ids_url';
+import { getJobIdUrl } 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={getSelectedIdsUrl('data_frame_analytics', item.id)}>{item.id}</EuiLink>
+  <EuiLink href={getJobIdUrl('data_frame_analytics', item.id)}>{item.id}</EuiLink>
 );
 
 export const useColumns = (

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

@@ -55,10 +55,12 @@ export class JobFilterBar extends Component {
   componentDidMount() {
     // If job id is selected in url, filter table to that id
     let defaultQueryText;
-    const urlValues = getSelectedIdFromUrl(window.location.href);
+    const { jobId, groupIds } = getSelectedIdFromUrl(window.location.href);
 
-    if (urlValues.ids !== undefined) {
-      defaultQueryText = urlValues.isGroup ? getGroupQueryText(urlValues.ids) : urlValues.ids[0];
+    if (groupIds !== undefined) {
+      defaultQueryText = getGroupQueryText(groupIds);
+    } else if (jobId !== undefined) {
+      defaultQueryText = jobId;
     }
 
     if (defaultQueryText !== undefined) {

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { JobGroup } from '../job_group';
-import { getSelectedIdsUrl } from '../../../../util/get_selected_ids_url';
+import { getGroupIdsUrl } from '../../../../util/get_selected_ids_url';
 
 export function JobDescription({ job, isManagementTable }) {
   return (
@@ -18,7 +18,7 @@ export function JobDescription({ job, isManagementTable }) {
         {job.groups.map((group) => {
           if (isManagementTable === true) {
             return (
-              <a key={group} href={getSelectedIdsUrl('jobs', [group], true)}>
+              <a key={group} href={getGroupIdsUrl('jobs', [group])}>
                 <JobGroup name={group} />
               </a>
             );

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 { getSelectedIdsUrl } from '../../../../util/get_selected_ids_url';
+import { getJobIdUrl } 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={getSelectedIdsUrl('jobs', id)}>{id}</EuiLink>;
+    return <EuiLink href={getJobIdUrl('jobs', id)}>{id}</EuiLink>;
   }
 
   getPageOfJobs(index, size, sortField, sortDirection) {

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

@@ -3,6 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-export function getSelectedIdFromUrl(str: string): { ids: string[]; isGroup: boolean };
+export function getSelectedIdFromUrl(str: string): { groupIds: string[] } | { jobId: string };
 export function getGroupQueryText(arr: string[]): string;
 export function clearSelectedJobIdFromUrl(str: string): void;

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

@@ -369,18 +369,22 @@ function getUrlVars(url) {
   });
   return vars;
 }
+
 export function getSelectedIdFromUrl(url) {
   const result = {};
   if (typeof url === 'string') {
     const isGroup = url.includes('groupIds');
-
     url = decodeURIComponent(url);
-    if (url.includes('mlManagement') && (url.includes('jobId') || isGroup)) {
+
+    if (url.includes('mlManagement')) {
       const urlParams = getUrlVars(url);
       const decodedJson = rison.decode(urlParams.mlManagement);
 
-      result.ids = isGroup ? decodedJson.groupIds : decodedJson.jobId;
-      result.isGroup = isGroup;
+      if (isGroup) {
+        result.groupIds = decodedJson.groupIds;
+      } else {
+        result.jobId = decodedJson.jobId;
+      }
     }
   }
   return result;

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

@@ -4,26 +4,36 @@
  * 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 {
+function getSelectedIdsUrl(tabId, settings: any): 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}`;
 }
+
+// Create url for filtering by group ids for kibana management table
+export function getGroupIdsUrl(tabId: string, ids: string[]): string {
+  const settings = {
+    groupIds: ids,
+  };
+
+  return getSelectedIdsUrl(tabId, settings);
+}
+
+// Create url for filtering by job id for kibana management table
+export function getJobIdUrl(tabId: string, id: string): string {
+  const settings = {
+    jobId: id,
+  };
+
+  return getSelectedIdsUrl(tabId, settings);
+}