[ Exploratory view] Add page load dist link for exploratory view (#97352)

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/ResetPercentileZoom.tsx

@@ -11,6 +11,7 @@ import {
   EuiHideFor,
   EuiShowFor,
   EuiButtonIcon,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { I18LABELS } from '../translations';
 import { PercentileRange } from './index';
@@ -28,27 +29,21 @@ export function ResetPercentileZoom({
   const onClick = () => {
     setPercentileRange({ min: null, max: null });
   };
-  return (
-    <>
+  return !isDisabled ? (
+    <EuiFlexItem grow={false}>
       <EuiShowFor sizes={['xs']}>
         <EuiButtonIcon
           iconType="inspect"
           size="s"
           aria-label={I18LABELS.resetZoom}
           onClick={onClick}
-          disabled={isDisabled}
         />
       </EuiShowFor>
       <EuiHideFor sizes={['xs']}>
-        <EuiButtonEmpty
-          iconType="inspect"
-          size="s"
-          onClick={onClick}
-          disabled={isDisabled}
-        >
+        <EuiButtonEmpty iconType="inspect" size="s" onClick={onClick}>
           {I18LABELS.resetZoom}
         </EuiButtonEmpty>
       </EuiHideFor>
-    </>
-  );
+    </EuiFlexItem>
+  ) : null;
 }

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx

@@ -6,7 +6,14 @@
  */
 
 import React, { useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { I18LABELS } from '../translations';
@@ -14,6 +21,8 @@ import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageLoadDistChart } from '../Charts/PageLoadDistChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
 import { ResetPercentileZoom } from './ResetPercentileZoom';
+import { createExploratoryViewUrl } from '../../../../../../observability/public';
+import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 
 export interface PercentileRange {
   min?: number | null;
@@ -21,9 +30,15 @@ export interface PercentileRange {
 }
 
 export function PageLoadDistribution() {
+  const {
+    services: { http },
+  } = useKibana();
+
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end, searchTerm } = urlParams;
+  const { start, end, rangeFrom, rangeTo, searchTerm } = urlParams;
+
+  const { serviceName } = uiFilters;
 
   const [percentileRange, setPercentileRange] = useState<PercentileRange>({
     min: null,
@@ -34,8 +49,6 @@ export function PageLoadDistribution() {
 
   const { data, status } = useFetcher(
     (callApmApi) => {
-      const { serviceName } = uiFilters;
-
       if (start && end && serviceName) {
         return callApmApi({
           endpoint: 'GET /api/apm/rum-client/page-load-distribution',
@@ -64,6 +77,7 @@ export function PageLoadDistribution() {
       percentileRange.min,
       percentileRange.max,
       searchTerm,
+      serviceName,
     ]
   );
 
@@ -71,6 +85,20 @@ export function PageLoadDistribution() {
     setPercentileRange({ min, max });
   };
 
+  const exploratoryViewLink = createExploratoryViewUrl(
+    {
+      [`${serviceName}-page-views`]: {
+        reportType: 'pld',
+        time: { from: rangeFrom!, to: rangeTo! },
+        reportDefinitions: {
+          'service.name': serviceName?.[0] as string,
+        },
+        ...(breakdown ? { breakdown: breakdown.fieldName } : {}),
+      },
+    },
+    http?.basePath.get()
+  );
+
   return (
     <div data-cy="pageLoadDist">
       <EuiFlexGroup responsive={false}>
@@ -79,12 +107,10 @@ export function PageLoadDistribution() {
             <h3>{I18LABELS.pageLoadDistribution}</h3>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <ResetPercentileZoom
-            percentileRange={percentileRange}
-            setPercentileRange={setPercentileRange}
-          />
-        </EuiFlexItem>
+        <ResetPercentileZoom
+          percentileRange={percentileRange}
+          setPercentileRange={setPercentileRange}
+        />
         <EuiFlexItem grow={false} style={{ width: 170 }}>
           <BreakdownFilter
             selectedBreakdown={breakdown}
@@ -92,6 +118,18 @@ export function PageLoadDistribution() {
             dataTestSubj={'pldBreakdownFilter'}
           />
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            size="s"
+            isDisabled={!serviceName?.[0]}
+            href={exploratoryViewLink}
+          >
+            <FormattedMessage
+              id="xpack.apm.csm.pageViews.analyze"
+              defaultMessage="Analyze"
+            />
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
       <PageLoadDistChart