maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Uptime] Fix detail page down monitor location badge text color (#70778)

Browse source
This commit is contained in:
Shahzad 2020-07-06 17:09:30 +02:00 committed by GitHub
parent b172b5b777
commit 353f33297b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 71 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap generated
View file

@ -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",
}, },
] ]

57
x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap generated
View file

@ -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>

12
x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap generated
View file

@ -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>
`; `;

10
x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx
View file

@ -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 },
]; ];
}); });

4
x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx
View file

@ -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();
}); });
}); });

2
x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx
View file

@ -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} />;
}, },
}, },
{ {

6
x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx
View file

@ -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',
}); });
}); });

14
x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx
View file

@ -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>
); );

4
x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
View file

@ -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}>