[7.x] [Uptime] Fix detail page down monitor location badge text color (…

…#70778) (#70832)
elastic · Jul 6, 2020 · 77beddd · 77beddd
1 parent 166dc33
commit 77beddd
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 59 deletions.
diff --git a/...tails/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap b/...tails/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap
diff --git a/...details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap b/...details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap
diff --git a/...tor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap b/...tor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap
diff --git a/...s/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx b/...s/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/...lic/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx b/...lic/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/...ublic/components/monitor/status_details/availability_reporting/availability_reporting.tsx b/...ublic/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/.../public/components/monitor/status_details/availability_reporting/location_status_tags.tsx b/.../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/...gins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx b/...gins/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/...uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx b/...uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
@@ -66,9 +66,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}>