[Synthetics] Errors Overview - filter failed tests by location (#156731)

## Summary

Resolves https://github.com/elastic/kibana/issues/156754

Adds a filter for location to the Failed Tests Visualization on the
Error Overview page.

Previously, this visualization displayed failed tests across all
locations.

### Testing on main
1. Create an always down monitor configured for two locations
2. Navigate to the Error Overview page
3. Notice that the number of failed tests in the failed test
visualization is double what is being counted on the failed tests count
in on the left

![image](https://user-images.githubusercontent.com/11356435/236357795-878364f7-341f-4be5-9b91-8f5b438715d8.png)

### Testing on this PR
1. Check out this PR
2. Navigate back to the Error Overview page
3. The failed test visualization should now match the count on the left

x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_timeline.tsx

@@ -9,8 +9,11 @@ import { EuiLoadingContent } from '@elastic/eui';
 import moment from 'moment';
 import { Ping } from '../../../../../../common/runtime_types';
 import { MonitorFailedTests } from '../../monitor_details/monitor_errors/failed_tests';
+import { useSelectedLocation } from '../../monitor_details/hooks/use_selected_location';
 
 export const ErrorTimeline = ({ lastTestRun }: { lastTestRun?: Ping }) => {
+  const location = useSelectedLocation();
+
   if (!lastTestRun) {
     return <EuiLoadingContent lines={3} />;
   }
@@ -22,6 +25,7 @@ export const ErrorTimeline = ({ lastTestRun }: { lastTestRun?: Ping }) => {
 
   return (
     <MonitorFailedTests
+      location={location}
       time={{
         from: moment(startedAt)
           .subtract(diff / 2, 'minutes')

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/errors_list.tsx

@@ -32,9 +32,11 @@ import {
 export const ErrorsList = ({
   errorStates,
   loading,
+  location,
 }: {
   errorStates: PingState[];
   loading: boolean;
+  location: ReturnType<typeof useSelectedLocation>;
 }) => {
   const { monitorId: configId } = useParams<{ monitorId: string }>();
 
@@ -50,7 +52,7 @@ export const ErrorsList = ({
 
   const format = useDateFormatForTest();
 
-  const selectedLocation = useSelectedLocation();
+  const selectedLocation = location;
 
   const lastTestRun = errorStates?.sort((a, b) => {
     return moment(b.state.started_at).valueOf() - moment(a.state.started_at).valueOf();

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/errors_tab_content.tsx

@@ -17,13 +17,16 @@ import { MonitorFailedTests } from './failed_tests';
 import { ErrorsList } from './errors_list';
 import { useRefreshedRangeFromUrl } from '../../../hooks';
 import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
+import { useSelectedLocation } from '../hooks/use_selected_location';
 
 export const ErrorsTabContent = ({
   errorStates,
   loading,
+  location,
 }: {
   errorStates: PingState[];
   loading: boolean;
+  location: ReturnType<typeof useSelectedLocation>;
 }) => {
   const time = useRefreshedRangeFromUrl();
 
@@ -46,14 +49,19 @@ export const ErrorsTabContent = ({
                 )}
               </EuiFlexItem>
               <EuiFlexItem>
-                <FailedTestsCount from={time.from} to={time.to} id="failedTestsCountErrors" />
+                <FailedTestsCount
+                  location={location}
+                  from={time.from}
+                  to={time.to}
+                  id="failedTestsCountErrors"
+                />
               </EuiFlexItem>
             </EuiFlexGroup>
           </PanelWithTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={3}>
           <PanelWithTitle title={FAILED_TESTS_LABEL}>
-            <MonitorFailedTests time={time} />
+            <MonitorFailedTests location={location} time={time} />
           </PanelWithTitle>
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -61,7 +69,7 @@ export const ErrorsTabContent = ({
       <EuiFlexGroup gutterSize="m" wrap={true}>
         <EuiFlexItem grow={2} css={{ minWidth: 260 }}>
           <PanelWithTitle title={ERRORS_LABEL}>
-            <ErrorsList errorStates={errorStates} loading={loading} />
+            <ErrorsList location={location} errorStates={errorStates} loading={loading} />
           </PanelWithTitle>
         </EuiFlexItem>
         <FailedTestsByStep time={time} />

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx

@@ -14,13 +14,16 @@ import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText } from '@elastic/eui';
 import { useUrlParams } from '../../../hooks';
 import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 import { ClientPluginsStart } from '../../../../../plugin';
+import { useSelectedLocation } from '../hooks/use_selected_location';
 
 export const MonitorFailedTests = ({
   time,
   allowBrushing = true,
+  location,
 }: {
   time: { to: string; from: string };
   allowBrushing?: boolean;
+  location: ReturnType<typeof useSelectedLocation>;
 }) => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
@@ -49,6 +52,7 @@ export const MonitorFailedTests = ({
             reportDefinitions: {
               ...(monitorId ? { 'monitor.id': [monitorId] } : {}),
               ...(errorStateId ? { 'state.id': [errorStateId] } : {}),
+              'observer.geo.name': [location?.label || ''],
             },
             dataType: 'synthetics',
             selectedMetricField: 'failed_tests',

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx

@@ -12,14 +12,24 @@ import { FAILED_TESTS_LABEL } from './failed_tests';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 
-export const FailedTestsCount = ({ from, to, id }: { to: string; from: string; id: string }) => {
+export const FailedTestsCount = ({
+  from,
+  to,
+  id,
+  location,
+}: {
+  to: string;
+  from: string;
+  id: string;
+  location: ReturnType<typeof useSelectedLocation>;
+}) => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
 
   const monitorId = useMonitorQueryId();
 
-  const selectedLocation = useSelectedLocation();
+  const selectedLocation = location;
 
   if (!monitorId || !selectedLocation) {
     return null;

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/monitor_errors.tsx

@@ -20,9 +20,11 @@ import { useMonitorErrors } from '../hooks/use_monitor_errors';
 import { SyntheticsDatePicker } from '../../common/date_picker/synthetics_date_picker';
 import { ErrorsTabContent } from './errors_tab_content';
 import { MonitorPendingWrapper } from '../monitor_pending_wrapper';
+import { useSelectedLocation } from '../hooks/use_selected_location';
 
 export const MonitorErrors = () => {
   const { errorStates, loading, data } = useMonitorErrors();
+  const location = useSelectedLocation();
 
   const initialLoading = !data;
 
@@ -40,7 +42,7 @@ export const MonitorErrors = () => {
       {initialLoading && <LoadingErrors />}
       {emptyState && <EmptyErrors />}
       <div style={{ visibility: initialLoading || emptyState ? 'collapse' : 'initial' }}>
-        <ErrorsTabContent errorStates={errorStates ?? []} loading={loading} />
+        <ErrorsTabContent location={location} errorStates={errorStates ?? []} loading={loading} />
       </div>
     </MonitorPendingWrapper>
   );