From 353f33297b12b6f89effce7926102d3c2b4fb546 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Mon, 6 Jul 2020 17:09:30 +0200
Subject: [PATCH] [Uptime] Fix detail page down monitor location badge text
 color (#70778)

---
 .../availability_reporting.test.tsx.snap      | 21 ++++---
 .../location_status_tags.test.tsx.snap        | 57 ++++++++++---------
 .../__snapshots__/tag_label.test.tsx.snap     | 12 ++--
 .../__tests__/availability_reporting.test.tsx | 10 +++-
 .../__tests__/tag_label.test.tsx              |  4 +-
 .../availability_reporting.tsx                |  2 +-
 .../location_status_tags.tsx                  |  6 +-
 .../availability_reporting/tag_label.tsx      | 14 ++---
 .../location_map/embeddables/map_tool_tip.tsx |  4 +-
 9 files changed, 71 insertions(+), 59 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap
index 9496274a6917..823346db3518 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap
@@ -111,13 +111,13 @@ Array [
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--default"
                         >
                           <h4>
                             au-heartbeat
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -188,13 +188,13 @@ Array [
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             nyc-heartbeat
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -265,13 +265,13 @@ Array [
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             spa-heartbeat
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -356,18 +356,21 @@ exports[`AvailabilityReporting component shallow renders correctly against snaps
           "availability": 100,
           "color": "#d3dae6",
           "label": "au-heartbeat",
+          "status": "up",
           "timestamp": "36m ago",
         },
         Object {
           "availability": 100,
           "color": "#d3dae6",
           "label": "nyc-heartbeat",
+          "status": "down",
           "timestamp": "36m ago",
         },
         Object {
           "availability": 100,
           "color": "#d3dae6",
           "label": "spa-heartbeat",
+          "status": "down",
           "timestamp": "36m ago",
         },
       ]
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap
index 05e0b50a86f3..4d3e85ba18eb 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap
@@ -10,18 +10,21 @@ exports[`LocationStatusTags component renders properly against props 1`] = `
             "availability": 100,
             "color": "#d3dae6",
             "label": "Berlin",
+            "status": "up",
             "timestamp": "1 Mon ago",
           },
           Object {
             "availability": 100,
             "color": "#bd271e",
             "label": "Berlin",
+            "status": "down",
             "timestamp": "1 Mon ago",
           },
           Object {
             "availability": 100,
             "color": "#d3dae6",
             "label": "Islamabad",
+            "status": "up",
             "timestamp": "1 Mon ago",
           },
         ]
@@ -145,13 +148,13 @@ exports[`LocationStatusTags component renders when all locations are down 1`] =
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             Berlin
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -222,13 +225,13 @@ exports[`LocationStatusTags component renders when all locations are down 1`] =
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             Islamabad
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -393,13 +396,13 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = `
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--default"
                         >
                           <h4>
                             Berlin
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -470,13 +473,13 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = `
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--default"
                         >
                           <h4>
                             Islamabad
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -641,13 +644,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             Berlin
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -718,13 +721,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             Islamabad
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -795,13 +798,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             New York
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -872,13 +875,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             Paris
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
@@ -949,13 +952,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                       <span
                         class="euiBadge__text"
                       >
-                        <div
-                          class="euiText euiText--small"
+                        <span
+                          class="euiTextColor euiTextColor--ghost"
                         >
                           <h4>
                             Sydney
                           </h4>
-                        </div>
+                        </span>
                       </span>
                     </span>
                   </span>
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap
index 3381efa62286..28f1f433648c 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap
@@ -26,13 +26,13 @@ exports[`TagLabel component renders correctly against snapshot 1`] = `
       <span
         class="euiBadge__text"
       >
-        <div
-          class="euiText euiText--small"
+        <span
+          class="euiTextColor euiTextColor--ghost"
         >
           <h4>
             US-East
           </h4>
-        </div>
+        </span>
       </span>
     </span>
   </span>
@@ -44,13 +44,13 @@ exports[`TagLabel component shallow render correctly against snapshot 1`] = `
   <EuiBadge
     color="#fff"
   >
-    <EuiText
-      size="s"
+    <EuiTextColor
+      color="default"
     >
       <h4>
         US-East
       </h4>
-    </EuiText>
+    </EuiTextColor>
   </EuiBadge>
 </styled.div>
 `;
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx
index de9f6b0d3b30..b5fe5d17312c 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx
@@ -19,14 +19,22 @@ describe('AvailabilityReporting component', () => {
         timestamp: '36m ago',
         color: '#d3dae6',
         availability: 100,
+        status: 'up',
       },
       {
         label: 'nyc-heartbeat',
         timestamp: '36m ago',
         color: '#d3dae6',
         availability: 100,
+        status: 'down',
+      },
+      {
+        label: 'spa-heartbeat',
+        timestamp: '36m ago',
+        color: '#d3dae6',
+        availability: 100,
+        status: 'down',
       },
-      { label: 'spa-heartbeat', timestamp: '36m ago', color: '#d3dae6', availability: 100 },
     ];
   });
 
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx
index 356078412229..8e46196ec3ab 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx
@@ -10,12 +10,12 @@ import { TagLabel } from '../tag_label';
 
 describe('TagLabel component', () => {
   it('shallow render correctly against snapshot', () => {
-    const component = shallowWithIntl(<TagLabel color={'#fff'} label={'US-East'} />);
+    const component = shallowWithIntl(<TagLabel color={'#fff'} label={'US-East'} status={'up'} />);
     expect(component).toMatchSnapshot();
   });
 
   it('renders correctly against snapshot', () => {
-    const component = renderWithIntl(<TagLabel color={'#fff'} label={'US-East'} />);
+    const component = renderWithIntl(<TagLabel color={'#fff'} label={'US-East'} status={'down'} />);
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx
index 8fed5db5e027..ccf7d41642bf 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx
@@ -30,7 +30,7 @@ export const AvailabilityReporting: React.FC<Props> = ({ allLocations }) => {
       name: LocationLabel,
       truncateText: true,
       render: (val: string, item: StatusTag) => {
-        return <TagLabel color={item.color} label={item.label} />;
+        return <TagLabel {...item} />;
       },
     },
     {
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx
index 6096499213a1..b48252d4208d 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx
@@ -24,9 +24,10 @@ interface Props {
 
 export interface StatusTag {
   label: string;
-  timestamp: string;
+  timestamp?: string;
   color: string;
-  availability: number;
+  availability?: number;
+  status: 'up' | 'down';
 }
 
 export const LocationStatusTags = ({ locations }: Props) => {
@@ -48,6 +49,7 @@ export const LocationStatusTags = ({ locations }: Props) => {
       timestamp: moment(new Date(item.timestamp).valueOf()).fromNow(),
       color: item.summary.down === 0 ? gray : danger,
       availability: (item.up_history / (item.up_history + item.down_history)) * 100,
+      status: item.summary.down === 0 ? 'up' : 'down',
     });
   });
 
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx
index dbd73fc7d440..ec5718415595 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx
@@ -6,7 +6,8 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { EuiBadge, EuiText } from '@elastic/eui';
+import { EuiBadge, EuiTextColor } from '@elastic/eui';
+import { StatusTag } from './location_status_tags';
 
 const BadgeItem = styled.div`
   white-space: nowrap;
@@ -17,18 +18,13 @@ const BadgeItem = styled.div`
   }
 `;
 
-interface Props {
-  color: string;
-  label: string;
-}
-
-export const TagLabel: React.FC<Props> = ({ color, label }) => {
+export const TagLabel: React.FC<StatusTag> = ({ color, label, status }) => {
   return (
     <BadgeItem>
       <EuiBadge color={color}>
-        <EuiText size="s">
+        <EuiTextColor color={status === 'down' ? 'ghost' : 'default'}>
           <h4>{label}</h4>
-        </EuiText>
+        </EuiTextColor>
       </EuiBadge>
     </BadgeItem>
   );
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
index bf403846dcec..8c66b57de58a 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
@@ -64,9 +64,9 @@ export const MapToolTipComponent = ({ closeTooltip, features = [] }: MapToolTipP
       <>
         <EuiPopoverTitle>
           {layerId === 'up_points' ? (
-            <TagLabel label={locationName} color={gray} />
+            <TagLabel label={locationName} color={gray} status="up" />
           ) : (
-            <TagLabel label={locationName} color={danger} />
+            <TagLabel label={locationName} color={danger} status="down" />
           )}
         </EuiPopoverTitle>
         <EuiDescriptionList type="column" textStyle="reverse" compressed={true}>