From 833d6156531156b3407360215e8abb9c29e6d5c3 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Wed, 21 Oct 2020 16:50:28 +0200 Subject: [PATCH] [UX] Fix map color variance and apply proper filter for extended stats (#81106) Fixes: #81208 correctly coloring the UX map --- .../VisitorBreakdownMap/EmbeddedMap.tsx | 6 ++- .../VisitorBreakdownMap/MapToolTip.tsx | 2 +- .../__stories__/MapTooltip.stories.tsx | 2 +- .../__tests__/__mocks__/regions_layer.mock.ts | 10 ++++ ...LayerList.test.ts => useLayerList.test.ts} | 13 +++-- .../{LayerList.ts => useLayerList.ts} | 50 +++++++++++++++---- 6 files changed, 61 insertions(+), 22 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} (79%) 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 1198c014f59219..77afe92a8f5210 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 './useLayerList'; 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/MapToolTip.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx index 07b40addedec39..467e31f15a8de4 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'; 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 023f5d61a964e0..1053dd611d519a 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()}) 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 c45f8b27d7d3e8..e5643325833759 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 eb149ee2a132d0..872553452b2637 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 { getLayerList } from '../LayerList'; +import { useLayerList } from '../useLayerList'; -describe('LayerList', () => { - describe('getLayerList', () => { - test('it returns the region layer', () => { - const layerList = getLayerList(); - 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 79% 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 index 138a3f4018c651..bc45d58329f496 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/LayerList.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/useLayerList.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,