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

fix uptime monitors donut chart labels (#86319)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Dominique Clarke 2020-12-22 15:41:33 -05:00 committed by GitHub
parent 978fa4325c
commit 23c9c7e302
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/donut_chart.test.tsx.snap generated
View file

@ -490,8 +490,9 @@ exports[`DonutChart component renders a donut chart 1`] = `
</span>
<span
class="euiFlexItem euiFlexItem--flexGrowZero c1"
data-test-subj="xpack.uptime.snapshot.donutChart.down.label"
>
Up
Down
</span>
<span
class="euiFlexItem c2"
@ -531,8 +532,9 @@ exports[`DonutChart component renders a donut chart 1`] = `
</span>
<span
class="euiFlexItem euiFlexItem--flexGrowZero c1"
data-test-subj="xpack.uptime.snapshot.donutChart.up.label"
>
Down
Up
</span>
<span
class="euiFlexItem c2"
@ -643,8 +645,9 @@ exports[`DonutChart component renders a green check when all monitors are up 1`]
</span>
<span
class="euiFlexItem euiFlexItem--flexGrowZero c2"
data-test-subj="xpack.uptime.snapshot.donutChart.down.label"
>
Up
Down
</span>
<span
class="euiFlexItem c3"
@ -684,8 +687,9 @@ exports[`DonutChart component renders a green check when all monitors are up 1`]
</span>
<span
class="euiFlexItem euiFlexItem--flexGrowZero c2"
data-test-subj="xpack.uptime.snapshot.donutChart.up.label"
>
Down
Up
</span>
<span
class="euiFlexItem c3"

21
x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/donut_chart_legend.test.tsx.snap generated
View file

@ -1,21 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DonutChartLegend applies valid props as expected 1`] = `
<styled.div>
<DonutChartLegendRow
color="#bd271e"
content={23}
data-test-subj="xpack.uptime.snapshot.donutChart.down"
message="Up"
/>
<EuiSpacer
size="m"
/>
<DonutChartLegendRow
color="#d3dae6"
content={45}
data-test-subj="xpack.uptime.snapshot.donutChart.up"
message="Down"
/>
</styled.div>
`;

1
x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/donut_chart_legend_row.test.tsx.snap generated
View file

@ -15,6 +15,7 @@ exports[`DonutChartLegendRow passes appropriate props 1`] = `
</Styled(EuiFlexItem)>
<Styled(EuiFlexItem)
component="span"
data-test-subj="foo.label"
grow={false}
>
Foo

24
x-pack/plugins/uptime/public/components/common/charts/__tests__/donut_chart_legend.test.tsx
View file

@ -3,14 +3,30 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { renderWithIntl } from '@kbn/test/jest';
import { DonutChartLegend } from '../donut_chart_legend';
import { shallowWithIntl } from '@kbn/test/jest';
import React from 'react';
import { STATUS_DOWN_LABEL, STATUS_UP_LABEL } from '../../translations';
describe('DonutChartLegend', () => {
it('applies valid props as expected', () => {
const wrapper = shallowWithIntl(<DonutChartLegend down={23} up={45} />);
expect(wrapper).toMatchSnapshot();
const up = 45;
const down = 23;
const component = renderWithIntl(<DonutChartLegend down={down} up={up} />);
expect(
component.find('[data-test-subj="xpack.uptime.snapshot.donutChart.up.label"]').text()
).toBe(STATUS_UP_LABEL);
expect(component.find('[data-test-subj="xpack.uptime.snapshot.donutChart.up"]').text()).toBe(
`${up}`
);
expect(
component.find('[data-test-subj="xpack.uptime.snapshot.donutChart.down.label"]').text()
).toBe(STATUS_DOWN_LABEL);
expect(component.find('[data-test-subj="xpack.uptime.snapshot.donutChart.down"]').text()).toBe(
`${down}`
);
});
});

4
x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx
View file

@ -34,14 +34,14 @@ export const DonutChartLegend = ({ down, up }: Props) => {
<DonutChartLegendRow
color={danger}
content={down}
message={STATUS_UP_LABEL}
message={STATUS_DOWN_LABEL}
data-test-subj={'xpack.uptime.snapshot.donutChart.down'}
/>
<EuiSpacer size="m" />
<DonutChartLegendRow
color={gray}
content={up}
message={STATUS_DOWN_LABEL}
message={STATUS_UP_LABEL}
data-test-subj={'xpack.uptime.snapshot.donutChart.up'}
/>
</LegendContainer>

2
x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend_row.tsx
View file

@ -31,7 +31,7 @@ export const DonutChartLegendRow = ({ color, content, message, 'data-test-subj':
<EuiFlexItemReducedMargin component="span" grow={false}>
<EuiHealth color={color} />
</EuiFlexItemReducedMargin>
<EuiFlexItemReducedMargin component="span" grow={false}>
<EuiFlexItemReducedMargin component="span" grow={false} data-test-subj={`${dts}.label`}>
{message}
</EuiFlexItemReducedMargin>
<EuiFlexItemAlignRight component="span" data-test-subj={dts}>