[Synthetics] Fetch trend data when monitors are grouped (elastic#244551)

## Summary

1. Call `useOverviewTrendsRequests` in `GroupGridCardContent` so the
trend data is fetched when the monitors are groupped
2. Add a unit test to cover this case

Author: miguelmartin-elastic

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_group_item.test.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('../../../hooks/use_overview_trends_requests', () => ({
+  useOverviewTrendsRequests: jest.fn(),
+}));
+
+import { useOverviewTrendsRequests } from '../../../hooks/use_overview_trends_requests';
+import { GroupGridItem } from './grid_group_item';
+import type { OverviewStatusMetaData } from '../../types';
+import { WrappedHelper } from '../../../../../utils/testing';
+
+describe('GridGroupItem', () => {
+  const renderComponent = (props: Partial<React.ComponentProps<typeof GroupGridItem>> = {}) => {
+    const defaultProps: React.ComponentProps<typeof GroupGridItem> = {
+      loaded: false,
+      groupLabel: 'Test Group',
+      fullScreenGroup: '',
+      setFullScreenGroup: () => {},
+      groupMonitors: [],
+      setFlyoutConfigCallback: () => {},
+      view: 'cardView',
+    };
+    return render(
+      <WrappedHelper>
+        <GroupGridItem {...defaultProps} {...props} />
+      </WrappedHelper>
+    );
+  };
+  it('calls useOverviewTrendsRequests to fetch trends for visible monitors', () => {
+    const monitors = [
+      { configId: 'id1', locationId: 'loc1', schedule: 10 },
+      { configId: 'id2', locationId: 'loc2', schedule: 10 },
+    ] as unknown as OverviewStatusMetaData[];
+
+    renderComponent({ groupMonitors: monitors, loaded: true });
+    expect(useOverviewTrendsRequests).toHaveBeenCalledWith(expect.arrayContaining(monitors));
+  });
+});

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_group_item.tsx

@@ -28,6 +28,7 @@ import { selectOverviewStatus } from '../../../../../state/overview_status';
 import { MetricItem } from '../metric_item/metric_item';
 import type { OverviewView } from '../../../../../state';
 import { MonitorsTable } from '../compact_view/components/monitors_table';
+import { useOverviewTrendsRequests } from '../../../hooks/use_overview_trends_requests';
 
 const PER_ROW = 4;
 const DEFAULT_ROW_SIZE = 2;
@@ -47,6 +48,7 @@ const GroupGridCardContent = ({
     activePage * rowSize * PER_ROW,
     (activePage + 1) * rowSize * PER_ROW
   );
+  useOverviewTrendsRequests(visibleMonitors);
 
   const totalEntries = groupMonitors.length / PER_ROW;