[APM] Service overview: Transactions table

x-pack/plugins/apm/common/utils/formatters/duration.ts

@@ -6,9 +6,9 @@
 
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
-import { memoize } from 'lodash';
+import { memoize, isNumber } from 'lodash';
 import { NOT_AVAILABLE_LABEL } from '../../../common/i18n';
-import { asDecimalOrInteger, asInteger } from './formatters';
+import { asDecimal, asDecimalOrInteger, asInteger } from './formatters';
 import { TimeUnit } from './datetime';
 import { Maybe } from '../../../typings/common';
 
@@ -143,6 +143,29 @@ export const getDurationFormatter: TimeFormatterBuilder = memoize(
   }
 );
 
+export function asTransactionRate(value: Maybe<number>) {
+  if (!isNumber(value)) {
+    return NOT_AVAILABLE_LABEL;
+  }
+
+  let displayedValue: string;
+
+  if (value === 0) {
+    displayedValue = '0';
+  } else if (value <= 0.1) {
+    displayedValue = '< 0.1';
+  } else {
+    displayedValue = asDecimal(value);
+  }
+
+  return i18n.translate('xpack.apm.transactionRateLabel', {
+    defaultMessage: `{value} tpm`,
+    values: {
+      value: displayedValue,
+    },
+  });
+}
+
 /**
  * Converts value and returns it formatted - 00 unit
  */

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

@@ -19,9 +19,9 @@ import { isRumAgentName } from '../../../../common/agent_name';
 import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
 import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
-import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
 import { SearchBar } from '../../shared/search_bar';
 import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
+import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';
 import { TableLinkFlexItem } from './table_link_flex_item';
 
 const rowHeight = 310;
@@ -84,30 +84,7 @@ export function ServiceOverview({
               </EuiFlexItem>
               <EuiFlexItem grow={6}>
                 <EuiPanel>
-                  <EuiFlexGroup justifyContent="spaceBetween">
-                    <EuiFlexItem>
-                      <EuiTitle size="xs">
-                        <h2>
-                          {i18n.translate(
-                            'xpack.apm.serviceOverview.transactionsTableTitle',
-                            {
-                              defaultMessage: 'Transactions',
-                            }
-                          )}
-                        </h2>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                    <TableLinkFlexItem>
-                      <TransactionOverviewLink serviceName={serviceName}>
-                        {i18n.translate(
-                          'xpack.apm.serviceOverview.transactionsTableLinkText',
-                          {
-                            defaultMessage: 'View transactions',
-                          }
-                        )}
-                      </TransactionOverviewLink>
-                    </TableLinkFlexItem>
-                  </EuiFlexGroup>
+                  <ServiceOverviewTransactionsTable serviceName={serviceName} />
                 </EuiPanel>
               </EuiFlexItem>
             </EuiFlexGroup>

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

@@ -22,7 +22,7 @@ import { callApmApi } from '../../../../services/rest/createCallApmApi';
 import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink';
 import { px, truncate, unit } from '../../../../style/variables';
-import { FetchWrapper } from './fetch_wrapper';
+import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 
 interface Props {
   serviceName: string;
@@ -223,7 +223,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
-        <FetchWrapper hasData={!!items.length} status={status}>
+        <TableFetchWrapper hasData={!!items.length} status={status}>
           <EuiBasicTable
             columns={columns}
             items={items}
@@ -259,7 +259,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
               },
             }}
           />
-        </FetchWrapper>
+        </TableFetchWrapper>
       </EuiFlexItem>
     </EuiFlexGroup>
   );