fix uptime monitors donut chart labels (#86319)

Co-authored-by: Kibana Machine <[email protected]>

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

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

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

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

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

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