Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jul 6, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7715348
update badge color
shahzad31 Jul 6, 2020
15b837b
Merge branch 'master' into fix-down-badge-color
shahzad31 Jul 6, 2020
4797141
fix types
shahzad31 Jul 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions ...tails/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 30 additions & 27 deletions ...details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions ...tor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 9 additions & 1 deletion ...s/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
];
});

Expand Down
4 changes: 2 additions & 2 deletions ...lic/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 1 addition & 1 deletion ...ublic/components/monitor/status_details/availability_reporting/availability_reporting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
},
},
{
Expand Down
6 changes: 4 additions & 2 deletions .../public/components/monitor/status_details/availability_reporting/location_status_tags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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',
});
});

Expand Down
14 changes: 5 additions & 9 deletions ...gins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions ...uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down