[Uptime] waterfall add fallback support for uncommon mime types (#88691…

…) (#88905) * uptime waterfall add fallback support for uncommon mime types * update data_formatting test Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 20, 2021 · ac7c281 · ac7c281
1 parent 3ce875d
commit ac7c281
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/...uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.test.ts b/...uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.test.ts
@@ -5,7 +5,8 @@
  */
 
 import { colourPalette, getSeriesAndDomain } from './data_formatting';
-import { NetworkItems } from './types';
+import { NetworkItems, MimeType } from './types';
+import { WaterfallDataEntry } from '../../waterfall/types';
 
 describe('Palettes', () => {
   it('A colour palette comprising timing and mime type colours is correctly generated', () => {
@@ -136,6 +137,31 @@ describe('getSeriesAndDomain', () => {
     },
   ];
 
+  const networkItemsWithUncommonMimeType: NetworkItems = [
+    {
+      timestamp: '2021-01-05T19:22:28.928Z',
+      method: 'GET',
+      url: 'https://unpkg.com/[email protected]/build/director.js',
+      status: 200,
+      mimeType: 'application/x-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,
+      },
+    },
+  ];
+
   it('formats timings', () => {
     const actual = getSeriesAndDomain(networkItems);
     expect(actual).toMatchInlineSnapshot(`
@@ -456,4 +482,22 @@ describe('getSeriesAndDomain', () => {
       }
     `);
   });
+
+  it('handles formatting when mime type is not mapped to a specific mime type bucket', () => {
+    const actual = getSeriesAndDomain(networkItemsWithUncommonMimeType);
+    const { series } = actual;
+    /* verify that raw mime type appears in the tooltip config and that
+     * the colour is mapped to mime type other */
+    const contentDownloadedingConfigItem = series.find((item: WaterfallDataEntry) => {
+      const { tooltipProps } = item.config;
+      if (tooltipProps && typeof tooltipProps.value === 'string') {
+        return (
+          tooltipProps.value.includes('application/x-javascript') &&
+          tooltipProps.colour === colourPalette[MimeType.Other]
+        );
+      }
+      return false;
+    });
+    expect(contentDownloadedingConfigItem).toBeDefined();
+  });
 });
diff --git a/...gins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.ts b/...gins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.ts
@@ -50,7 +50,7 @@ const getFriendlyTooltipValue = ({
   let label = FriendlyTimingLabels[timing];
   if (timing === Timings.Receive && mimeType) {
     const formattedMimeType: MimeType = MimeTypesMap[mimeType];
-    label += ` (${FriendlyMimetypeLabels[formattedMimeType]})`;
+    label += ` (${FriendlyMimetypeLabels[formattedMimeType] || mimeType})`;
   }
   return `${label}: ${formatValueForDisplay(value)}ms`;
 };

diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/types.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/types.ts
@@ -111,6 +111,7 @@ export const FriendlyMimetypeLabels = {
 export const MimeTypesMap: Record<string, MimeType> = {
   'text/html': MimeType.Html,
   'application/javascript': MimeType.Script,
+  'application/json': MimeType.Script,
   'text/javascript': MimeType.Script,
   'text/css': MimeType.Stylesheet,
   // Images
@@ -130,6 +131,7 @@ export const MimeTypesMap: Record<string, MimeType> = {
   'audio/x-pn-wav': MimeType.Media,
   'audio/webm': MimeType.Media,
   'video/webm': MimeType.Media,
+  'video/mp4': MimeType.Media,
   'audio/ogg': MimeType.Media,
   'video/ogg': MimeType.Media,
   'application/ogg': MimeType.Media,