[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
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--default"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
au-heartbeat
|
au-heartbeat
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -188,13 +188,13 @@ Array [
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
nyc-heartbeat
|
nyc-heartbeat
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -265,13 +265,13 @@ Array [
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
spa-heartbeat
|
spa-heartbeat
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -356,18 +356,21 @@ exports[`AvailabilityReporting component shallow renders correctly against snaps
|
||||||
"availability": 100,
|
"availability": 100,
|
||||||
"color": "#d3dae6",
|
"color": "#d3dae6",
|
||||||
"label": "au-heartbeat",
|
"label": "au-heartbeat",
|
||||||
|
"status": "up",
|
||||||
"timestamp": "36m ago",
|
"timestamp": "36m ago",
|
||||||
},
|
},
|
||||||
Object {
|
Object {
|
||||||
"availability": 100,
|
"availability": 100,
|
||||||
"color": "#d3dae6",
|
"color": "#d3dae6",
|
||||||
"label": "nyc-heartbeat",
|
"label": "nyc-heartbeat",
|
||||||
|
"status": "down",
|
||||||
"timestamp": "36m ago",
|
"timestamp": "36m ago",
|
||||||
},
|
},
|
||||||
Object {
|
Object {
|
||||||
"availability": 100,
|
"availability": 100,
|
||||||
"color": "#d3dae6",
|
"color": "#d3dae6",
|
||||||
"label": "spa-heartbeat",
|
"label": "spa-heartbeat",
|
||||||
|
"status": "down",
|
||||||
"timestamp": "36m ago",
|
"timestamp": "36m ago",
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
|
@ -10,18 +10,21 @@ exports[`LocationStatusTags component renders properly against props 1`] = `
|
||||||
"availability": 100,
|
"availability": 100,
|
||||||
"color": "#d3dae6",
|
"color": "#d3dae6",
|
||||||
"label": "Berlin",
|
"label": "Berlin",
|
||||||
|
"status": "up",
|
||||||
"timestamp": "1 Mon ago",
|
"timestamp": "1 Mon ago",
|
||||||
},
|
},
|
||||||
Object {
|
Object {
|
||||||
"availability": 100,
|
"availability": 100,
|
||||||
"color": "#bd271e",
|
"color": "#bd271e",
|
||||||
"label": "Berlin",
|
"label": "Berlin",
|
||||||
|
"status": "down",
|
||||||
"timestamp": "1 Mon ago",
|
"timestamp": "1 Mon ago",
|
||||||
},
|
},
|
||||||
Object {
|
Object {
|
||||||
"availability": 100,
|
"availability": 100,
|
||||||
"color": "#d3dae6",
|
"color": "#d3dae6",
|
||||||
"label": "Islamabad",
|
"label": "Islamabad",
|
||||||
|
"status": "up",
|
||||||
"timestamp": "1 Mon ago",
|
"timestamp": "1 Mon ago",
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
@ -145,13 +148,13 @@ exports[`LocationStatusTags component renders when all locations are down 1`] =
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
Berlin
|
Berlin
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -222,13 +225,13 @@ exports[`LocationStatusTags component renders when all locations are down 1`] =
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
Islamabad
|
Islamabad
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -393,13 +396,13 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = `
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--default"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
Berlin
|
Berlin
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -470,13 +473,13 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = `
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--default"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
Islamabad
|
Islamabad
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -641,13 +644,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
Berlin
|
Berlin
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -718,13 +721,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
Islamabad
|
Islamabad
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -795,13 +798,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
New York
|
New York
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -872,13 +875,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
Paris
|
Paris
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -949,13 +952,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
Sydney
|
Sydney
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -26,13 +26,13 @@ exports[`TagLabel component renders correctly against snapshot 1`] = `
|
||||||
<span
|
<span
|
||||||
class="euiBadge__text"
|
class="euiBadge__text"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="euiText euiText--small"
|
class="euiTextColor euiTextColor--ghost"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
US-East
|
US-East
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -44,13 +44,13 @@ exports[`TagLabel component shallow render correctly against snapshot 1`] = `
|
||||||
<EuiBadge
|
<EuiBadge
|
||||||
color="#fff"
|
color="#fff"
|
||||||
>
|
>
|
||||||
<EuiText
|
<EuiTextColor
|
||||||
size="s"
|
color="default"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
US-East
|
US-East
|
||||||
</h4>
|
</h4>
|
||||||
</EuiText>
|
</EuiTextColor>
|
||||||
</EuiBadge>
|
</EuiBadge>
|
||||||
</styled.div>
|
</styled.div>
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -19,14 +19,22 @@ describe('AvailabilityReporting component', () => {
|
||||||
timestamp: '36m ago',
|
timestamp: '36m ago',
|
||||||
color: '#d3dae6',
|
color: '#d3dae6',
|
||||||
availability: 100,
|
availability: 100,
|
||||||
|
status: 'up',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'nyc-heartbeat',
|
label: 'nyc-heartbeat',
|
||||||
timestamp: '36m ago',
|
timestamp: '36m ago',
|
||||||
color: '#d3dae6',
|
color: '#d3dae6',
|
||||||
availability: 100,
|
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', () => {
|
describe('TagLabel component', () => {
|
||||||
it('shallow render correctly against snapshot', () => {
|
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();
|
expect(component).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders correctly against snapshot', () => {
|
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();
|
expect(component).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -30,7 +30,7 @@ export const AvailabilityReporting: React.FC<Props> = ({ allLocations }) => {
|
||||||
name: LocationLabel,
|
name: LocationLabel,
|
||||||
truncateText: true,
|
truncateText: true,
|
||||||
render: (val: string, item: StatusTag) => {
|
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 {
|
export interface StatusTag {
|
||||||
label: string;
|
label: string;
|
||||||
timestamp: string;
|
timestamp?: string;
|
||||||
color: string;
|
color: string;
|
||||||
availability: number;
|
availability?: number;
|
||||||
|
status: 'up' | 'down';
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LocationStatusTags = ({ locations }: Props) => {
|
export const LocationStatusTags = ({ locations }: Props) => {
|
||||||
|
@ -48,6 +49,7 @@ export const LocationStatusTags = ({ locations }: Props) => {
|
||||||
timestamp: moment(new Date(item.timestamp).valueOf()).fromNow(),
|
timestamp: moment(new Date(item.timestamp).valueOf()).fromNow(),
|
||||||
color: item.summary.down === 0 ? gray : danger,
|
color: item.summary.down === 0 ? gray : danger,
|
||||||
availability: (item.up_history / (item.up_history + item.down_history)) * 100,
|
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 React from 'react';
|
||||||
import styled from 'styled-components';
|
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`
|
const BadgeItem = styled.div`
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -17,18 +18,13 @@ const BadgeItem = styled.div`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface Props {
|
export const TagLabel: React.FC<StatusTag> = ({ color, label, status }) => {
|
||||||
color: string;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const TagLabel: React.FC<Props> = ({ color, label }) => {
|
|
||||||
return (
|
return (
|
||||||
<BadgeItem>
|
<BadgeItem>
|
||||||
<EuiBadge color={color}>
|
<EuiBadge color={color}>
|
||||||
<EuiText size="s">
|
<EuiTextColor color={status === 'down' ? 'ghost' : 'default'}>
|
||||||
<h4>{label}</h4>
|
<h4>{label}</h4>
|
||||||
</EuiText>
|
</EuiTextColor>
|
||||||
</EuiBadge>
|
</EuiBadge>
|
||||||
</BadgeItem>
|
</BadgeItem>
|
||||||
);
|
);
|
||||||
|
|
|
@ -64,9 +64,9 @@ export const MapToolTipComponent = ({ closeTooltip, features = [] }: MapToolTipP
|
||||||
<>
|
<>
|
||||||
<EuiPopoverTitle>
|
<EuiPopoverTitle>
|
||||||
{layerId === 'up_points' ? (
|
{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>
|
</EuiPopoverTitle>
|
||||||
<EuiDescriptionList type="column" textStyle="reverse" compressed={true}>
|
<EuiDescriptionList type="column" textStyle="reverse" compressed={true}>
|
||||||
|
|
Loading…
Reference in a new issue