[APM] Use same colors for HTTP status everywhere

Use the same colors on the RPM/TPM graphs as in the status code badge. Fixes elastic#47817.
smith · Oct 14, 2019 · 2d92e25 · 2d92e25
1 parent 6bb68f9
commit 2d92e25
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 42 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpStatusBadge/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpStatusBadge/index.tsx
@@ -7,27 +7,8 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiToolTip, EuiBadge } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { statusCodes } from './statusCodes';
-
-const {
-  euiColorDarkShade,
-  euiColorSecondary,
-  euiColorWarning,
-  euiColorDanger
-} = theme;
-
-function getStatusColor(status: number) {
-  const colors: { [key: string]: string } = {
-    1: euiColorDarkShade,
-    2: euiColorSecondary,
-    3: euiColorDarkShade,
-    4: euiColorWarning,
-    5: euiColorDanger
-  };
-
-  return colors[status.toString().substr(0, 1)] || 'default';
-}
+import { httpStatusCodeToColor } from '../../../../utils/httpStatusCodeToColor';
 
 interface HttpStatusBadgeProps {
   status: number;
@@ -39,7 +20,7 @@ export function HttpStatusBadge({ status }: HttpStatusBadgeProps) {
 
   return (
     <EuiToolTip content={label}>
-      <EuiBadge color={getStatusColor(status)}>
+      <EuiBadge color={httpStatusCodeToColor(status) || 'default'}>
         {status} {statusCodes[status.toString()]}
       </EuiBadge>
     </EuiToolTip>

diff --git a/x-pack/legacy/plugins/apm/public/selectors/__tests__/chartSelectors.test.ts b/x-pack/legacy/plugins/apm/public/selectors/__tests__/chartSelectors.test.ts
@@ -93,21 +93,21 @@ describe('chartSelectors', () => {
     it('produces correct series', () => {
       expect(getTpmSeries(apmTimeseries, transactionType)).toEqual([
         {
-          color: '#00b3a4',
+          color: theme.euiColorSecondary,
           data: [{ x: 0, y: 5 }, { x: 0, y: 2 }],
           legendValue: '3.5 tpm',
           title: 'HTTP 2xx',
           type: 'linemark'
         },
         {
-          color: '#f98510',
+          color: theme.euiColorWarning,
           data: [{ x: 0, y: 1 }],
           legendValue: '1.0 tpm',
           title: 'HTTP 4xx',
           type: 'linemark'
         },
         {
-          color: '#db1374',
+          color: theme.euiColorDanger,
           data: [{ x: 0, y: 0 }],
           legendValue: '0.0 tpm',
           title: 'HTTP 5xx',
@@ -124,7 +124,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis0);
+        ).toEqual(theme.euiColorSecondary);
       });
     });
 
@@ -136,7 +136,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis0);
+        ).toEqual(theme.euiColorSecondary);
       });
     });
 
@@ -148,7 +148,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis0);
+        ).toEqual(theme.euiColorSecondary);
       });
     });
 
@@ -160,7 +160,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis0);
+        ).toEqual(theme.euiColorSecondary);
       });
     });
 
@@ -172,7 +172,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis2);
+        ).toEqual(theme.euiColorDanger);
       });
     });
 
@@ -184,7 +184,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis2);
+        ).toEqual(theme.euiColorDanger);
       });
     });
 
@@ -196,7 +196,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis2);
+        ).toEqual(theme.euiColorDanger);
       });
     });
 
@@ -208,7 +208,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis2);
+        ).toEqual(theme.euiColorDanger);
       });
     });
 

diff --git a/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts b/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts
@@ -20,6 +20,7 @@ import {
 import { asDecimal, asMillis, tpmUnit } from '../utils/formatters';
 import { IUrlParams } from '../context/UrlParamsContext/types';
 import { getEmptySeries } from '../components/shared/charts/CustomPlot/getEmptySeries';
+import { httpStatusCodeToColor } from '../utils/httpStatusCodeToColor';
 
 export interface ITpmBucket {
   title: string;
@@ -181,21 +182,16 @@ export function getTpmSeries(
 
 function colorMatch(key: string) {
   if (/ok|success/i.test(key)) {
-    return theme.euiColorVis0;
+    return theme.euiColorSecondary;
   } else if (/error|fail/i.test(key)) {
-    return theme.euiColorVis2;
+    return theme.euiColorDanger;
   }
 }
 
 function getColorByKey(keys: string[]) {
-  const assignedColors: StringMap<string> = {
-    'HTTP 2xx': theme.euiColorVis0,
-    'HTTP 3xx': theme.euiColorVis5,
-    'HTTP 4xx': theme.euiColorVis7,
-    'HTTP 5xx': theme.euiColorVis2
-  };
+  const assignedColors = ['HTTP 2xx', 'HTTP 3xx', 'HTTP 4xx', 'HTTP 5xx'];
 
-  const unknownKeys = difference(keys, Object.keys(assignedColors));
+  const unknownKeys = difference(keys, assignedColors);
   const unassignedColors: StringMap<string> = zipObject(unknownKeys, [
     theme.euiColorVis1,
     theme.euiColorVis3,
@@ -206,5 +202,5 @@ function getColorByKey(keys: string[]) {
   ]);
 
   return (key: string) =>
-    colorMatch(key) || assignedColors[key] || unassignedColors[key];
+    colorMatch(key) || httpStatusCodeToColor(key) || unassignedColors[key];
 }
diff --git a/x-pack/legacy/plugins/apm/public/utils/httpStatusCodeToColor.ts b/x-pack/legacy/plugins/apm/public/utils/httpStatusCodeToColor.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { StringMap } from '../../typings/common';
+
+const {
+  euiColorDarkShade,
+  euiColorSecondary,
+  euiColorWarning,
+  euiColorDanger
+} = theme;
+
+export const httpsStatusCodeColors: StringMap<string> = {
+  1: euiColorDarkShade,
+  2: euiColorSecondary,
+  3: euiColorDarkShade,
+  4: euiColorWarning,
+  5: euiColorDanger
+};
+
+function getStatusColor(status: number) {
+  return httpsStatusCodeColors[status.toString().substr(0, 1)];
+}
+
+/**
+ * Convert an HTTP status code to a color.
+ *
+ * If passed a string, it will remove all non-numeric characters
+ */
+export function httpStatusCodeToColor(status: string | number) {
+  if (typeof status === 'string') {
+    return getStatusColor(parseInt(status.replace(/\D/g, ''), 10));
+  } else {
+    return getStatusColor(status);
+  }
+}