Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Uptime] Waterfall Chart - enable timings for local files by leveraging total time #87424

Merged
merged 10 commits into from
Jan 11, 2021
Merged

[Uptime] Waterfall Chart - enable timings for local files by leveraging total time #87424

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
67fc179
uptime waterfall enable timings for static files by leveraging total …
dominiqueclarke Jan 6, 2021
01e8a22
Merge branch 'master' into fix/86331-uptime-waterfall-enable-timings-…
kibanamachine Jan 7, 2021
d2f9085
update cases for when their is no waterfall timing available
dominiqueclarke Jan 7, 2021
a45fc86
Merge branch 'fix/86331-uptime-waterfall-enable-timings-for-static-fi…
dominiqueclarke Jan 7, 2021
fc261a7
add showTooltip propertier to WaterfallDataSeriesConfigProperties
dominiqueclarke Jan 11, 2021
ca85222
Merge branch 'master' into fix/86331-uptime-waterfall-enable-timings-…
kibanamachine Jan 11, 2021
f043f91
remove content downloading from the legend
dominiqueclarke Jan 11, 2021
e750669
Merge branch 'fix/86331-uptime-waterfall-enable-timings-for-static-fi…
dominiqueclarke Jan 11, 2021
2129b86
add mime type to content downloading label
dominiqueclarke Jan 11, 2021
8cda839
Merge branch 'master' into fix/86331-uptime-waterfall-enable-timings-…
kibanamachine Jan 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
333 changes: 332 additions & 1 deletion ...uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { colourPalette } from './data_formatting';
import { colourPalette, getSeriesAndDomain } from './data_formatting';
import { NetworkItems } from './types';

describe('Palettes', () => {
it('A colour palette comprising timing and mime type colours is correctly generated', () => {
Expand All @@ -25,3 +26,333 @@ describe('Palettes', () => {
});
});
});

describe('getSeriesAndDomain', () => {
const networkItems: NetworkItems = [
{
timestamp: '2021-01-05T19:22:28.928Z',
method: 'GET',
url: 'https://unpkg.com/[email protected]/index.css',
status: 200,
mimeType: 'text/css',
requestSentTime: 18098833.175,
requestStartTime: 18098835.439,
loadEndTime: 18098957.145,
timings: {
connect: 81.10800000213203,
wait: 34.577999998873565,
receive: 0.5520000013348181,
send: 0.3600000018195715,
total: 123.97000000055414,
proxy: -1,
blocked: 0.8540000017092098,
queueing: 2.263999998831423,
ssl: 55.38700000033714,
dns: 3.559999997378327,
},
},
{
timestamp: '2021-01-05T19:22:28.928Z',
method: 'GET',
url: 'https://unpkg.com/[email protected]/build/director.js',
status: 200,
mimeType: 'application/javascript',
requestSentTime: 18098833.537,
requestStartTime: 18098837.233999997,
loadEndTime: 18098977.648000002,
timings: {
blocked: 84.54599999822676,
receive: 3.068000001803739,
queueing: 3.69700000010198,
proxy: -1,
total: 144.1110000014305,
wait: 52.56100000042352,
connect: -1,
send: 0.2390000008745119,
ssl: -1,
dns: -1,
},
},
];

const networkItemsWithoutFullTimings: NetworkItems = [
networkItems[0],
{
timestamp: '2021-01-05T19:22:28.928Z',
method: 'GET',
url: 'file:///Users/dominiqueclarke/dev/synthetics/examples/todos/app/app.js',
status: 0,
mimeType: 'text/javascript',
requestSentTime: 18098834.097,
loadEndTime: 18098836.889999997,
timings: {
total: 2.7929999996558763,
blocked: -1,
ssl: -1,
wait: -1,
connect: -1,
dns: -1,
queueing: -1,
send: -1,
proxy: -1,
receive: -1,
},
},
];

it('formats timings', () => {
const actual = getSeriesAndDomain(networkItems);
expect(actual).toMatchInlineSnapshot(`
Object {
"domain": Object {
"max": 140.7760000010603,
"min": 0,
},
"series": Array [
Object {
"config": Object {
"colour": "#b9a888",
"tooltipProps": Object {
"colour": "#b9a888",
"value": "Queued / Blocked: 0.854ms",
},
},
"x": 0,
"y": 0.8540000017092098,
"y0": 0,
},
Object {
"config": Object {
"colour": "#54b399",
"tooltipProps": Object {
"colour": "#54b399",
"value": "DNS: 3.560ms",
},
},
"x": 0,
"y": 4.413999999087537,
"y0": 0.8540000017092098,
},
Object {
"config": Object {
"colour": "#da8b45",
"tooltipProps": Object {
"colour": "#da8b45",
"value": "Connecting: 25.721ms",
},
},
"x": 0,
"y": 30.135000000882428,
"y0": 4.413999999087537,
},
Object {
"config": Object {
"colour": "#edc5a2",
"tooltipProps": Object {
"colour": "#edc5a2",
"value": "TLS: 55.387ms",
},
},
"x": 0,
"y": 85.52200000121957,
"y0": 30.135000000882428,
},
Object {
"config": Object {
"colour": "#d36086",
"tooltipProps": Object {
"colour": "#d36086",
"value": "Sending request: 0.360ms",
},
},
"x": 0,
"y": 85.88200000303914,
"y0": 85.52200000121957,
},
Object {
"config": Object {
"colour": "#b0c9e0",
"tooltipProps": Object {
"colour": "#b0c9e0",
"value": "Waiting (TTFB): 34.578ms",
},
},
"x": 0,
"y": 120.4600000019127,
"y0": 85.88200000303914,
},
Object {
"config": Object {
"colour": "#ca8eae",
"tooltipProps": Object {
"colour": "#ca8eae",
"value": "Content downloading: 0.552ms",
},
},
"x": 0,
"y": 121.01200000324752,
"y0": 120.4600000019127,
},
Object {
"config": Object {
"colour": "#b9a888",
"tooltipProps": Object {
"colour": "#b9a888",
"value": "Queued / Blocked: 84.546ms",
},
},
"x": 1,
"y": 84.90799999795854,
"y0": 0.3619999997317791,
},
Object {
"config": Object {
"colour": "#d36086",
"tooltipProps": Object {
"colour": "#d36086",
"value": "Sending request: 0.239ms",
},
},
"x": 1,
"y": 85.14699999883305,
"y0": 84.90799999795854,
},
Object {
"config": Object {
"colour": "#b0c9e0",
"tooltipProps": Object {
"colour": "#b0c9e0",
"value": "Waiting (TTFB): 52.561ms",
},
},
"x": 1,
"y": 137.70799999925657,
"y0": 85.14699999883305,
},
Object {
"config": Object {
"colour": "#9170b8",
"tooltipProps": Object {
"colour": "#9170b8",
"value": "Content downloading: 3.068ms",
},
},
"x": 1,
"y": 140.7760000010603,
"y0": 137.70799999925657,
},
],
}
`);
});

it('handles formatting when individual timing values are unavaiable', () => {
const actual = getSeriesAndDomain(networkItemsWithoutFullTimings);
expect(actual).toMatchInlineSnapshot(`
Object {
"domain": Object {
"max": 121.01200000324752,
"min": 0,
},
"series": Array [
Object {
"config": Object {
"colour": "#b9a888",
"tooltipProps": Object {
"colour": "#b9a888",
"value": "Queued / Blocked: 0.854ms",
},
},
"x": 0,
"y": 0.8540000017092098,
"y0": 0,
},
Object {
"config": Object {
"colour": "#54b399",
"tooltipProps": Object {
"colour": "#54b399",
"value": "DNS: 3.560ms",
},
},
"x": 0,
"y": 4.413999999087537,
"y0": 0.8540000017092098,
},
Object {
"config": Object {
"colour": "#da8b45",
"tooltipProps": Object {
"colour": "#da8b45",
"value": "Connecting: 25.721ms",
},
},
"x": 0,
"y": 30.135000000882428,
"y0": 4.413999999087537,
},
Object {
"config": Object {
"colour": "#edc5a2",
"tooltipProps": Object {
"colour": "#edc5a2",
"value": "TLS: 55.387ms",
},
},
"x": 0,
"y": 85.52200000121957,
"y0": 30.135000000882428,
},
Object {
"config": Object {
"colour": "#d36086",
"tooltipProps": Object {
"colour": "#d36086",
"value": "Sending request: 0.360ms",
},
},
"x": 0,
"y": 85.88200000303914,
"y0": 85.52200000121957,
},
Object {
"config": Object {
"colour": "#b0c9e0",
"tooltipProps": Object {
"colour": "#b0c9e0",
"value": "Waiting (TTFB): 34.578ms",
},
},
"x": 0,
"y": 120.4600000019127,
"y0": 85.88200000303914,
},
Object {
"config": Object {
"colour": "#ca8eae",
"tooltipProps": Object {
"colour": "#ca8eae",
"value": "Content downloading: 0.552ms",
},
},
"x": 0,
"y": 121.01200000324752,
"y0": 120.4600000019127,
},
Object {
"config": Object {
"colour": "#9170b8",
"tooltipProps": Object {
"colour": "#9170b8",
"value": "Content downloading: 2.793ms",
},
},
"x": 1,
"y": 3.714999998046551,
"y0": 0.9219999983906746,
},
],
}
`);
});
});
20 changes: 18 additions & 2 deletions ...gins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,13 @@ export const getSeriesAndDomain = (items: NetworkItems) => {
if (!item.timings) return acc;

const offsetValue = getValueForOffset(item);
const mimeTypeColour = getColourForMimeType(item.mimeType);

let currentOffset = offsetValue - zeroOffset;

TIMING_ORDER.forEach((timing) => {
const value = getValue(item.timings, timing);
const colour =
timing === Timings.Receive ? getColourForMimeType(item.mimeType) : colourPalette[timing];
const colour = timing === Timings.Receive ? mimeTypeColour : colourPalette[timing];
if (value && value >= 0) {
const y = currentOffset + value;

Expand All @@ -91,6 +91,22 @@ export const getSeriesAndDomain = (items: NetworkItems) => {
currentOffset = y;
}
});

/* if no specific timing values are found, use the total time */
if (!acc.find((entry) => entry.x === index)) {
acc.push({
x: index,
y0: currentOffset,
y: currentOffset + item.timings.total,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so total will always be there?

Copy link
Contributor Author

@dominiqueclarke dominiqueclarke Jan 7, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vignesh believes that it will be available for static files.

I've added additional logic to account for scenarios in which total is unavailable, as well as scenarios in which the entire timings object is unavailable.

I noticed that this is the case for when the connection is refused. All items, including the total, are listed as -1. With my new logic, this is what the behavior would be. There is no hover state.

This is when there is nothing up and running on localhost:8000
Screen Shot 2021-01-07 at 2 47 48 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correction: I'm able to remove the tooltip but not the background hover state, which seems to come bundled with passing a custom tooltip to the BarSeries from Elastic Charts. I've yet to discover a way to either use a custom tooltip or specify the tooltip as none on a per datum basis. I can continue the conversation in the elastic charts chat on Monday.

Screen Shot 2021-01-10 at 9 23 53 PM

Screen Shot 2021-01-10 at 8 55 05 PM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Total would always be there for all requests. We need to just use them as fallback when we don't have timings for other parts of the request.

config: {
colour: mimeTypeColour,
tooltipProps: {
value: `${FriendlyTimingLabels.total}: ${formatValueForDisplay(item.timings.total)}ms`,
colour: mimeTypeColour,
},
},
});
}
return acc;
}, []);

Expand Down
Loading