[Synthetics] Fixed monitor history histogram and group by location issue (elastic#218550)

This PR closes elastic#217105 and closes elastic#217118 



https://github.com/user-attachments/assets/4426c5bc-dfda-483c-a974-3a3d6832d6c7

---------

Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>

Author: cesco-f

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/use_monitor_status_data.ts

@@ -53,11 +53,23 @@ export const useMonitorStatusData = ({ from, to, initialSizeRef }: Props) => {
   const dispatch = useDispatch();
   const { heatmap: dateHistogram, loading } = useSelector(selectHeatmap);
 
+  const getBinsNo = useCallback(
+    (maxNoOfBins: number) => {
+      // Each bin represents a time interval of at least 1 minute. If the available width allows for more bins
+      // than there are minutes in the time range, we cap the number of bins to match the number of minutes
+      // to ensure each bin represents a meaningful time interval.
+      return Math.min(maxNoOfBins, totalMinutes);
+    },
+    [totalMinutes]
+  );
+
   useEffect(() => {
     if (binsAvailableByWidth === null && initialSizeRef?.current) {
-      setBinsAvailableByWidth(Math.floor(initialSizeRef?.current?.clientWidth / CHART_CELL_WIDTH));
+      setBinsAvailableByWidth(
+        getBinsNo(Math.floor(initialSizeRef?.current?.clientWidth / CHART_CELL_WIDTH))
+      );
     }
-  }, [binsAvailableByWidth, initialSizeRef]);
+  }, [binsAvailableByWidth, initialSizeRef, getBinsNo]);
 
   useEffect(() => {
     if (monitor?.id && location?.label && debouncedBinsCount !== null && !!minsPerBin) {
@@ -88,8 +100,8 @@ export const useMonitorStatusData = ({ from, to, initialSizeRef }: Props) => {
 
   const handleResize = useCallback(
     (e: { width: number; height: number }) =>
-      setBinsAvailableByWidth(Math.floor(e.width / CHART_CELL_WIDTH)),
-    []
+      setBinsAvailableByWidth(getBinsNo(Math.floor(e.width / CHART_CELL_WIDTH))),
+    [getBinsNo]
   );
 
   useDebounce(

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

@@ -50,7 +50,8 @@ export const GridItemsByGroup = ({
     values: getSyntheticsFilterDisplayValues(locations, 'locations', allLocations),
     otherValues: {
       label: 'Without any location',
-      items: allConfigs?.filter((monitor) => get(monitor, 'locations', []).length === 0),
+      // All monitors should have a locationId. This array tracks monitors that are missing it, which helps identify potential issues
+      items: allConfigs?.filter((monitor) => !get(monitor, 'locationId')),
     },
   };
 
@@ -80,7 +81,8 @@ export const GridItemsByGroup = ({
               defaultMessage: 'Without any location',
             }
           ),
-          items: allConfigs?.filter((monitor) => !get(monitor, 'location')),
+          // All monitors should have a locationId. This array tracks monitors that are missing it, which helps identify potential issues
+          items: allConfigs?.filter((monitor) => !get(monitor, 'locationId')),
         },
       };
       break;