Update mobile filters to include new fields

x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/embedded_map.tsx

@@ -23,22 +23,20 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { EuiText } from '@elastic/eui';
+import type { Filter } from '@kbn/es-query';
 import { ApmPluginStartDeps } from '../../../../../plugin';
 import { getLayerList } from './get_layer_list';
-import { useMapFilters } from './use_map_filters';
 import { useApmParams } from '../../../../../hooks/use_apm_params';
 import { useTimeRange } from '../../../../../hooks/use_time_range';
 
-export function EmbeddedMapComponent() {
+export function EmbeddedMapComponent({ filters }: { filters: Filter[] }) {
   const {
     query: { rangeFrom, rangeTo, kuery },
   } = useApmParams('/services/{serviceName}/overview');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
   const [error, setError] = useState<boolean>();
 
-  const mapFilters = useMapFilters();
-
   const [embeddable, setEmbeddable] = useState<
     MapEmbeddable | ErrorEmbeddable | undefined
   >();
@@ -94,7 +92,7 @@ export function EmbeddedMapComponent() {
             defaultMessage: 'Latency by country',
           }
         ),
-        filters: mapFilters,
+        filters,
         viewMode: ViewMode.VIEW,
         isLayerTOCOpen: false,
         query: {
@@ -132,7 +130,7 @@ export function EmbeddedMapComponent() {
   useEffect(() => {
     if (embeddable) {
       embeddable.updateInput({
-        filters: mapFilters,
+        filters,
         query: {
           query: kuery,
           language: 'kuery',
@@ -143,7 +141,7 @@ export function EmbeddedMapComponent() {
         },
       });
     }
-  }, [start, end, kuery, mapFilters, embeddable]);
+  }, [start, end, kuery, filters, embeddable]);
 
   return (
     <>

x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/index.tsx

@@ -8,9 +8,10 @@
 import React from 'react';
 import { EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import type { Filter } from '@kbn/es-query';
 import { EmbeddedMap } from './embedded_map';
 
-export function LatencyMap() {
+export function LatencyMap({ filters }: { filters: Filter[] }) {
   return (
     <>
       <EuiTitle size="xs">
@@ -21,7 +22,7 @@ export function LatencyMap() {
         </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EmbeddedMap />
+      <EmbeddedMap filters={filters} />
     </>
   );
 }

x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/service_oveview_mobile_charts.tsx

@@ -20,6 +20,7 @@ import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useTimeRange } from '../../../../hooks/use_time_range';
 import { LatencyMap } from './latency_map';
 import { MobileFilters } from './filters';
+import { useFiltersForMobileCharts } from './use_filters_for_mobile_charts';
 
 interface Props {
   latencyChartHeight: number;
@@ -36,6 +37,7 @@ export function ServiceOverviewMobileCharts({
 }: Props) {
   const { fallbackToTransactions, serviceName } = useApmServiceContext();
   const router = useApmRouter();
+  const filters = useFiltersForMobileCharts();
 
   const {
     query,
@@ -148,7 +150,7 @@ export function ServiceOverviewMobileCharts({
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiPanel hasBorder={true}>
-          <LatencyMap />
+          <LatencyMap filters={filters} />
         </EuiPanel>
       </EuiFlexItem>
     </EuiFlexGroup>

x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/use_filters_for_mobile_charts.ts

@@ -0,0 +1,73 @@
+/*
+ * 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 { useMemo } from 'react';
+import { type QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
+import { isNil, isEmpty } from 'lodash';
+import { ProcessorEvent } from '@kbn/observability-plugin/common';
+import { environmentQuery } from '../../../../../common/utils/environment_query';
+import { useApmParams } from '../../../../hooks/use_apm_params';
+import {
+  SERVICE_NAME,
+  TRANSACTION_TYPE,
+  PROCESSOR_EVENT,
+  HOST_OS_VERSION,
+  DEVICE_MODEL_IDENTIFIER,
+  NETWORK_CONNECTION_TYPE,
+  SERVICE_VERSION,
+} from '../../../../../common/elasticsearch_fieldnames';
+
+function termQuery<T extends string>(
+  field: T,
+  value: string | boolean | number | undefined | null
+): QueryDslQueryContainer[] {
+  if (isNil(value) || isEmpty(value)) {
+    return [];
+  }
+
+  return [{ term: { [field]: value } }];
+}
+
+export function useFiltersForMobileCharts() {
+  const {
+    path: { serviceName },
+    query: {
+      environment,
+      transactionType,
+      device,
+      osVersion,
+      appVersion,
+      netConnectionType,
+    },
+  } = useApmParams('/services/{serviceName}/overview');
+
+  return useMemo(
+    () =>
+      [
+        ...termQuery(PROCESSOR_EVENT, ProcessorEvent.transaction),
+        ...termQuery(SERVICE_NAME, serviceName),
+        ...termQuery(TRANSACTION_TYPE, transactionType),
+        ...termQuery(HOST_OS_VERSION, osVersion),
+        ...termQuery(DEVICE_MODEL_IDENTIFIER, device),
+        ...termQuery(NETWORK_CONNECTION_TYPE, netConnectionType),
+        ...termQuery(SERVICE_VERSION, appVersion),
+        ...environmentQuery(environment),
+      ].map((query) => ({
+        meta: {},
+        query,
+      })),
+    [
+      environment,
+      transactionType,
+      serviceName,
+      osVersion,
+      device,
+      netConnectionType,
+      appVersion,
+    ]
+  );
+}