fix uptime monitors donut chart labels (#86319)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
978fa4325c
commit
23c9c7e302
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
`;
|
|
@ -15,6 +15,7 @@ exports[`DonutChartLegendRow passes appropriate props 1`] = `
|
|||
</Styled(EuiFlexItem)>
|
||||
<Styled(EuiFlexItem)
|
||||
component="span"
|
||||
data-test-subj="foo.label"
|
||||
grow={false}
|
||||
>
|
||||
Foo
|
||||
|
|
|
@ -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}`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}>
|
||||
|
|
Loading…
Reference in a new issue