add mime type to content downloading label

dominiqueclarke · dominiqueclarke · commit 2129b86d43b3 · 2021-01-11T11:28:14.000-05:00
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
@@ -229,7 +229,7 @@ describe('getSeriesAndDomain', () => {
               "showTooltip": true,
               "tooltipProps": Object {
                 "colour": "#ca8eae",
-                "value": "Content downloading: 0.552ms",
+                "value": "Content downloading (CSS): 0.552ms",
               },
             },
             "x": 0,
@@ -281,7 +281,7 @@ describe('getSeriesAndDomain', () => {
               "showTooltip": true,
               "tooltipProps": Object {
                 "colour": "#9170b8",
-                "value": "Content downloading: 3.068ms",
+                "value": "Content downloading (JS): 3.068ms",
               },
             },
             "x": 1,
@@ -386,7 +386,7 @@ describe('getSeriesAndDomain', () => {
               "showTooltip": true,
               "tooltipProps": Object {
                 "colour": "#ca8eae",
-                "value": "Content downloading: 0.552ms",
+                "value": "Content downloading (CSS): 0.552ms",
               },
             },
             "x": 0,
@@ -399,7 +399,7 @@ describe('getSeriesAndDomain', () => {
               "showTooltip": true,
               "tooltipProps": Object {
                 "colour": "#9170b8",
-                "value": "Content downloading: 2.793ms",
+                "value": "Content downloading (JS): 2.793ms",
               },
             },
             "x": 1,
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
@@ -38,6 +38,23 @@ const getColourForMimeType = (mimeType?: string) => {
   return colourPalette[key];
 };
 
+const getFriendlyTooltipValue = ({
+  value,
+  timing,
+  mimeType,
+}: {
+  value: number;
+  timing: Timings;
+  mimeType?: string;
+}) => {
+  let label = FriendlyTimingLabels[timing];
+  if (timing === Timings.Receive && mimeType) {
+    const formattedMimeType: MimeType = MimeTypesMap[mimeType];
+    label += ` (${FriendlyMimetypeLabels[formattedMimeType]})`;
+  }
+  return `${label}: ${formatValueForDisplay(value)}ms`;
+};
+
 export const getSeriesAndDomain = (items: NetworkItems) => {
   const getValueForOffset = (item: NetworkItem) => {
     return item.requestSentTime;
@@ -92,9 +109,11 @@ export const getSeriesAndDomain = (items: NetworkItems) => {
             colour,
             showTooltip: true,
             tooltipProps: {
-              value: `${FriendlyTimingLabels[timing]}: ${formatValueForDisplay(
-                y - currentOffset
-              )}ms`,
+              value: getFriendlyTooltipValue({
+                value: y - currentOffset,
+                timing,
+                mimeType: item.mimeType,
+              }),
               colour,
             },
           },
@@ -118,7 +137,11 @@ export const getSeriesAndDomain = (items: NetworkItems) => {
           showTooltip: hasTotal,
           tooltipProps: hasTotal
             ? {
-                value: `${FriendlyTimingLabels.receive}: ${formatValueForDisplay(total)}ms`,
+                value: getFriendlyTooltipValue({
+                  value: total,
+                  timing: Timings.Receive,
+                  mimeType: item.mimeType,
+                }),
                 colour: mimeTypeColour,
               }
             : undefined,
