[Uptime] Fix detail page down monitor location badge text color (#70778)
This commit is contained in:
parent
b172b5b777
commit
353f33297b
9 changed files with 71 additions and 59 deletions
|
@ -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",
|
||||
},
|
||||
]
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
@ -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 },
|
||||
];
|
||||
});
|
||||
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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',
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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}>
|
||||
|
|
Loading…
Reference in a new issue