adding new transactions table

elastic · Jul 30, 2021 · 90ce3d0 · 90ce3d0
1 parent 549edb9
commit 90ce3d0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 72 deletions.
diff --git a/.../apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx b/.../apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
@@ -35,13 +35,20 @@ const INITIAL_STATE = {
 
 type SortField = 'name' | 'latency' | 'throughput' | 'errorRate' | 'impact';
 type SortDirection = 'asc' | 'desc';
-const PAGE_SIZE = 5;
 const DEFAULT_SORT = {
   direction: 'desc' as const,
   field: 'impact' as const,
 };
 
-export function ServiceOverviewTransactionsTable() {
+interface Props {
+  hideViewTransactionsLink?: boolean;
+  numberOfTransactionsPerPage?: number;
+}
+
+export function ServiceOverviewTransactionsTable({
+  hideViewTransactionsLink = false,
+  numberOfTransactionsPerPage = 5,
+}: Props) {
   const [tableOptions, setTableOptions] = useState<{
     pageIndex: number;
     sort: {
@@ -100,7 +107,10 @@ export function ServiceOverviewTransactionsTable() {
           response.transactionGroups,
           field,
           direction
-        ).slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE);
+        ).slice(
+          pageIndex * numberOfTransactionsPerPage,
+          (pageIndex + 1) * numberOfTransactionsPerPage
+        );
 
         return {
           ...response,
@@ -186,7 +196,7 @@ export function ServiceOverviewTransactionsTable() {
 
   const pagination = {
     pageIndex,
-    pageSize: PAGE_SIZE,
+    pageSize: numberOfTransactionsPerPage,
     totalItemCount: transactionGroupsTotalItems,
     hidePerPageOptions: true,
   };
@@ -207,20 +217,22 @@ export function ServiceOverviewTransactionsTable() {
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <TransactionOverviewLink
-              serviceName={serviceName}
-              latencyAggregationType={latencyAggregationType}
-              transactionType={transactionType}
-            >
-              {i18n.translate(
-                'xpack.apm.serviceOverview.transactionsTableLinkText',
-                {
-                  defaultMessage: 'View transactions',
-                }
-              )}
-            </TransactionOverviewLink>
-          </EuiFlexItem>
+          {!hideViewTransactionsLink && (
+            <EuiFlexItem grow={false}>
+              <TransactionOverviewLink
+                serviceName={serviceName}
+                latencyAggregationType={latencyAggregationType}
+                transactionType={transactionType}
+              >
+                {i18n.translate(
+                  'xpack.apm.serviceOverview.transactionsTableLinkText',
+                  {
+                    defaultMessage: 'View transactions',
+                  }
+                )}
+              </TransactionOverviewLink>
+            </EuiFlexItem>
+          )}
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>

diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
@@ -23,6 +23,7 @@ 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 { ServiceOverviewTransactionsTable } from '../service_overview/service_overview_transactions_table';
 import { TransactionList } from './transaction_list';
 import { useRedirect } from './useRedirect';
 import { useTransactionListFetcher } from './use_transaction_list';
@@ -73,10 +74,6 @@ 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(
@@ -118,6 +115,10 @@ export function TransactionOverview() {
           isLoading={transactionListStatus === 'loading'}
           items={transactionListData.items || []}
         />
+        <ServiceOverviewTransactionsTable
+          hideViewTransactionsLink
+          numberOfTransactionsPerPage={25}
+        />
       </EuiPanel>
     </>
   );

diff --git a/.../public/components/app/transaction_overview/transaction_list/transaction_list.stories.tsx b/.../public/components/app/transaction_overview/transaction_list/transaction_list.stories.tsx