[Monitoring] Use custom route to ensure global state is preserved (#63891)

* WIP

* PR  updates

* Fix testing

Co-authored-by: Elastic Machine <[email protected]>

Author: chrisronline

x-pack/legacy/plugins/monitoring/public/components/apm/instances/instances.js

@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { Status } from './status';
 import { formatMetric } from '../../../lib/format_number';
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { formatTimestampToDuration } from '../../../../common';
 import { i18n } from '@kbn/i18n';
 import { APM_SYSTEM_ID } from '../../../../common/constants';
@@ -56,7 +57,10 @@ function getColumns(setupMode) {
 
         return (
           <Fragment>
-            <EuiLink href={`#/apm/instances/${apm.uuid}`} data-test-subj={`apmLink-${name}`}>
+            <EuiLink
+              href={getSafeForExternalLink(`#/apm/instances/${apm.uuid}`)}
+              data-test-subj={`apmLink-${name}`}
+            >
               {name}
             </EuiLink>
             {setupModeStatus}

x-pack/legacy/plugins/monitoring/public/components/beats/listing/listing.js

@@ -19,13 +19,13 @@ import { formatMetric } from 'plugins/monitoring/lib/format_number';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
 import { i18n } from '@kbn/i18n';
 import { BEATS_SYSTEM_ID } from '../../../../common/constants';
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { SetupModeBadge } from '../../setup_mode/badge';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export class Listing extends PureComponent {
   getColumns() {
-    const { kbnUrl, scope } = this.props.angular;
     const setupMode = this.props.setupMode;
 
     return [
@@ -59,11 +59,7 @@ export class Listing extends PureComponent {
           return (
             <div>
               <EuiLink
-                onClick={() => {
-                  scope.$evalAsync(() => {
-                    kbnUrl.changePath(`/beats/beat/${beat.uuid}`);
-                  });
-                }}
+                href={getSafeForExternalLink(`#/beats/beat/${beat.uuid}`)}
                 data-test-subj={`beatLink-${name}`}
               >
                 {name}

x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js

@@ -32,6 +32,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Reason } from '../../logs/reason';
 import { SetupModeTooltip } from '../../setup_mode/tooltip';
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 const calculateShards = shards => {
@@ -168,7 +169,7 @@ export function ElasticsearchPanel(props) {
   const showMlJobs = () => {
     // if license doesn't support ML, then `ml === null`
     if (props.ml) {
-      const gotoURL = '#/elasticsearch/ml_jobs';
+      const gotoURL = getSafeForExternalLink('#/elasticsearch/ml_jobs');
       return (
         <>
           <EuiDescriptionListTitle>

x-pack/legacy/plugins/monitoring/public/components/cluster/overview/license_text.js

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import moment from 'moment-timezone';
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { capitalize } from 'lodash';
 import { EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -18,7 +19,7 @@ export function LicenseText({ license, showLicenseExpiration }) {
   }
 
   return (
-    <EuiLink href="#/license">
+    <EuiLink href={getSafeForExternalLink('#/license')}>
       <FormattedMessage
         id="xpack.monitoring.cluster.overview.licenseText.toLicensePageLinkLabel"
         defaultMessage="{licenseType} license {willExpireOn}"

x-pack/legacy/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js

@@ -17,7 +17,7 @@ import {
   EuiTextColor,
   EuiScreenReaderOnly,
 } from '@elastic/eui';
-
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import './ccr.css';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -65,7 +65,9 @@ export class Ccr extends Component {
               ),
               render: shardId => {
                 return (
-                  <EuiLink href={`#/elasticsearch/ccr/${index}/shard/${shardId}`}>
+                  <EuiLink
+                    href={getSafeForExternalLink(`#/elasticsearch/ccr/${index}/shard/${shardId}`)}
+                  >
                     {shardId}
                   </EuiLink>
                 );

x-pack/legacy/plugins/monitoring/public/components/elasticsearch/indices/indices.js

@@ -8,6 +8,7 @@ import React from 'react';
 import { capitalize } from 'lodash';
 import { LARGE_FLOAT, LARGE_BYTES, LARGE_ABBREVIATED } from '../../../../common/formatting';
 import { formatMetric } from '../../../lib/format_number';
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { ElasticsearchStatusIcon } from '../status_icon';
 import { ClusterStatus } from '../cluster_status';
 import { EuiMonitoringTable } from '../../table';
@@ -34,7 +35,10 @@ const columns = [
     sortable: true,
     render: value => (
       <div data-test-subj="name">
-        <EuiLink href={`#/elasticsearch/indices/${value}`} data-test-subj={`indexLink-${value}`}>
+        <EuiLink
+          href={getSafeForExternalLink(`#/elasticsearch/indices/${value}`)}
+          data-test-subj={`indexLink-${value}`}
+        >
           {value}
         </EuiLink>
       </div>

x-pack/legacy/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js

@@ -7,6 +7,7 @@
 import React, { Fragment } from 'react';
 import { NodeStatusIcon } from '../node';
 import { extractIp } from '../../../lib/extract_ip'; // TODO this is only used for elasticsearch nodes summary / node detail, so it should be moved to components/elasticsearch/nodes/lib
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { ClusterStatus } from '../cluster_status';
 import { EuiMonitoringSSPTable } from '../../table';
 import { MetricCell, OfflineCell } from './cells';
@@ -75,7 +76,7 @@ const getColumns = (showCgroupMetricsElasticsearch, setupMode, clusterUuid) => {
     render: (value, node) => {
       let nameLink = (
         <EuiLink
-          href={`#/elasticsearch/nodes/${node.resolver}`}
+          href={getSafeForExternalLink(`#/elasticsearch/nodes/${node.resolver}`)}
           data-test-subj={`nodeLink-${node.resolver}`}
         >
           {value}

x-pack/legacy/plugins/monitoring/public/components/elasticsearch/shard_activity/recovery_index.js

@@ -8,13 +8,14 @@ import React from 'react';
 import { EuiLink } from '@elastic/eui';
 import { Snapshot } from './snapshot';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 
 export const RecoveryIndex = props => {
   const { name, shard, relocationType } = props;
 
   return (
     <div>
-      <EuiLink href={`#/elasticsearch/indices/${name}`}>{name}</EuiLink>
+      <EuiLink href={getSafeForExternalLink(`#/elasticsearch/indices/${name}`)}>{name}</EuiLink>
       <br />
       <FormattedMessage
         id="xpack.monitoring.elasticsearch.shardActivity.recoveryIndex.shardDescription"

x-pack/legacy/plugins/monitoring/public/components/kibana/instances/instances.js

@@ -21,6 +21,7 @@ import { EuiMonitoringTable } from '../../table';
 import { KibanaStatusIcon } from '../status_icon';
 import { StatusIcon } from 'plugins/monitoring/components/status_icon';
 import { formatMetric, formatNumber } from '../../../lib/format_number';
+import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { SetupModeBadge } from '../../setup_mode/badge';
@@ -68,7 +69,7 @@ const getColumns = setupMode => {
         return (
           <div>
             <EuiLink
-              href={`#/kibana/instances/${kibana.kibana.uuid}`}
+              href={getSafeForExternalLink(`#/kibana/instances/${kibana.kibana.uuid}`)}
               data-test-subj={`kibanaLink-${name}`}
             >
               {name}

x-pack/legacy/plugins/monitoring/public/lib/get_safe_for_external_link.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export function getSafeForExternalLink(url: string) {
+  return `${url.split('?')[0]}?${location.hash.split('?')[1]}`;
+}

x-pack/legacy/plugins/monitoring/public/np_imports/angular/modules.ts

@@ -26,6 +26,7 @@ import {
 import { PromiseServiceCreator } from './providers/promises';
 // @ts-ignore
 import { PrivateProvider } from './providers/private';
+import { getSafeForExternalLink } from '../../lib/get_safe_for_external_link';
 
 type IPrivate = <T>(provider: (...injectable: any[]) => T) => T;
 
@@ -134,7 +135,8 @@ function createHrefModule(core: AppMountContext['core']) {
         pre: (_$scope, _$el, $attr) => {
           $attr.$observe(name, val => {
             if (val) {
-              $attr.$set('href', core.http.basePath.prepend(val as string));
+              const url = getSafeForExternalLink(val as string);
+              $attr.$set('href', core.http.basePath.prepend(url));
             }
           });
         },