[APM] Duration by Country map doesn't take transactionName into account (#50315)

* filtering country map by transaction name

* filtering country map by transaction name

* filtering country map by transaction name
This commit is contained in:
Cauê Marcondes 2019-11-14 08:47:52 +01:00 committed by GitHub
parent e04adbe34b
commit 353619b6aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 53 additions and 26 deletions

View file

@ -0,0 +1,9 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
export const TRANSACTION_PAGE_LOAD = 'page-load';
export const TRANSACTION_ROUTE_CHANGE = 'route-change';
export const TRANSACTION_REQUEST = 'request';

View file

@ -19,7 +19,7 @@ export const ChoroplethToolTip: React.SFC<{
<div style={{ fontSize: fontSizes.large }}>{name}</div>
<div>
{i18n.translate(
'xpack.apm.metrics.pageLoadCharts.RegionMapChart.ToolTip.avgPageLoadDuration',
'xpack.apm.metrics.durationByCountryMap.RegionMapChart.ToolTip.avgPageLoadDuration',
{
defaultMessage: 'Avg. page load duration:'
}
@ -31,7 +31,7 @@ export const ChoroplethToolTip: React.SFC<{
<div>
(
{i18n.translate(
'xpack.apm.metrics.pageLoadCharts.RegionMapChart.ToolTip.countPageLoads',
'xpack.apm.metrics.durationByCountryMap.RegionMapChart.ToolTip.countPageLoads',
{
values: { docCount: asInteger(docCount) },
defaultMessage: '{docCount} page loads'

View file

@ -10,7 +10,7 @@ import React from 'react';
import { useAvgDurationByCountry } from '../../../../../hooks/useAvgDurationByCountry';
import { ChoroplethMap } from '../ChoroplethMap';
export const PageLoadCharts: React.SFC = () => {
export const DurationByCountryMap: React.SFC = () => {
const { data } = useAvgDurationByCountry();
return (
@ -20,7 +20,7 @@ export const PageLoadCharts: React.SFC = () => {
<EuiTitle size="xs">
<span>
{i18n.translate(
'xpack.apm.metrics.pageLoadCharts.avgPageLoadByCountryLabel',
'xpack.apm.metrics.durationByCountryMap.avgPageLoadByCountryLabel',
{
defaultMessage:
'Avg. page load duration distribution by country'

View file

@ -34,7 +34,12 @@ import { LicenseContext } from '../../../../context/LicenseContext';
import { TransactionLineChart } from './TransactionLineChart';
import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
import { getTimeFormatter } from '../../../../utils/formatters';
import { PageLoadCharts } from './PageLoadCharts';
import { DurationByCountryMap } from './DurationByCountryMap';
import {
TRANSACTION_PAGE_LOAD,
TRANSACTION_ROUTE_CHANGE,
TRANSACTION_REQUEST
} from '../../../../../common/transaction_types';
interface TransactionChartProps {
hasMLJob: boolean;
@ -55,8 +60,6 @@ const ShiftedEuiText = styled(EuiText)`
top: 5px;
`;
const RUM_PAGE_LOAD_TYPE = 'page-load';
export class TransactionCharts extends Component<TransactionChartProps> {
public getMaxY = (responseTimeSeries: TimeSeries[]) => {
const coordinates = flatten(
@ -200,19 +203,19 @@ export class TransactionCharts extends Component<TransactionChartProps> {
</EuiPanel>
</EuiFlexItem>
</EuiFlexGrid>
{transactionType === RUM_PAGE_LOAD_TYPE ? (
{transactionType === TRANSACTION_PAGE_LOAD && (
<>
<EuiSpacer size="s" />
<PageLoadCharts />
<DurationByCountryMap />
</>
) : null}
)}
</>
);
}
}
function tpmLabel(type?: string) {
return type === 'request'
return type === TRANSACTION_REQUEST
? i18n.translate(
'xpack.apm.metrics.transactionChart.requestsPerMinuteLabel',
{
@ -229,14 +232,14 @@ function tpmLabel(type?: string) {
function responseTimeLabel(type?: string) {
switch (type) {
case RUM_PAGE_LOAD_TYPE:
case TRANSACTION_PAGE_LOAD:
return i18n.translate(
'xpack.apm.metrics.transactionChart.pageLoadTimesLabel',
{
defaultMessage: 'Page load times'
}
);
case 'route-change':
case TRANSACTION_ROUTE_CHANGE:
return i18n.translate(
'xpack.apm.metrics.transactionChart.routeChangeTimesLabel',
{

View file

@ -9,7 +9,7 @@ import { useUrlParams } from './useUrlParams';
export function useAvgDurationByCountry() {
const {
urlParams: { serviceName, start, end },
urlParams: { serviceName, start, end, transactionName },
uiFilters
} = useUrlParams();
@ -24,13 +24,14 @@ export function useAvgDurationByCountry() {
query: {
start,
end,
uiFilters: JSON.stringify(uiFilters)
uiFilters: JSON.stringify(uiFilters),
transactionName
}
}
});
}
},
[serviceName, start, end, uiFilters]
[serviceName, start, end, uiFilters, transactionName]
);
return {

View file

@ -9,19 +9,26 @@ import {
PROCESSOR_EVENT,
SERVICE_NAME,
TRANSACTION_DURATION,
TRANSACTION_TYPE
TRANSACTION_TYPE,
TRANSACTION_NAME
} from '../../../../common/elasticsearch_fieldnames';
import { Setup } from '../../helpers/setup_request';
import { rangeFilter } from '../../helpers/range_filter';
import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
export async function getTransactionAvgDurationByCountry({
setup,
serviceName
serviceName,
transactionName
}: {
setup: Setup;
serviceName: string;
transactionName?: string;
}) {
const { uiFiltersES, client, start, end, indices } = setup;
const transactionNameFilter = transactionName
? [{ term: { [TRANSACTION_NAME]: transactionName } }]
: [];
const params = {
index: indices['apm_oss.transactionIndices'],
body: {
@ -30,8 +37,9 @@ export async function getTransactionAvgDurationByCountry({
bool: {
filter: [
{ term: { [SERVICE_NAME]: serviceName } },
...transactionNameFilter,
{ term: { [PROCESSOR_EVENT]: 'transaction' } },
{ term: { [TRANSACTION_TYPE]: 'page-load' } },
{ term: { [TRANSACTION_TYPE]: TRANSACTION_PAGE_LOAD } },
{ exists: { field: CLIENT_GEO_COUNTRY_ISO_CODE } },
{ range: rangeFilter(start, end) },
...uiFiltersES

View file

@ -150,14 +150,20 @@ export const transactionGroupsAvgDurationByCountry = createRoute(() => ({
path: t.type({
serviceName: t.string
}),
query: t.intersection([uiFiltersRt, rangeRt])
query: t.intersection([
uiFiltersRt,
rangeRt,
t.partial({ transactionName: t.string })
])
},
handler: async (req, { path, query }) => {
const setup = await setupRequest(req);
const { serviceName } = path;
const { transactionName } = query;
return getTransactionAvgDurationByCountry({
serviceName,
transactionName,
setup
});
}

View file

@ -3432,9 +3432,9 @@
"xpack.apm.localFilters.titles.transactionResult": "トランザクション結果",
"xpack.apm.localFilters.titles.transactionType": "トランザクションタイプ",
"xpack.apm.localFiltersTitle": "各種フィルター",
"xpack.apm.metrics.pageLoadCharts.avgPageLoadByCountryLabel": "国ごとの平均ページ読み込み時間の分布",
"xpack.apm.metrics.pageLoadCharts.RegionMapChart.ToolTip.avgPageLoadDuration": "平均ページ読み込み時間:",
"xpack.apm.metrics.pageLoadCharts.RegionMapChart.ToolTip.countPageLoads": "{docCount} ページの読み込み",
"xpack.apm.metrics.durationByCountryMap.avgPageLoadByCountryLabel": "国ごとの平均ページ読み込み時間の分布",
"xpack.apm.metrics.durationByCountryMap.RegionMapChart.ToolTip.avgPageLoadDuration": "平均ページ読み込み時間:",
"xpack.apm.metrics.durationByCountryMap.RegionMapChart.ToolTip.countPageLoads": "{docCount} ページの読み込み",
"xpack.apm.settings.agentConf.configTable.editButtonDescription": "この構成を編集します",
"xpack.apm.settings.agentConf.configTable.editButtonLabel": "編集",
"xpack.apm.settings.agentConf.configTable.emptyPromptText": "変更しましょう。直接 Kibana からエージェント構成を微調整できます。再展開する必要はありません。まず、最初の構成を作成します。",

View file

@ -3433,9 +3433,9 @@
"xpack.apm.localFilters.titles.transactionResult": "事务结果",
"xpack.apm.localFilters.titles.transactionType": "事务类型",
"xpack.apm.localFiltersTitle": "筛选",
"xpack.apm.metrics.pageLoadCharts.avgPageLoadByCountryLabel": "页面加载平均时长分布(按国家/地区)",
"xpack.apm.metrics.pageLoadCharts.RegionMapChart.ToolTip.avgPageLoadDuration": "页面加载平均时长:",
"xpack.apm.metrics.pageLoadCharts.RegionMapChart.ToolTip.countPageLoads": "{docCount} 个页面加载",
"xpack.apm.metrics.durationByCountryMap.avgPageLoadByCountryLabel": "页面加载平均时长分布(按国家/地区)",
"xpack.apm.metrics.durationByCountryMap.RegionMapChart.ToolTip.avgPageLoadDuration": "页面加载平均时长:",
"xpack.apm.metrics.durationByCountryMap.RegionMapChart.ToolTip.countPageLoads": "{docCount} 个页面加载",
"xpack.apm.settings.agentConf.configTable.editButtonDescription": "编辑此配置",
"xpack.apm.settings.agentConf.configTable.editButtonLabel": "编辑",
"xpack.apm.settings.agentConf.configTable.emptyPromptText": "让我们改动一下!可以直接从 Kibana 微调代理配置,无需重新部署。首先创建您的第一个配置。",