added trend chart and link to exp view

x-pack/plugins/observability/public/components/shared/exploratory_view/embeddable/embeddable.tsx

@@ -12,7 +12,7 @@ import { AllSeries, useTheme } from '../../../..';
 import { LayerConfig, LensAttributes } from '../configurations/lens_attributes';
 import { ReportViewType } from '../types';
 import { getLayerConfigs } from '../hooks/use_lens_attributes';
-import { LensPublicStart } from '../../../../../../lens/public';
+import { LensPublicStart, XYState } from '../../../../../../lens/public';
 import { OperationTypeComponent } from '../series_editor/columns/operation_type_select';
 import { IndexPatternState } from '../hooks/use_app_index_pattern';
 
@@ -22,6 +22,7 @@ export interface ExploratoryEmbeddableProps {
   appendTitle?: JSX.Element;
   title: string | JSX.Element;
   showCalculationMethod?: boolean;
+  axisTitlesVisibility?: XYState['axisTitlesVisibilitySettings'];
 }
 
 export interface ExploratoryEmbeddableComponentProps extends ExploratoryEmbeddableProps {
@@ -37,6 +38,7 @@ export default function Embeddable({
   appendTitle,
   indexPatterns,
   lens,
+  axisTitlesVisibility,
   showCalculationMethod = false,
 }: ExploratoryEmbeddableComponentProps) {
   const LensComponent = lens?.EmbeddableComponent;
@@ -57,11 +59,16 @@ export default function Embeddable({
     return <EuiText>No lens component</EuiText>;
   }
 
+  const attributesJSON = lensAttributes.getJSON();
+
+  (attributesJSON.state.visualization as XYState).axisTitlesVisibilitySettings =
+    axisTitlesVisibility;
+
   return (
     <Wrapper>
-      <EuiFlexGroup>
+      <EuiFlexGroup alignItems="center">
         <EuiFlexItem>
-          <EuiTitle size="s">
+          <EuiTitle size="xs">
             <h3>{title}</h3>
           </EuiTitle>
         </EuiFlexItem>
@@ -81,7 +88,7 @@ export default function Embeddable({
         id="exploratoryView"
         style={{ height: '100%' }}
         timeRange={series?.time}
-        attributes={lensAttributes.getJSON()}
+        attributes={attributesJSON}
         onBrushEnd={({ range }) => {}}
       />
     </Wrapper>
@@ -92,7 +99,7 @@ const Wrapper = styled.div`
   height: 100%;
   &&& {
     > :nth-child(2) {
-      height: calc(100% - 56px);
+      height: calc(100% - 32px);
     }
   }
 `;

x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_marker_trend.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+
+import { EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useUptimeStartPlugins } from '../../../../../contexts/uptime_startup_plugins_context';
+import { useUptimeSettingsContext } from '../../../../../contexts/uptime_settings_context';
+import { AllSeries, createExploratoryViewUrl } from '../../../../../../../observability/public';
+import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
+
+export function WaterfallMarkerTrend({ title, field }: { title: string; field: string }) {
+  const { observability } = useUptimeStartPlugins();
+
+  const EmbeddableExpVIew = observability!.ExploratoryViewEmbeddable;
+
+  const { basePath } = useUptimeSettingsContext();
+
+  const allSeries: AllSeries = [
+    {
+      name: title,
+      selectedMetricField: field,
+      time: { from: 'now-1d', to: 'now' },
+      seriesType: 'area',
+      dataType: 'synthetics',
+      reportDefinitions: { 'monitor.name': ['ALL_VALUES'] },
+    },
+  ];
+
+  const href = createExploratoryViewUrl(
+    {
+      reportType: 'kpi-over-time',
+      allSeries,
+    },
+    basePath
+  );
+
+  return (
+    <Wrapper>
+      <EmbeddableExpVIew
+        title={title}
+        appendTitle={
+          <EuiButton iconType={'visArea'} href={href} target="_blank" size="s">
+            {ANALYZE_LABEL}
+          </EuiButton>
+        }
+        reportType={'kpi-over-time'}
+        attributes={allSeries}
+        axisTitlesVisibility={{ x: false, yLeft: false, yRight: false }}
+      />
+    </Wrapper>
+  );
+}
+
+export const ANALYZE_LABEL = i18n.translate('xpack.uptime.synthetics.markers.analyze', {
+  defaultMessage: 'Analyze',
+});
+
+const Wrapper = euiStyled.div`
+  height: 200px;
+  width: 400px;
+  &&& {
+    .expExpressionRenderer__expression {
+      padding-bottom: 0 !important;
+    }
+  }
+`;

x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_markers.tsx

@@ -5,13 +5,14 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { AnnotationDomainType, LineAnnotation } from '@elastic/charts';
-import { EuiIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiIcon, EuiPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useWaterfallContext } from '..';
 import { useTheme } from '../../../../../../../observability/public';
 import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
+import { WaterfallMarkerTrend } from './waterfall_marker_trend';
 
 export const FCP_LABEL = i18n.translate('xpack.uptime.synthetics.waterfall.fcpLabel', {
   defaultMessage: 'First contentful paint',
@@ -39,6 +40,12 @@ export const DOCUMENT_CONTENT_LOADED_LABEL = i18n.translate(
   }
 );
 
+export const SYNTHETICS_CLS = 'browser.experience.cls';
+export const SYNTHETICS_LCP = 'browser.experience.lcp.us';
+export const SYNTHETICS_FCP = 'browser.experience.fcp.us';
+export const SYNTHETICS_DOCUMENT_ONLOAD = 'browser.experience.load.us';
+export const SYNTHETICS_DCL = 'browser.experience.dcl.us';
+
 export function WaterfallChartMarkers() {
   const { markerItems } = useWaterfallContext();
 
@@ -48,12 +55,32 @@ export function WaterfallChartMarkers() {
     return null;
   }
 
-  const markersInfo: Record<string, { label: string; color: string }> = {
-    domContentLoaded: { label: DOCUMENT_CONTENT_LOADED_LABEL, color: theme.eui.euiColorVis0 },
-    firstContentfulPaint: { label: FCP_LABEL, color: theme.eui.euiColorVis1 },
-    largestContentfulPaint: { label: LCP_LABEL, color: theme.eui.euiColorVis2 },
-    layoutShift: { label: LAYOUT_SHIFT_LABEL, color: theme.eui.euiColorVis3 },
-    loadEvent: { label: LOAD_EVENT_LABEL, color: theme.eui.euiColorVis9 },
+  const markersInfo: Record<string, { label: string; color: string; field: string }> = {
+    domContentLoaded: {
+      label: DOCUMENT_CONTENT_LOADED_LABEL,
+      color: theme.eui.euiColorVis0,
+      field: SYNTHETICS_DCL,
+    },
+    firstContentfulPaint: {
+      label: FCP_LABEL,
+      color: theme.eui.euiColorVis1,
+      field: SYNTHETICS_FCP,
+    },
+    largestContentfulPaint: {
+      label: LCP_LABEL,
+      color: theme.eui.euiColorVis2,
+      field: SYNTHETICS_LCP,
+    },
+    layoutShift: {
+      label: LAYOUT_SHIFT_LABEL,
+      color: theme.eui.euiColorVis3,
+      field: SYNTHETICS_CLS,
+    },
+    loadEvent: {
+      label: LOAD_EVENT_LABEL,
+      color: theme.eui.euiColorVis9,
+      field: SYNTHETICS_DOCUMENT_ONLOAD,
+    },
   };
 
   return (
@@ -73,7 +100,7 @@ export function WaterfallChartMarkers() {
               }),
             },
           ]}
-          marker={<EuiIcon type="dot" size="l" />}
+          marker={<MarkerIcon field={markersInfo[id]?.field} label={markersInfo[id]?.label} />}
           style={{
             line: {
               strokeWidth: 2,
@@ -87,6 +114,34 @@ export function WaterfallChartMarkers() {
   );
 }
 
+function MarkerIcon({ field, label }: { field: string; label: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (!field) {
+    return <EuiIcon type="dot" size="l" />;
+  }
+
+  return (
+    <EuiPopover
+      isOpen={isOpen}
+      closePopover={() => setIsOpen(false)}
+      anchorPosition="downLeft"
+      panelStyle={{ paddingBottom: 0, paddingLeft: 4 }}
+      zIndex={100}
+      button={
+        <EuiButtonIcon
+          iconType="dot"
+          iconSize="l"
+          color="text"
+          onClick={() => setIsOpen((prevState) => !prevState)}
+        />
+      }
+    >
+      <WaterfallMarkerTrend title={label} field={field} />
+    </EuiPopover>
+  );
+}
+
 const Wrapper = euiStyled.span`
   &&& {
     > .echAnnotation__icon {

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import { ClientPluginsStart } from '../apps/plugin';
 
 export const UptimeStartupPluginsContext = createContext<Partial<ClientPluginsStart>>({});
@@ -14,3 +14,5 @@ export const UptimeStartupPluginsContextProvider: React.FC<Partial<ClientPlugins
   children,
   ...props
 }) => <UptimeStartupPluginsContext.Provider value={{ ...props }} children={children} />;
+
+export const useUptimeStartPlugins = () => useContext(UptimeStartupPluginsContext);