[Synthetics] Waterfall view (elastic#84821)

* Add a new synthetics step detail page for displaying waterfall data

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,48 @@
+/*
+ * 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({
+  queueing: t.number,
+  connect: t.number,
+  total: t.number,
+  send: t.number,
+  blocked: t.number,
+  receive: t.number,
+  wait: t.number,
+  dns: t.number,
+  proxy: t.number,
+  ssl: 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/header/page_header.tsx

@@ -11,7 +11,12 @@ import { useRouteMatch } from 'react-router-dom';
 import { UptimeDatePicker } from '../uptime_date_picker';
 import { SyntheticsCallout } from '../../overview/synthetics_callout';
 import { PageTabs } from './page_tabs';
-import { CERTIFICATES_ROUTE, MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants';
+import {
+  CERTIFICATES_ROUTE,
+  MONITOR_ROUTE,
+  SETTINGS_ROUTE,
+  STEP_DETAIL_ROUTE,
+} from '../../../../common/constants';
 import { CertRefreshBtn } from '../../certificates/cert_refresh_btn';
 import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers';
 
@@ -34,11 +39,12 @@ const StyledPicker = styled(EuiFlexItem)`
 export const PageHeader = () => {
   const isCertRoute = useRouteMatch(CERTIFICATES_ROUTE);
   const isSettingsRoute = useRouteMatch(SETTINGS_ROUTE);
+  const isStepDetailRoute = useRouteMatch(STEP_DETAIL_ROUTE);
 
   const DatePickerComponent = () =>
     isCertRoute ? (
       <CertRefreshBtn />
-    ) : (
+    ) : isStepDetailRoute ? null : (
       <StyledPicker grow={false} style={{ flexBasis: 485 }}>
         <UptimeDatePicker />
       </StyledPicker>

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={