[Uptime] Improve query performance with Heartbeat 7.6+ data. (#52433) (#54352)

This PR optimizes both the snapshot component and the monitor list on the overview page by using the new monitor.timespan field from elastic/beats#14778. Note that the functionality here will work with heartbeats lacking that patch, but the performance improvements will be absent.

This PR adapts the snapshot tests to use synthetically generated data which should be easier to maintain. As a result some of that code is refactored as well.

See #52433 parent issue as well.

Author: andrewvc

x-pack/legacy/plugins/uptime/common/graphql/introspection.json

@@ -2173,18 +2173,6 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
-          {
-            "name": "mixed",
-            "description": "",
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": { "kind": "SCALAR", "name": "Int", "ofType": null }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
           {
             "name": "total",
             "description": "",

x-pack/legacy/plugins/uptime/common/graphql/types.ts

@@ -419,8 +419,6 @@ export interface SnapshotCount {
 
   down: number;
 
-  mixed: number;
-
   total: number;
 }
 

x-pack/legacy/plugins/uptime/common/runtime_types/snapshot/snapshot_count.ts

@@ -8,7 +8,6 @@ import * as t from 'io-ts';
 
 export const SnapshotType = t.type({
   down: t.number,
-  mixed: t.number,
   total: t.number,
   up: t.number,
 });

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/snapshot.test.tsx

@@ -13,7 +13,6 @@ describe('Snapshot component', () => {
   const snapshot: Snapshot = {
     up: 8,
     down: 2,
-    mixed: 0,
     total: 10,
   };
 

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/__snapshots__/donut_chart.test.tsx.snap

@@ -11,7 +11,7 @@ import React from 'react';
 describe('DonutChartLegendRow', () => {
   it('passes appropriate props', () => {
     const wrapper = shallowWithIntl(
-      <DonutChartLegendRow color="green" message="Foo" content={23} />
+      <DonutChartLegendRow color="green" message="Foo" content={23} data-test-subj="foo" />
     );
     expect(wrapper).toMatchSnapshot();
   });

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/__snapshots__/donut_chart_legend.test.tsx.snap

@@ -73,7 +73,7 @@ export const DonutChart = ({ height, down, up, width }: DonutChartProps) => {
     <EuiFlexGroup alignItems="center" responsive={false}>
       <EuiFlexItem grow={false}>
         <svg
-          aria-label={i18n.translate('xpack.uptime.donutChart.ariaLabel', {
+          aria-label={i18n.translate('xpack.uptime.snapshot.donutChart.ariaLabel', {
             defaultMessage:
               'Pie chart showing the current status. {down} of {total} monitors are down.',
             values: { down, total: up + down },

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/__snapshots__/donut_chart_legend_row.test.tsx.snap

@@ -34,17 +34,19 @@ export const DonutChartLegend = ({ down, up }: Props) => {
       <DonutChartLegendRow
         color={danger}
         content={down}
-        message={i18n.translate('xpack.uptime.donutChart.legend.downRowLabel', {
+        message={i18n.translate('xpack.uptime.snapshot.donutChart.legend.downRowLabel', {
           defaultMessage: 'Down',
         })}
+        data-test-subj={'xpack.uptime.snapshot.donutChart.down'}
       />
       <EuiSpacer size="m" />
       <DonutChartLegendRow
         color={gray}
         content={up}
-        message={i18n.translate('xpack.uptime.donutChart.legend.upRowLabel', {
+        message={i18n.translate('xpack.uptime.snapshot.donutChart.legend.upRowLabel', {
           defaultMessage: 'Up',
         })}
+        data-test-subj={'xpack.uptime.snapshot.donutChart.up'}
       />
     </LegendContainer>
   );