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 [
-
au-heartbeat
-
+
@@ -188,13 +188,13 @@ Array [
-
nyc-heartbeat
-
+
@@ -265,13 +265,13 @@ Array [
-
spa-heartbeat
-
+
@@ -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`] =
-
Berlin
-
+
@@ -222,13 +225,13 @@ exports[`LocationStatusTags component renders when all locations are down 1`] =
-
Islamabad
-
+
@@ -393,13 +396,13 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = `
-
Berlin
-
+
@@ -470,13 +473,13 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = `
-
Islamabad
-
+
@@ -641,13 +644,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
-
Berlin
-
+
@@ -718,13 +721,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
-
Islamabad
-
+
@@ -795,13 +798,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
-
New York
-
+
@@ -872,13 +875,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
-
Paris
-
+
@@ -949,13 +952,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
-
Sydney
-
+
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`] = `
-
US-East
-
+
@@ -44,13 +44,13 @@ exports[`TagLabel component shallow render correctly against snapshot 1`] = `
-
US-East
-
+
`;
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();
+ const component = shallowWithIntl();
expect(component).toMatchSnapshot();
});
it('renders correctly against snapshot', () => {
- const component = renderWithIntl();
+ const component = renderWithIntl();
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 = ({ allLocations }) => {
name: LocationLabel,
truncateText: true,
render: (val: string, item: StatusTag) => {
- return ;
+ return ;
},
},
{
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 = ({ color, label }) => {
+export const TagLabel: React.FC = ({ color, label, status }) => {
return (
-
+
{label}
-
+
);
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
<>
{layerId === 'up_points' ? (
-
+
) : (
-
+
)}