Changing status code colors on trace summary (elastic#47114) (elastic…

…#47132)
flash1293 · Oct 3, 2019 · ace757c · ace757c
1 parent 33215ed
commit ace757c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/...oSummaryItem/HttpInfoSummaryItem.test.tsx → ...tem/__test__/HttpInfoSummaryItem.test.tsx b/...oSummaryItem/HttpInfoSummaryItem.test.tsx → ...tem/__test__/HttpInfoSummaryItem.test.tsx
@@ -6,29 +6,40 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { palettes } from '@elastic/eui';
-import { HttpInfoSummaryItem } from './';
-import * as exampleTransactions from '../__fixtures__/transactions';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { HttpInfoSummaryItem } from '../';
+import * as exampleTransactions from '../../__fixtures__/transactions';
 
 describe('HttpInfoSummaryItem', () => {
   describe('render', () => {
     const transaction = exampleTransactions.httpOk;
     const url = 'https://example.com';
     const method = 'get';
-    const props = { transaction, url, method, status: 200 };
+    const props = { transaction, url, method, status: 100 };
 
     it('renders', () => {
       expect(() =>
         shallow(<HttpInfoSummaryItem {...props} />)
       ).not.toThrowError();
     });
 
-    describe('with status code 200', () => {
+    describe('with status code 100', () => {
       it('shows a success color', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...props} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[0]
+          theme.euiColorDarkShade
+        );
+      });
+    });
+
+    describe('with status code 200', () => {
+      it('shows a success color', () => {
+        const p = { ...props, status: 200 };
+        const wrapper = mount(<HttpInfoSummaryItem {...p} />);
+
+        expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
+          theme.euiColorSecondary
         );
       });
     });
@@ -40,7 +51,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[4]
+          theme.euiColorDarkShade
         );
       });
     });
@@ -52,7 +63,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[9]
+          theme.euiColorWarning
         );
       });
     });
@@ -64,7 +75,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[9]
+          theme.euiColorDanger
         );
       });
     });

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx
@@ -6,24 +6,26 @@
 
 import React from 'react';
 import { EuiToolTip, EuiBadge } from '@elastic/eui';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import { palettes } from '@elastic/eui';
 import { units, px, truncate, unit } from '../../../../style/variables';
 import { statusCodes } from './statusCodes';
 
-const statusColors = {
-  success: palettes.euiPaletteForStatus.colors[0],
-  warning: palettes.euiPaletteForStatus.colors[4],
-  error: palettes.euiPaletteForStatus.colors[9]
-};
+const {
+  euiColorDarkShade,
+  euiColorSecondary,
+  euiColorWarning,
+  euiColorDanger
+} = theme;
 
 function getStatusColor(status: number) {
   const colors: { [key: string]: string } = {
-    2: statusColors.success,
-    3: statusColors.warning,
-    4: statusColors.error,
-    5: statusColors.error
+    1: euiColorDarkShade,
+    2: euiColorSecondary,
+    3: euiColorDarkShade,
+    4: euiColorWarning,
+    5: euiColorDanger
   };
 
   return colors[status.toString().substr(0, 1)] || 'default';