Merge branch 'main' into support-prerelease-detection-rules

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

@@ -29,6 +29,9 @@ export const SYNTHETICS_SETTINGS_ROUTE = '/settings/:tabId';
 
 export const CERTIFICATES_ROUTE = '/certificates';
 
+export const SYNTHETICS_STEP_DETAIL_ROUTE =
+  '/monitor/:monitorId/test-run/:checkGroupId/step/:stepIndex';
+
 export const STEP_DETAIL_ROUTE = '/journey/:checkGroupId/step/:stepIndex';
 
 export const SYNTHETIC_CHECK_STEPS_ROUTE = '/journey/:checkGroupId/steps';

x-pack/plugins/synthetics/public/apps/synthetics/components/common/links/step_details_link.tsx

@@ -14,8 +14,10 @@ import { useSyntheticsSettingsContext } from '../../../contexts';
 export const StepDetailsLinkIcon = ({
   stepIndex,
   checkGroup,
+  configId,
 }: {
   checkGroup: string;
+  configId: string;
   stepIndex?: number;
 }) => {
   const { basePath } = useSyntheticsSettingsContext();
@@ -26,7 +28,7 @@ export const StepDetailsLinkIcon = ({
       aria-label={VIEW_DETAILS}
       title={VIEW_DETAILS}
       size="s"
-      href={`${basePath}/app/synthetics/journey/${checkGroup}/step/${stepIndex}?locationId=${selectedLocation?.id}`}
+      href={`${basePath}/app/synthetics/monitor/${configId}/test-run/${checkGroup}/step/${stepIndex}?locationId=${selectedLocation?.id}`}
       target="_self"
       iconType="apmTrace"
     />

x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/browser_steps_list.tsx

@@ -122,6 +122,7 @@ export const BrowserStepsList = ({
         <StepDetailsLinkIcon
           checkGroup={item.monitor.check_group}
           stepIndex={item.synthetics?.step?.index}
+          configId={item.config_id!}
         />
       ),
     },

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_journey_steps.tsx

@@ -17,8 +17,10 @@ import {
 } from '../../../state';
 
 export const useJourneySteps = (checkGroup?: string, lastRefresh?: number) => {
-  const { stepIndex } = useParams<{ stepIndex: string }>();
-  const { checkGroupId: urlCheckGroup } = useParams<{ checkGroupId: string }>();
+  const { stepIndex, checkGroupId: urlCheckGroup } = useParams<{
+    stepIndex: string;
+    checkGroupId: string;
+  }>();
   const checkGroupId = checkGroup ?? urlCheckGroup;
 
   const journeyData = useSelector(selectBrowserJourney(checkGroupId));

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_location.tsx

@@ -25,7 +25,7 @@ import { useStatusByLocation } from '../../hooks';
 import { useSelectedLocation } from './hooks/use_selected_location';
 import { useSelectedMonitor } from './hooks/use_selected_monitor';
 
-export const MonitorDetailsLocation: React.FC = () => {
+export const MonitorDetailsLocation = ({ isDisabled }: { isDisabled?: boolean }) => {
   const { monitor } = useSelectedMonitor();
   const { services } = useKibana();
   const { locations } = useLocations();
@@ -45,8 +45,8 @@ export const MonitorDetailsLocation: React.FC = () => {
 
     if (monitor?.locations && monitor.locations.length > 1) {
       const button = (
-        <EuiLink onClick={openLocationList}>
-          {selectedLocation.label} <EuiIcon type="arrowDown" />
+        <EuiLink onClick={openLocationList} disabled={isDisabled}>
+          {selectedLocation.label} {!isDisabled && <EuiIcon type="arrowDown" />}
         </EuiLink>
       );
 
@@ -109,6 +109,7 @@ export const MonitorDetailsLocation: React.FC = () => {
     }
   }, [
     closeLocationList,
+    isDisabled,
     isLocationListOpen,
     loadingLocationsStatus,
     locations,
@@ -117,7 +118,8 @@ export const MonitorDetailsLocation: React.FC = () => {
     openLocationList,
     selectedLocation,
     services.application,
-    theme,
+    theme.eui.euiColorVis0,
+    theme.eui.euiColorVis9,
   ]);
 
   if (!selectedLocation || !monitor) {

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/common/network_data/data_formatting.ts

@@ -27,7 +27,7 @@ import {
 export const extractItems = (data: NetworkEvent[]): NetworkEvent[] => {
   // NOTE: This happens client side as the "payload" property is mapped
   // in such a way it can't be queried (or sorted on) via ES.
-  return data.sort((a: NetworkEvent, b: NetworkEvent) => {
+  return [...data].sort((a: NetworkEvent, b: NetworkEvent) => {
     return a.requestSentTime - b.requestSentTime;
   });
 };

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_detail_page.ts

@@ -9,60 +9,60 @@ import { useParams } from 'react-router-dom';
 import { useMemo } from 'react';
 import { useSyntheticsSettingsContext } from '../../../contexts';
 import { useJourneySteps } from '../../monitor_details/hooks/use_journey_steps';
-import { JourneyStep, SyntheticsJourneyApiResponse } from '../../../../../../common/runtime_types';
 
-export const useStepDetailPage = (): {
-  activeStep?: JourneyStep;
-  checkGroupId: string;
-  handleNextStepHref: string;
-  handlePreviousStepHref: string;
-  handleNextRunHref: string;
-  handlePreviousRunHref: string;
-  hasNextStep: boolean;
-  hasPreviousStep: boolean;
-  journey?: SyntheticsJourneyApiResponse;
-  stepIndex: number;
-} => {
-  const { checkGroupId, stepIndex: stepIndexString } = useParams<{
+export const useStepDetailPage = () => {
+  const {
+    checkGroupId,
+    monitorId,
+    stepIndex: stepIndexString,
+  } = useParams<{
     checkGroupId: string;
     stepIndex: string;
+    monitorId: string;
   }>();
 
   const stepIndex = Number(stepIndexString);
 
-  const { data: journey } = useJourneySteps(checkGroupId);
+  const { data: journey, stepEnds } = useJourneySteps(checkGroupId);
 
   const memoized = useMemo(
     () => ({
-      hasPreviousStep: stepIndex > 1 ? true : false,
       activeStep: journey?.steps?.find((step) => step.synthetics?.step?.index === stepIndex),
-      hasNextStep: journey && journey.steps && stepIndex < journey.steps.length ? true : false,
     }),
     [journey, stepIndex]
   );
 
   const { basePath } = useSyntheticsSettingsContext();
 
-  const handleNextStepHref = `${basePath}/app/synthetics/journey/${checkGroupId}/step/${
-    stepIndex + 1
-  }`;
-
-  const handlePreviousStepHref = `${basePath}/app/synthetics/journey/${checkGroupId}/step/${
-    stepIndex - 1
-  }`;
-
-  const handleNextRunHref = `${basePath}/app/synthetics/journey/${journey?.details?.next?.checkGroup}/step/1`;
-
-  const handlePreviousRunHref = `${basePath}/app/synthetics/journey/${journey?.details?.previous?.checkGroup}/step/1`;
+  const handleStepHref = (stepNo: number) =>
+    `${basePath}/app/synthetics/monitor/${monitorId}/test-run/${checkGroupId}/step/${stepNo}`;
 
   return {
     checkGroupId,
     journey,
     stepIndex,
+    stepEnds,
     ...memoized,
-    handleNextStepHref,
-    handlePreviousStepHref,
-    handleNextRunHref,
-    handlePreviousRunHref,
+    handleStepHref,
   };
 };
+
+export const useStepDetailLink = ({
+  checkGroupId,
+  stepIndex,
+}: {
+  checkGroupId?: string;
+  stepIndex: string;
+}) => {
+  const { basePath } = useSyntheticsSettingsContext();
+
+  const { monitorId } = useParams<{
+    monitorId: string;
+  }>();
+
+  if (!checkGroupId) {
+    return '';
+  }
+
+  return `${basePath}/app/synthetics/monitor/${monitorId}/test-run/${checkGroupId}/step/${stepIndex}`;
+};

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_details_breadcrumbs.ts

@@ -4,25 +4,35 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { i18n } from '@kbn/i18n';
+import moment from 'moment';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useBreadcrumbs } from '../../../hooks/use_breadcrumbs';
-import { MONITORS_ROUTE } from '../../../../../../common/constants';
+import { useParams, generatePath } from 'react-router-dom';
+import { useSelectedLocation } from '../../monitor_details/hooks/use_selected_location';
+import { TEST_RUN_DETAILS_ROUTE } from '../../../../../../common/constants/ui';
+import { useJourneySteps } from '../../monitor_details/hooks/use_journey_steps';
+import { useTestRunDetailsBreadcrumbs } from '../../test_run_details/hooks/use_test_run_details_breadcrumbs';
 import { PLUGIN } from '../../../../../../common/constants/plugin';
 
 export const useStepDetailsBreadcrumbs = (extraCrumbs?: Array<{ text: string; href?: string }>) => {
+  const { data, currentStep } = useJourneySteps();
   const kibana = useKibana();
   const appPath = kibana.services.application?.getUrlForApp(PLUGIN.SYNTHETICS_PLUGIN_ID) ?? '';
 
-  useBreadcrumbs([
+  const params = useParams<{
+    checkGroupId: string;
+    monitorId: string;
+  }>();
+
+  const selectedLocation = useSelectedLocation();
+
+  useTestRunDetailsBreadcrumbs([
     {
-      text: MONITOR_MANAGEMENT_CRUMB,
-      href: `${appPath}/${MONITORS_ROUTE}`,
+      text: data ? moment(data.details?.timestamp).format('LLL') : '',
+      href: `${appPath}/${generatePath(TEST_RUN_DETAILS_ROUTE, params)}?locationId=${
+        selectedLocation?.id ?? ''
+      }`,
     },
-    ...(extraCrumbs ?? []),
+
+    { text: `${currentStep?.synthetics.step?.index}. ${currentStep?.synthetics.step?.name}` ?? '' },
   ]);
 };
-
-const MONITOR_MANAGEMENT_CRUMB = i18n.translate('xpack.synthetics.monitorsPage.monitorsMCrumb', {
-  defaultMessage: 'Monitors',
-});

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

@@ -0,0 +1,50 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { OutPortal } from 'react-reverse-portal';
+import { StepRunDate } from './step_page_nav';
+import { StepDetailPageStepNav } from './step_number_nav';
+import { StepDetailsStatus } from './step_details_status';
+import { MonitorDetailsLocation } from '../monitor_details/monitor_details_location';
+import { StepDetailPage } from './step_detail_page';
+import { RouteProps } from '../../routes';
+import { SYNTHETICS_STEP_DETAIL_ROUTE } from '../../../../../common/constants';
+import { MonitorDetailsLinkPortalNode } from '../monitor_add_edit/portals';
+import { StepTitle } from './step_title';
+
+export const getStepDetailsRoute = (
+  history: ReturnType<typeof useHistory>,
+  syntheticsPath: string,
+  baseTitle: string
+): RouteProps => {
+  return {
+    title: i18n.translate('xpack.synthetics.stepDetailsRoute.title', {
+      defaultMessage: 'Step details | {baseTitle}',
+      values: { baseTitle },
+    }),
+    path: SYNTHETICS_STEP_DETAIL_ROUTE,
+    component: StepDetailPage,
+    dataTestSubj: 'syntheticsMonitorEditPage',
+    pageHeader: {
+      pageTitle: <StepTitle />,
+      rightSideItems: [
+        <StepRunDate />,
+        <MonitorDetailsLocation isDisabled={true} />,
+        <StepDetailsStatus />,
+        <StepDetailPageStepNav />,
+      ],
+      breadcrumbs: [
+        {
+          text: <OutPortal node={MonitorDetailsLinkPortalNode} />,
+        },
+      ],
+    },
+  };
+};

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

@@ -5,44 +5,48 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
-import { BreakdownLegend } from './step_timing_breakdown/breakdown_legend';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
+import { useDispatch } from 'react-redux';
+import { useStepDetailsBreadcrumbs } from './hooks/use_step_details_breadcrumbs';
 import { WaterfallChartContainer } from './step_waterfall_chart/waterfall/waterfall_chart_container';
-import { ObjectWeightList } from './step_objects/object_weight_list';
 import { NetworkTimingsDonut } from './step_timing_breakdown/network_timings_donut';
+import { useJourneySteps } from '../monitor_details/hooks/use_journey_steps';
+import { getNetworkEvents } from '../../state/network_events/actions';
+import { ObjectWeightList } from './step_objects/object_weight_list';
 import { StepMetrics } from './step_metrics/step_metrics';
-import { NetworkTimingsBreakdown } from './network_timings_breakdown';
 import { ObjectCountList } from './step_objects/object_count_list';
-import { StepImage } from './step_screenshot/step_image';
-import { useJourneySteps } from '../monitor_details/hooks/use_journey_steps';
 import { MonitorDetailsLinkPortal } from '../monitor_add_edit/monitor_details_portal';
-
-import { useStepDetailsBreadcrumbs } from './hooks/use_step_details_breadcrumbs';
+import { StepImage } from './step_screenshot/step_image';
+import { BreakdownLegend } from './step_timing_breakdown/breakdown_legend';
+import { NetworkTimingsBreakdown } from './network_timings_breakdown';
 
 export const StepDetailPage = () => {
   const { checkGroupId, stepIndex } = useParams<{ checkGroupId: string; stepIndex: string }>();
 
   useTrackPageview({ app: 'synthetics', path: 'stepDetail' });
   useTrackPageview({ app: 'synthetics', path: 'stepDetail', delay: 15000 });
 
-  const { data, loading, isFailed, currentStep } = useJourneySteps(checkGroupId);
+  const { data, isFailed, currentStep } = useJourneySteps();
+
+  useStepDetailsBreadcrumbs();
 
   const activeStep = data?.steps?.find(
     (step) => step.synthetics?.step?.index === Number(stepIndex)
   );
 
-  useStepDetailsBreadcrumbs([{ text: data?.details?.journey.monitor.name ?? '' }]);
+  const dispatch = useDispatch();
 
-  if (loading) {
-    return (
-      <div className="eui-textCenter">
-        <EuiLoadingSpinner size="xxl" />
-      </div>
+  useEffect(() => {
+    dispatch(
+      getNetworkEvents.get({
+        checkGroup: checkGroupId,
+        stepIndex: Number(stepIndex),
+      })
     );
-  }
+  }, [dispatch, stepIndex, checkGroupId]);
 
   return (
     <>

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

@@ -0,0 +1,30 @@
+/*
+ * 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 { EuiDescriptionList, EuiLoadingContent } from '@elastic/eui';
+import { parseBadgeStatus, StatusBadge } from '../common/monitor_test_result/status_badge';
+import { useJourneySteps } from '../monitor_details/hooks/use_journey_steps';
+import { STATUS_LABEL } from '../common/components/monitor_status';
+
+export const StepDetailsStatus = () => {
+  const { currentStep } = useJourneySteps();
+
+  let content = <EuiLoadingContent lines={1} />;
+
+  if (currentStep?.synthetics.step?.status) {
+    content = <StatusBadge status={parseBadgeStatus(currentStep.synthetics.step?.status)} />;
+  }
+
+  return (
+    <EuiDescriptionList
+      align="left"
+      compressed={false}
+      listItems={[{ title: STATUS_LABEL, description: content }]}
+    />
+  );
+};