[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.

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__/donut_chart_legend_row.test.tsx

@@ -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/donut_chart.tsx

@@ -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/donut_chart_legend.tsx

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

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

@@ -23,16 +23,19 @@ interface Props {
   color: string;
   message: string;
   content: string | number;
+  'data-test-subj': string;
 }
 
-export const DonutChartLegendRow = ({ color, content, message }: Props) => (
+export const DonutChartLegendRow = ({ color, content, message, 'data-test-subj': dts }: Props) => (
   <EuiFlexGroup gutterSize="l" responsive={false}>
     <EuiFlexItemReducedMargin component="span" grow={false}>
       <EuiHealth color={color} />
     </EuiFlexItemReducedMargin>
     <EuiFlexItemReducedMargin component="span" grow={false}>
       {message}
     </EuiFlexItemReducedMargin>
-    <EuiFlexItemAlignRight component="span">{content}</EuiFlexItemAlignRight>
+    <EuiFlexItemAlignRight component="span" data-test-subj={dts}>
+      {content}
+    </EuiFlexItemAlignRight>
   </EuiFlexGroup>
 );

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/data.json

@@ -271,7 +271,6 @@
             "monitor": {
               "id": null,
               "name": "elastic",
-              "status": "mixed",
               "type": null,
               "__typename": "MonitorState"
             },
@@ -377,7 +376,6 @@
             "monitor": {
               "id": null,
               "name": null,
-              "status": "mixed",
               "type": null,
               "__typename": "MonitorState"
             },

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_status_column.tsx

@@ -20,8 +20,6 @@ const getHealthColor = (status: string): string => {
       return 'success';
     case 'down':
       return 'danger';
-    case 'mixed':
-      return 'warning';
     default:
       return '';
   }
@@ -37,10 +35,6 @@ const getHealthMessage = (status: string): string | null => {
       return i18n.translate('xpack.uptime.monitorList.statusColumn.downLabel', {
         defaultMessage: 'Down',
       });
-    case 'mixed':
-      return i18n.translate('xpack.uptime.monitorList.statusColumn.mixedLabel', {
-        defaultMessage: 'Mixed',
-      });
     default:
       return null;
   }

x-pack/legacy/plugins/uptime/public/state/api/__tests__/snapshot.test.ts

@@ -14,7 +14,7 @@ describe('snapshot API', () => {
     fetchMock = jest.spyOn(window, 'fetch');
     mockResponse = {
       ok: true,
-      json: () => new Promise(r => r({ up: 3, down: 12, mixed: 0, total: 15 })),
+      json: () => new Promise(r => r({ up: 3, down: 12, total: 15 })),
     };
   });
 
@@ -34,7 +34,7 @@ describe('snapshot API', () => {
     expect(fetchMock).toHaveBeenCalledWith(
       '/api/uptime/snapshot/count?dateRangeStart=now-15m&dateRangeEnd=now&filters=monitor.id%3A%22auto-http-0X21EE76EAC459873F%22&statusFilter=up'
     );
-    expect(resp).toEqual({ up: 3, down: 12, mixed: 0, total: 15 });
+    expect(resp).toEqual({ up: 3, down: 12, total: 15 });
   });
 
   it(`throws when server response doesn't correspond to expected type`, async () => {

x-pack/legacy/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts

@@ -21,7 +21,7 @@ describe('snapshot reducer', () => {
     expect(
       snapshotReducer(
         {
-          count: { down: 1, mixed: 0, total: 4, up: 3 },
+          count: { down: 1, total: 4, up: 3 },
           errors: [],
           loading: false,
         },
@@ -47,7 +47,6 @@ describe('snapshot reducer', () => {
       payload: {
         up: 10,
         down: 15,
-        mixed: 0,
         total: 25,
       },
     };

x-pack/legacy/plugins/uptime/public/state/reducers/snapshot.ts

@@ -21,7 +21,6 @@ export interface SnapshotState {
 const initialState: SnapshotState = {
   count: {
     down: 0,
-    mixed: 0,
     total: 0,
     up: 0,
   },

x-pack/legacy/plugins/uptime/public/state/selectors/__tests__/index.test.ts

@@ -19,7 +19,6 @@ describe('state selectors', () => {
       count: {
         up: 2,
         down: 0,
-        mixed: 0,
         total: 2,
       },
       errors: [],