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

* uptime waterfall add fallback support for uncommon mime types

* update data_formatting test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Dominique Clarke 2021-01-20 15:25:45 -05:00 committed by GitHub
parent 1edc799894
commit 954c887006
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 2 deletions

View file

@ -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();
});
});

View file

@ -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`;
};

View file

@ -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,