[Synthetics] Step details add network timings breakdown (#144336)

x-pack/plugins/observability/public/utils/observability_data_views/observability_data_views.ts

@@ -118,12 +118,23 @@ export class ObservabilityDataViews {
 
   async createDataView(app: AppDataType, indices: string) {
     const appIndicesPattern = getAppIndicesWithPattern(app, indices);
-    return await this.dataViews.create({
+
+    const { runtimeFields } = getFieldFormatsForApp(app);
+
+    const dataView = await this.dataViews.create({
       title: appIndicesPattern,
       id: getAppDataViewId(app, indices),
       timeFieldName: '@timestamp',
       fieldFormats: this.getFieldFormats(app),
     });
+
+    if (runtimeFields !== null) {
+      runtimeFields.forEach(({ name, field }) => {
+        dataView.addRuntimeField(name, field);
+      });
+    }
+
+    return dataView;
   }
 
   async createAndSavedDataView(app: AppDataType, indices: string) {

x-pack/plugins/synthetics/e2e/page_objects/synthetics_app.tsx

@@ -82,7 +82,7 @@ export function syntheticsAppPageProvider({ page, kibanaUrl }: { page: Page; kib
 
     async navigateToEditMonitor() {
       await this.clickByTestSubj('syntheticsMonitorListActions');
-      await page.click('text=Edit', { timeout: 2 * 60 * 1000 });
+      await page.click('text=Edit', { timeout: 2 * 60 * 1000, delay: 800 });
       await this.findByText('Edit monitor');
     },
 

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/network_timings_breakdown.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useParams } from 'react-router-dom';
+import { ReportTypes } from '@kbn/observability-plugin/public';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { ClientPluginsStart } from '../../../../plugin';
+
+export const NetworkTimingsBreakdown = () => {
+  const { observability } = useKibana<ClientPluginsStart>().services;
+
+  const ExploratoryViewEmbeddable = observability.ExploratoryViewEmbeddable;
+
+  const { checkGroupId, stepIndex } = useParams<{ checkGroupId: string; stepIndex: string }>();
+
+  return (
+    <>
+      <EuiTitle size="xs">
+        <h3>{LAST_24_HOURS}</h3>
+      </EuiTitle>
+      <EuiSpacer size="xs" />
+      <ExploratoryViewEmbeddable
+        customHeight="250px"
+        reportType={ReportTypes.KPI}
+        legendIsVisible={false}
+        axisTitlesVisibility={{ x: false, yLeft: false, yRight: false }}
+        attributes={[
+          {
+            operationType: 'last_value',
+            seriesType: 'area_stacked',
+            dataType: 'synthetics',
+            name: 'Network timings',
+            selectedMetricField: 'network_timings',
+            reportDefinitions: { 'monitor.check_group': [checkGroupId] },
+            time: {
+              from: 'now-24h/h',
+              to: 'now',
+            },
+            filters: [
+              {
+                field: 'synthetics.step.index',
+                values: [stepIndex],
+              },
+            ],
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+const LAST_24_HOURS = i18n.translate('xpack.synthetics.stepDetailsRoute.last24Hours', {
+  defaultMessage: 'Last 24 hours',
+});

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_detail_page.tsx

@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { WaterfallChartContainer } from './components/network_waterfall/step_detail/waterfall/waterfall_chart_container';
 import { ObjectWeightList } from './components/object_weight_list';
+import { NetworkTimingsBreakdown } from './network_timings_breakdown';
 import { StepImage } from './components/step_image';
 import { useJourneySteps } from '../monitor_details/hooks/use_journey_steps';
 import { MonitorDetailsLinkPortal } from '../monitor_add_edit/monitor_details_portal';
@@ -73,8 +74,8 @@ export const StepDetailPage = () => {
               <EuiFlexItem grow={1}>
                 {/* TODO: Add breakdown of network timings donut*/}
               </EuiFlexItem>
-              <EuiFlexItem grow={2} css={{ height: 150 }}>
-                {/* TODO: Add breakdown of network events*/}
+              <EuiFlexItem grow={2}>
+                <NetworkTimingsBreakdown />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>