[ML] Fix regression with some links not opening in new tab

x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.js

@@ -30,7 +30,6 @@ import { formatHumanReadableDateTimeSeconds } from '../../../../common/util/date
 import { getIndexPatternIdFromName } from '../../util/index_utils';
 import { replaceStringTokens } from '../../util/string_utils';
 import { ML_APP_URL_GENERATOR, ML_PAGES } from '../../../../common/constants/ml_url_generator';
-import { PLUGIN_ID } from '../../../../common/constants/app';
 /*
  * Component for rendering the links menu inside a cell in the anomalies table.
  */
@@ -147,8 +146,6 @@ class LinksMenuUI extends Component {
   viewSeries = async () => {
     const {
       services: {
-        application: { navigateToApp },
-
         share: {
           urlGenerators: { getUrlGenerator },
         },
@@ -185,7 +182,7 @@ class LinksMenuUI extends Component {
     }
 
     const singleMetricViewerLink = await mlUrlGenerator.createUrl({
-      excludeBasePath: true,
+      excludeBasePath: false,
       page: ML_PAGES.SINGLE_METRIC_VIEWER,
       pageState: {
         jobIds: [record.job_id],
@@ -211,9 +208,7 @@ class LinksMenuUI extends Component {
         },
       },
     });
-    await navigateToApp(PLUGIN_ID, {
-      path: singleMetricViewerLink,
-    });
+    window.open(singleMetricViewerLink, '_blank');
   };
 
   viewExamples = () => {

x-pack/plugins/ml/public/application/components/links/ml_href.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 React, { ReactChild } from 'react';
+import { useMlKibana, useNavigateToPath } from '../../contexts/kibana';
+
+function isModifiedEvent(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+
+export const MlHref = ({
+  href,
+  target,
+  onClick,
+  children,
+  ...rest
+}: {
+  href: string;
+  target?: string;
+  onClick?: Function;
+  children?: ReactChild;
+}) => {
+  const {
+    services: {
+      http: { basePath },
+    },
+  } = useMlKibana();
+
+  const navigateToPath = useNavigateToPath();
+  return (
+    <a
+      target={target}
+      href={basePath.prepend(`/app/ml/${href}`)}
+      onClick={(event) => {
+        try {
+          if (onClick) onClick(event);
+        } catch (ex) {
+          event.preventDefault();
+          throw ex;
+        }
+
+        if (
+          !event.defaultPrevented && // onClick prevented default
+          event.button === 0 && // ignore everything but left clicks
+          (!target || target === '_self') && // let browser handle "target=_blank" etc.
+          !isModifiedEvent(event) // ignore clicks with modifier keys
+        ) {
+          event.preventDefault();
+          navigateToPath(href);
+          return false;
+        }
+        return true;
+      }}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/results_links/results_links.tsx

@@ -4,15 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useState, useEffect, useCallback } from 'react';
+import React, { FC, useState, useEffect } from 'react';
 import moment from 'moment';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiCard, EuiIcon } from '@elastic/eui';
 import { ml } from '../../../../services/ml_api_service';
 import { isFullLicense } from '../../../../license';
 import { checkPermission } from '../../../../capabilities/check_capabilities';
 import { mlNodesAvailable } from '../../../../ml_nodes_check/check_ml_nodes';
-import { useMlKibana, useMlUrlGenerator, useNavigateToPath } from '../../../../contexts/kibana';
+import { useMlKibana, useMlUrlGenerator } from '../../../../contexts/kibana';
 import { ML_PAGES } from '../../../../../../common/constants/ml_url_generator';
 import { MlCommonGlobalState } from '../../../../../../common/types/ml_url_generator';
 import {
@@ -45,12 +45,16 @@ export const ResultsLinks: FC<Props> = ({
   const [globalState, setGlobalState] = useState<MlCommonGlobalState | undefined>();
 
   const [discoverLink, setDiscoverLink] = useState('');
+  const [indexManagementLink, setIndexManagementLink] = useState('');
+  const [indexPatternManagementLink, setIndexPatternManagementLink] = useState('');
+  const [dataVisualizerLink, setDataVisualizerLink] = useState('');
+  const [createJobsSelectTypePage, setCreateJobsSelectTypePage] = useState('');
+
   const mlUrlGenerator = useMlUrlGenerator();
-  const navigateToPath = useNavigateToPath();
 
   const {
     services: {
-      application: { navigateToApp, navigateToUrl },
+      application: { getUrlForApp },
       share: {
         urlGenerators: { getUrlGenerator },
       },
@@ -84,35 +88,52 @@ export const ResultsLinks: FC<Props> = ({
         setDiscoverLink(discoverUrl);
       }
     };
+
+    const getDataVisualizerLink = async (): Promise<void> => {
+      const _dataVisualizerLink = await mlUrlGenerator.createUrl({
+        page: ML_PAGES.DATA_VISUALIZER_INDEX_VIEWER,
+        pageState: {
+          index: indexPatternId,
+          globalState,
+        },
+      });
+      if (!unmounted) {
+        setDataVisualizerLink(_dataVisualizerLink);
+      }
+    };
+    const getADCreateJobsSelectTypePage = async (): Promise<void> => {
+      const _createJobsSelectTypePage = await mlUrlGenerator.createUrl({
+        page: ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE,
+        pageState: {
+          index: indexPatternId,
+          globalState,
+        },
+      });
+      if (!unmounted) {
+        setCreateJobsSelectTypePage(_createJobsSelectTypePage);
+      }
+    };
+
     getDiscoverUrl();
+    getDataVisualizerLink();
+    getADCreateJobsSelectTypePage();
+
+    if (!unmounted) {
+      setIndexManagementLink(
+        getUrlForApp('management', { path: '/data/index_management/indices' })
+      );
+      setIndexPatternManagementLink(
+        getUrlForApp('management', {
+          path: `/kibana/indexPatterns${createIndexPattern ? `/patterns/${indexPatternId}` : ''}`,
+        })
+      );
+    }
 
     return () => {
       unmounted = true;
     };
   }, [indexPatternId, getUrlGenerator]);
 
-  const openInDataVisualizer = useCallback(async () => {
-    const path = await mlUrlGenerator.createUrl({
-      page: ML_PAGES.DATA_VISUALIZER_INDEX_VIEWER,
-      pageState: {
-        index: indexPatternId,
-        globalState,
-      },
-    });
-    await navigateToPath(path);
-  }, [indexPatternId, globalState]);
-
-  const redirectToADCreateJobsSelectTypePage = useCallback(async () => {
-    const path = await mlUrlGenerator.createUrl({
-      page: ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE,
-      pageState: {
-        index: indexPatternId,
-        globalState,
-      },
-    });
-    await navigateToPath(path);
-  }, [indexPatternId, globalState]);
-
   useEffect(() => {
     setShowCreateJobLink(checkPermission('canCreateJob') && mlNodesAvailable());
     updateTimeValues();
@@ -148,23 +169,6 @@ export const ResultsLinks: FC<Props> = ({
     }
   }
 
-  function openInDiscover(e: React.MouseEvent<HTMLButtonElement>) {
-    e.preventDefault();
-    navigateToUrl(discoverLink);
-  }
-
-  function openIndexManagement(e: React.MouseEvent<HTMLButtonElement>) {
-    e.preventDefault();
-    navigateToApp('management', { path: '/data/index_management/indices' });
-  }
-
-  function openIndexPatternManagement(e: React.MouseEvent<HTMLButtonElement>) {
-    e.preventDefault();
-    navigateToApp('management', {
-      path: `/kibana/indexPatterns${createIndexPattern ? `/patterns/${indexPatternId}` : ''}`,
-    });
-  }
-
   return (
     <EuiFlexGroup gutterSize="l">
       {createIndexPattern && discoverLink && (
@@ -178,7 +182,7 @@ export const ResultsLinks: FC<Props> = ({
               />
             }
             description=""
-            onClick={openInDiscover}
+            href={discoverLink}
           />
         </EuiFlexItem>
       )}
@@ -197,7 +201,7 @@ export const ResultsLinks: FC<Props> = ({
                 />
               }
               description=""
-              onClick={redirectToADCreateJobsSelectTypePage}
+              href={createJobsSelectTypePage}
             />
           </EuiFlexItem>
         )}
@@ -213,7 +217,7 @@ export const ResultsLinks: FC<Props> = ({
               />
             }
             description=""
-            onClick={openInDataVisualizer}
+            href={dataVisualizerLink}
           />
         </EuiFlexItem>
       )}
@@ -228,7 +232,7 @@ export const ResultsLinks: FC<Props> = ({
             />
           }
           description=""
-          onClick={openIndexManagement}
+          href={indexManagementLink}
         />
       </EuiFlexItem>
 
@@ -242,7 +246,7 @@ export const ResultsLinks: FC<Props> = ({
             />
           }
           description=""
-          onClick={openIndexPatternManagement}
+          href={indexPatternManagementLink}
         />
       </EuiFlexItem>
       <EuiFlexItem>

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js

@@ -30,7 +30,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { MlTooltipComponent } from '../../components/chart_tooltip';
 import { withKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { ML_APP_URL_GENERATOR } from '../../../../common/constants/ml_url_generator';
-import { PLUGIN_ID } from '../../../../common/constants/app';
 import { addItemToRecentlyAccessed } from '../../util/recently_accessed';
 
 const textTooManyBuckets = i18n.translate('xpack.ml.explorer.charts.tooManyBucketsDescription', {
@@ -55,21 +54,12 @@ function getChartId(series) {
 }
 
 // Wrapper for a single explorer chart
-function ExplorerChartContainer({
-  series,
-  severity,
-  tooManyBuckets,
-  wrapLabel,
-  navigateToApp,
-  mlUrlGenerator,
-}) {
+function ExplorerChartContainer({ series, severity, tooManyBuckets, wrapLabel, mlUrlGenerator }) {
   const redirectToSingleMetricViewer = useCallback(async () => {
     const singleMetricViewerLink = await getExploreSeriesLink(mlUrlGenerator, series);
     addItemToRecentlyAccessed('timeseriesexplorer', series.jobId, singleMetricViewerLink);
 
-    await navigateToApp(PLUGIN_ID, {
-      path: singleMetricViewerLink,
-    });
+    window.open(singleMetricViewerLink, '_blank');
   }, [mlUrlGenerator]);
 
   const { detectorLabel, entityFields } = series;

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

@@ -8,7 +8,7 @@ import React from 'react';
 import { detectorToString } from '../../../../util/string_utils';
 import { formatValues, filterObjects } from './format_values';
 import { i18n } from '@kbn/i18n';
-import { Link } from 'react-router-dom';
+import { MlHref } from '../../../../components/links/ml_href';
 
 export function extractJobDetails(job) {
   if (Object.keys(job).length === 0) {
@@ -61,7 +61,7 @@ export function extractJobDetails(job) {
   if (job.calendars) {
     calendars.items = job.calendars.map((c) => [
       '',
-      <Link to={`/settings/calendars_list/edit_calendar/${c}?_g=()`}>{c}</Link>,
+      <MlHref href={`settings/calendars_list/edit_calendar/${c}?_g=()`}>{c}</MlHref>,
     ]);
     // remove the calendars list from the general section
     // so not to show it twice.

x-pack/plugins/ml/public/application/util/chart_utils.js

@@ -260,7 +260,7 @@ export async function getExploreSeriesLink(mlUrlGenerator, series) {
         },
       },
     },
-    excludeBasePath: true,
+    excludeBasePath: false,
   });
   return url;
 }