diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/embedded_map.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/embedded_map.tsx index dc415b153759e..780523c52753d 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/embedded_map.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/embedded_map.tsx @@ -23,13 +23,13 @@ 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'); @@ -37,8 +37,6 @@ export function EmbeddedMapComponent() { const { start, end } = useTimeRange({ rangeFrom, rangeTo }); const [error, setError] = useState(); - 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 ( <> diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/index.tsx index 63742cc9bf4e0..8a5917bd861b6 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/index.tsx +++ b/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 ( <> @@ -21,7 +22,7 @@ export function LatencyMap() { - + ); } diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/use_map_filters.ts b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/use_map_filters.ts deleted file mode 100644 index 2c37734723185..0000000000000 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/latency_map/use_map_filters.ts +++ /dev/null @@ -1,53 +0,0 @@ -/* - * 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 { FieldFilter as Filter } from '@kbn/es-query'; -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, -} from '../../../../../../common/elasticsearch_fieldnames'; - -function termQuery( - field: string, - value: string | boolean | number | undefined | null -) { - return isNil(value) ? [] : [{ term: { [field]: value } }]; -} - -function getFilter([query]: QueryDslQueryContainer[]): Filter[] { - return isEmpty(query) - ? [] - : [ - { - meta: {}, - query, - }, - ]; -} - -export function useMapFilters() { - const { - path: { serviceName }, - query: { environment, transactionType }, - } = useApmParams('/services/{serviceName}/overview'); - - return useMemo(() => { - return [ - ...getFilter(termQuery(PROCESSOR_EVENT, ProcessorEvent.transaction)), - ...getFilter(termQuery(SERVICE_NAME, serviceName)), - ...getFilter(termQuery(TRANSACTION_TYPE, transactionType)), - ...getFilter(environmentQuery(environment)), - ]; - }, [environment, transactionType, serviceName]); -} diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/service_oveview_mobile_charts.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/service_oveview_mobile_charts.tsx index c7ef9e96f632d..cf603a189e178 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/service_oveview_mobile_charts.tsx +++ b/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({ - + diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/use_filters_for_mobile_charts.ts b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/use_filters_for_mobile_charts.ts new file mode 100644 index 0000000000000..5116a79494978 --- /dev/null +++ b/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( + 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, + ] + ); +}