[APM] Use same colors for HTTP status everywhere (#47915)

* [APM] Use same colors for HTTP status everywhere

Use the same colors on the RPM/TPM graphs as in the status code badge.

Fixes #47817.

* don't export that const

* Change colors

* Remove unused import

x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpStatusBadge/__test__/HttpStatusBadge.test.tsx

@@ -6,56 +6,66 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { HttpStatusBadge } from '../index';
+import {
+  successColor,
+  neutralColor,
+  warningColor,
+  errorColor
+} from '../../../../../utils/httpStatusCodeToColor';
 
 describe('HttpStatusBadge', () => {
   describe('render', () => {
     describe('with status code 100', () => {
-      it('renders with the dark shade color', () => {
+      it('renders with neutral color', () => {
         const wrapper = mount(<HttpStatusBadge status={100} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          theme.euiColorDarkShade
+          neutralColor
         );
       });
     });
+
     describe('with status code 200', () => {
-      it('renders with Secondary color', () => {
+      it('renders with success color', () => {
         const wrapper = mount(<HttpStatusBadge status={200} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          theme.euiColorSecondary
+          successColor
         );
       });
     });
+
     describe('with status code 301', () => {
-      it('renders with dark shade color', () => {
+      it('renders with neutral color', () => {
         const wrapper = mount(<HttpStatusBadge status={301} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          theme.euiColorDarkShade
+          neutralColor
         );
       });
     });
+
     describe('with status code 404', () => {
-      it('renders with Warning color', () => {
+      it('renders with warning color', () => {
         const wrapper = mount(<HttpStatusBadge status={404} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          theme.euiColorWarning
+          warningColor
         );
       });
     });
+
     describe('with status code 502', () => {
-      it('renders with Danger color', () => {
+      it('renders with error color', () => {
         const wrapper = mount(<HttpStatusBadge status={502} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          theme.euiColorDanger
+          errorColor
         );
       });
     });
+
     describe('with other status code', () => {
       it('renders with default color', () => {
         const wrapper = mount(<HttpStatusBadge status={700} />);

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>

x-pack/legacy/plugins/apm/public/selectors/__tests__/chartSelectors.test.ts

@@ -10,6 +10,11 @@ import {
   getResponseTimeSeries,
   getTpmSeries
 } from '../chartSelectors';
+import {
+  successColor,
+  warningColor,
+  errorColor
+} from '../../utils/httpStatusCodeToColor';
 
 describe('chartSelectors', () => {
   describe('getAnomalyScoreSeries', () => {
@@ -93,21 +98,21 @@ describe('chartSelectors', () => {
     it('produces correct series', () => {
       expect(getTpmSeries(apmTimeseries, transactionType)).toEqual([
         {
-          color: '#00b3a4',
+          color: successColor,
           data: [{ x: 0, y: 5 }, { x: 0, y: 2 }],
           legendValue: '3.5 tpm',
           title: 'HTTP 2xx',
           type: 'linemark'
         },
         {
-          color: '#f98510',
+          color: warningColor,
           data: [{ x: 0, y: 1 }],
           legendValue: '1.0 tpm',
           title: 'HTTP 4xx',
           type: 'linemark'
         },
         {
-          color: '#db1374',
+          color: errorColor,
           data: [{ x: 0, y: 0 }],
           legendValue: '0.0 tpm',
           title: 'HTTP 5xx',
@@ -124,7 +129,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis0);
+        ).toEqual(theme.euiColorSecondary);
       });
     });
 
@@ -136,7 +141,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis0);
+        ).toEqual(theme.euiColorSecondary);
       });
     });
 
@@ -148,7 +153,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis0);
+        ).toEqual(theme.euiColorSecondary);
       });
     });
 
@@ -160,7 +165,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis0);
+        ).toEqual(theme.euiColorSecondary);
       });
     });
 
@@ -172,7 +177,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis2);
+        ).toEqual(theme.euiColorDanger);
       });
     });
 
@@ -184,7 +189,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis2);
+        ).toEqual(theme.euiColorDanger);
       });
     });
 
@@ -196,7 +201,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis2);
+        ).toEqual(theme.euiColorDanger);
       });
     });
 
@@ -208,7 +213,7 @@ describe('chartSelectors', () => {
             ...apmTimeseries,
             tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }]
           })[0].color
-        ).toEqual(theme.euiColorVis2);
+        ).toEqual(theme.euiColorDanger);
       });
     });
 

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];
 }

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, euiColorWarning } = theme;
+
+export const errorColor = '#c23c2b';
+export const neutralColor = euiColorDarkShade;
+export const successColor = '#327a42';
+export const warningColor = euiColorWarning;
+
+const httpStatusCodeColors: StringMap<string> = {
+  1: neutralColor,
+  2: successColor,
+  3: neutralColor,
+  4: warningColor,
+  5: errorColor
+};
+
+function getStatusColor(status: number) {
+  return httpStatusCodeColors[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);
+  }
+}