adding throughput

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

@@ -5,13 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiCallOut,
-  EuiCode,
-  EuiPanel,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiCallOut, EuiCode, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Location } from 'history';
@@ -24,7 +18,6 @@ import { TransactionCharts } from '../../shared/charts/transaction_charts';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { ServiceOverviewTransactionsTable } from '../service_overview/service_overview_transactions_table';
-import { TransactionList } from './transaction_list';
 import { useRedirect } from './useRedirect';
 import { useTransactionListFetcher } from './use_transaction_list';
 
@@ -58,10 +51,7 @@ export function TransactionOverview() {
   // redirect to first transaction type
   useRedirect(getRedirectLocation({ location, transactionType, urlParams }));
 
-  const {
-    transactionListData,
-    transactionListStatus,
-  } = useTransactionListFetcher();
+  const { transactionListData } = useTransactionListFetcher();
 
   // TODO: improve urlParams typings.
   // `serviceName` or `transactionType` will never be undefined here, and this check should not be needed
@@ -74,6 +64,7 @@ export function TransactionOverview() {
       <TransactionCharts />
       <EuiSpacer size="s" />
       <EuiPanel hasBorder={true}>
+        {/* TODO: check if it should be calculated in the new table */}
         {!transactionListData.isAggregationAccurate && (
           <EuiCallOut
             title={i18n.translate(
@@ -111,10 +102,10 @@ export function TransactionOverview() {
           </EuiCallOut>
         )}
         <EuiSpacer size="s" />
-        <TransactionList
+        {/* <TransactionList
           isLoading={transactionListStatus === 'loading'}
           items={transactionListData.items || []}
-        />
+        /> */}
         <ServiceOverviewTransactionsTable
           hideViewTransactionsLink
           numberOfTransactionsPerPage={25}

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

@@ -5,32 +5,16 @@
  * 2.0.
  */
 
-import {
-  EuiFlexGrid,
-  EuiFlexItem,
-  EuiPanel,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { EuiFlexGrid, EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
 import React from 'react';
-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 { useTransactionThroughputChartsFetcher } from '../../../../hooks/use_transaction_throughput_chart_fetcher';
+import { ServiceOverviewThroughputChart } from '../../../app/service_overview/service_overview_throughput_chart';
 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 {
-    throughputChartsData,
-    throughputChartsStatus,
-  } = useTransactionThroughputChartsFetcher();
-
-  const { throughputTimeseries } = throughputChartsData;
-
   return (
     <>
       <AnnotationsContextProvider>
@@ -43,22 +27,7 @@ export function TransactionCharts() {
             </EuiFlexItem>
 
             <EuiFlexItem style={{ flexShrink: 1 }}>
-              <EuiPanel hasBorder={true}>
-                <EuiTitle size="xs">
-                  <span>
-                    {i18n.translate(
-                      'xpack.apm.metrics.transactionChart.throughputLabel',
-                      { defaultMessage: 'Throughput' }
-                    )}
-                  </span>
-                </EuiTitle>
-                <TimeseriesChart
-                  fetchStatus={throughputChartsStatus}
-                  id="transactionsPerMinute"
-                  timeseries={throughputTimeseries}
-                  yLabelFormat={asTransactionRate}
-                />
-              </EuiPanel>
+              <ServiceOverviewThroughputChart />
             </EuiFlexItem>
           </EuiFlexGrid>