[Logs / Metrics UI] Link handling / stop page reloads (#58478)

* Add a hook for seamlessly handling onClick and href props of links, buttons etc

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>

Author: 3 people

x-pack/plugins/infra/public/components/logging/log_analysis_results/analyze_in_ml_button.tsx

@@ -8,48 +8,40 @@ import { EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 import { encode } from 'rison-node';
-import url from 'url';
-import { stringify } from 'query-string';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { TimeRange } from '../../../../common/http_api/shared/time_range';
-import { url as urlUtils } from '../../../../../../../src/plugins/kibana_utils/public';
+import { useLinkProps, LinkDescriptor } from '../../../hooks/use_link_props';
 
 export const AnalyzeInMlButton: React.FunctionComponent<{
   jobId: string;
   partition?: string;
   timeRange: TimeRange;
 }> = ({ jobId, partition, timeRange }) => {
-  const prependBasePath = useKibana().services.http?.basePath?.prepend;
-  if (!prependBasePath) {
-    return null;
-  }
-  const pathname = prependBasePath('/app/ml');
+  const linkProps = useLinkProps(
+    typeof partition === 'string'
+      ? getPartitionSpecificSingleMetricViewerLinkDescriptor(jobId, partition, timeRange)
+      : getOverallAnomalyExplorerLinkDescriptor(jobId, timeRange)
+  );
   const buttonLabel = (
     <FormattedMessage
       id="xpack.infra.logs.analysis.analyzeInMlButtonLabel"
       defaultMessage="Analyze in ML"
     />
   );
   return typeof partition === 'string' ? (
-    <EuiButton
-      fill={false}
-      size="s"
-      href={getPartitionSpecificSingleMetricViewerLink(pathname, jobId, partition, timeRange)}
-    >
+    <EuiButton fill={false} size="s" {...linkProps}>
       {buttonLabel}
     </EuiButton>
   ) : (
-    <EuiButton
-      fill={true}
-      size="s"
-      href={getOverallAnomalyExplorerLink(pathname, jobId, timeRange)}
-    >
+    <EuiButton fill={true} size="s" {...linkProps}>
       {buttonLabel}
     </EuiButton>
   );
 };
 
-const getOverallAnomalyExplorerLink = (pathname: string, jobId: string, timeRange: TimeRange) => {
+const getOverallAnomalyExplorerLinkDescriptor = (
+  jobId: string,
+  timeRange: TimeRange
+): LinkDescriptor => {
   const { from, to } = convertTimeRangeToParams(timeRange);
 
   const _g = encode({
@@ -62,20 +54,18 @@ const getOverallAnomalyExplorerLink = (pathname: string, jobId: string, timeRang
     },
   });
 
-  const hash = `/explorer?${stringify(urlUtils.encodeQuery({ _g }), { encode: false })}`;
-
-  return url.format({
-    pathname,
-    hash,
-  });
+  return {
+    app: 'ml',
+    hash: '/explorer',
+    search: { _g },
+  };
 };
 
-const getPartitionSpecificSingleMetricViewerLink = (
-  pathname: string,
+const getPartitionSpecificSingleMetricViewerLinkDescriptor = (
   jobId: string,
   partition: string,
   timeRange: TimeRange
-) => {
+): LinkDescriptor => {
   const { from, to } = convertTimeRangeToParams(timeRange);
 
   const _g = encode({
@@ -95,15 +85,11 @@ const getPartitionSpecificSingleMetricViewerLink = (
     },
   });
 
-  const hash = `/timeseriesexplorer?${stringify(urlUtils.encodeQuery({ _g, _a }), {
-    sort: false,
-    encode: false,
-  })}`;
-
-  return url.format({
-    pathname,
-    hash,
-  });
+  return {
+    app: 'ml',
+    hash: '/timeseriesexplorer',
+    search: { _g, _a },
+  };
 };
 
 const convertTimeRangeToParams = (timeRange: TimeRange): { from: string; to: string } => {

x-pack/plugins/infra/public/components/logging/log_analysis_setup/user_management_link.tsx

@@ -7,12 +7,19 @@
 import { EuiButton, EuiButtonProps } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
+import { useLinkProps } from '../../../hooks/use_link_props';
 
-export const UserManagementLink: React.FunctionComponent<EuiButtonProps> = props => (
-  <EuiButton href="kibana#/management/security/users" color="primary" fill {...props}>
-    <FormattedMessage
-      id="xpack.infra.logs.analysis.userManagementButtonLabel"
-      defaultMessage="Manage users"
-    />
-  </EuiButton>
-);
+export const UserManagementLink: React.FunctionComponent<EuiButtonProps> = props => {
+  const linkProps = useLinkProps({
+    app: 'kibana',
+    hash: '/management/security/users',
+  });
+  return (
+    <EuiButton color="primary" fill {...linkProps} {...props}>
+      <FormattedMessage
+        id="xpack.infra.logs.analysis.userManagementButtonLabel"
+        defaultMessage="Manage users"
+      />
+    </EuiButton>
+  );
+};