[8.6] [Synthetics UI] Filter history stats by location (#145515) (#14…

…5550)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Synthetics UI] Filter history stats by location
(#145515)](#145515)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alejandro Fernández
Gómez","email":"[email protected]"},"sourceCommit":{"committedDate":"2022-11-17T12:10:19Z","message":"[Synthetics
UI] Filter history stats by location (#145515)\n\n##
Summary\r\n\r\nRelated to #144857. Ensure the stats in the history page
also take into\r\naccount the monitor
location.","sha":"ce1ec3178d1c329fe287d49cfc03681682f89b79","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Team:uptime","release_note:skip","v8.6.0","v8.7.0"],"number":145515,"url":"https://github.com/elastic/kibana/pull/145515","mergeCommit":{"message":"[Synthetics
UI] Filter history stats by location (#145515)\n\n##
Summary\r\n\r\nRelated to #144857. Ensure the stats in the history page
also take into\r\naccount the monitor
location.","sha":"ce1ec3178d1c329fe287d49cfc03681682f89b79"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145515","number":145515,"mergeCommit":{"message":"[Synthetics
UI] Filter history stats by location (#145515)\n\n##
Summary\r\n\r\nRelated to #144857. Ensure the stats in the history page
also take into\r\naccount the monitor
location.","sha":"ce1ec3178d1c329fe287d49cfc03681682f89b79"}}]}]
BACKPORT-->

Co-authored-by: Alejandro Fernández Gómez <[email protected]>

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',

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',

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',