From 491676eae2d1d97720d1da856a284cebf3d6a7ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <sorenlouv@gmail.com>
Date: Thu, 18 Jun 2020 13:57:50 +0200
Subject: [PATCH] Add translations and docs

---
 .../components/app/TraceOverview/index.tsx    |  4 +--
 .../app/TransactionOverview/index.tsx         | 34 +++++++++++++------
 .../apm/public/hooks/useTransactionList.ts    |  8 ++---
 .../lib/transaction_groups/transform.ts       |  4 +--
 4 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
index 9a3282d878c16..cdebb3aac129b 100644
--- a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
@@ -16,7 +16,7 @@ import { APIReturnType } from '../../../services/rest/createCallApmApi';
 
 type TracesAPIResponse = APIReturnType<'/api/apm/traces'>;
 const DEFAULT_RESPONSE: TracesAPIResponse = {
-  transactionGroups: [],
+  items: [],
   isAggregationAccurate: true,
   bucketSize: 0,
 };
@@ -64,7 +64,7 @@ export function TraceOverview() {
         <EuiFlexItem grow={7}>
           <EuiPanel>
             <TraceList
-              items={data.transactionGroups}
+              items={data.items}
               isLoading={status === FETCH_STATUS.LOADING}
             />
           </EuiPanel>
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
index 2ea3152578644..d6aaf1731faf8 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
@@ -12,10 +12,10 @@ import {
   EuiFlexItem,
   EuiHorizontalRule,
   EuiCallOut,
-  EuiLink,
   EuiCode,
 } from '@elastic/eui';
 import { Location } from 'history';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { first } from 'lodash';
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
@@ -25,6 +25,7 @@ import { IUrlParams } from '../../../context/UrlParamsContext/types';
 import { TransactionCharts } from '../../shared/charts/TransactionCharts';
 import { TransactionBreakdown } from '../../shared/TransactionBreakdown';
 import { TransactionList } from './List';
+import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { useRedirect } from './useRedirect';
 import { useFetcher } from '../../../hooks/useFetcher';
 import { getHasMLJob } from '../../../services/rest/ml';
@@ -161,7 +162,7 @@ export function TransactionOverview() {
             {!transactionListData.isAggregationAccurate && (
               <EuiCallOut
                 title={i18n.translate(
-                  'xpack.apm.transactionCardinalityWarning',
+                  'xpack.apm.transactionCardinalityWarning.title',
                   {
                     defaultMessage:
                       'This view shows a subset of reported transactions.',
@@ -171,21 +172,32 @@ export function TransactionOverview() {
                 iconType="alert"
               >
                 <p>
-                  The number of unique transaction names exceeds the configured
-                  value of {transactionListData.bucketSize}. Try reconfiguring
-                  your agents to group similar transactions or increase the
-                  value of
-                  <EuiCode>
-                    xpack.apm.ui.transactionGroupBucketSize
-                  </EuiCode>.{' '}
-                  <EuiLink href="#">Learn more in the docs.</EuiLink>.
+                  <FormattedMessage
+                    id="xpack.apm.transactionCardinalityWarning.body"
+                    defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
+                    values={{
+                      bucketSize: transactionListData.bucketSize,
+                      codeBlock: (
+                        <EuiCode>
+                          xpack.apm.ui.transactionGroupBucketSize
+                        </EuiCode>
+                      ),
+                    }}
+                  />
+
+                  <ElasticDocsLink section="/kibana" path="TODO">
+                    {i18n.translate(
+                      'xpack.apm.transactionCardinalityWarning.docsLink',
+                      { defaultMessage: 'Learn more in the docs' }
+                    )}
+                  </ElasticDocsLink>
                 </p>
               </EuiCallOut>
             )}
             <EuiSpacer size="s" />
             <TransactionList
               isLoading={transactionListStatus === 'loading'}
-              items={transactionListData.transactionGroups}
+              items={transactionListData.items}
             />
           </EuiPanel>
         </EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/hooks/useTransactionList.ts b/x-pack/plugins/apm/public/hooks/useTransactionList.ts
index b61b6446b03bb..ed6bb9309a557 100644
--- a/x-pack/plugins/apm/public/hooks/useTransactionList.ts
+++ b/x-pack/plugins/apm/public/hooks/useTransactionList.ts
@@ -24,9 +24,7 @@ type TransactionsAPIResponse = APIReturnType<
   '/api/apm/services/{serviceName}/transaction_groups'
 >;
 
-function getWithRelativeImpact(
-  items: TransactionsAPIResponse['transactionGroups']
-) {
+function getWithRelativeImpact(items: TransactionsAPIResponse['items']) {
   const impacts = items
     .map(({ impact }) => impact)
     .filter((impact) => impact !== null) as number[];
@@ -46,7 +44,7 @@ function getWithRelativeImpact(
 }
 
 const DEFAULT_RESPONSE: TransactionsAPIResponse = {
-  transactionGroups: [],
+  items: [],
   isAggregationAccurate: true,
   bucketSize: 0,
 };
@@ -76,7 +74,7 @@ export function useTransactionList(urlParams: IUrlParams) {
 
   const memoizedData = useMemo(
     () => ({
-      transactionGroups: getWithRelativeImpact(data.transactionGroups),
+      items: getWithRelativeImpact(data.items),
       isAggregationAccurate: data.isAggregationAccurate,
       bucketSize: data.bucketSize,
     }),
diff --git a/x-pack/plugins/apm/server/lib/transaction_groups/transform.ts b/x-pack/plugins/apm/server/lib/transaction_groups/transform.ts
index d405d9fc5576c..2128d3f37ab29 100644
--- a/x-pack/plugins/apm/server/lib/transaction_groups/transform.ts
+++ b/x-pack/plugins/apm/server/lib/transaction_groups/transform.ts
@@ -67,7 +67,7 @@ export function transactionGroupsTransformer({
   end: number;
   bucketSize: number;
 }): {
-  transactionGroups: ITransactionGroup[];
+  items: ITransactionGroup[];
   isAggregationAccurate: boolean;
   bucketSize: number;
 } {
@@ -83,7 +83,7 @@ export function transactionGroupsTransformer({
   );
 
   return {
-    transactionGroups: transactionGroupsWithRelativeImpact,
+    items: transactionGroupsWithRelativeImpact,
 
     // The aggregation is considered accurate if the configured bucket size is larger or equal to the number of buckets returned
     // the actual number of buckets retrieved are `bucketsize + 1` to detect whether it's above the limit