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

x-pack/legacy/plugins/apm/common/transaction_types.ts

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

x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx

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

x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/PageLoadCharts/index.tsx → x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/DurationByCountryMap/index.tsx

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

x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx

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

x-pack/legacy/plugins/apm/public/hooks/useAvgDurationByCountry.ts

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

x-pack/legacy/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts

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

x-pack/legacy/plugins/apm/server/routes/transaction_groups.ts

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

x-pack/plugins/translations/translations/ja-JP.json

@@ -3437,9 +3437,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 からエージェント構成を微調整できます。再展開する必要はありません。まず、最初の構成を作成します。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -3438,9 +3438,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 微调代理配置，无需重新部署。首先创建您的第一个配置。",