From 8bf0a3cceb1a543e8ac249f6fb99764a1b536a98 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Sun, 4 Oct 2020 23:19:32 -0500
Subject: [PATCH] [APM] Service Inventory Updated the `EuiBadge` to use the
 `behind_text` vars instead of the base colors for the health status badges
 (#77844) (#79244)

* Use behind_text colors in health status
* Separated badge color usage from getSeverityColor

Co-authored-by: Ashik Meerankutty <ashik9591@gmail.com>
---
 .../plugins/apm/common/service_health_status.ts  | 16 ++++++++++++++++
 .../ServiceOverview/ServiceList/HealthBadge.tsx  |  4 ++--
 .../__snapshots__/ServiceOverview.test.tsx.snap  |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/apm/common/service_health_status.ts b/x-pack/plugins/apm/common/service_health_status.ts
index 1d4bcfb3b0e07..f66e03a9733a3 100644
--- a/x-pack/plugins/apm/common/service_health_status.ts
+++ b/x-pack/plugins/apm/common/service_health_status.ts
@@ -54,6 +54,22 @@ export function getServiceHealthStatusColor(
   }
 }
 
+export function getServiceHealthStatusBadgeColor(
+  theme: EuiTheme,
+  status: ServiceHealthStatus
+) {
+  switch (status) {
+    case ServiceHealthStatus.healthy:
+      return theme.eui.euiColorVis0_behindText;
+    case ServiceHealthStatus.warning:
+      return theme.eui.euiColorVis5_behindText;
+    case ServiceHealthStatus.critical:
+      return theme.eui.euiColorVis9_behindText;
+    case ServiceHealthStatus.unknown:
+      return theme.eui.euiColorMediumShade;
+  }
+}
+
 export function getServiceHealthStatusLabel(status: ServiceHealthStatus) {
   switch (status) {
     case ServiceHealthStatus.critical:
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/HealthBadge.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/HealthBadge.tsx
index c6be0a352ef66..e8ad3e65b1a47 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/HealthBadge.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/HealthBadge.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { EuiBadge } from '@elastic/eui';
 import {
-  getServiceHealthStatusColor,
+  getServiceHealthStatusBadgeColor,
   getServiceHealthStatusLabel,
   ServiceHealthStatus,
 } from '../../../../../common/service_health_status';
@@ -20,7 +20,7 @@ export function HealthBadge({
   const theme = useTheme();
 
   return (
-    <EuiBadge color={getServiceHealthStatusColor(theme, healthStatus)}>
+    <EuiBadge color={getServiceHealthStatusBadgeColor(theme, healthStatus)}>
       {getServiceHealthStatusLabel(healthStatus)}
     </EuiBadge>
   );
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
index 40a2b6a5fa81b..ee3a4fce0dbaa 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
@@ -153,7 +153,7 @@ NodeList [
       >
         <span
           class="euiBadge euiBadge--iconLeft"
-          style="background-color: rgb(214, 191, 87); color: rgb(0, 0, 0);"
+          style="background-color: rgb(241, 216, 111); color: rgb(0, 0, 0);"
           title="Warning"
         >
           <span