[ML] Update apm and security_solution to use useMlHref hook

qn895 · qn895 · commit 55c25a4b0ffd · 2020-09-24T13:22:47.000-05:00
diff --git a/x-pack/plugins/apm/public/components/app/Home/__snapshots__/Home.test.tsx.snap b/x-pack/plugins/apm/public/components/app/Home/__snapshots__/Home.test.tsx.snap
diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/legacy_jobs_callout.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/legacy_jobs_callout.tsx
@@ -5,40 +5,22 @@
  */
 
 import { EuiCallOut, EuiButton } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
+import { useMlHref } from '../../../../../../ml/public';
 
 export function LegacyJobsCallout() {
   const {
     core,
     plugins: { ml },
   } = useApmPluginContext();
-
-  const [mlADLink, setMlADLink] = useState(
-    core.http.basePath.prepend('/app/ml/jobs')
-  );
-
-  useEffect(() => {
-    let isCancelled = false;
-    const generateLink = async () => {
-      if (ml?.urlGenerator !== undefined) {
-        const href = await ml.urlGenerator.createUrl({
-          page: 'jobs',
-          pageState: {
-            jobId: 'high_mean_response_time',
-          },
-        });
-        if (!isCancelled) {
-          setMlADLink(href);
-        }
-      }
-    };
-    generateLink();
-    return () => {
-      isCancelled = true;
-    };
-  }, [ml?.urlGenerator]);
+  const mlADLink = useMlHref(ml, core.http.basePath.get(), {
+    page: 'jobs',
+    pageState: {
+      jobId: 'high_mean_response_time',
+    },
+  });
 
   return (
     <EuiCallOut
diff --git a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLLink.tsx
@@ -5,10 +5,11 @@
  */
 
 import { EuiLink } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
 import { getTimepickerRisonData } from '../rison_helpers';
+import { useMlHref, ML_PAGES } from '../../../../../../ml/public';
 
 interface MlRisonData {
   ml?: {
@@ -24,48 +25,31 @@ interface Props {
 }
 
 export function MLLink({ children, path = '', query = {}, external }: Props) {
-  const { core } = useApmPluginContext();
   const location = useLocation();
 
   const {
+    core,
     plugins: { ml },
   } = useApmPluginContext();
 
-  // default to link to ML Anomaly Detection jobs management page
-  const [mlADLink, setMlADLink] = useState(
-    core.http.basePath.prepend('/app/ml/jobs')
-  );
-  useEffect(() => {
-    let isCancelled = false;
-    const generateLink = async () => {
-      const { time, refreshInterval } = getTimepickerRisonData(location.search);
-      let jobIds: string[] = [];
-      if (query.ml?.jobIds) {
-        jobIds = query.ml.jobIds;
-      }
+  let jobIds: string[] = [];
+  if (query.ml?.jobIds) {
+    jobIds = query.ml.jobIds;
+  }
+  const { time, refreshInterval } = getTimepickerRisonData(location.search);
 
-      if (ml?.urlGenerator !== undefined) {
-        const href = await ml.urlGenerator.createUrl({
-          page: 'jobs',
-          pageState: {
-            jobId: jobIds,
-            groupIds: ['apm'],
-            globalState: {
-              time,
-              refreshInterval,
-            },
-          },
-        });
-        if (!isCancelled) {
-          setMlADLink(href);
-        }
-      }
-    };
-    generateLink();
-    return () => {
-      isCancelled = true;
-    };
-  }, [ml?.urlGenerator, location.search, query]);
+  // default to link to ML Anomaly Detection jobs management page
+  const mlADLink = useMlHref(ml, core.http.basePath.get(), {
+    page: ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
+    pageState: {
+      jobId: jobIds,
+      groupIds: ['apm'],
+      globalState: {
+        time,
+        refreshInterval,
+      },
+    },
+  });
 
   return (
     <EuiLink
diff --git a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.ts b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.ts
@@ -5,10 +5,10 @@
  */
 
 import { useLocation } from 'react-router-dom';
-import { useEffect, useState } from 'react';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
 import { getTimepickerRisonData } from '../rison_helpers';
 import { RefreshInterval } from '../../../../../../../../src/plugins/data/common/query';
+import { useMlHref } from '../../../../../../ml/public';
 
 export function useTimeSeriesExplorerHref({
   jobId,
@@ -24,43 +24,26 @@ export function useTimeSeriesExplorerHref({
     core,
     plugins: { ml },
   } = useApmPluginContext();
-  const [mlAnomalyDetectionHref, setMlAnomalyDetectionHref] = useState(
-    core.http.basePath.prepend('/app/ml/jobs')
-  );
   const location = useLocation();
+  const { time, refreshInterval } = getTimepickerRisonData(location.search);
 
-  useEffect(() => {
-    let isCancelled = false;
-    const generateLink = async () => {
-      const { time, refreshInterval } = getTimepickerRisonData(location.search);
-      if (ml?.urlGenerator !== undefined) {
-        const href = await ml.urlGenerator.createUrl({
-          page: 'timeseriesexplorer',
-          pageState: {
-            jobIds: [jobId],
-            timeRange: time,
-            refreshInterval: refreshInterval as RefreshInterval,
-            zoom: time,
-            ...(serviceName && transactionType
-              ? {
-                  entities: {
-                    'service.name': serviceName,
-                    'transaction.type': transactionType,
-                  },
-                }
-              : {}),
-          },
-        });
-        if (!isCancelled) {
-          setMlAnomalyDetectionHref(href);
-        }
-      }
-    };
-    generateLink();
-    return () => {
-      isCancelled = true;
-    };
-  }, [ml?.urlGenerator, location.search, jobId, serviceName, transactionType]);
+  const mlAnomalyDetectionHref = useMlHref(ml, core.http.basePath.get(), {
+    page: 'timeseriesexplorer',
+    pageState: {
+      jobIds: [jobId],
+      timeRange: time,
+      refreshInterval: refreshInterval as RefreshInterval,
+      zoom: time,
+      ...(serviceName && transactionType
+        ? {
+            entities: {
+              'service.name': serviceName,
+              'transaction.type': transactionType,
+            },
+          }
+        : {}),
+    },
+  });
 
   return mlAnomalyDetectionHref;
 }
diff --git a/x-pack/plugins/apm/public/context/ApmPluginContext/MockApmPluginContext.tsx b/x-pack/plugins/apm/public/context/ApmPluginContext/MockApmPluginContext.tsx
@@ -55,6 +55,7 @@ const mockCore = {
   http: {
     basePath: {
       prepend: (path: string) => `/basepath${path}`,
+      get: () => `/basepath`,
     },
   },
   i18n: {
diff --git a/x-pack/plugins/ml/public/ml_url_generator/index.ts b/x-pack/plugins/ml/public/ml_url_generator/index.ts
@@ -4,3 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 export { MlUrlGenerator, registerUrlGenerator } from './ml_url_generator';
+export { useMlHref } from './use_ml_href';
+export { ML_PAGES } from '../../common/constants/ml_url_generator';
diff --git a/x-pack/plugins/ml/public/ml_url_generator/use_ml_href.ts b/x-pack/plugins/ml/public/ml_url_generator/use_ml_href.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { MlPluginStart } from '../index';
+import { MlUrlGeneratorState } from '../../common/types/ml_url_generator';
+export const useMlHref = (
+  ml: MlPluginStart | undefined,
+  basePath: string,
+  params: MlUrlGeneratorState
+) => {
+  const [mlLink, setMlLink] = useState(`${basePath}/app/ml/${params.page}`);
+
+  useEffect(() => {
+    let isCancelled = false;
+    const generateLink = async () => {
+      if (ml?.urlGenerator !== undefined) {
+        const href = await ml.urlGenerator.createUrl(params);
+        if (!isCancelled) {
+          setMlLink(href);
+        }
+      }
+    };
+    generateLink();
+    return () => {
+      isCancelled = true;
+    };
+  }, [ml?.urlGenerator, params]);
+
+  return mlLink;
+};
diff --git a/x-pack/plugins/security_solution/kibana.json b/x-pack/plugins/security_solution/kibana.json
@@ -31,5 +31,5 @@
   ],
   "server": true,
   "ui": true,
-  "requiredBundles": ["esUiShared", "ingestManager", "kibanaUtils", "kibanaReact", "lists"]
+  "requiredBundles": ["esUiShared", "ingestManager", "kibanaUtils", "kibanaReact", "lists", "ml"]
 }
diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.tsx
@@ -26,6 +26,7 @@ import { useBasePath, useKibana } from '../../../lib/kibana';
 import * as i18n from './translations';
 import { JobSwitch } from './job_switch';
 import { SecurityJob } from '../types';
+import { useMlHref, ML_PAGES } from '../../../../../../ml/public';
 
 const JobNameWrapper = styled.div`
   margin: 5px 0;
@@ -43,31 +44,16 @@ interface JobNameProps {
 }
 
 const JobName = ({ id, description, basePath }: JobNameProps) => {
-  const [jobUrl, setJobUrl] = useState(`${basePath}/app/ml/jobs`);
   const {
     services: { ml },
   } = useKibana();
 
-  useEffect(() => {
-    let isCancelled = false;
-    const generateLink = async () => {
-      if (ml?.urlGenerator !== undefined) {
-        const href = await ml.urlGenerator.createUrl({
-          page: 'jobs',
-          pageState: {
-            jobId: id,
-          },
-        });
-        if (!isCancelled) {
-          setJobUrl(href);
-        }
-      }
-    };
-    generateLink();
-    return () => {
-      isCancelled = true;
-    };
-  }, [ml?.urlGenerator, id]);
+  const jobUrl = useMlHref(ml, basePath, {
+    page: ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
+    pageState: {
+      jobId: id,
+    },
+  });
 
   return (
     <JobNameWrapper>
@@ -179,26 +165,9 @@ export const NoItemsMessage = React.memo(({ basePath }: { basePath: string }) =>
     services: { ml },
   } = useKibana();
 
-  const [createNewAnomalyDetectionJoUrl, setCreateNewAnomalyDetectionJoUrl] = useState(
-    `${basePath}/app/ml/jobs/new_job/step/index_or_search`
-  );
-  useEffect(() => {
-    let isCancelled = false;
-    const generateLink = async () => {
-      if (ml?.urlGenerator !== undefined) {
-        const href = await ml.urlGenerator.createUrl({
-          page: 'jobs/new_job/step/index_or_search',
-        });
-        if (!isCancelled) {
-          setCreateNewAnomalyDetectionJoUrl(href);
-        }
-      }
-    };
-    generateLink();
-    return () => {
-      isCancelled = true;
-    };
-  }, [ml?.urlGenerator]);
+  const createNewAnomalyDetectionJoUrl = useMlHref(ml, basePath, {
+    page: ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_INDEX,
+  });
 
   return (
     <EuiEmptyPrompt

Original file line number	Diff line number	Diff line change
`@@ -31,5 +31,5 @@`
`31`	`31`	`],`
`32`	`32`	`"server": true,`
`33`	`33`	`"ui": true,`
`34`		`- "requiredBundles": ["esUiShared", "ingestManager", "kibanaUtils", "kibanaReact", "lists"]`
	`34`	`+ "requiredBundles": ["esUiShared", "ingestManager", "kibanaUtils", "kibanaReact", "lists", "ml"]`
`35`	`35`	`}`