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

# Backport

This will backport the following commits from `main` to `8.15`:
- [[Synthetics] waterfall chart - handle cached resources
(#193089)](#193089)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dominique
Clarke","email":"dominique.clarke@elastic.co"},"sourceCommit":{"committedDate":"2024-09-19T01:32:45Z","message":"[Synthetics]
waterfall chart - handle cached resources (#193089)\n\n##
Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/184794\r\n\r\nEnsures that the
cached resources display accurate timing information on\r\nthe waterfall
chart tooltips.\r\n\r\nThe information displayed should match the
information displayed in the\r\nflyout when the request url is
clicked.\r\n\r\nTooltip\r\n<img width=\"555\" alt=\"Screenshot
2024-09-16 at 8 49 55
PM\"\r\nsrc=\"https://github.com/user-attachments/assets/516653bc-dcec-4681-965b-08711417ab67\">\r\n\r\nFlyout\r\n<img
width=\"424\" alt=\"Screenshot 2024-09-16 at 2 07 56
PM\"\r\nsrc=\"https://github.com/user-attachments/assets/5fb0bf1c-c65d-4ce3-8a6a-5e95700209dd\">\r\n\r\n###
Release note\r\n\r\nSynthetics - resolves an issue for multi step
browser journeys where\r\ntimings for cached resources within the same
step were inaccurate within\r\nthe waterfall chart.\r\n\r\n###
Testing\r\n\r\n1. Create a browser monitor with duplicate requests. For
example: \r\n```\r\nstep(\"multi resource step\", async () => {\r\n
await page.goto('https://github.com');\r\n await
page.goto('https://github.com');\r\n await
page.goto('https://github.com');\r\n})\r\n```\r\n2. Navigate to the
monitor details page\r\n3. Find the last test run panel, click the view
test details button,\r\nthen click the view performance breakdown
button\r\n\r\n![image](https://github.com/user-attachments/assets/b66addcb-21f6-4eac-8c60-dc3387b33853)\r\n\r\n![image](https://github.com/user-attachments/assets/67f04b9f-4ff6-4ce6-85d1-2a89869e4a2c)\r\n4.
Scroll down to the waterfall chart. If you use github, requests
after\r\nabout 115 should be cached. Note: some request may have been
aborted and\r\ntheir waterfall tooltip won't show. Find a request that
was not aborted,\r\nhover to see the tooltip, then click the request to
view the flyout and\r\nconfirm the
information.","sha":"6f4be61d13431f2327cabc50c71b999451821948","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","v9.0.0","ci:project-deploy-observability","Team:obs-ux-management","v8.16.0","v8.15.2"],"title":"[Synthetics]
waterfall chart - handle cached
resources","number":193089,"url":"https://github.com/elastic/kibana/pull/193089","mergeCommit":{"message":"[Synthetics]
waterfall chart - handle cached resources (#193089)\n\n##
Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/184794\r\n\r\nEnsures that the
cached resources display accurate timing information on\r\nthe waterfall
chart tooltips.\r\n\r\nThe information displayed should match the
information displayed in the\r\nflyout when the request url is
clicked.\r\n\r\nTooltip\r\n<img width=\"555\" alt=\"Screenshot
2024-09-16 at 8 49 55
PM\"\r\nsrc=\"https://github.com/user-attachments/assets/516653bc-dcec-4681-965b-08711417ab67\">\r\n\r\nFlyout\r\n<img
width=\"424\" alt=\"Screenshot 2024-09-16 at 2 07 56
PM\"\r\nsrc=\"https://github.com/user-attachments/assets/5fb0bf1c-c65d-4ce3-8a6a-5e95700209dd\">\r\n\r\n###
Release note\r\n\r\nSynthetics - resolves an issue for multi step
browser journeys where\r\ntimings for cached resources within the same
step were inaccurate within\r\nthe waterfall chart.\r\n\r\n###
Testing\r\n\r\n1. Create a browser monitor with duplicate requests. For
example: \r\n```\r\nstep(\"multi resource step\", async () => {\r\n
await page.goto('https://github.com');\r\n await
page.goto('https://github.com');\r\n await
page.goto('https://github.com');\r\n})\r\n```\r\n2. Navigate to the
monitor details page\r\n3. Find the last test run panel, click the view
test details button,\r\nthen click the view performance breakdown
button\r\n\r\n![image](https://github.com/user-attachments/assets/b66addcb-21f6-4eac-8c60-dc3387b33853)\r\n\r\n![image](https://github.com/user-attachments/assets/67f04b9f-4ff6-4ce6-85d1-2a89869e4a2c)\r\n4.
Scroll down to the waterfall chart. If you use github, requests
after\r\nabout 115 should be cached. Note: some request may have been
aborted and\r\ntheir waterfall tooltip won't show. Find a request that
was not aborted,\r\nhover to see the tooltip, then click the request to
view the flyout and\r\nconfirm the
information.","sha":"6f4be61d13431f2327cabc50c71b999451821948"}},"sourceBranch":"main","suggestedTargetBranches":["8.x","8.15"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193089","number":193089,"mergeCommit":{"message":"[Synthetics]
waterfall chart - handle cached resources (#193089)\n\n##
Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/184794\r\n\r\nEnsures that the
cached resources display accurate timing information on\r\nthe waterfall
chart tooltips.\r\n\r\nThe information displayed should match the
information displayed in the\r\nflyout when the request url is
clicked.\r\n\r\nTooltip\r\n<img width=\"555\" alt=\"Screenshot
2024-09-16 at 8 49 55
PM\"\r\nsrc=\"https://github.com/user-attachments/assets/516653bc-dcec-4681-965b-08711417ab67\">\r\n\r\nFlyout\r\n<img
width=\"424\" alt=\"Screenshot 2024-09-16 at 2 07 56
PM\"\r\nsrc=\"https://github.com/user-attachments/assets/5fb0bf1c-c65d-4ce3-8a6a-5e95700209dd\">\r\n\r\n###
Release note\r\n\r\nSynthetics - resolves an issue for multi step
browser journeys where\r\ntimings for cached resources within the same
step were inaccurate within\r\nthe waterfall chart.\r\n\r\n###
Testing\r\n\r\n1. Create a browser monitor with duplicate requests. For
example: \r\n```\r\nstep(\"multi resource step\", async () => {\r\n
await page.goto('https://github.com');\r\n await
page.goto('https://github.com');\r\n await
page.goto('https://github.com');\r\n})\r\n```\r\n2. Navigate to the
monitor details page\r\n3. Find the last test run panel, click the view
test details button,\r\nthen click the view performance breakdown
button\r\n\r\n![image](https://github.com/user-attachments/assets/b66addcb-21f6-4eac-8c60-dc3387b33853)\r\n\r\n![image](https://github.com/user-attachments/assets/67f04b9f-4ff6-4ce6-85d1-2a89869e4a2c)\r\n4.
Scroll down to the waterfall chart. If you use github, requests
after\r\nabout 115 should be cached. Note: some request may have been
aborted and\r\ntheir waterfall tooltip won't show. Find a request that
was not aborted,\r\nhover to see the tooltip, then click the request to
view the flyout and\r\nconfirm the
information.","sha":"6f4be61d13431f2327cabc50c71b999451821948"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.15","label":"v8.15.2","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>

Author: kibanamachine

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/step_details_page/common/network_data/data_formatting.test.ts

@@ -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';
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -546,8 +457,6 @@ describe('getSeriesAndDomain', () => {
           "config": Object {
             "colour": "",
             "isHighlighted": true,
-            "showTooltip": false,
-            "tooltipProps": undefined,
           },
           "x": 0,
           "y": 0,
@@ -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,
           },
@@ -625,8 +536,6 @@ describe('getSeriesAndDomain', () => {
             "config": Object {
               "colour": "",
               "isHighlighted": true,
-              "showTooltip": false,
-              "tooltipProps": undefined,
             },
             "x": 0,
             "y": 0,
@@ -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();
   });