[i18n] APM translations for TransactionOverview (#28489) (#28565)

* Translations for TransactionOverview

* Remove unused files

* Add translations

x-pack/plugins/apm/public/components/app/TransactionOverview/List/ImpactSparkLine.js

@@ -1,36 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react';
-import styled from 'styled-components';
-import { units, borderRadius, px, colors } from '../../../../style/variables';
-
-const ImpactBarBackground = styled.div`
-  height: ${px(units.minus)};
-  border-radius: ${borderRadius};
-  background: ${colors.gray4};
-  width: 100%;
-`;
-
-const ImpactBar = styled.div`
-  height: ${px(units.minus)};
-  background: ${colors.blue2};
-  border-radius: ${borderRadius};
-`;
-
-function ImpactSparkline({ impact }) {
-  if (!impact && impact !== 0) {
-    return <div>N/A</div>;
-  }
-
-  return (
-    <ImpactBarBackground>
-      <ImpactBar style={{ width: `${impact}%` }} />
-    </ImpactBarBackground>
-  );
-}
-
-export default ImpactSparkline;

x-pack/plugins/apm/public/components/app/TransactionOverview/List/ImpactTooltip.js

@@ -1,36 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react';
-import styled from 'styled-components';
-import { units, px } from '../../../../style/variables';
-import { EuiIcon } from '@elastic/eui';
-import { Tooltip } from 'pivotal-ui/react/tooltip';
-import { OverlayTrigger } from 'pivotal-ui/react/overlay-trigger';
-
-const TooltipWrapper = styled.div`
-  margin-left: ${px(units.half)};
-`;
-
-const ImpactTooltip = () => (
-  <TooltipWrapper>
-    <OverlayTrigger
-      placement="top"
-      trigger="hover"
-      overlay={
-        <Tooltip>
-          Impact shows the most used and
-          <br />
-          slowest endpoints in your service.
-        </Tooltip>
-      }
-    >
-      <EuiIcon type="questionInCircle" />
-    </OverlayTrigger>
-  </TooltipWrapper>
-);
-
-export default ImpactTooltip;

x-pack/plugins/apm/public/components/app/TransactionOverview/List/index.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
 import TooltipOverlay from '../../../shared/TooltipOverlay';
@@ -19,10 +20,18 @@ const TransactionNameLink = styled(RelativeLink)`
 `;
 
 export default function TransactionList({ items, serviceName, ...rest }) {
+  const notAvailableLabel = i18n.translate(
+    'xpack.apm.transactionsTable.notAvailableLabel',
+    {
+      defaultMessage: 'N/A'
+    }
+  );
   const columns = [
     {
       field: 'name',
-      name: 'Name',
+      name: i18n.translate('xpack.apm.transactionsTable.nameColumnLabel', {
+        defaultMessage: 'Name'
+      }),
       width: '50%',
       sortable: true,
       render: (transactionName, data) => {
@@ -33,9 +42,9 @@ export default function TransactionList({ items, serviceName, ...rest }) {
         const transactionPath = `/${serviceName}/transactions/${encodedType}/${encodedName}`;
 
         return (
-          <TooltipOverlay content={transactionName || 'N/A'}>
+          <TooltipOverlay content={transactionName || notAvailableLabel}>
             <TransactionNameLink path={transactionPath}>
-              {transactionName || 'N/A'}
+              {transactionName || notAvailableLabel}
             </TransactionNameLink>
           </TooltipOverlay>
         );
@@ -43,28 +52,51 @@ export default function TransactionList({ items, serviceName, ...rest }) {
     },
     {
       field: 'averageResponseTime',
-      name: 'Avg. duration',
+      name: i18n.translate(
+        'xpack.apm.transactionsTable.avgDurationColumnLabel',
+        {
+          defaultMessage: 'Avg. duration'
+        }
+      ),
       sortable: true,
       dataType: 'number',
       render: value => asMillis(value)
     },
     {
       field: 'p95',
-      name: '95th percentile',
+      name: i18n.translate(
+        'xpack.apm.transactionsTable.95thPercentileColumnLabel',
+        {
+          defaultMessage: '95th percentile'
+        }
+      ),
       sortable: true,
       dataType: 'number',
       render: value => asMillis(value)
     },
     {
       field: 'transactionsPerMinute',
-      name: 'Trans. per minute',
+      name: i18n.translate(
+        'xpack.apm.transactionsTable.transactionsPerMinuteColumnLabel',
+        {
+          defaultMessage: 'Trans. per minute'
+        }
+      ),
       sortable: true,
       dataType: 'number',
-      render: value => `${asDecimal(value)} tpm`
+      render: value =>
+        `${asDecimal(value)} ${i18n.translate(
+          'xpack.apm.transactionsTable.transactionsPerMinuteUnitLabel',
+          {
+            defaultMessage: 'tpm'
+          }
+        )}`
     },
     {
       field: 'impact',
-      name: 'Impact',
+      name: i18n.translate('xpack.apm.transactionsTable.impactColumnLabel', {
+        defaultMessage: 'Impact'
+      }),
       sortable: true,
       dataType: 'number',
       render: value => <ImpactBar value={value} />

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

@@ -5,6 +5,7 @@
  */
 
 import { EuiFormRow, EuiSelect, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { TransactionCharts } from 'x-pack/plugins/apm/public/components/shared/charts/TransactionCharts';
@@ -48,7 +49,14 @@ export class TransactionOverviewView extends React.Component<
     return (
       <React.Fragment>
         {serviceTransactionTypes.length > 1 ? (
-          <EuiFormRow label="Filter by type">
+          <EuiFormRow
+            label={i18n.translate(
+              'xpack.apm.transactionsTable.filterByTypeLabel',
+              {
+                defaultMessage: 'Filter by type'
+              }
+            )}
+          >
             <EuiSelect
               options={serviceTransactionTypes.map(type => ({
                 text: `${type}`,