From ce1ec3178d1c329fe287d49cfc03681682f89b79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 17 Nov 2022 13:10:19 +0100
Subject: [PATCH] [Synthetics UI] Filter history stats by location (#145515)

## Summary

Related to #144857. Ensure the stats in the history page also take into
account the monitor location.
---
 .../monitor_summary/monitor_complete_count.tsx           | 9 +++++++--
 .../monitor_summary/monitor_complete_sparklines.tsx      | 9 +++++++--
 .../monitor_summary/monitor_total_runs_count.tsx         | 9 +++++++--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
index fd2e9f5f1b2bc3..68501cc6283224 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_count.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { ReportTypes } from '@kbn/observability-plugin/public';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
+import { useSelectedLocation } from '../hooks/use_selected_location';
 
 interface MonitorCompleteCountProps {
   from: string;
@@ -22,8 +23,9 @@ export const MonitorCompleteCount = (props: MonitorCompleteCountProps) => {
   const { ExploratoryViewEmbeddable } = observability;
 
   const monitorId = useMonitorQueryId();
+  const selectedLocation = useSelectedLocation();
 
-  if (!monitorId) {
+  if (!monitorId || !selectedLocation) {
     return null;
   }
 
@@ -34,7 +36,10 @@ export const MonitorCompleteCount = (props: MonitorCompleteCountProps) => {
       attributes={[
         {
           time: props,
-          reportDefinitions: { config_id: [monitorId] },
+          reportDefinitions: {
+            'monitor.id': [monitorId],
+            'observer.geo.name': [selectedLocation.label],
+          },
           dataType: 'synthetics',
           selectedMetricField: 'monitor_complete',
           name: 'synthetics-series-1',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
index 30d7bbca4a238b..af43901755b0b1 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_complete_sparklines.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { useEuiTheme } from '@elastic/eui';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
+import { useSelectedLocation } from '../hooks/use_selected_location';
 
 interface Props {
   from: string;
@@ -21,10 +22,11 @@ export const MonitorCompleteSparklines = (props: Props) => {
   const { ExploratoryViewEmbeddable } = observability;
 
   const monitorId = useMonitorQueryId();
+  const selectedLocation = useSelectedLocation();
 
   const { euiTheme } = useEuiTheme();
 
-  if (!monitorId) {
+  if (!monitorId || !selectedLocation) {
     return null;
   }
 
@@ -38,7 +40,10 @@ export const MonitorCompleteSparklines = (props: Props) => {
         {
           seriesType: 'area',
           time: props,
-          reportDefinitions: { 'monitor.id': [monitorId] },
+          reportDefinitions: {
+            'monitor.id': [monitorId],
+            'observer.geo.name': [selectedLocation.label],
+          },
           dataType: 'synthetics',
           selectedMetricField: 'state.id',
           name: 'Monitor complete',
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
index f6886a2cf2f632..710d687e7efd52 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_total_runs_count.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { ReportTypes } from '@kbn/observability-plugin/public';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
+import { useSelectedLocation } from '../hooks/use_selected_location';
 
 interface MonitorTotalRunsCountProps {
   from: string;
@@ -22,8 +23,9 @@ export const MonitorTotalRunsCount = (props: MonitorTotalRunsCountProps) => {
   const { ExploratoryViewEmbeddable } = observability;
 
   const monitorId = useMonitorQueryId();
+  const selectedLocation = useSelectedLocation();
 
-  if (!monitorId) {
+  if (!monitorId || !selectedLocation) {
     return null;
   }
 
@@ -34,7 +36,10 @@ export const MonitorTotalRunsCount = (props: MonitorTotalRunsCountProps) => {
       attributes={[
         {
           time: props,
-          reportDefinitions: { config_id: [monitorId] },
+          reportDefinitions: {
+            'monitor.id': [monitorId],
+            'observer.geo.name': [selectedLocation.label],
+          },
           dataType: 'synthetics',
           selectedMetricField: 'monitor_total_runs',
           name: 'synthetics-series-1',