From 99aabaaa8609c09616b27d94e97f9d10635347bf Mon Sep 17 00:00:00 2001 From: Shahzad Date: Sat, 17 Oct 2020 10:57:08 +0200 Subject: [PATCH 1/4] added where query in layer --- .../VisitorBreakdownMap/EmbeddedMap.tsx | 6 ++- .../VisitorBreakdownMap/LayerList.ts | 50 +++++++++++++++---- .../__tests__/LayerList.test.ts | 4 +- 3 files changed, 45 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx index 1198c014f5921..b103aa3174b4c 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx @@ -20,7 +20,7 @@ import { ViewMode, isErrorEmbeddable, } from '../../../../../../../../src/plugins/embeddable/public'; -import { getLayerList } from './LayerList'; +import { useLayerList } from './LayerList'; import { useUrlParams } from '../../../../hooks/useUrlParams'; import { RenderTooltipContentParams } from '../../../../../../maps/public'; import { MapToolTip } from './MapToolTip'; @@ -55,6 +55,8 @@ export function EmbeddedMapComponent() { const mapFilters = useMapFilters(); + const layerList = useLayerList(); + const [embeddable, setEmbeddable] = useState< MapEmbeddable | ErrorEmbeddable | undefined >(); @@ -148,7 +150,7 @@ export function EmbeddedMapComponent() { if (embeddableObject && !isErrorEmbeddable(embeddableObject)) { embeddableObject.setRenderTooltipContent(renderTooltipContent); - await embeddableObject.setLayerList(getLayerList()); + await embeddableObject.setLayerList(layerList); } setEmbeddable(embeddableObject); diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/LayerList.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/LayerList.ts index 138a3f4018c65..bc45d58329f49 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/LayerList.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/LayerList.ts @@ -22,8 +22,14 @@ import { } from '../../../../../../maps/common/constants'; import { APM_STATIC_INDEX_PATTERN_ID } from '../../../../../../../../src/plugins/apm_oss/public'; +import { useUrlParams } from '../../../../hooks/useUrlParams'; +import { + SERVICE_NAME, + TRANSACTION_TYPE, +} from '../../../../../common/elasticsearch_fieldnames'; +import { TRANSACTION_PAGE_LOAD } from '../../../../../common/transaction_types'; -const ES_TERM_SOURCE: ESTermSourceDescriptor = { +const ES_TERM_SOURCE_COUNTRY: ESTermSourceDescriptor = { type: 'ES_TERM_SOURCE', id: '3657625d-17b0-41ef-99ba-3a2b2938655c', indexPatternTitle: 'apm-*', @@ -39,6 +45,26 @@ const ES_TERM_SOURCE: ESTermSourceDescriptor = { applyGlobalQuery: true, }; +const ES_TERM_SOURCE_REGION: ESTermSourceDescriptor = { + type: 'ES_TERM_SOURCE', + id: 'e62a1b9c-d7ff-4fd4-a0f6-0fdc44bb9e41', + indexPatternTitle: 'apm-*', + term: 'client.geo.region_iso_code', + metrics: [{ type: AGG_TYPE.AVG, field: 'transaction.duration.us' }], + whereQuery: { + query: 'transaction.type : "page-load"', + language: 'kuery', + }, + indexPatternId: APM_STATIC_INDEX_PATTERN_ID, +}; + +const getWhereQuery = (serviceName: string) => { + return { + query: `${TRANSACTION_TYPE} : "${TRANSACTION_PAGE_LOAD}" and ${SERVICE_NAME} : "${serviceName}"`, + language: 'kuery', + }; +}; + export const REGION_NAME = 'region_name'; export const COUNTRY_NAME = 'name'; @@ -56,7 +82,11 @@ interface VectorLayerDescriptor extends BaseVectorLayerDescriptor { sourceDescriptor: EMSFileSourceDescriptor; } -export function getLayerList() { +export function useLayerList() { + const { urlParams } = useUrlParams(); + + const { serviceName } = urlParams; + const baseLayer: LayerDescriptor = { sourceDescriptor: { type: 'EMS_TMS', isAutoSelect: true }, id: 'b7af286d-2580-4f47-be93-9653d594ce7e', @@ -69,6 +99,8 @@ export function getLayerList() { type: 'VECTOR_TILE', }; + ES_TERM_SOURCE_COUNTRY.whereQuery = getWhereQuery(serviceName!); + const getLayerStyle = (fieldName: string): VectorStyleDescriptor => { return { type: 'VECTOR', @@ -119,7 +151,7 @@ export function getLayerList() { joins: [ { leftField: 'iso2', - right: ES_TERM_SOURCE, + right: ES_TERM_SOURCE_COUNTRY, }, ], sourceDescriptor: { @@ -138,18 +170,13 @@ export function getLayerList() { type: 'VECTOR', }; + ES_TERM_SOURCE_REGION.whereQuery = getWhereQuery(serviceName!); + const pageLoadDurationByAdminRegionLayer: VectorLayerDescriptor = { joins: [ { leftField: 'region_iso_code', - right: { - type: 'ES_TERM_SOURCE', - id: 'e62a1b9c-d7ff-4fd4-a0f6-0fdc44bb9e41', - indexPatternTitle: 'apm-*', - term: 'client.geo.region_iso_code', - metrics: [{ type: AGG_TYPE.AVG, field: 'transaction.duration.us' }], - indexPatternId: APM_STATIC_INDEX_PATTERN_ID, - }, + right: ES_TERM_SOURCE_REGION, }, ], sourceDescriptor: { @@ -166,6 +193,7 @@ export function getLayerList() { visible: true, type: 'VECTOR', }; + return [ baseLayer, pageLoadDurationByCountryLayer, diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/LayerList.test.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/LayerList.test.ts index eb149ee2a132d..f8e4286512735 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/LayerList.test.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/LayerList.test.ts @@ -5,12 +5,12 @@ */ import { mockLayerList } from './__mocks__/regions_layer.mock'; -import { getLayerList } from '../LayerList'; +import { useLayerList } from '../LayerList'; describe('LayerList', () => { describe('getLayerList', () => { test('it returns the region layer', () => { - const layerList = getLayerList(); + const layerList = useLayerList(); expect(layerList).toStrictEqual(mockLayerList); }); }); From 4b9bf74016254605a420789f0f2be22506a290b1 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 20 Oct 2020 21:25:01 +0200 Subject: [PATCH 2/4] fix test --- .../VisitorBreakdownMap/EmbeddedMap.tsx | 2 +- .../__tests__/__mocks__/regions_layer.mock.ts | 10 ++++++++++ .../{LayerList.test.ts => useLayerList.test.ts} | 13 ++++++------- .../{LayerList.ts => useLayerList.ts} | 0 4 files changed, 17 insertions(+), 8 deletions(-) rename x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/{LayerList.test.ts => useLayerList.test.ts} (51%) rename x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/{LayerList.ts => useLayerList.ts} (100%) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx index b103aa3174b4c..77afe92a8f521 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx @@ -20,7 +20,7 @@ import { ViewMode, isErrorEmbeddable, } from '../../../../../../../../src/plugins/embeddable/public'; -import { useLayerList } from './LayerList'; +import { useLayerList } from './useLayerList'; import { useUrlParams } from '../../../../hooks/useUrlParams'; import { RenderTooltipContentParams } from '../../../../../../maps/public'; import { MapToolTip } from './MapToolTip'; diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/__mocks__/regions_layer.mock.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/__mocks__/regions_layer.mock.ts index c45f8b27d7d3e..e564332583375 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/__mocks__/regions_layer.mock.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/__mocks__/regions_layer.mock.ts @@ -25,6 +25,11 @@ export const mockLayerList = [ id: '3657625d-17b0-41ef-99ba-3a2b2938655c', indexPatternTitle: 'apm-*', term: 'client.geo.country_iso_code', + whereQuery: { + language: 'kuery', + query: + 'transaction.type : "page-load" and service.name : "undefined"', + }, metrics: [ { type: 'avg', @@ -95,6 +100,11 @@ export const mockLayerList = [ id: 'e62a1b9c-d7ff-4fd4-a0f6-0fdc44bb9e41', indexPatternTitle: 'apm-*', term: 'client.geo.region_iso_code', + whereQuery: { + language: 'kuery', + query: + 'transaction.type : "page-load" and service.name : "undefined"', + }, metrics: [{ type: 'avg', field: 'transaction.duration.us' }], indexPatternId: 'apm_static_index_pattern_id', }, diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/LayerList.test.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/useLayerList.test.ts similarity index 51% rename from x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/LayerList.test.ts rename to x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/useLayerList.test.ts index f8e4286512735..872553452b263 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/LayerList.test.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/useLayerList.test.ts @@ -4,14 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ +import { renderHook } from '@testing-library/react-hooks'; import { mockLayerList } from './__mocks__/regions_layer.mock'; -import { useLayerList } from '../LayerList'; +import { useLayerList } from '../useLayerList'; -describe('LayerList', () => { - describe('getLayerList', () => { - test('it returns the region layer', () => { - const layerList = useLayerList(); - expect(layerList).toStrictEqual(mockLayerList); - }); +describe('useLayerList', () => { + test('it returns the region layer', () => { + const { result } = renderHook(() => useLayerList()); + expect(result.current).toStrictEqual(mockLayerList); }); }); diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/LayerList.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/useLayerList.ts similarity index 100% rename from x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/LayerList.ts rename to x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/useLayerList.ts From 0eb28033d19b9e9130a8c5b902b481ea1b8e0d44 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 20 Oct 2020 21:34:13 +0200 Subject: [PATCH 3/4] fix test --- .../app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx index 07b40addedec3..467e31f15a8de 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx @@ -18,7 +18,7 @@ import { REGION_NAME, TRANSACTION_DURATION_COUNTRY, TRANSACTION_DURATION_REGION, -} from './LayerList'; +} from './useLayerList'; import { RenderTooltipContentParams } from '../../../../../../maps/public'; import { I18LABELS } from '../translations'; From dfdcd0aedcfa2e87d119cf20fc1c62de87559d30 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 20 Oct 2020 22:22:09 +0200 Subject: [PATCH 4/4] fix test --- .../VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx index 023f5d61a964e..1053dd611d519 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx @@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react'; import React from 'react'; import { EuiThemeProvider } from '../../../../../../../observability/public'; import { MapToolTip } from '../MapToolTip'; -import { COUNTRY_NAME, TRANSACTION_DURATION_COUNTRY } from '../LayerList'; +import { COUNTRY_NAME, TRANSACTION_DURATION_COUNTRY } from '../useLayerList'; storiesOf('app/RumDashboard/VisitorsRegionMap', module) .addDecorator((storyFn) => {storyFn()})