[UX] Fix map color variance and apply proper filter for extended stats (#81106)
Fixes: #81208 correctly coloring the UX map
This commit is contained in:
parent
64e17233ba
commit
ab8bf782c3
|
@ -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);
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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>)
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
|
@ -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,
|
Loading…
Reference in a new issue