[APM] Share components across Service overview and transactions. Add …

…time comparison to the Transactions page (#107299)

* adding comparison to transactions pages

* adding new transactions table

* adding throughput

* refactoring transacon group api

* adding missing filter

* fixing i18n

* fixing tests

* addressing PR comments

* moving table to shared folder

Co-authored-by: Kibana Machine <[email protected]>

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

@@ -19,7 +19,7 @@ import { ServiceOverviewDependenciesTable } from './service_overview_dependencie
 import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
 import { ServiceOverviewInstancesChartAndTable } from './service_overview_instances_chart_and_table';
 import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart';
-import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';
+import { TransactionsTable } from '../../shared/transactions_table';
 
 /**
  * The height a chart should be if it's next to a table with 5 rows and a title.
@@ -57,7 +57,7 @@ export function ServiceOverview() {
               </EuiFlexItem>
               <EuiFlexItem grow={7}>
                 <EuiPanel hasBorder={true}>
-                  <ServiceOverviewTransactionsTable />
+                  <TransactionsTable />
                 </EuiPanel>
               </EuiFlexItem>
             </EuiFlexGroup>

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

@@ -30,7 +30,7 @@ import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { MetricOverviewLink } from '../../../shared/Links/apm/MetricOverviewLink';
 import { ServiceNodeMetricOverviewLink } from '../../../shared/Links/apm/ServiceNodeMetricOverviewLink';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
-import { getLatencyColumnLabel } from '../get_latency_column_label';
+import { getLatencyColumnLabel } from '../../../shared/transactions_table/get_latency_column_label';
 import { MainStatsServiceInstanceItem } from '../service_overview_instances_chart_and_table';
 import { InstanceActionsMenu } from './instance_actions_menu';
 

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

@@ -15,8 +15,6 @@ import { TraceList } from './trace_list';
 type TracesAPIResponse = APIReturnType<'GET /api/apm/traces'>;
 const DEFAULT_RESPONSE: TracesAPIResponse = {
   items: [],
-  isAggregationAccurate: true,
-  bucketSize: 0,
 };
 
 export function TraceOverview() {

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

@@ -5,27 +5,17 @@
  * 2.0.
  */
 
-import {
-  EuiCallOut,
-  EuiCode,
-  EuiPanel,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { Location } from 'history';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { IUrlParams } from '../../../context/url_params_context/types';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { TransactionCharts } from '../../shared/charts/transaction_charts';
-import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
-import { TransactionList } from './transaction_list';
+import { TransactionsTable } from '../../shared/transactions_table';
 import { useRedirect } from './useRedirect';
-import { useTransactionListFetcher } from './use_transaction_list';
 
 function getRedirectLocation({
   location,
@@ -57,11 +47,6 @@ export function TransactionOverview() {
   // redirect to first transaction type
   useRedirect(getRedirectLocation({ location, transactionType, urlParams }));
 
-  const {
-    transactionListData,
-    transactionListStatus,
-  } = useTransactionListFetcher();
-
   // TODO: improve urlParams typings.
   // `serviceName` or `transactionType` will never be undefined here, and this check should not be needed
   if (!serviceName) {
@@ -73,50 +58,10 @@ export function TransactionOverview() {
       <TransactionCharts />
       <EuiSpacer size="s" />
       <EuiPanel hasBorder={true}>
-        <EuiTitle size="xs">
-          <h3>Transactions</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        {!transactionListData.isAggregationAccurate && (
-          <EuiCallOut
-            title={i18n.translate(
-              'xpack.apm.transactionCardinalityWarning.title',
-              {
-                defaultMessage:
-                  'This view shows a subset of reported transactions.',
-              }
-            )}
-            color="danger"
-            iconType="alert"
-          >
-            <p>
-              <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="/troubleshooting.html#troubleshooting-too-many-transactions"
-              >
-                {i18n.translate(
-                  'xpack.apm.transactionCardinalityWarning.docsLink',
-                  { defaultMessage: 'Learn more in the docs' }
-                )}
-              </ElasticDocsLink>
-            </p>
-          </EuiCallOut>
-        )}
-        <EuiSpacer size="s" />
-        <TransactionList
-          isLoading={transactionListStatus === 'loading'}
-          items={transactionListData.items || []}
+        <TransactionsTable
+          hideViewTransactionsLink
+          numberOfTransactionsPerPage={25}
+          showAggregationAccurateCallout
         />
       </EuiPanel>
     </>