[Security Solutions] Fix link to ML Job is wrong when searching withi…

…n ML Job Settings UI (#150881) issue: #150875 ## Summary Describe the bug: The link to an ML job is wrong when searching for a job. Steps to reproduce: 1. Open ML Job Settings UI 2. Type DNS in the search bar 3. Verify that the links have the wrong job Id. ### Before https://user-images.githubusercontent.com/1490444/218104808-94c93669-2de3-4fba-88c9-5f2b7ccaa391.mp4 ### After https://user-images.githubusercontent.com/1490444/218105267-b5aa118c-9d78-4648-9892-68afd5e2707f.mov
elastic · Feb 13, 2023 · 2315285 · 2315285
1 parent 45f5f3d
commit 2315285
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 39 deletions.
diff --git a/.../pages/logs/log_entry_categories/sections/top_categories/analyze_dataset_in_ml_action.tsx b/.../pages/logs/log_entry_categories/sections/top_categories/analyze_dataset_in_ml_action.tsx
@@ -25,21 +25,26 @@ export const AnalyzeCategoryDatasetInMlAction: React.FunctionComponent<{
     services: { ml, http, application },
   } = useKibanaContextForPlugin();
 
-  const viewAnomalyInMachineLearningLink = useMlHref(ml, http.basePath.get(), {
-    page: ML_PAGES.SINGLE_METRIC_VIEWER,
-    pageState: {
-      jobIds: [categorizationJobId],
-      timeRange: {
-        from: moment(timeRange.startTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
-        to: moment(timeRange.endTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
-        mode: 'absolute',
-      },
-      entities: {
-        [partitionField]: dataset,
-        mlcategory: `${categoryId}`,
+  const viewAnomalyInMachineLearningLink = useMlHref(
+    ml,
+    http.basePath.get(),
+    {
+      page: ML_PAGES.SINGLE_METRIC_VIEWER,
+      pageState: {
+        jobIds: [categorizationJobId],
+        timeRange: {
+          from: moment(timeRange.startTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
+          to: moment(timeRange.endTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
+          mode: 'absolute',
+        },
+        entities: {
+          [partitionField]: dataset,
+          mlcategory: `${categoryId}`,
+        },
       },
     },
-  });
+    [categorizationJobId]
+  );
 
   const handleClick = useCallback(
     (e) => {

diff --git a/x-pack/plugins/ml/public/locator/use_ml_href.ts b/x-pack/plugins/ml/public/locator/use_ml_href.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { DependencyList } from 'react';
 import { MlPluginStart } from '..';
 import { MlLocatorParams } from '../../common/types/locator';
 
@@ -15,10 +16,11 @@ import { MlLocatorParams } from '../../common/types/locator';
 export const useMlHref = (
   ml: MlPluginStart | undefined,
   basePath: string | undefined,
-  params: MlLocatorParams
+  params: MlLocatorParams,
+  dependencies?: DependencyList
 ) => {
   return ml && ml.locator
-    ? ml.locator!.useUrl(params)
+    ? ml.locator.useUrl(params, undefined, dependencies)
     : basePath !== undefined
     ? `${basePath}/app/ml/${params.page}`
     : '';

diff --git a/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.tsx b/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.tsx
@@ -28,22 +28,27 @@ export const ExplorerLink: React.FC<ExplorerLinkProps> = ({
     services: { ml, http },
   } = useKibana();
 
-  const explorerUrl = useMlHref(ml, http.basePath.get(), {
-    page: 'explorer',
-    pageState: {
-      jobIds: [score.jobId],
-      timeRange: {
-        from: new Date(startDate).toISOString(),
-        to: new Date(endDate).toISOString(),
-        mode: 'absolute',
-      },
-      refreshInterval: {
-        pause: true,
-        value: 0,
-        display: 'Off',
+  const explorerUrl = useMlHref(
+    ml,
+    http.basePath.get(),
+    {
+      page: 'explorer',
+      pageState: {
+        jobIds: [score.jobId],
+        timeRange: {
+          from: new Date(startDate).toISOString(),
+          to: new Date(endDate).toISOString(),
+          mode: 'absolute',
+        },
+        refreshInterval: {
+          pause: true,
+          value: 0,
+          display: 'Off',
+        },
       },
     },
-  });
+    [score.jobId]
+  );
 
   if (!explorerUrl) return null;
 

diff --git a/...k/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.tsx b/...k/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.tsx
@@ -47,12 +47,17 @@ const JobName = ({ id, name, description, basePath }: JobNameProps) => {
     services: { ml },
   } = useKibana();
 
-  const jobUrl = useMlHref(ml, basePath, {
-    page: ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
-    pageState: {
-      jobId: id,
+  const jobUrl = useMlHref(
+    ml,
+    basePath,
+    {
+      page: ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
+      pageState: {
+        jobId: id,
+      },
     },
-  });
+    [id]
+  );
 
   return (
     <JobNameWrapper>

diff --git a/.../plugins/security_solution/public/detections/components/rules/ml_job_link/ml_job_link.tsx b/.../plugins/security_solution/public/detections/components/rules/ml_job_link/ml_job_link.tsx
@@ -25,12 +25,17 @@ const MlJobLinkComponent: React.FC<MlJobLinkProps> = ({ jobId, jobName }) => {
   const {
     services: { http, ml },
   } = useKibana();
-  const jobUrl = useMlHref(ml, http.basePath.get(), {
-    page: ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
-    pageState: {
-      jobId: [jobId],
+  const jobUrl = useMlHref(
+    ml,
+    http.basePath.get(),
+    {
+      page: ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
+      pageState: {
+        jobId: [jobId],
+      },
     },
-  });
+    [jobId]
+  );
 
   return (
     <StyledJobEuiLInk data-test-subj="machineLearningJobLink" href={jobUrl} target="_blank">