[AO] Sync chart pointers on the metric threshold alert details page (e…

…lastic#155402)

Closes elastic#155354

## Summary

This PR syncs chart pointers on the metric threshold alert details page.


![image](https://user-images.githubusercontent.com/12370520/233380782-bf97eab8-167d-4f97-a10d-d2bfec1936e7.png)


## 🧪 How to test

- Add `xpack.observability.unsafe.alertDetails.metrics.enabled: true` to
the Kibana config
- Create a metric threshold rule with multiple conditions that generates
an alert
- Go to the alert details page and check the chart pointers

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx

@@ -22,6 +22,9 @@ jest.mock('../../../hooks/use_kibana', () => ({
   useKibanaContextForPlugin: () => ({
     services: {
       ...mockStartServices,
+      charts: {
+        activeCursor: jest.fn(),
+      },
     },
   }),
 }));

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useRef } from 'react';
 import {
   Axis,
   Chart,
@@ -17,6 +17,7 @@ import {
 } from '@elastic/charts';
 import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useActiveCursor } from '@kbn/charts-plugin/public';
 import { DataViewBase } from '@kbn/es-query';
 import { first, last } from 'lodash';
 
@@ -66,7 +67,7 @@ export const ExpressionChart: React.FC<Props> = ({
   timeRange,
   annotations,
 }) => {
-  const { uiSettings } = useKibanaContextForPlugin().services;
+  const { uiSettings, charts } = useKibanaContextForPlugin().services;
 
   const { isLoading, data } = useMetricsExplorerChartData(
     expression,
@@ -77,6 +78,11 @@ export const ExpressionChart: React.FC<Props> = ({
     timeRange
   );
 
+  const chartRef = useRef(null);
+  const handleCursorUpdate = useActiveCursor(charts.activeCursor, chartRef, {
+    isDateHistogram: true,
+  });
+
   if (isLoading) {
     return <LoadingState />;
   }
@@ -141,7 +147,7 @@ export const ExpressionChart: React.FC<Props> = ({
   return (
     <>
       <ChartContainer>
-        <Chart>
+        <Chart ref={chartRef}>
           <MetricExplorerSeriesChart
             type={chartType}
             metric={metric}
@@ -184,7 +190,14 @@ export const ExpressionChart: React.FC<Props> = ({
             tickFormat={createFormatterForMetric(metric)}
             domain={domain}
           />
-          <Settings tooltip={tooltipProps} theme={getChartTheme(isDarkMode)} />
+          <Settings
+            onPointerUpdate={handleCursorUpdate}
+            tooltip={tooltipProps}
+            externalPointerEvents={{
+              tooltip: { visible: true },
+            }}
+            theme={getChartTheme(isDarkMode)}
+          />
         </Chart>
       </ChartContainer>
       <div style={{ textAlign: 'center' }}>