[APM] Fixes inconsistent labels for throughput & latency (elastic#88101)

* Closes elastic#87483. Updates several labels to be consistent accross views.

* Updates integration tests/snapshots with new term

* Changes "traffic" => "throughput" in the labels

* addresses feedback from PR

* includes tpm unit in Observability overview page and updates test

docs/apm/service-overview.asciidoc

@@ -20,7 +20,7 @@ image::apm/images/latency.png[Service latency]
 [[service-traffic-transactions]]
 === Traffic and transactions
 
-The *Traffic* chart visualizes the average number of transactions per minute for the selected service.
+The *Throughput* chart visualizes the average number of transactions per minute for the selected service.
 
 The *Transactions* table displays a list of _transaction groups_ for the
 selected service and includes the latency, traffic, error rate, and the impact for each transaction.
@@ -71,7 +71,7 @@ image::apm/images/spans-dependencies.png[Span type duration and dependencies]
 
 The *All instances* table displays a list of all the available service instances within the selected time range.
 Depending on how the service runs, the instance could be a host or a container. The table displays latency, traffic,
-errors, CPU usage, and memory usage for each instance. By default, instances are sorted by _Traffic_.
+errors, CPU usage, and memory usage for each instance. By default, instances are sorted by _Throughput_.
 
 [role="screenshot"]
 image::apm/images/all-instances.png[All instances]

x-pack/plugins/apm/common/utils/join_by_key/index.ts

@@ -9,11 +9,11 @@ import { isEqual, pull, merge, castArray } from 'lodash';
 /**
  * Joins a list of records by a given key. Key can be any type of value, from
  * strings to plain objects, as long as it is present in all records. `isEqual`
- * is used for comparing keys. 
- * 
+ * is used for comparing keys.
+ *
  * UnionToIntersection is needed to get all keys of union types, see below for
  * example.
- * 
+ *
  const agentNames = [{ serviceName: '', agentName: '' }];
  const transactionRates = [{ serviceName: '', transactionsPerMinute: 1 }];
  const flattened = joinByKey(

x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx

@@ -137,9 +137,7 @@ export function getServiceColumns({
             field: 'transactionType',
             name: i18n.translate(
               'xpack.apm.servicesTable.transactionColumnLabel',
-              {
-                defaultMessage: 'Transaction type',
-              }
+              { defaultMessage: 'Transaction type' }
             ),
             width: px(unit * 10),
             sortable: true,
@@ -148,12 +146,9 @@ export function getServiceColumns({
       : []),
     {
       field: 'avgResponseTime',
-      name: i18n.translate(
-        'xpack.apm.servicesTable.avgResponseTimeColumnLabel',
-        {
-          defaultMessage: 'Avg. response time',
-        }
-      ),
+      name: i18n.translate('xpack.apm.servicesTable.latencyAvgColumnLabel', {
+        defaultMessage: 'Latency (avg.)',
+      }),
       sortable: true,
       dataType: 'number',
       render: (_, { avgResponseTime }) => (
@@ -168,12 +163,9 @@ export function getServiceColumns({
     },
     {
       field: 'transactionsPerMinute',
-      name: i18n.translate(
-        'xpack.apm.servicesTable.transactionsPerMinuteColumnLabel',
-        {
-          defaultMessage: 'Trans. per minute',
-        }
-      ),
+      name: i18n.translate('xpack.apm.servicesTable.throughputColumnLabel', {
+        defaultMessage: 'Throughput',
+      }),
       sortable: true,
       dataType: 'number',
       render: (_, { transactionsPerMinute }) => (

x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/service_list.test.tsx

@@ -76,13 +76,13 @@ describe('ServiceList', () => {
       expect(healthHeading).toBeNull();
     });
 
-    it('sorts by transactions per minute', async () => {
+    it('sorts by throughput', async () => {
       const { findByTitle } = renderWithTheme(<ServiceList items={items} />, {
         wrapper: Wrapper,
       });
 
       expect(
-        await findByTitle('Trans. per minute; Sorted in descending order')
+        await findByTitle('Throughput; Sorted in descending order')
       ).toBeInTheDocument();
     });
   });

x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx

@@ -102,9 +102,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
       field: 'throughputValue',
       name: i18n.translate(
         'xpack.apm.serviceOverview.dependenciesTableColumnThroughput',
-        {
-          defaultMessage: 'Traffic',
-        }
+        { defaultMessage: 'Throughput' }
       ),
       width: px(unit * 10),
       render: (_, { throughput }) => {

x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx

@@ -117,9 +117,7 @@ export function ServiceOverviewInstancesTable({ serviceName }: Props) {
       field: 'throughputValue',
       name: i18n.translate(
         'xpack.apm.serviceOverview.instancesTableColumnThroughput',
-        {
-          defaultMessage: 'Traffic',
-        }
+        { defaultMessage: 'Throughput' }
       ),
       width: px(unit * 10),
       render: (_, { throughput }) => {

x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx

@@ -51,7 +51,7 @@ export function ServiceOverviewThroughputChart({
       <EuiTitle size="xs">
         <h2>
           {i18n.translate('xpack.apm.serviceOverview.throughtputChartTitle', {
-            defaultMessage: 'Traffic',
+            defaultMessage: 'Throughput',
           })}
         </h2>
       </EuiTitle>
@@ -66,10 +66,8 @@ export function ServiceOverviewThroughputChart({
             type: 'linemark',
             color: theme.eui.euiColorVis0,
             title: i18n.translate(
-              'xpack.apm.serviceOverview.throughputChart.traffic',
-              {
-                defaultMessage: 'Traffic',
-              }
+              'xpack.apm.serviceOverview.throughtputChartTitle',
+              { defaultMessage: 'Throughput' }
             ),
           },
         ]}

x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx

@@ -210,10 +210,8 @@ export function ServiceOverviewTransactionsTable(props: Props) {
     {
       field: 'throughput',
       name: i18n.translate(
-        'xpack.apm.serviceOverview.transactionsTableColumnTroughput',
-        {
-          defaultMessage: 'Traffic',
-        }
+        'xpack.apm.serviceOverview.transactionsTableColumnThroughput',
+        { defaultMessage: 'Throughput' }
       ),
       width: px(unit * 10),
       render: (_, { throughput }) => {

x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx

@@ -101,10 +101,8 @@ export function TransactionList({ items, isLoading }: Props) {
       {
         field: 'transactionsPerMinute',
         name: i18n.translate(
-          'xpack.apm.transactionsTable.transactionsPerMinuteColumnLabel',
-          {
-            defaultMessage: 'Trans. per minute',
-          }
+          'xpack.apm.transactionsTable.throughputColumnLabel',
+          { defaultMessage: 'Throughput' }
         ),
         sortable: true,
         dataType: 'number',

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

@@ -26,7 +26,7 @@ export function TransactionBreakdownChart({
           <EuiTitle size="xs">
             <h3>
               {i18n.translate('xpack.apm.transactionBreakdown.chartTitle', {
-                defaultMessage: 'Average duration by span type',
+                defaultMessage: 'Time spent by span type',
               })}
             </h3>
           </EuiTitle>

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

@@ -13,21 +13,16 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';
 import { asTransactionRate } from '../../../../../common/utils/formatters';
 import { AnnotationsContextProvider } from '../../../../context/annotations/annotations_context';
 import { ChartPointerEventContextProvider } from '../../../../context/chart_pointer_event/chart_pointer_event_context';
-import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useTransactionThroughputChartsFetcher } from '../../../../hooks/use_transaction_throughput_chart_fetcher';
 import { LatencyChart } from '../latency_chart';
 import { TimeseriesChart } from '../timeseries_chart';
 import { TransactionBreakdownChart } from '../transaction_breakdown_chart';
 import { TransactionErrorRateChart } from '../transaction_error_rate_chart/';
 
 export function TransactionCharts() {
-  const { urlParams } = useUrlParams();
-  const { transactionType } = urlParams;
-
   const {
     throughputChartsData,
     throughputChartsStatus,
@@ -49,11 +44,16 @@ export function TransactionCharts() {
             <EuiFlexItem style={{ flexShrink: 1 }}>
               <EuiPanel>
                 <EuiTitle size="xs">
-                  <span>{tpmLabel(transactionType)}</span>
+                  <span>
+                    {i18n.translate(
+                      'xpack.apm.metrics.transactionChart.throughputLabel',
+                      { defaultMessage: 'Throughput' }
+                    )}
+                  </span>
                 </EuiTitle>
                 <TimeseriesChart
                   fetchStatus={throughputChartsStatus}
-                  id="requestPerMinutes"
+                  id="transactionsPerMinute"
                   timeseries={throughputTimeseries}
                   yLabelFormat={asTransactionRate}
                 />
@@ -76,19 +76,3 @@ export function TransactionCharts() {
     </>
   );
 }
-
-function tpmLabel(type?: string) {
-  return type === TRANSACTION_REQUEST
-    ? i18n.translate(
-        'xpack.apm.metrics.transactionChart.requestsPerMinuteLabel',
-        {
-          defaultMessage: 'Requests per minute',
-        }
-      )
-    : i18n.translate(
-        'xpack.apm.metrics.transactionChart.transactionsPerMinuteLabel',
-        {
-          defaultMessage: 'Transactions per minute',
-        }
-      );
-}

x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx

@@ -65,7 +65,7 @@ describe('APMSection', () => {
     expect(getByText('APM')).toBeInTheDocument();
     expect(getByText('View in app')).toBeInTheDocument();
     expect(getByText('Services 11')).toBeInTheDocument();
-    expect(getByText('Transactions per minute 312.00k')).toBeInTheDocument();
+    expect(getByText('Throughput 312.00k tpm')).toBeInTheDocument();
     expect(queryAllByTestId('loading')).toEqual([]);
   });
   it('shows loading state', () => {
@@ -80,6 +80,6 @@ describe('APMSection', () => {
     expect(getByTestId('loading')).toBeInTheDocument();
     expect(queryAllByText('View in app')).toEqual([]);
     expect(queryAllByText('Services 11')).toEqual([]);
-    expect(queryAllByText('Transactions per minute 312.00k')).toEqual([]);
+    expect(queryAllByText('Throughput 312.00k tpm')).toEqual([]);
   });
 });

x-pack/plugins/observability/public/components/app/section/apm/index.tsx

@@ -92,9 +92,9 @@ export function APMSection({ bucketSize }: Props) {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <StyledStat
-            title={formatTpm(stats?.transactions.value)}
-            description={i18n.translate('xpack.observability.overview.apm.transactionsPerMinute', {
-              defaultMessage: 'Transactions per minute',
+            title={`${formatTpm(stats?.transactions.value)} tpm`}
+            description={i18n.translate('xpack.observability.overview.apm.throughput', {
+              defaultMessage: 'Throughput',
             })}
             isLoading={isLoading}
             color={transactionsColor}

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

@@ -5152,8 +5152,6 @@
     "xpack.apm.metrics.transactionChart.machineLearningLabel": "機械学習:",
     "xpack.apm.metrics.transactionChart.machineLearningTooltip": "平均期間の周りのストリームには予測バウンドが表示されます。異常スコアが>= 75の場合、注釈が表示されます。",
     "xpack.apm.metrics.transactionChart.machineLearningTooltip.withKuery": "フィルタリングで検索バーを使用しているときには、機械学習結果が表示されません",
-    "xpack.apm.metrics.transactionChart.requestsPerMinuteLabel": "1 分あたりのリクエスト",
-    "xpack.apm.metrics.transactionChart.transactionsPerMinuteLabel": "1分あたりのトランザクション数",
     "xpack.apm.metrics.transactionChart.viewJob": "ジョブを表示",
     "xpack.apm.notAvailableLabel": "N/A",
     "xpack.apm.propertiesTable.agentFeature.noDataAvailableLabel": "利用可能なデータがありません",
@@ -5293,28 +5291,24 @@
     "xpack.apm.serviceOverview.mlNudgeMessage.content": "APM の異常検知統合で、異常なトランザクションを特定し、アップストリームおよびダウンストリームサービスの正常性を確認します。わずか数分で開始できます。",
     "xpack.apm.serviceOverview.mlNudgeMessage.dismissButton": "閉じる",
     "xpack.apm.serviceOverview.mlNudgeMessage.learnMoreButton": "使ってみる",
-    "xpack.apm.serviceOverview.throughputChart.traffic": "トラフィック",
     "xpack.apm.serviceOverview.throughtputChartTitle": "トラフィック",
     "xpack.apm.serviceOverview.transactionsTableColumnErrorRate": "エラー率",
     "xpack.apm.serviceOverview.transactionsTableColumnImpact": "インパクト",
     "xpack.apm.serviceOverview.transactionsTableColumnLatency.avg": "レイテンシ（平均）",
     "xpack.apm.serviceOverview.transactionsTableColumnLatency.p95": "レイテンシ（95 番目）",
     "xpack.apm.serviceOverview.transactionsTableColumnLatency.p99": "レイテンシ（99 番目）",
     "xpack.apm.serviceOverview.transactionsTableColumnName": "名前",
-    "xpack.apm.serviceOverview.transactionsTableColumnTroughput": "トラフィック",
     "xpack.apm.serviceOverview.transactionsTableLinkText": "トランザクションを表示",
     "xpack.apm.serviceOverview.transactionsTableTitle": "トランザクション",
     "xpack.apm.servicesTable.7xOldDataMessage": "また、移行が必要な古いデータがある可能性もあります。",
     "xpack.apm.servicesTable.7xUpgradeServerMessage": "バージョン7.xより前からのアップグレードですか？また、\n              APMサーバーインスタンスを7.0以降にアップグレードしていることも確認してください。",
-    "xpack.apm.servicesTable.avgResponseTimeColumnLabel": "平均応答時間",
     "xpack.apm.servicesTable.environmentColumnLabel": "環境",
     "xpack.apm.servicesTable.environmentCount": "{environmentCount, plural, one {1 個の環境} other {# 個の環境}}",
     "xpack.apm.servicesTable.healthColumnLabel": "ヘルス",
     "xpack.apm.servicesTable.nameColumnLabel": "名前",
     "xpack.apm.servicesTable.noServicesLabel": "APM サービスがインストールされていないようです。追加しましょう！",
     "xpack.apm.servicesTable.notFoundLabel": "サービスが見つかりません",
     "xpack.apm.servicesTable.transactionErrorRate": "エラー率%",
-    "xpack.apm.servicesTable.transactionsPerMinuteColumnLabel": "1 分あたりのトランザクション",
     "xpack.apm.servicesTable.UpgradeAssistantLink": "Kibana アップグレードアシスタントで詳細をご覧ください",
     "xpack.apm.settings.agentConfig": "エージェントの編集",
     "xpack.apm.settings.anomaly_detection.legacy_jobs.body": "以前の統合のレガシー機械学習ジョブが見つかりました。これは、APMアプリでは使用されていません。",
@@ -5441,7 +5435,6 @@
     "xpack.apm.transactionActionMenu.trace.title": "トレースの詳細",
     "xpack.apm.transactionActionMenu.viewInUptime": "ステータス",
     "xpack.apm.transactionActionMenu.viewSampleDocumentLinkLabel": "サンプルドキュメントを表示",
-    "xpack.apm.transactionBreakdown.chartTitle": "スパンタイプ別平均期間",
     "xpack.apm.transactionCardinalityWarning.body": "一意のトランザクション名の数が構成された値{bucketSize}を超えています。エージェントを再構成し、類似したトランザクションをグループ化するか、{codeBlock}の値を増やしてください。",
     "xpack.apm.transactionCardinalityWarning.docsLink": "詳細はドキュメントをご覧ください",
     "xpack.apm.transactionCardinalityWarning.title": "このビューには、報告されたトランザクションのサブセットが表示されます。",
@@ -5505,7 +5498,6 @@
     "xpack.apm.transactionsTable.impactColumnLabel": "インパクト",
     "xpack.apm.transactionsTable.nameColumnLabel": "名前",
     "xpack.apm.transactionsTable.notFoundLabel": "トランザクションが見つかりませんでした。",
-    "xpack.apm.transactionsTable.transactionsPerMinuteColumnLabel": "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 エージェント",
@@ -15997,7 +15989,6 @@
     "xpack.observability.overview.apm.appLink": "アプリで表示",
     "xpack.observability.overview.apm.services": "サービス",
     "xpack.observability.overview.apm.title": "APM",
-    "xpack.observability.overview.apm.transactionsPerMinute": "1分あたりのトランザクション数",
     "xpack.observability.overview.breadcrumb": "概要",
     "xpack.observability.overview.loadingObservability": "オブザーバビリティを読み込んでいます",
     "xpack.observability.overview.logs.appLink": "アプリで表示",