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

Jump to bottom

[8.15] [Synthetics] waterfall chart - handle cached resources (#193089) #193376

Open
wants to merge 2 commits into
base: 8.15
Choose a base branch
from
Open

[8.15] [Synthetics] waterfall chart - handle cached resources (#193089) #193376

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48cb7de
[Synthetics] waterfall chart - handle cached resources (#193089)
dominiqueclarke Sep 19, 2024
c3e5798
Merge branch '8.15' into backport/8.15/pr-193089
dominiqueclarke Sep 23, 2024
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
Next Next commit
[Synthetics] waterfall chart - handle cached resources (#193089) 
## Summary

Resolves #184794

Ensures that the cached resources display accurate timing information on
the waterfall chart tooltips.

The information displayed should match the information displayed in the
flyout when the request url is clicked.

Tooltip
<img width="555" alt="Screenshot 2024-09-16 at 8 49 55 PM"
src="https://github.com/user-attachments/assets/516653bc-dcec-4681-965b-08711417ab67">

Flyout
<img width="424" alt="Screenshot 2024-09-16 at 2 07 56 PM"
src="https://github.com/user-attachments/assets/5fb0bf1c-c65d-4ce3-8a6a-5e95700209dd">

### Release note

Synthetics - resolves an issue for multi step browser journeys where
timings for cached resources within the same step were inaccurate within
the waterfall chart.

### Testing

1. Create a browser monitor with duplicate requests. For example:
```
step("multi resource step", async () => {
    await page.goto('https://github.com');
    await page.goto('https://github.com');
    await page.goto('https://github.com');
})
```
2. Navigate to the monitor details page
3. Find the last test run panel, click the view test details button,
then click the view performance breakdown button

![image](https://github.com/user-attachments/assets/b66addcb-21f6-4eac-8c60-dc3387b33853)

![image](https://github.com/user-attachments/assets/67f04b9f-4ff6-4ce6-85d1-2a89869e4a2c)
4. Scroll down to the waterfall chart. If you use github, requests after
about 115 should be cached. Note: some request may have been aborted and
their waterfall tooltip won't show. Find a request that was not aborted,
hover to see the tooltip, then click the request to view the flyout and
confirm the information.

(cherry picked from commit 6f4be61)
  • Loading branch information
@dominiqueclarke
dominiqueclarke committed Sep 19, 2024
commit 48cb7dec258738e67a8f44057ec4320fc18b5bd8
125 changes: 16 additions & 109 deletions .../apps/synthetics/components/step_details_page/common/network_data/data_formatting.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,14 @@ import {
getSeriesAndDomain,
getSidebarItems,
} from './data_formatting';
import { MimeType, FriendlyFlyoutLabels, FriendlyTimingLabels, Timings, Metadata } from './types';
import { WaterfallDataEntry } from './types';
import {
MimeType,
FriendlyFlyoutLabels,
FriendlyTimingLabels,
Timings,
Metadata,
WaterfallTooltipItem,
} from './types';
import type { DateFormatter } from '../../../../../../hooks/use_date_format';
import { mockMoment } from '../../../../utils/formatting/test_helpers';
import { NetworkEvent } from '../../../../../../../common/runtime_types';
Expand Down Expand Up @@ -247,11 +253,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#b0c9e0",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#b0c9e0",
"value": "Queued / Blocked: 0.9ms",
},
},
"x": 0,
"y": 0.8540000017092098,
Expand All @@ -262,11 +263,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#aad9cc",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#aad9cc",
"value": "DNS: 4ms",
},
},
"x": 0,
"y": 4.413999999087537,
Expand All @@ -277,11 +273,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#c8b8dc",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#c8b8dc",
"value": "Connecting: 26ms",
},
},
"x": 0,
"y": 30.135000000882428,
Expand All @@ -292,11 +283,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#e5c7d7",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#e5c7d7",
"value": "TLS: 55ms",
},
},
"x": 0,
"y": 85.52200000121957,
Expand All @@ -307,11 +293,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#f3b3a6",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#f3b3a6",
"value": "Sending request: 0.4ms",
},
},
"x": 0,
"y": 85.88200000303914,
Expand All @@ -322,11 +303,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#e7664c",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#e7664c",
"value": "Waiting (TTFB): 35ms",
},
},
"x": 0,
"y": 120.4600000019127,
Expand All @@ -337,11 +313,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#9170b8",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#9170b8",
"value": "Content downloading (CSS): 0.6ms",
},
},
"x": 0,
"y": 121.01200000324752,
Expand All @@ -352,11 +323,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#b0c9e0",
"id": 1,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#b0c9e0",
"value": "Queued / Blocked: 85ms",
},
},
"x": 1,
"y": 84.90799999795854,
Expand All @@ -367,11 +333,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#f3b3a6",
"id": 1,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#f3b3a6",
"value": "Sending request: 0.2ms",
},
},
"x": 1,
"y": 85.14699999883305,
Expand All @@ -382,11 +343,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#e7664c",
"id": 1,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#e7664c",
"value": "Waiting (TTFB): 53ms",
},
},
"x": 1,
"y": 137.70799999925657,
Expand All @@ -397,11 +353,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#da8b45",
"id": 1,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#da8b45",
"value": "Content downloading (JS): 3ms",
},
},
"x": 1,
"y": 140.7760000010603,
Expand All @@ -420,11 +371,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#b0c9e0",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#b0c9e0",
"value": "Queued / Blocked: 0.9ms",
},
},
"x": 0,
"y": 0.8540000017092098,
Expand All @@ -435,11 +381,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#aad9cc",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#aad9cc",
"value": "DNS: 4ms",
},
},
"x": 0,
"y": 4.413999999087537,
Expand All @@ -450,11 +391,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#c8b8dc",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#c8b8dc",
"value": "Connecting: 26ms",
},
},
"x": 0,
"y": 30.135000000882428,
Expand All @@ -465,11 +401,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#e5c7d7",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#e5c7d7",
"value": "TLS: 55ms",
},
},
"x": 0,
"y": 85.52200000121957,
Expand All @@ -480,11 +411,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#f3b3a6",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#f3b3a6",
"value": "Sending request: 0.4ms",
},
},
"x": 0,
"y": 85.88200000303914,
Expand All @@ -495,11 +421,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#e7664c",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#e7664c",
"value": "Waiting (TTFB): 35ms",
},
},
"x": 0,
"y": 120.4600000019127,
Expand All @@ -510,11 +431,6 @@ describe('getSeriesAndDomain', () => {
"colour": "#9170b8",
"id": 0,
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#9170b8",
"value": "Content downloading (CSS): 0.6ms",
},
},
"x": 0,
"y": 121.01200000324752,
Expand All @@ -524,11 +440,6 @@ describe('getSeriesAndDomain', () => {
"config": Object {
"colour": "#da8b45",
"isHighlighted": true,
"showTooltip": true,
"tooltipProps": Object {
"colour": "#da8b45",
"value": "Content downloading (JS): 3ms",
},
},
"x": 1,
"y": 3.714999998046551,
Expand All @@ -546,8 +457,6 @@ describe('getSeriesAndDomain', () => {
"config": Object {
"colour": "",
"isHighlighted": true,
"showTooltip": false,
"tooltipProps": undefined,
},
"x": 0,
"y": 0,
Expand Down Expand Up @@ -614,8 +523,10 @@ describe('getSeriesAndDomain', () => {
"value": undefined,
},
],
"networkItemTooltipProps": Array [],
"requestHeaders": undefined,
"responseHeaders": undefined,
"showTooltip": false,
"url": "file:///Users/dominiqueclarke/dev/synthetics/examples/todos/app/app.js",
"x": 0,
},
Expand All @@ -625,8 +536,6 @@ describe('getSeriesAndDomain', () => {
"config": Object {
"colour": "",
"isHighlighted": true,
"showTooltip": false,
"tooltipProps": undefined,
},
"x": 0,
"y": 0,
Expand Down Expand Up @@ -660,23 +569,21 @@ describe('getSeriesAndDomain', () => {
});

it('handles formatting when mime type is not mapped to a specific mime type bucket', () => {
const { series } = getSeriesAndDomain(
const { metadata } = getSeriesAndDomain(
networkItemsWithUnknownMimeType,
false,
mockDateFormatter
);
/* verify that raw mime type appears in the tooltip config and that
* the colour is mapped to mime type other */
const contentDownloadingConfigItem = series.find((item: WaterfallDataEntry) => {
const { tooltipProps } = item.config;
if (tooltipProps && typeof tooltipProps.value === 'string') {
const contentDownloadingConfigItem = metadata[0].networkItemTooltipProps.find(
(item: WaterfallTooltipItem) => {
return (
tooltipProps.value.includes('application/x-unknown') &&
tooltipProps.colour === colourPalette[MimeType.Other]
item.value.includes('application/x-unknown') &&
item.colour === colourPalette[MimeType.Other]
);
}
return false;
});
);
expect(contentDownloadingConfigItem).toBeDefined();
});

Expand Down
Loading