maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[UX] Fix map color variance and apply proper filter for extended stats (#81106)

Browse source 
Fixes: #81208 correctly coloring the UX map
This commit is contained in:
Shahzad 2020-10-21 16:50:28 +02:00 committed by GitHub
parent 64e17233ba
commit ab8bf782c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 61 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx
View file

@ -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);

2
x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx
View file

@ -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';

2
x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx
View file

@ -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) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)

10
x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/__mocks__/regions_layer.mock.ts
View file

@ -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',
},

13
x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/LayerList.test.ts → x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__tests__/useLayerList.test.ts
View file

@ -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);
});
});

50
x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/LayerList.ts → x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/useLayerList.ts
View file

@ -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,