Skip to content

Commit

Permalink
[Uptime] Feature/migrate synthetics to ecs fields (elastic#96369)
Browse files Browse the repository at this point in the history
* update get_network_events to use ecs fields
  • Loading branch information
dominiqueclarke authored Apr 12, 2021
1 parent e7ecad7 commit 22b5302
Show file tree
Hide file tree
Showing 9 changed files with 389 additions and 158 deletions.
6 changes: 3 additions & 3 deletions x-pack/plugins/uptime/common/runtime_types/network_events.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ const NetworkTimingsType = t.type({
});

const CertificateDataType = t.partial({
validFrom: t.number,
validTo: t.number,
validFrom: t.string,
validTo: t.string,
issuer: t.string,
subjectName: t.string,
});
Expand All @@ -41,7 +41,6 @@ const NetworkEventType = t.intersection([
method: t.string,
status: t.number,
mimeType: t.string,
requestStartTime: t.number,
responseHeaders: t.record(t.string, t.string),
requestHeaders: t.record(t.string, t.string),
timings: NetworkTimingsType,
Expand All @@ -55,6 +54,7 @@ export type NetworkEvent = t.TypeOf<typeof NetworkEventType>;
export const SyntheticsNetworkEventsApiResponseType = t.type({
events: t.array(NetworkEventType),
total: t.number,
isWaterfallSupported: t.boolean,
});

export type SyntheticsNetworkEventsApiResponse = t.TypeOf<
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export const networkItems: NetworkItems = [
status: 200,
mimeType: 'text/css',
requestSentTime: 18098833.175,
requestStartTime: 18098835.439,
loadEndTime: 18098957.145,
timings: {
connect: 81.10800000213203,
Expand All @@ -53,8 +52,8 @@ export const networkItems: NetworkItems = [
},
certificates: {
issuer: 'Sample Issuer',
validFrom: 1578441600000,
validTo: 1617883200000,
validFrom: '2021-02-22T18:35:26.000Z',
validTo: '2021-04-05T22:28:43.000Z',
subjectName: '*.elastic.co',
},
ip: '104.18.8.22',
Expand All @@ -66,7 +65,6 @@ export const networkItems: NetworkItems = [
status: 200,
mimeType: 'application/javascript',
requestSentTime: 18098833.537,
requestStartTime: 18098837.233999997,
loadEndTime: 18098977.648000002,
timings: {
blocked: 84.54599999822676,
Expand Down Expand Up @@ -152,7 +150,6 @@ export const networkItemsWithUncommonMimeType: NetworkItems = [
status: 200,
mimeType: 'application/x-javascript',
requestSentTime: 18098833.537,
requestStartTime: 18098837.233999997,
loadEndTime: 18098977.648000002,
timings: {
blocked: 84.54599999822676,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
/*
* 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 { screen } from '@testing-library/react';
import { render } from '../../../../../lib/helper/rtl_helpers';
import { WaterfallChartContainer } from './waterfall_chart_container';

const networkEvents = {
events: [
{
timestamp: '2021-01-21T10:31:21.537Z',
method: 'GET',
url:
'https://apv-static.minute.ly/videos/v-c2a526c7-450d-428e-1244649-a390-fb639ffead96-s45.746-54.421m.mp4',
status: 206,
mimeType: 'video/mp4',
requestSentTime: 241114127.474,
loadEndTime: 241116573.402,
timings: {
total: 2445.928000001004,
queueing: 1.7399999778717756,
blocked: 0.391999987186864,
receive: 2283.964000031119,
connect: 91.5709999972023,
wait: 28.795999998692423,
proxy: -1,
dns: 36.952000024029985,
send: 0.10000000474974513,
ssl: 64.28900000173599,
},
},
{
timestamp: '2021-01-21T10:31:22.174Z',
method: 'GET',
url: 'https://dpm.demdex.net/ibs:dpid=73426&dpuuid=31597189268188866891125449924942215949',
status: 200,
mimeType: 'image/gif',
requestSentTime: 241114749.202,
loadEndTime: 241114805.541,
timings: {
queueing: 1.2240000069141388,
receive: 2.218999987235293,
proxy: -1,
dns: -1,
send: 0.14200000441633165,
blocked: 1.033000007737428,
total: 56.33900000248104,
wait: 51.72099999617785,
ssl: -1,
connect: -1,
},
},
{
timestamp: '2021-01-21T10:31:21.679Z',
method: 'GET',
url: 'https://dapi.cms.mlbinfra.com/v2/content/en-us/sel-t119-homepage-mediawall',
status: 200,
mimeType: 'application/json',
requestSentTime: 241114268.04299998,
loadEndTime: 241114665.609,
timings: {
total: 397.5659999996424,
dns: 29.5429999823682,
wait: 221.6830000106711,
queueing: 2.1410000044852495,
connect: 106.95499999565072,
ssl: 69.06899999012239,
receive: 2.027999988058582,
blocked: 0.877000013133511,
send: 23.719999997410923,
proxy: -1,
},
},
{
timestamp: '2021-01-21T10:31:21.740Z',
method: 'GET',
url: 'https://platform.twitter.com/embed/embed.runtime.b313577971db9c857801.js',
status: 200,
mimeType: 'application/javascript',
requestSentTime: 241114303.84899998,
loadEndTime: 241114370.361,
timings: {
send: 1.357000001007691,
wait: 40.12299998430535,
receive: 16.78500001435168,
ssl: -1,
queueing: 2.5670000177342445,
total: 66.51200001942925,
connect: -1,
blocked: 5.680000002030283,
proxy: -1,
dns: -1,
},
},
{
timestamp: '2021-01-21T10:31:21.740Z',
method: 'GET',
url: 'https://platform.twitter.com/embed/embed.modules.7a266e7acfd42f2581a5.js',
status: 200,
mimeType: 'application/javascript',
requestSentTime: 241114305.939,
loadEndTime: 241114938.264,
timings: {
wait: 51.61500000394881,
dns: -1,
ssl: -1,
receive: 506.5750000067055,
proxy: -1,
connect: -1,
blocked: 69.51599998865277,
queueing: 4.453999979887158,
total: 632.324999984121,
send: 0.16500000492669642,
},
},
],
};

const defaultState = {
networkEvents: {
test: {
'1': {
...networkEvents,
total: 100,
isWaterfallSupported: true,
loading: false,
},
},
},
};

describe('WaterfallChartContainer', () => {
beforeAll(() => {
jest.useFakeTimers();
});

it('does not display waterfall chart unavailable when isWaterfallSupported is true', () => {
render(<WaterfallChartContainer checkGroup="test" stepIndex={1} />, {
state: defaultState,
});
expect(screen.queryByText('Waterfall chart unavailable')).not.toBeInTheDocument();
});

it('displays waterfall chart unavailable when isWaterfallSupported is false', () => {
const state = {
networkEvents: {
test: {
'1': {
...networkEvents,
total: 100,
isWaterfallSupported: false,
loading: false,
},
},
},
};
render(<WaterfallChartContainer checkGroup="test" stepIndex={1} />, {
state,
});
expect(screen.getByText('Waterfall chart unavailable')).toBeInTheDocument();
});

it('displays loading bar when loading', () => {
const state = {
networkEvents: {
test: {
'1': {
...networkEvents,
total: 100,
isWaterfallSupported: false,
loading: true,
},
},
},
};
render(<WaterfallChartContainer checkGroup="test" stepIndex={1} />, {
state,
});
expect(screen.getByLabelText('Waterfall chart loading')).toBeInTheDocument();
});

it('displays no data available message when no events are available', () => {
const state = {
networkEvents: {
test: {
'1': {
events: [],
total: 0,
isWaterfallSupported: true,
loading: false,
},
},
},
};
render(<WaterfallChartContainer checkGroup="test" stepIndex={1} />, {
state,
});
expect(screen.getByText('No waterfall data could be found for this step')).toBeInTheDocument();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
* 2.0.
*/

import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingChart } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingChart, EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { getNetworkEvents } from '../../../../../state/actions/network_events';
Expand Down Expand Up @@ -39,18 +40,25 @@ export const WaterfallChartContainer: React.FC<Props> = ({ checkGroup, stepIndex

const _networkEvents = useSelector(networkEventsSelector);
const networkEvents = _networkEvents[checkGroup ?? '']?.[stepIndex];
const waterfallLoaded = networkEvents && !networkEvents.loading;
const isWaterfallSupported = networkEvents?.isWaterfallSupported;
const hasEvents = networkEvents?.events?.length > 0;

return (
<>
{!networkEvents ||
(networkEvents.loading && (
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiLoadingChart size="xl" />
</EuiFlexItem>
</EuiFlexGroup>
))}
{networkEvents && !networkEvents.loading && networkEvents.events.length === 0 && (
{!waterfallLoaded && (
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiLoadingChart
size="xl"
aria-label={i18n.translate('xpack.uptime.synthetics.stepDetail.waterfall.loading', {
defaultMessage: 'Waterfall chart loading',
})}
/>
</EuiFlexItem>
</EuiFlexGroup>
)}
{waterfallLoaded && !hasEvents && (
<EuiFlexGroup justifyContent="center">
<EuiFlexItem>
<EuiText textAlign="center">
Expand All @@ -59,12 +67,29 @@ export const WaterfallChartContainer: React.FC<Props> = ({ checkGroup, stepIndex
</EuiFlexItem>
</EuiFlexGroup>
)}
{networkEvents && !networkEvents.loading && networkEvents.events.length > 0 && (
{waterfallLoaded && hasEvents && isWaterfallSupported && (
<WaterfallChartWrapper
data={extractItems(networkEvents.events)}
total={networkEvents.total}
/>
)}
{waterfallLoaded && hasEvents && !isWaterfallSupported && (
<EuiCallOut
title={
<FormattedMessage
id="xpack.uptime.synthetics.stepDetail.waterfallUnsupported.title"
defaultMessage="Waterfall chart unavailable"
/>
}
color="warning"
iconType="help"
>
<FormattedMessage
id="xpack.uptime.synthetics.stepDetail.waterfallUnsupported.description"
defaultMessage="The waterfall chart cannot be shown. You may be using an older version of the Synthetic Agent. Please check the version and consider upgrading."
/>
</EuiCallOut>
)}
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,6 @@ const NETWORK_EVENTS = {
status: 206,
mimeType: 'video/mp4',
requestSentTime: 241114127.474,
requestStartTime: 241114129.214,
loadEndTime: 241116573.402,
timings: {
total: 2445.928000001004,
Expand All @@ -226,7 +225,6 @@ const NETWORK_EVENTS = {
status: 200,
mimeType: 'image/gif',
requestSentTime: 241114749.202,
requestStartTime: 241114750.426,
loadEndTime: 241114805.541,
timings: {
queueing: 1.2240000069141388,
Expand All @@ -248,7 +246,6 @@ const NETWORK_EVENTS = {
status: 200,
mimeType: 'application/json',
requestSentTime: 241114268.04299998,
requestStartTime: 241114270.184,
loadEndTime: 241114665.609,
timings: {
total: 397.5659999996424,
Expand All @@ -270,7 +267,6 @@ const NETWORK_EVENTS = {
status: 200,
mimeType: 'application/javascript',
requestSentTime: 241114303.84899998,
requestStartTime: 241114306.416,
loadEndTime: 241114370.361,
timings: {
send: 1.357000001007691,
Expand All @@ -292,7 +288,6 @@ const NETWORK_EVENTS = {
status: 200,
mimeType: 'application/javascript',
requestSentTime: 241114305.939,
requestStartTime: 241114310.393,
loadEndTime: 241114938.264,
timings: {
wait: 51.61500000394881,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const StyledButton = styled(EuiButtonEmpty)`
}
`;

export const getChunks = (text: string) => {
export const getChunks = (text: string = '') => {
const END_CHARS = 12;
const chars = text.split('');
const splitPoint = chars.length - END_CHARS > 0 ? chars.length - END_CHARS : null;
Expand Down
Loading

0 comments on commit 22b5302

Please sign in to comment.