[APM] Use asTransactionRate consistently everywhere (#84213)

sorenlouv · web-flow · commit 31a5b15250a5 · 2020-11-24T19:27:24.000+01:00
diff --git a/x-pack/plugins/apm/common/utils/formatters/formatters.ts b/x-pack/plugins/apm/common/utils/formatters/formatters.ts
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import numeral from '@elastic/numeral';
-import { i18n } from '@kbn/i18n';
 import { Maybe } from '../../../typings/common';
 import { NOT_AVAILABLE_LABEL } from '../../i18n';
 import { isFiniteNumber } from '../is_finite_number';
@@ -17,16 +16,6 @@ export function asInteger(value: number) {
   return numeral(value).format('0,0');
 }
 
-export function tpmUnit(type?: string) {
-  return type === 'request'
-    ? i18n.translate('xpack.apm.formatters.requestsPerMinLabel', {
-        defaultMessage: 'rpm',
-      })
-    : i18n.translate('xpack.apm.formatters.transactionsPerMinLabel', {
-        defaultMessage: 'tpm',
-      });
-}
-
 export function asPercent(
   numerator: Maybe<number>,
   denominator: number | undefined,
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import {
   asDuration,
   asPercent,
-  tpmUnit,
+  asTransactionRate,
 } from '../../../../../common/utils/formatters';
 import { ServiceNodeStats } from '../../../../../common/service_map';
 
@@ -55,11 +55,7 @@ export function ServiceStatsList({
           defaultMessage: 'Req. per minute (avg.)',
         }
       ),
-      description: isNumber(transactionStats.avgRequestsPerMinute)
-        ? `${transactionStats.avgRequestsPerMinute.toFixed(2)} ${tpmUnit(
-            'request'
-          )}`
-        : null,
+      description: asTransactionRate(transactionStats.avgRequestsPerMinute),
     },
     {
       title: i18n.translate('xpack.apm.serviceMap.errorRatePopoverStat', {
diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx b/x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
@@ -8,7 +8,10 @@ import { EuiIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
-import { asMillisecondDuration } from '../../../../common/utils/formatters';
+import {
+  asMillisecondDuration,
+  asTransactionRate,
+} from '../../../../common/utils/formatters';
 import { fontSizes, truncate } from '../../../style/variables';
 import { EmptyMessage } from '../../shared/EmptyMessage';
 import { ImpactBar } from '../../shared/ImpactBar';
@@ -78,13 +81,7 @@ const traceListColumns: Array<ITableColumn<TraceGroup>> = [
     }),
     sortable: true,
     dataType: 'number',
-    render: (value: number) =>
-      `${value.toLocaleString()} ${i18n.translate(
-        'xpack.apm.tracesTable.tracesPerMinuteUnitLabel',
-        {
-          defaultMessage: 'tpm',
-        }
-      )}`,
+    render: (value: number) => asTransactionRate(value),
   },
   {
     field: 'impact',
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
@@ -22,7 +22,7 @@ import { EuiIconTip, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import d3 from 'd3';
 import { isEmpty } from 'lodash';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { ValuesType } from 'utility-types';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { useTheme } from '../../../../../../observability/public';
@@ -70,46 +70,29 @@ export function getFormattedBuckets(
   );
 }
 
-const getFormatYShort = (transactionType: string | undefined) => (
-  t: number
-) => {
+const formatYShort = (t: number) => {
   return i18n.translate(
     'xpack.apm.transactionDetails.transactionsDurationDistributionChart.unitShortLabel',
+    {
+      defaultMessage: '{transCount} trans.',
+      values: { transCount: t },
+    }
+  );
+};
+
+const formatYLong = (t: number) => {
+  return i18n.translate(
+    'xpack.apm.transactionDetails.transactionsDurationDistributionChart.transactionTypeUnitLongLabel',
     {
       defaultMessage:
-        '{transCount} {transType, select, request {req.} other {trans.}}',
+        '{transCount, plural, =0 {transactions} one {transaction} other {transactions}}',
       values: {
         transCount: t,
-        transType: transactionType,
       },
     }
   );
 };
 
-const getFormatYLong = (transactionType: string | undefined) => (t: number) => {
-  return transactionType === 'request'
-    ? i18n.translate(
-        'xpack.apm.transactionDetails.transactionsDurationDistributionChart.requestTypeUnitLongLabel',
-        {
-          defaultMessage:
-            '{transCount, plural, =0 {request} one {request} other {requests}}',
-          values: {
-            transCount: t,
-          },
-        }
-      )
-    : i18n.translate(
-        'xpack.apm.transactionDetails.transactionsDurationDistributionChart.transactionTypeUnitLongLabel',
-        {
-          defaultMessage:
-            '{transCount, plural, =0 {transaction} one {transaction} other {transactions}}',
-          values: {
-            transCount: t,
-          },
-        }
-      );
-};
-
 interface Props {
   distribution?: TransactionDistributionAPIResponse;
   urlParams: IUrlParams;
@@ -129,16 +112,6 @@ export function TransactionDistribution({
 }: Props) {
   const theme = useTheme();
 
-  /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  const formatYShort = useCallback(getFormatYShort(transactionType), [
-    transactionType,
-  ]);
-
-  /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  const formatYLong = useCallback(getFormatYLong(transactionType), [
-    transactionType,
-  ]);
-
   // no data in response
   if (
     (!distribution || distribution.noHits) &&
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx
@@ -14,8 +14,8 @@ import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { ServiceHealthStatus } from '../../../../../common/service_health_status';
 import {
   asPercent,
-  asDecimal,
   asMillisecondDuration,
+  asTransactionRate,
 } from '../../../../../common/utils/formatters';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { fontSizes, px, truncate, unit } from '../../../../style/variables';
@@ -35,16 +35,6 @@ interface Props {
 }
 type ServiceListItem = ValuesType<Items>;
 
-function formatNumber(value: number) {
-  if (value === 0) {
-    return '0';
-  } else if (value <= 0.1) {
-    return '< 0.1';
-  } else {
-    return asDecimal(value);
-  }
-}
-
 function formatString(value?: string | null) {
   return value || NOT_AVAILABLE_LABEL;
 }
@@ -154,14 +144,7 @@ export const SERVICE_COLUMNS: Array<ITableColumn<ServiceListItem>> = [
       <ServiceListMetric
         series={transactionsPerMinute?.timeseries}
         color="euiColorVis0"
-        valueLabel={`${formatNumber(
-          transactionsPerMinute?.value || 0
-        )} ${i18n.translate(
-          'xpack.apm.servicesTable.transactionsPerMinuteUnitLabel',
-          {
-            defaultMessage: 'tpm',
-          }
-        )}`}
+        valueLabel={asTransactionRate(transactionsPerMinute?.value)}
       />
     ),
     align: 'left',
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx
@@ -10,8 +10,8 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import {
-  asDecimal,
   asMillisecondDuration,
+  asTransactionRate,
 } from '../../../../../common/utils/formatters';
 import { fontFamilyCode, truncate } from '../../../../style/variables';
 import { ImpactBar } from '../../../shared/ImpactBar';
@@ -103,13 +103,7 @@ export function TransactionList({ items, isLoading }: Props) {
         ),
         sortable: true,
         dataType: 'number',
-        render: (value: number) =>
-          `${asDecimal(value)} ${i18n.translate(
-            'xpack.apm.transactionsTable.transactionsPerMinuteUnitLabel',
-            {
-              defaultMessage: 'tpm',
-            }
-          )}`,
+        render: (value: number) => asTransactionRate(value),
       },
       {
         field: 'impact',
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx
@@ -14,20 +14,17 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import {
   TRANSACTION_PAGE_LOAD,
   TRANSACTION_REQUEST,
   TRANSACTION_ROUTE_CHANGE,
 } from '../../../../../common/transaction_types';
-import { asDecimal, tpmUnit } from '../../../../../common/utils/formatters';
-import { Coordinate } from '../../../../../typings/timeseries';
+import { asTransactionRate } from '../../../../../common/utils/formatters';
 import { ChartsSyncContextProvider } from '../../../../context/charts_sync_context';
 import { LicenseContext } from '../../../../context/LicenseContext';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { FETCH_STATUS } from '../../../../hooks/useFetcher';
 import { ITransactionChartData } from '../../../../selectors/chart_selectors';
-import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
 import { TransactionBreakdownChart } from '../transaction_breakdown_chart';
 import { TimeseriesChart } from '../timeseries_chart';
 import { TransactionErrorRateChart } from '../transaction_error_rate_chart/';
@@ -46,14 +43,6 @@ export function TransactionCharts({
   urlParams,
   fetchStatus,
 }: TransactionChartProps) {
-  const getTPMFormatter = (t: number) => {
-    return `${asDecimal(t)} ${tpmUnit(urlParams.transactionType)}`;
-  };
-
-  const getTPMTooltipFormatter = (y: Coordinate['y']) => {
-    return isValidCoordinateValue(y) ? getTPMFormatter(y) : NOT_AVAILABLE_LABEL;
-  };
-
   const { transactionType } = urlParams;
 
   const { responseTimeSeries, tpmSeries } = charts;
@@ -104,7 +93,7 @@ export function TransactionCharts({
                 fetchStatus={fetchStatus}
                 id="requestPerMinutes"
                 timeseries={tpmSeries || []}
-                yLabelFormat={getTPMTooltipFormatter}
+                yLabelFormat={asTransactionRate}
               />
             </EuiPanel>
           </EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/selectors/chart_selectors.test.ts b/x-pack/plugins/apm/public/selectors/chart_selectors.test.ts
@@ -144,7 +144,7 @@ describe('chart selectors', () => {
         {
           color: errorColor,
           data: [{ x: 0, y: 0 }],
-          legendValue: '0.0 tpm',
+          legendValue: '0 tpm',
           title: 'HTTP 5xx',
           type: 'linemark',
         },
diff --git a/x-pack/plugins/apm/public/selectors/chart_selectors.ts b/x-pack/plugins/apm/public/selectors/chart_selectors.ts
@@ -20,7 +20,7 @@ import {
 import { IUrlParams } from '../context/UrlParamsContext/types';
 import { getEmptySeries } from '../components/shared/charts/helper/get_empty_series';
 import { httpStatusCodeToColor } from '../utils/httpStatusCodeToColor';
-import { asDecimal, asDuration, tpmUnit } from '../../common/utils/formatters';
+import { asDuration, asTransactionRate } from '../../common/utils/formatters';
 
 export interface ITpmBucket {
   title: string;
@@ -171,7 +171,7 @@ export function getTpmSeries(
     return {
       title: bucket.key,
       data: bucket.dataPoints,
-      legendValue: `${asDecimal(bucket.avg)} ${tpmUnit(transactionType || '')}`,
+      legendValue: asTransactionRate(bucket.avg),
       type: 'linemark',
       color: getColor(bucket.key),
     };
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4874,9 +4874,7 @@
     "xpack.apm.formatters.microsTimeUnitLabel": "マイクロ秒",
     "xpack.apm.formatters.millisTimeUnitLabel": "ミリ秒",
     "xpack.apm.formatters.minutesTimeUnitLabel": "最低",
-    "xpack.apm.formatters.requestsPerMinLabel": "1分あたりリクエスト数",
     "xpack.apm.formatters.secondsTimeUnitLabel": "秒",
-    "xpack.apm.formatters.transactionsPerMinLabel": "1分あたりトランザクション数",
     "xpack.apm.header.badge.readOnly.text": "読み込み専用",
     "xpack.apm.header.badge.readOnly.tooltip": "を保存できませんでした",
     "xpack.apm.helpMenu.upgradeAssistantLink": "アップグレードアシスタント",
@@ -5052,7 +5050,6 @@
     "xpack.apm.servicesTable.notFoundLabel": "サービスが見つかりません",
     "xpack.apm.servicesTable.transactionErrorRate": "エラー率%",
     "xpack.apm.servicesTable.transactionsPerMinuteColumnLabel": "1 分あたりのトランザクション",
-    "xpack.apm.servicesTable.transactionsPerMinuteUnitLabel": "1分あたりトランザクション数",
     "xpack.apm.servicesTable.UpgradeAssistantLink": "Kibana アップグレードアシスタントで詳細をご覧ください",
     "xpack.apm.settings.agentConfig": "エージェントの編集",
     "xpack.apm.settings.anomaly_detection.legacy_jobs.body": "以前の統合のレガシー機械学習ジョブが見つかりました。これは、APMアプリでは使用されていません。",
@@ -5155,7 +5152,6 @@
     "xpack.apm.tracesTable.notFoundLabel": "このクエリのトレースが見つかりません",
     "xpack.apm.tracesTable.originatingServiceColumnLabel": "発生元サービス",
     "xpack.apm.tracesTable.tracesPerMinuteColumnLabel": "1 分あたりのトレース",
-    "xpack.apm.tracesTable.tracesPerMinuteUnitLabel": "1分あたりトランザクション数",
     "xpack.apm.transactionActionMenu.actionsButtonLabel": "アクション",
     "xpack.apm.transactionActionMenu.container.subtitle": "このコンテナーのログとインデックスを表示し、さらに詳細を確認できます。",
     "xpack.apm.transactionActionMenu.container.title": "コンテナーの詳細",
@@ -5206,9 +5202,7 @@
     "xpack.apm.transactionDetails.traceNotFound": "選択されたトレースが見つかりません",
     "xpack.apm.transactionDetails.traceSampleTitle": "トレースのサンプル",
     "xpack.apm.transactionDetails.transactionLabel": "トランザクション",
-    "xpack.apm.transactionDetails.transactionsDurationDistributionChart.requestTypeUnitLongLabel": "{transCount, plural, =0 {# request} 1 {# 件のリクエスト} other {# 件のリクエスト}}",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChart.transactionTypeUnitLongLabel": "{transCount, plural, =0 {# transaction} 1 {# 件のトランザクション} other {# 件のトランザクション}}",
-    "xpack.apm.transactionDetails.transactionsDurationDistributionChart.unitShortLabel": "{transCount} {transType, select, request {件のリクエスト} other {件のトランザクション}}",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChartTitle": "トラザクション時間の分布",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChartTooltip.samplingDescription": "各バケットはサンプルトランザクションを示します。利用可能なサンプルがない場合、恐らくエージェントの構成で設定されたサンプリング制限が原因です。",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChartTooltip.samplingLabel": "サンプリング",
@@ -5241,7 +5235,6 @@
     "xpack.apm.transactionsTable.nameColumnLabel": "名前",
     "xpack.apm.transactionsTable.notFoundLabel": "トランザクションが見つかりませんでした。",
     "xpack.apm.transactionsTable.transactionsPerMinuteColumnLabel": "1 分あたりのトランザクション",
-    "xpack.apm.transactionsTable.transactionsPerMinuteUnitLabel": "1分あたりトランザクション数",
     "xpack.apm.tutorial.apmServer.title": "APM Server",
     "xpack.apm.tutorial.elasticCloud.textPre": "APM Server を有効にするには、[the Elastic Cloud console](https://cloud.elastic.co/deployments?q={cloudId}) に移動し、展開設定で APM を有効にします。有効になったら、このページを更新してください。",
     "xpack.apm.tutorial.elasticCloudInstructions.title": "APM エージェント",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4876,9 +4876,7 @@
     "xpack.apm.formatters.microsTimeUnitLabel": "μs",
     "xpack.apm.formatters.millisTimeUnitLabel": "ms",
     "xpack.apm.formatters.minutesTimeUnitLabel": "分钟",
-    "xpack.apm.formatters.requestsPerMinLabel": "rpm",
     "xpack.apm.formatters.secondsTimeUnitLabel": "s",
-    "xpack.apm.formatters.transactionsPerMinLabel": "tpm",
     "xpack.apm.header.badge.readOnly.text": "只读",
     "xpack.apm.header.badge.readOnly.tooltip": "无法保存",
     "xpack.apm.helpMenu.upgradeAssistantLink": "升级助手",
@@ -5056,7 +5054,6 @@
     "xpack.apm.servicesTable.notFoundLabel": "未找到任何服务",
     "xpack.apm.servicesTable.transactionErrorRate": "错误率 %",
     "xpack.apm.servicesTable.transactionsPerMinuteColumnLabel": "每分钟事务数",
-    "xpack.apm.servicesTable.transactionsPerMinuteUnitLabel": "tpm",
     "xpack.apm.servicesTable.UpgradeAssistantLink": "通过访问 Kibana 升级助手来了解详情",
     "xpack.apm.settings.agentConfig": "代理配置",
     "xpack.apm.settings.anomaly_detection.legacy_jobs.body": "我们在以前的集成中发现 APM 应用中不再使用的旧版 Machine Learning 作业",
@@ -5159,7 +5156,6 @@
     "xpack.apm.tracesTable.notFoundLabel": "未找到与此查询的任何追溯信息",
     "xpack.apm.tracesTable.originatingServiceColumnLabel": "发起服务",
     "xpack.apm.tracesTable.tracesPerMinuteColumnLabel": "每分钟追溯次数",
-    "xpack.apm.tracesTable.tracesPerMinuteUnitLabel": "tpm",
     "xpack.apm.transactionActionMenu.actionsButtonLabel": "操作",
     "xpack.apm.transactionActionMenu.container.subtitle": "查看此容器的日志和指标以获取进一步详情。",
     "xpack.apm.transactionActionMenu.container.title": "容器详情",
@@ -5210,9 +5206,7 @@
     "xpack.apm.transactionDetails.traceNotFound": "找不到所选跟踪",
     "xpack.apm.transactionDetails.traceSampleTitle": "跟踪样例",
     "xpack.apm.transactionDetails.transactionLabel": "事务",
-    "xpack.apm.transactionDetails.transactionsDurationDistributionChart.requestTypeUnitLongLabel": "{transCount, plural, =0 {# 个请求} one {# 个请求} other {# 个请求}}",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChart.transactionTypeUnitLongLabel": "{transCount, plural, =0 {# 个事务} one {# 个事务} other {# 个事务}}",
-    "xpack.apm.transactionDetails.transactionsDurationDistributionChart.unitShortLabel": "{transCount} 个{transType, select, request {请求} other {事务}}",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChartTitle": "事务持续时间分布",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChartTooltip.samplingDescription": "每个存储桶将显示一个样例事务。如果没有可用的样例，很可能是在代理配置设置了采样限制。",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChartTooltip.samplingLabel": "采样",
@@ -5245,7 +5239,6 @@
     "xpack.apm.transactionsTable.nameColumnLabel": "名称",
     "xpack.apm.transactionsTable.notFoundLabel": "未找到任何事务。",
     "xpack.apm.transactionsTable.transactionsPerMinuteColumnLabel": "每分钟事务数",
-    "xpack.apm.transactionsTable.transactionsPerMinuteUnitLabel": "tpm",
     "xpack.apm.tutorial.apmServer.title": "APM Server",
     "xpack.apm.tutorial.elasticCloud.textPre": "要启用 APM Server，请前往 [Elastic Cloud 控制台](https://cloud.elastic.co/deployments?q={cloudId}) 并在部署设置中启用 APM。启用后，请刷新此页面。",
     "xpack.apm.tutorial.elasticCloudInstructions.title": "APM 代理",

Original file line number	Diff line number	Diff line change
`@@ -144,7 +144,7 @@ describe('chart selectors', () => {`
`144`	`144`	`{`
`145`	`145`	`color: errorColor,`
`146`	`146`	`data: [{ x: 0, y: 0 }],`
`147`		`- legendValue: '0.0 tpm',`
	`147`	`+ legendValue: '0 tpm',`
`148`	`148`	`title: 'HTTP 5xx',`
`149`	`149`	`type: 'linemark',`
`150`	`150`	`},`