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

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,
"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>

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

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

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', () => {
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();
});
});

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,
truncateText: true,
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 {
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',
});
});

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

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