diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.test.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.test.ts index a58927dfbd12..5c0b36874004 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.test.ts +++ b/x-pack/plugins/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/director@1.2.8/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/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.ts index 43fa93fa5f6f..5e59026fd65f 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/data_formatting.ts +++ b/x-pack/plugins/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 index 738929741dda..137c0767a83e 100644 --- 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 = { '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 = { '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,