[APM] Service overview only shows top 5 transaction groups (#128287)

* fix transaction table

* fixing i18n

* PR comments

* fixing types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -81,6 +81,7 @@ export function TransactionOverview() {
           kuery={kuery}
           start={start}
           end={end}
+          saveTableOptionsToUrl
         />
       </EuiPanel>
     </>

x-pack/plugins/apm/public/components/routing/service_detail/index.tsx

@@ -8,7 +8,7 @@ import * as t from 'io-ts';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Outlet } from '@kbn/typed-react-router-config';
-import { toBooleanRt } from '@kbn/io-ts-utils';
+import { toBooleanRt, toNumberRt } from '@kbn/io-ts-utils';
 import { comparisonTypeRt } from '../../../../common/runtime_types/comparison_type_rt';
 import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { environmentRt } from '../../../../common/environment_rt';
@@ -99,17 +99,27 @@ export const serviceDetail = {
       },
     },
     children: {
-      '/services/{serviceName}/overview': page({
-        element: <ServiceOverview />,
-        tab: 'overview',
-        title: i18n.translate('xpack.apm.views.overview.title', {
-          defaultMessage: 'Overview',
+      '/services/{serviceName}/overview': {
+        ...page({
+          element: <ServiceOverview />,
+          tab: 'overview',
+          title: i18n.translate('xpack.apm.views.overview.title', {
+            defaultMessage: 'Overview',
+          }),
+          searchBarOptions: {
+            showTransactionTypeSelector: true,
+            showTimeComparison: true,
+          },
         }),
-        searchBarOptions: {
-          showTransactionTypeSelector: true,
-          showTimeComparison: true,
-        },
-      }),
+        params: t.partial({
+          query: t.partial({
+            page: toNumberRt,
+            pageSize: toNumberRt,
+            sortField: t.string,
+            sortDirection: t.union([t.literal('asc'), t.literal('desc')]),
+          }),
+        }),
+      },
       '/services/{serviceName}/transactions': {
         ...page({
           tab: 'transactions',
@@ -122,6 +132,14 @@ export const serviceDetail = {
             showTimeComparison: true,
           },
         }),
+        params: t.partial({
+          query: t.partial({
+            page: toNumberRt,
+            pageSize: toNumberRt,
+            sortField: t.string,
+            sortDirection: t.union([t.literal('asc'), t.literal('desc')]),
+          }),
+        }),
         children: {
           '/services/{serviceName}/transactions/view': {
             element: <TransactionDetails />,
@@ -167,10 +185,10 @@ export const serviceDetail = {
         }),
         params: t.partial({
           query: t.partial({
-            sortDirection: t.string,
+            page: toNumberRt,
+            pageSize: toNumberRt,
             sortField: t.string,
-            pageSize: t.string,
-            page: t.string,
+            sortDirection: t.union([t.literal('asc'), t.literal('desc')]),
           }),
         }),
         children: {

x-pack/plugins/apm/public/components/shared/transactions_table/get_columns.tsx

@@ -6,6 +6,7 @@
  */
 
 import {
+  EuiBasicTableColumn,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
@@ -23,16 +24,15 @@ import {
   asTransactionRate,
 } from '../../../../common/utils/formatters';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
-import { ImpactBar } from '../impact_bar';
-import { TransactionDetailLink } from '../links/apm/transaction_detail_link';
-import { ListMetric } from '../list_metric';
-import { ITableColumn } from '../managed_table';
-import { TruncateWithTooltip } from '../truncate_with_tooltip';
-import { getLatencyColumnLabel } from './get_latency_column_label';
 import {
   ChartType,
   getTimeSeriesColor,
 } from '../charts/helper/get_timeseries_color';
+import { ImpactBar } from '../impact_bar';
+import { TransactionDetailLink } from '../links/apm/transaction_detail_link';
+import { ListMetric } from '../list_metric';
+import { TruncateWithTooltip } from '../truncate_with_tooltip';
+import { getLatencyColumnLabel } from './get_latency_column_label';
 
 type TransactionGroupMainStatistics =
   APIReturnType<'GET /internal/apm/services/{serviceName}/transactions/groups/main_statistics'>;
@@ -59,7 +59,7 @@ export function getColumns({
   comparisonEnabled?: boolean;
   shouldShowSparkPlots?: boolean;
   comparisonType?: TimeRangeComparisonType;
-}): Array<ITableColumn<ServiceTransactionGroupItem>> {
+}): Array<EuiBasicTableColumn<ServiceTransactionGroupItem>> {
   return [
     {
       field: 'name',

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

@@ -5,14 +5,20 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { orderBy } from 'lodash';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import uuid from 'uuid';
 import { EuiCallOut } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiCode } from '@elastic/eui';
+import { useHistory } from 'react-router-dom';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
@@ -22,9 +28,9 @@ import { OverviewTableContainer } from '../overview_table_container';
 import { getColumns } from './get_columns';
 import { ElasticDocsLink } from '../links/elastic_docs_link';
 import { useBreakpoints } from '../../../hooks/use_breakpoints';
-import { ManagedTable } from '../managed_table';
 import { useAnyOfApmParams } from '../../../hooks/use_apm_params';
 import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
+import { fromQuery, toQuery } from '../links/url_helpers';
 
 type ApiResponse =
   APIReturnType<'GET /internal/apm/services/{serviceName}/transactions/groups/main_statistics'>;
@@ -64,6 +70,7 @@ interface Props {
   kuery: string;
   start: string;
   end: string;
+  saveTableOptionsToUrl?: boolean;
 }
 
 export function TransactionsTable({
@@ -77,32 +84,45 @@ export function TransactionsTable({
   kuery,
   start,
   end,
+  saveTableOptionsToUrl = false,
 }: Props) {
-  const [tableOptions] = useState<{
-    pageIndex: number;
-    sort: {
-      direction: SortDirection;
-      field: SortField;
-    };
+  const history = useHistory();
+
+  const {
+    query: {
+      comparisonEnabled,
+      comparisonType,
+      latencyAggregationType,
+      page: urlPage = 0,
+      pageSize: urlPageSize = numberOfTransactionsPerPage,
+      sortField: urlSortField = 'impact',
+      sortDirection: urlSortDirection = 'desc',
+    },
+  } = useAnyOfApmParams(
+    '/services/{serviceName}/transactions',
+    '/services/{serviceName}/overview'
+  );
+
+  const [tableOptions, setTableOptions] = useState<{
+    page: { index: number; size: number };
+    sort: { direction: SortDirection; field: SortField };
   }>({
-    pageIndex: 0,
-    sort: DEFAULT_SORT,
+    page: { index: urlPage, size: urlPageSize },
+    sort: {
+      field: urlSortField as SortField,
+      direction: urlSortDirection as SortDirection,
+    },
   });
 
   // SparkPlots should be hidden if we're in two-column view and size XL (1200px)
   const { isXl } = useBreakpoints();
   const shouldShowSparkPlots = isSingleColumn || !isXl;
 
-  const { pageIndex, sort } = tableOptions;
+  const { page, sort } = tableOptions;
   const { direction, field } = sort;
+  const { index, size } = page;
 
   const { transactionType, serviceName } = useApmServiceContext();
-  const {
-    query: { comparisonEnabled, comparisonType, latencyAggregationType },
-  } = useAnyOfApmParams(
-    '/services/{serviceName}/transactions',
-    '/services/{serviceName}/overview'
-  );
 
   const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
     start,
@@ -137,10 +157,7 @@ export function TransactionsTable({
           response.transactionGroups,
           field,
           direction
-        ).slice(
-          pageIndex * numberOfTransactionsPerPage,
-          (pageIndex + 1) * numberOfTransactionsPerPage
-        );
+        ).slice(index * size, (index + 1) * size);
 
         return {
           // Everytime the main statistics is refetched, updates the requestId making the detailed API to be refetched.
@@ -162,7 +179,8 @@ export function TransactionsTable({
       end,
       transactionType,
       latencyAggregationType,
-      pageIndex,
+      index,
+      size,
       direction,
       field,
       // not used, but needed to trigger an update when comparisonType is changed either manually by user or when time range is changed
@@ -240,6 +258,21 @@ export function TransactionsTable({
   const isLoading = status === FETCH_STATUS.LOADING;
   const isNotInitiated = status === FETCH_STATUS.NOT_INITIATED;
 
+  const pagination = useMemo(
+    () => ({
+      pageIndex: index,
+      pageSize: size,
+      totalItemCount: transactionGroupsTotalItems,
+      showPerPageOptions,
+    }),
+    [index, size, transactionGroupsTotalItems, showPerPageOptions]
+  );
+
+  const sorting = useMemo(
+    () => ({ sort: { field, direction } }),
+    [field, direction]
+  );
+
   return (
     <EuiFlexGroup
       direction="column"
@@ -318,24 +351,49 @@ export function TransactionsTable({
               transactionGroupsTotalItems === 0 && isNotInitiated
             }
           >
-            <ManagedTable
-              isLoading={isLoading}
-              error={status === FETCH_STATUS.FAILURE}
-              columns={columns}
-              items={transactionGroups}
-              initialSortField="impact"
-              initialSortDirection="desc"
-              initialPageSize={numberOfTransactionsPerPage}
-              noItemsMessage={
-                isLoading
-                  ? i18n.translate('xpack.apm.transactionsTable.loading', {
-                      defaultMessage: 'Loading...',
-                    })
-                  : i18n.translate('xpack.apm.transactionsTable.noResults', {
-                      defaultMessage: 'No transaction groups found',
+            <EuiBasicTable
+              loading={isLoading}
+              error={
+                status === FETCH_STATUS.FAILURE
+                  ? i18n.translate('xpack.apm.transactionsTable.errorMessage', {
+                      defaultMessage: 'Failed to fetch',
                     })
+                  : ''
               }
-              showPerPageOptions={showPerPageOptions}
+              items={transactionGroups}
+              columns={columns}
+              pagination={pagination}
+              sorting={sorting}
+              onChange={(newTableOptions: {
+                page?: { index: number; size: number };
+                sort?: { field: string; direction: SortDirection };
+              }) => {
+                setTableOptions({
+                  page: {
+                    index: newTableOptions.page?.index ?? 0,
+                    size:
+                      newTableOptions.page?.size ?? numberOfTransactionsPerPage,
+                  },
+                  sort: newTableOptions.sort
+                    ? {
+                        field: newTableOptions.sort.field as SortField,
+                        direction: newTableOptions.sort.direction,
+                      }
+                    : DEFAULT_SORT,
+                });
+                if (saveTableOptionsToUrl) {
+                  history.push({
+                    ...history.location,
+                    search: fromQuery({
+                      ...toQuery(history.location.search),
+                      page: newTableOptions.page?.index,
+                      pageSize: newTableOptions.page?.size,
+                      sortField: newTableOptions.sort?.field,
+                      sortDirection: newTableOptions.sort?.direction,
+                    }),
+                  });
+                }
+              }}
             />
           </OverviewTableContainer>
         </EuiFlexItem>

x-pack/plugins/translations/translations/ja-JP.json

@@ -7648,8 +7648,6 @@
     "xpack.apm.transactionsTable.cardinalityWarning.docsLink": "詳細はドキュメントをご覧ください",
     "xpack.apm.transactionsTable.cardinalityWarning.title": "このビューには、報告されたトランザクションのサブセットが表示されます。",
     "xpack.apm.transactionsTable.linkText": "トランザクションを表示",
-    "xpack.apm.transactionsTable.loading": "読み込み中...",
-    "xpack.apm.transactionsTable.noResults": "トランザクショングループが見つかりません",
     "xpack.apm.transactionsTable.title": "トランザクション",
     "xpack.apm.transactionTypesSelectCustomOptionText": "新しいトランザクションタイプとして\\{searchValue\\}を追加",
     "xpack.apm.transactionTypesSelectPlaceholder": "トランザクションタイプを選択",

x-pack/plugins/translations/translations/zh-CN.json

@@ -7666,8 +7666,6 @@
     "xpack.apm.transactionsTable.cardinalityWarning.docsLink": "在文档中了解详情",
     "xpack.apm.transactionsTable.cardinalityWarning.title": "此视图显示已报告事务的子集。",
     "xpack.apm.transactionsTable.linkText": "查看事务",
-    "xpack.apm.transactionsTable.loading": "正在加载……",
-    "xpack.apm.transactionsTable.noResults": "未找到事务组",
     "xpack.apm.transactionsTable.title": "事务",
     "xpack.apm.transactionTypesSelectCustomOptionText": "将 \\{searchValue\\} 添加为新事务类型",
     "xpack.apm.transactionTypesSelectPlaceholder": "选择事务类型",