[Synthetics] Waterfall view

x-pack/plugins/uptime/common/constants/ui.ts

@@ -12,6 +12,8 @@ export const SETTINGS_ROUTE = '/settings';
 
 export const CERTIFICATES_ROUTE = '/certificates';
 
+export const STEP_DETAIL_ROUTE = '/journey/:checkGroupId/step/:stepIndex';
+
 export enum STATUS {
   UP = 'up',
   DOWN = 'down',

x-pack/plugins/uptime/common/runtime_types/index.ts

@@ -12,3 +12,4 @@ export * from './monitor';
 export * from './overview_filters';
 export * from './ping';
 export * from './snapshot';
+export * from './network_events';

x-pack/plugins/uptime/common/runtime_types/network_events.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as t from 'io-ts';
+
+const NetworkTimingsType = t.type({
+  dns_start: t.number,
+  push_end: t.number,
+  worker_fetch_start: t.number,
+  worker_respond_with_settled: t.number,
+  proxy_end: t.number,
+  worker_start: t.number,
+  worker_ready: t.number,
+  send_end: t.number,
+  connect_end: t.number,
+  connect_start: t.number,
+  send_start: t.number,
+  proxy_start: t.number,
+  push_start: t.number,
+  ssl_end: t.number,
+  receive_headers_end: t.number,
+  ssl_start: t.number,
+  request_time: t.number,
+  dns_end: t.number,
+});
+
+export type NetworkTimings = t.TypeOf<typeof NetworkTimingsType>;
+
+const NetworkEventType = t.intersection([
+  t.type({
+    timestamp: t.string,
+    requestSentTime: t.number,
+    loadEndTime: t.number,
+  }),
+  t.partial({
+    method: t.string,
+    url: t.string,
+    status: t.number,
+    mimeType: t.string,
+    requestStartTime: t.number,
+    timings: NetworkTimingsType,
+  }),
+]);
+
+export type NetworkEvent = t.TypeOf<typeof NetworkEventType>;
+
+export const SyntheticsNetworkEventsApiResponseType = t.type({
+  events: t.array(NetworkEventType),
+});
+
+export type SyntheticsNetworkEventsApiResponse = t.TypeOf<
+  typeof SyntheticsNetworkEventsApiResponseType
+>;

x-pack/plugins/uptime/common/runtime_types/ping/ping.ts

@@ -240,10 +240,32 @@ export const PingType = t.intersection([
   }),
 ]);
 
-export const SyntheticsJourneyApiResponseType = t.type({
-  checkGroup: t.string,
-  steps: t.array(PingType),
-});
+export const SyntheticsJourneyApiResponseType = t.intersection([
+  t.type({
+    checkGroup: t.string,
+    steps: t.array(PingType),
+  }),
+  t.partial({
+    details: t.union([
+      t.intersection([
+        t.type({
+          timestamp: t.string,
+        }),
+        t.partial({
+          next: t.type({
+            timestamp: t.string,
+            checkGroup: t.string,
+          }),
+          previous: t.type({
+            timestamp: t.string,
+            checkGroup: t.string,
+          }),
+        }),
+      ]),
+      t.null,
+    ]),
+  }),
+]);
 
 export type SyntheticsJourneyApiResponse = t.TypeOf<typeof SyntheticsJourneyApiResponseType>;
 

x-pack/plugins/uptime/public/components/common/step_detail_link.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import { EuiLink } from '@elastic/eui';
+import { Link } from 'react-router-dom';
+
+interface StepDetailLinkProps {
+  /**
+   * The ID of the check group (the journey run)
+   */
+  checkGroupId: string;
+  /**
+   * The index of the step
+   */
+  stepIndex: number;
+}
+
+export const StepDetailLink: FC<StepDetailLinkProps> = ({ children, checkGroupId, stepIndex }) => {
+  const to = `/journey/${checkGroupId}/step/${stepIndex}`;
+
+  return (
+    <EuiLink>
+      <Link data-test-subj={`step-detail-link`} to={to}>
+        {children}
+      </Link>
+    </EuiLink>
+  );
+};

x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx

@@ -206,6 +206,7 @@ describe('ExecutedJourney component', () => {
         direction="column"
       >
         <ExecutedStep
+          checkGroup="check_group"
           index={0}
           key="0"
           step={
@@ -230,6 +231,7 @@ describe('ExecutedJourney component', () => {
           }
         />
         <ExecutedStep
+          checkGroup="check_group"
           index={1}
           key="1"
           step={