[Uptime] Synthetic check steps list view

x-pack/plugins/translations/translations/ja-JP.json

@@ -22122,12 +22122,8 @@
     "xpack.uptime.synthetics.emptyJourney.message.footer": "表示する詳細情報はありません。",
     "xpack.uptime.synthetics.emptyJourney.message.heading": "ステップが含まれていませんでした。",
     "xpack.uptime.synthetics.emptyJourney.title": "ステップがありません。",
-    "xpack.uptime.synthetics.executedJourney.heading": "概要情報",
     "xpack.uptime.synthetics.executedStep.errorHeading": "エラー",
-    "xpack.uptime.synthetics.executedStep.scriptHeading": "スクリプトのステップ",
     "xpack.uptime.synthetics.executedStep.stackTrace": "スタックトレース",
-    "xpack.uptime.synthetics.executedStep.stepName": "{stepNumber}. {stepName}",
-    "xpack.uptime.synthetics.experimentalCallout.title": "実験的機能",
     "xpack.uptime.synthetics.journey.allFailedMessage": "{total}ステップ - すべて失敗またはスキップされました",
     "xpack.uptime.synthetics.journey.allSucceededMessage": "{total}ステップ - すべて成功しました",
     "xpack.uptime.synthetics.journey.partialSuccessMessage": "{total}ステップ - {succeeded}成功しました",

x-pack/plugins/translations/translations/zh-CN.json

@@ -22172,12 +22172,8 @@
     "xpack.uptime.synthetics.emptyJourney.message.footer": "没有更多可显示的信息。",
     "xpack.uptime.synthetics.emptyJourney.message.heading": "此过程不包含任何步骤。",
     "xpack.uptime.synthetics.emptyJourney.title": "没有此过程的任何步骤",
-    "xpack.uptime.synthetics.executedJourney.heading": "摘要信息",
     "xpack.uptime.synthetics.executedStep.errorHeading": "错误",
-    "xpack.uptime.synthetics.executedStep.scriptHeading": "步骤脚本",
     "xpack.uptime.synthetics.executedStep.stackTrace": "堆栈跟踪",
-    "xpack.uptime.synthetics.executedStep.stepName": "{stepNumber}：{stepName}",
-    "xpack.uptime.synthetics.experimentalCallout.title": "实验功能",
     "xpack.uptime.synthetics.journey.allFailedMessage": "{total} 个步骤 - 全部失败或跳过",
     "xpack.uptime.synthetics.journey.allSucceededMessage": "{total} 个步骤 - 全部成功",
     "xpack.uptime.synthetics.journey.partialSuccessMessage": "{total} 个步骤 - {succeeded} 个成功",

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

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

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

@@ -216,6 +216,7 @@ export const PingType = t.intersection([
         type: t.string,
         url: t.string,
         end: t.number,
+        text: t.string,
       }),
     }),
     tags: t.array(t.string),
@@ -251,6 +252,7 @@ export const SyntheticsJourneyApiResponseType = t.intersection([
       t.intersection([
         t.type({
           timestamp: t.string,
+          journey: PingType,
         }),
         t.partial({
           next: t.type({

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

@@ -6,7 +6,7 @@
  */
 
 import React, { FC } from 'react';
-import { ReactRouterEuiButton } from './react_router_helpers';
+import { ReactRouterEuiButtonEmpty } from './react_router_helpers';
 
 interface StepDetailLinkProps {
   /**
@@ -23,14 +23,8 @@ export const StepDetailLink: FC<StepDetailLinkProps> = ({ children, checkGroupId
   const to = `/journey/${checkGroupId}/step/${stepIndex}`;
 
   return (
-    <ReactRouterEuiButton
-      data-test-subj={`step-detail-link`}
-      to={to}
-      size="s"
-      fill
-      fullWidth={false}
-    >
+    <ReactRouterEuiButtonEmpty data-test-subj={`step-detail-link`} to={to}>
       {children}
-    </ReactRouterEuiButton>
+    </ReactRouterEuiButtonEmpty>
   );
 };

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/nav_buttons.tsx

@@ -6,7 +6,7 @@
  */
 
 import { EuiButtonIcon, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { nextAriaLabel, prevAriaLabel } from './translations';
 
 export interface NavButtonsProps {
@@ -34,8 +34,9 @@ export const NavButtons: React.FC<NavButtonsProps> = ({
         disabled={stepNumber === 1}
         color="subdued"
         size="s"
-        onClick={() => {
+        onClick={(evt: MouseEvent<HTMLButtonElement>) => {
           setStepNumber(stepNumber - 1);
+          evt.stopPropagation();
         }}
         iconType="arrowLeft"
         aria-label={prevAriaLabel}
@@ -46,8 +47,9 @@ export const NavButtons: React.FC<NavButtonsProps> = ({
         disabled={stepNumber === maxSteps}
         color="subdued"
         size="s"
-        onClick={() => {
+        onClick={(evt: MouseEvent<HTMLButtonElement>) => {
           setStepNumber(stepNumber + 1);
+          evt.stopPropagation();
         }}
         iconType="arrowRight"
         aria-label={nextAriaLabel}

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.test.tsx

@@ -12,6 +12,8 @@ import { mockReduxHooks } from '../../../../../lib/helper/test_helpers';
 import { render } from '../../../../../lib/helper/rtl_helpers';
 import { Ping } from '../../../../../../common/runtime_types/ping';
 import * as observabilityPublic from '../../../../../../../observability/public';
+import { getShortTimeStamp } from '../../../../overview/monitor_list/columns/monitor_status_column';
+import moment from 'moment';
 
 mockReduxHooks();
 
@@ -68,7 +70,7 @@ describe('Ping Timestamp component', () => {
         .spyOn(observabilityPublic, 'useFetcher')
         .mockReturnValue({ status: fetchStatus, data: null, refetch: () => null });
       const { getByTestId } = render(
-        <PingTimestamp ping={response} timestamp={response.timestamp} />
+        <PingTimestamp ping={response} label={getShortTimeStamp(moment(response.timestamp))} />
       );
       expect(getByTestId('pingTimestampSpinner')).toBeInTheDocument();
     }
@@ -79,7 +81,7 @@ describe('Ping Timestamp component', () => {
       .spyOn(observabilityPublic, 'useFetcher')
       .mockReturnValue({ status: FETCH_STATUS.SUCCESS, data: null, refetch: () => null });
     const { getByTestId } = render(
-      <PingTimestamp ping={response} timestamp={response.timestamp} />
+      <PingTimestamp ping={response} label={getShortTimeStamp(moment(response.timestamp))} />
     );
     expect(getByTestId('pingTimestampNoImageAvailable')).toBeInTheDocument();
   });
@@ -91,7 +93,9 @@ describe('Ping Timestamp component', () => {
       data: { src },
       refetch: () => null,
     });
-    const { container } = render(<PingTimestamp ping={response} timestamp={response.timestamp} />);
+    const { container } = render(
+      <PingTimestamp ping={response} label={getShortTimeStamp(moment(response.timestamp))} />
+    );
     expect(container.querySelector('img')?.src).toBe(src);
   });
 
@@ -103,7 +107,7 @@ describe('Ping Timestamp component', () => {
       refetch: () => null,
     });
     const { getByAltText, getByText, queryByAltText } = render(
-      <PingTimestamp ping={response} timestamp={response.timestamp} />
+      <PingTimestamp ping={response} label={getShortTimeStamp(moment(response.timestamp))} />
     );
     const caption = getByText('Nov 26, 2020 10:28:56 AM');
     fireEvent.mouseEnter(caption);

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx

@@ -42,11 +42,12 @@ const StepDiv = styled.div`
 `;
 
 interface Props {
-  timestamp: string;
+  label?: string;
   ping: Ping;
+  showNavBtn?: boolean;
 }
 
-export const PingTimestamp = ({ timestamp, ping }: Props) => {
+export const PingTimestamp = ({ label, ping, showNavBtn = true }: Props) => {
   const [stepNumber, setStepNumber] = useState(1);
   const [isImagePopoverOpen, setIsImagePopoverOpen] = useState(false);
 
@@ -86,7 +87,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
       maxSteps={data?.maxSteps}
       setStepNumber={setStepNumber}
       stepNumber={stepNumber}
-      timestamp={timestamp}
+      label={label}
     />
   );
 
@@ -110,12 +111,14 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
           isPending={status === FETCH_STATUS.PENDING}
         />
       )}
-      <NavButtons
-        maxSteps={data?.maxSteps}
-        setIsImagePopoverOpen={setIsImagePopoverOpen}
-        setStepNumber={setStepNumber}
-        stepNumber={stepNumber}
-      />
+      {showNavBtn && (
+        <NavButtons
+          maxSteps={data?.maxSteps}
+          setIsImagePopoverOpen={setIsImagePopoverOpen}
+          setStepNumber={setStepNumber}
+          stepNumber={stepNumber}
+        />
+      )}
     </StepDiv>
   );
 };

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx

@@ -9,6 +9,8 @@ import { fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { render } from '../../../../../lib/helper/rtl_helpers';
 import { StepImageCaption, StepImageCaptionProps } from './step_image_caption';
+import { getShortTimeStamp } from '../../../../overview/monitor_list/columns/monitor_status_column';
+import moment from 'moment';
 
 describe('StepImageCaption', () => {
   let defaultProps: StepImageCaptionProps;
@@ -20,7 +22,7 @@ describe('StepImageCaption', () => {
       maxSteps: 3,
       setStepNumber: jest.fn(),
       stepNumber: 2,
-      timestamp: '2020-11-26T15:28:56.896Z',
+      label: getShortTimeStamp(moment('2020-11-26T15:28:56.896Z')),
     };
   });
 

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx

@@ -6,18 +6,16 @@
  */
 
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
-import React from 'react';
-import moment from 'moment';
+import React, { MouseEvent } from 'react';
 import { nextAriaLabel, prevAriaLabel } from './translations';
-import { getShortTimeStamp } from '../../../../overview/monitor_list/columns/monitor_status_column';
 
 export interface StepImageCaptionProps {
   captionContent: string;
   imgSrc?: string;
   maxSteps?: number;
   setStepNumber: React.Dispatch<React.SetStateAction<number>>;
   stepNumber: number;
-  timestamp: string;
+  label?: string;
 }
 
 export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
@@ -26,7 +24,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
   maxSteps,
   setStepNumber,
   stepNumber,
-  timestamp,
+  label,
 }) => {
   return (
     <>
@@ -37,8 +35,9 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
               <EuiButtonIcon
                 disabled={stepNumber === 1}
                 size="m"
-                onClick={() => {
+                onClick={(evt: MouseEvent<HTMLButtonElement>) => {
                   setStepNumber(stepNumber - 1);
+                  evt.preventDefault();
                 }}
                 iconType="arrowLeft"
                 aria-label={prevAriaLabel}
@@ -51,8 +50,9 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
               <EuiButtonIcon
                 disabled={stepNumber === maxSteps}
                 size="m"
-                onClick={() => {
+                onClick={(evt: MouseEvent<HTMLButtonElement>) => {
                   setStepNumber(stepNumber + 1);
+                  evt.stopPropagation();
                 }}
                 iconType="arrowRight"
                 aria-label={nextAriaLabel}
@@ -61,8 +61,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
           </EuiFlexGroup>
         )}
       </div>
-      {/* TODO: Add link to details page once it's available */}
-      <span className="eui-textNoWrap">{getShortTimeStamp(moment(timestamp))}</span>
+      {label && <span className="eui-textNoWrap">{label}</span>}
       <EuiSpacer size="s" />
     </>
   );

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_popover.tsx

@@ -52,6 +52,7 @@ export const StepImagePopover: React.FC<StepImagePopoverProps> = ({
       />
     }
     isOpen={isImagePopoverOpen}
+    closePopover={() => {}}
   >
     <EuiImage
       alt={fullSizeImageAlt}

x-pack/plugins/uptime/public/components/monitor/ping_list/expanded_row.test.tsx

@@ -98,14 +98,35 @@ describe('PingListExpandedRow', () => {
       >
         <EuiFlexItem>
           <EuiCallOut
-            iconType="beaker"
-            title="Experimental feature"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <BrowserExpandedRow
-            checkGroup="check_group_id"
-          />
+            color="primary"
+          >
+            <EuiDescriptionList
+              listItems={
+                Array [
+                  Object {
+                    "description": <React.Fragment>
+                      <BodyDescription
+                        body={
+                          Object {
+                            "bytes": 1200000,
+                            "content": "<http><head><title>The Title</title></head><body></body></http>",
+                            "hash": "testhash",
+                          }
+                        }
+                      />
+                      <EuiSpacer
+                        size="s"
+                      />
+                      <BodyExcerpt
+                        content="<http><head><title>The Title</title></head><body></body></http>"
+                      />
+                    </React.Fragment>,
+                    "title": "Response Body",
+                  },
+                ]
+              }
+            />
+          </EuiCallOut>
         </EuiFlexItem>
       </EuiFlexGroup>
     `);

x-pack/plugins/uptime/public/components/monitor/ping_list/expanded_row.tsx

@@ -21,7 +21,6 @@ import { i18n } from '@kbn/i18n';
 import { Ping, HttpResponseBody } from '../../../../common/runtime_types';
 import { DocLinkForBody } from './doc_link_body';
 import { PingRedirects } from './ping_redirects';
-import { BrowserExpandedRow } from '../synthetics/browser_expanded_row';
 import { PingHeaders } from './headers';
 
 interface Props {
@@ -57,24 +56,6 @@ const BodyExcerpt = ({ content }: { content: string }) =>
 export const PingListExpandedRowComponent = ({ ping }: Props) => {
   const listItems = [];
 
-  if (ping.monitor.type === 'browser') {
-    return (
-      <EuiFlexGroup direction="column">
-        <EuiFlexItem>
-          <EuiCallOut
-            iconType="beaker"
-            title={i18n.translate('xpack.uptime.synthetics.experimentalCallout.title', {
-              defaultMessage: 'Experimental feature',
-            })}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <BrowserExpandedRow checkGroup={ping.monitor.check_group} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  }
-
   // Show the error block
   if (ping.error) {
     listItems.push({