diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/browser_expanded_row.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/browser_expanded_row.test.tsx index 191632d6ab713..07c3afdf50eea 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/browser_expanded_row.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/browser_expanded_row.test.tsx @@ -28,7 +28,7 @@ describe('BrowserExpandedRowComponent', () => { it('returns empty step state when no journey', () => { expect(shallowWithIntl()).toMatchInlineSnapshot( - `` + `` ); }); @@ -43,7 +43,7 @@ describe('BrowserExpandedRowComponent', () => { }} /> ) - ).toMatchInlineSnapshot(``); + ).toMatchInlineSnapshot(``); }); it('displays loading spinner when loading', () => { @@ -111,6 +111,27 @@ describe('BrowserExpandedRowComponent', () => { `); }); + it('handles case where synth type is somehow missing', () => { + expect( + shallowWithIntl( + + ) + ).toMatchInlineSnapshot(`""`); + }); + it('renders console output step list when only console steps are present', () => { expect( shallowWithIntl( diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/console_event.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/console_event.test.tsx new file mode 100644 index 0000000000000..ad905076a06cd --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/console_event.test.tsx @@ -0,0 +1,107 @@ +/* + * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import React from 'react'; +import { ConsoleEvent } from '../console_event'; + +describe('ConsoleEvent component', () => { + it('renders danger color for errors', () => { + expect( + shallowWithIntl( + + ) + ).toMatchInlineSnapshot(` + + + 123 + + + stderr + + + catastrophic error + + + `); + }); + + it('uses default color for non-errors', () => { + expect( + shallowWithIntl( + + ) + ).toMatchInlineSnapshot(` + + + 123 + + + cmd/status + + + not a catastrophic error + + + `); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/console_output_event_list.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/console_output_event_list.test.tsx new file mode 100644 index 0000000000000..776fd0a5fb94d --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/console_output_event_list.test.tsx @@ -0,0 +1,150 @@ +/* + * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import React from 'react'; +import { ConsoleOutputEventList } from '../console_output_event_list'; + +describe('ConsoleOutputEventList component', () => { + it('renders a component per console event', () => { + expect( + shallowWithIntl( + + ).find('EuiCodeBlock') + ).toMatchInlineSnapshot(` + + + + + + `); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/empty_journey.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/empty_journey.test.tsx new file mode 100644 index 0000000000000..0157229b3c212 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/empty_journey.test.tsx @@ -0,0 +1,94 @@ +/* + * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import React from 'react'; +import { EmptyJourney } from '../empty_journey'; + +describe('EmptyJourney component', () => { + it('omits check group element when undefined', () => { + expect(shallowWithIntl()).toMatchInlineSnapshot(` + +

+ +

+

+ +

+ + } + iconType="cross" + title={ +

+ +

+ } + /> + `); + }); + + it('includes check group element when present', () => { + expect(shallowWithIntl()).toMatchInlineSnapshot(` + +

+ +

+

+ + check_group + , + } + } + /> +

+

+ +

+ + } + iconType="cross" + title={ +

+ +

+ } + /> + `); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx new file mode 100644 index 0000000000000..5ab815a3c0b5d --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx @@ -0,0 +1,259 @@ +/* + * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import React from 'react'; +import { ExecutedJourney } from '../executed_journey'; +import { Ping } from '../../../../../common/runtime_types'; + +const MONITOR_BOILERPLATE = { + id: 'MON_ID', + duration: { + us: 10, + }, + status: 'down', + type: 'browser', +}; + +describe('ExecutedJourney component', () => { + let steps: Ping[]; + + beforeEach(() => { + steps = [ + { + docId: '1', + timestamp: '123', + monitor: MONITOR_BOILERPLATE, + synthetics: { + payload: { + status: 'failed', + }, + type: 'step/end', + }, + }, + { + docId: '2', + timestamp: '124', + monitor: MONITOR_BOILERPLATE, + synthetics: { + payload: { + status: 'failed', + }, + type: 'step/end', + }, + }, + ]; + }); + + it('creates expected message for all failed', () => { + const wrapper = shallowWithIntl( + + ); + expect(wrapper.find('EuiText')).toMatchInlineSnapshot(` + +

+ +

+

+ 2 Steps - all failed or skipped +

+ + `); + }); + + it('creates expected message for all succeeded', () => { + steps[0].synthetics!.payload!.status = 'succeeded'; + steps[1].synthetics!.payload!.status = 'succeeded'; + const wrapper = shallowWithIntl( + + ); + expect(wrapper.find('EuiText')).toMatchInlineSnapshot(` + +

+ +

+

+ 2 Steps - all succeeded +

+ + `); + }); + + it('creates appropriate message for mixed results', () => { + steps[0].synthetics!.payload!.status = 'succeeded'; + const wrapper = shallowWithIntl( + + ); + expect(wrapper.find('EuiText')).toMatchInlineSnapshot(` + +

+ +

+

+ 2 Steps - 1 succeeded +

+ + `); + }); + + it('tallies skipped steps', () => { + steps[0].synthetics!.payload!.status = 'succeeded'; + steps[1].synthetics!.payload!.status = 'skipped'; + const wrapper = shallowWithIntl( + + ); + expect(wrapper.find('EuiText')).toMatchInlineSnapshot(` + +

+ +

+

+ 2 Steps - 1 succeeded +

+ + `); + }); + + it('uses appropriate count when non-step/end steps are included', () => { + steps[0].synthetics!.payload!.status = 'succeeded'; + steps.push({ + docId: '3', + timestamp: '125', + monitor: MONITOR_BOILERPLATE, + synthetics: { + type: 'stderr', + error: { + message: `there was an error, that's all we know`, + stack: 'your.error.happened.here', + }, + }, + }); + const wrapper = shallowWithIntl( + + ); + expect(wrapper.find('EuiText')).toMatchInlineSnapshot(` + +

+ +

+

+ 2 Steps - 1 succeeded +

+ + `); + }); + + it('renders a component per step', () => { + expect( + shallowWithIntl( + + ).find('EuiFlexGroup') + ).toMatchInlineSnapshot(` + + + + + `); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/browser_expanded_row.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/browser_expanded_row.tsx index 2546c5fb9a5d8..4b7461604b301 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/browser_expanded_row.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/browser_expanded_row.tsx @@ -11,7 +11,7 @@ import { Ping } from '../../../../common/runtime_types'; import { getJourneySteps } from '../../../state/actions/journey'; import { JourneyState } from '../../../state/reducers/journey'; import { journeySelector } from '../../../state/selectors'; -import { EmptyStepState } from './empty_journey'; +import { EmptyJourney } from './empty_journey'; import { ExecutedJourney } from './executed_journey'; import { ConsoleOutputEventList } from './console_output_event_list'; @@ -51,7 +51,7 @@ export const BrowserExpandedRowComponent: FC = ({ checkGroup, jo } if (!journey || journey.steps.length === 0) { - return ; + return ; } if (journey.steps.some(stepEnd)) return ; diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/console_output_event_list.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/console_output_event_list.tsx index 9159c61532f15..8f3d6cec9932e 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/console_output_event_list.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/console_output_event_list.tsx @@ -7,6 +7,7 @@ import { EuiCodeBlock, EuiSpacer, EuiTitle } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React, { FC } from 'react'; +import { Ping } from '../../../../common/runtime_types'; import { JourneyState } from '../../../state/reducers/journey'; import { ConsoleEvent } from './console_event'; @@ -14,6 +15,11 @@ interface Props { journey: JourneyState; } +const isConsoleStep = (step: Ping) => + step.synthetics?.type === 'stderr' || + step.synthetics?.type === 'stdout' || + step.synthetics?.type === 'cmd/status'; + export const ConsoleOutputEventList: FC = ({ journey }) => (
@@ -33,8 +39,8 @@ export const ConsoleOutputEventList: FC = ({ journey }) => (

- {journey.steps.map((consoleEvent) => ( - + {journey.steps.filter(isConsoleStep).map((consoleEvent) => ( + ))}
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/empty_journey.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/empty_journey.tsx index b6fead2bbbe09..4076d9ff7dfdd 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/empty_journey.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/empty_journey.tsx @@ -8,11 +8,11 @@ import { EuiEmptyPrompt } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React, { FC } from 'react'; -interface EmptyStepStateProps { +interface Props { checkGroup?: string; } -export const EmptyStepState: FC = ({ checkGroup }) => ( +export const EmptyJourney: FC = ({ checkGroup }) => ( = ({ journey }) => (

{statusMessage( - journey.steps.reduce(reduceStepStatus, { failed: 0, skipped: 0, succeeded: 0 }) + journey.steps + .filter(isStepEnd) + .reduce(reduceStepStatus, { failed: 0, skipped: 0, succeeded: 0 }) )}

- {journey.steps - .filter((step) => step.synthetics?.type === 'step/end') - .map((step, index) => ( - - ))} + {journey.steps.filter(isStepEnd).map((step, index) => ( + + ))} );