[Exploratory View] Add monitor duration link for exploratory view (#97418)

x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle, EuiSpacer, EuiButton } from '@elastic/eui';
 import { LocationDurationLine } from '../../../../common/types';
 import { MLIntegrationComponent } from '../ml/ml_integeration';
 import { AnomalyRecords } from '../../../state/actions';
@@ -18,6 +18,7 @@ interface DurationChartProps {
   hasMLJob: boolean;
   anomalies: AnomalyRecords | null;
   locationDurationLines: LocationDurationLine[];
+  exploratoryViewLink: string;
 }
 
 /**
@@ -27,6 +28,7 @@ interface DurationChartProps {
  * @param props The props required for this component to render properly
  */
 export const MonitorDurationComponent = ({
+  exploratoryViewLink,
   locationDurationLines,
   anomalies,
   loading,
@@ -34,7 +36,7 @@ export const MonitorDurationComponent = ({
 }: DurationChartProps) => {
   return (
     <EuiPanel paddingSize="m">
-      <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="s">
             <h3>
@@ -56,6 +58,11 @@ export const MonitorDurationComponent = ({
         <EuiFlexItem grow={false}>
           <MLIntegrationComponent />
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton size="s" isDisabled={loading} href={exploratoryViewLink}>
+            <FormattedMessage id="xpack.uptime.monitorDuration.analyze" defaultMessage="Analyze" />
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
       <DurationChartComponent

x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration_container.tsx

@@ -24,6 +24,8 @@ import { JobStat } from '../../../../../ml/public';
 import { MonitorDurationComponent } from './monitor_duration';
 import { MonitorIdParam } from '../../../../common/types';
 import { getMLJobId } from '../../../../common/lib';
+import { createExploratoryViewUrl } from '../../../../../observability/public';
+import { useUptimeSettingsContext } from '../../../contexts/uptime_settings_context';
 
 export const MonitorDuration: React.FC<MonitorIdParam> = ({ monitorId }) => {
   const {
@@ -49,6 +51,23 @@ export const MonitorDuration: React.FC<MonitorIdParam> = ({ monitorId }) => {
 
   const { lastRefresh } = useContext(UptimeRefreshContext);
 
+  const { basePath } = useUptimeSettingsContext();
+
+  const exploratoryViewLink = createExploratoryViewUrl(
+    {
+      [`monitor-duration`]: {
+        reportType: 'upd',
+        time: { from: dateRangeStart, to: dateRangeEnd },
+        reportDefinitions: {
+          'monitor.id': monitorId as string,
+        },
+        breakdown: 'observer.geo.name',
+        operationType: 'average',
+      },
+    },
+    basePath
+  );
+
   useEffect(() => {
     if (isMLAvailable) {
       const anomalyParams = {
@@ -77,6 +96,7 @@ export const MonitorDuration: React.FC<MonitorIdParam> = ({ monitorId }) => {
       anomalies={anomalies}
       hasMLJob={hasMLJob}
       loading={loading || jobsLoading}
+      exploratoryViewLink={exploratoryViewLink}
       locationDurationLines={durationLines?.locationDurationLines ?? []}
     />
   );

x-pack/plugins/uptime/public/contexts/uptime_settings_context.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { createContext, useMemo } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { UptimeAppProps } from '../apps/uptime_app';
 import { CLIENT_DEFAULTS, CONTEXT_DEFAULTS } from '../../common/constants';
 import { CommonlyUsedRange } from '../components/common/uptime_date_picker';
@@ -66,3 +66,5 @@ export const UptimeSettingsContextProvider: React.FC<UptimeAppProps> = ({ childr
 
   return <UptimeSettingsContext.Provider value={value} children={children} />;
 };
+
+export const useUptimeSettingsContext = () => useContext(UptimeSettingsContext);