[APM] Add table tabs showing summary of metrics

x-pack/plugins/apm/common/es_fields/apm.ts

@@ -109,6 +109,7 @@ export const ERROR_EXC_MESSAGE = 'error.exception.message'; // only to be used i
 export const ERROR_EXC_HANDLED = 'error.exception.handled'; // only to be used in es queries, since error.exception is now an array
 export const ERROR_EXC_TYPE = 'error.exception.type';
 export const ERROR_PAGE_URL = 'error.page.url';
+export const ERROR_TYPE = 'error.type';
 
 // METRICS
 export const METRIC_SYSTEM_FREE_MEMORY = 'system.memory.actual.free';

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

@@ -16,11 +16,11 @@ import { useHistory } from 'react-router-dom';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useTimeRange } from '../../../../hooks/use_time_range';
-import { TransactionsTable } from '../../../shared/transactions_table';
 import { replace } from '../../../shared/links/url_helpers';
 import { getKueryWithMobileFilters } from '../../../../../common/utils/get_kuery_with_mobile_filters';
 import { MobileTransactionCharts } from './transaction_charts';
 import { MobileTreemap } from '../charts/mobile_treemap';
+import { TransactionOverviewTabs } from './transaction_overview_tabs';
 
 export function MobileTransactionOverview() {
   const {
@@ -37,6 +37,7 @@ export function MobileTransactionOverview() {
       kuery,
       offset,
       comparisonEnabled,
+      mobileSelectedTab,
     },
   } = useApmParams('/mobile-services/{serviceName}/transactions');
 
@@ -88,15 +89,14 @@ export function MobileTransactionOverview() {
       />
       <EuiSpacer size="s" />
       <EuiPanel hasBorder={true}>
-        <TransactionsTable
-          hideViewTransactionsLink
-          numberOfTransactionsPerPage={25}
-          showMaxTransactionGroupsExceededWarning
+        <TransactionOverviewTabs
           environment={environment}
-          kuery={kueryWithMobileFilters}
+          kueryWithMobileFilters={kueryWithMobileFilters}
           start={start}
           end={end}
-          saveTableOptionsToUrl
+          comparisonEnabled={comparisonEnabled}
+          offset={offset}
+          mobileSelectedTab={mobileSelectedTab}
         />
       </EuiPanel>
     </>

x-pack/plugins/apm/public/components/app/mobile/transaction_overview/transaction_overview_tabs/app_version_tab.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { TabContentProps } from '.';
+import { isPending } from '../../../../../hooks/use_fetcher';
+import { StatsList } from './stats_list';
+import { SERVICE_VERSION } from '../../../../../../common/es_fields/apm';
+import { useMobileStatisticsFetcher } from './use_mobile_statistics_fetcher';
+
+function AppVersionTab({
+  environment,
+  kueryWithMobileFilters,
+  start,
+  end,
+  comparisonEnabled,
+  offset,
+}: TabContentProps) {
+  const {
+    agentName,
+    mainStatistics,
+    mainStatisticsStatus,
+    detailedStatistics,
+    detailedStatisticsStatus,
+  } = useMobileStatisticsFetcher({
+    field: SERVICE_VERSION,
+    environment,
+    kueryWithMobileFilters,
+    start,
+    end,
+    comparisonEnabled,
+    offset,
+  });
+
+  return (
+    <StatsList
+      agentName={agentName}
+      isLoading={isPending(mainStatisticsStatus)}
+      mainStatistics={mainStatistics}
+      detailedStatisticsLoading={isPending(detailedStatisticsStatus)}
+      detailedStatistics={detailedStatistics}
+      comparisonEnabled={comparisonEnabled}
+      offset={offset}
+    />
+  );
+}
+
+export const appVersionTab = {
+  dataTestSubj: 'apmAppVersionTab',
+  key: 'app_version_tab',
+  label: i18n.translate(
+    'xpack.apm.mobile.transactions.overview.tabs.app.version',
+    {
+      defaultMessage: 'App version',
+    }
+  ),
+  component: AppVersionTab,
+};

x-pack/plugins/apm/public/components/app/mobile/transaction_overview/transaction_overview_tabs/devices_tab.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { TabContentProps } from '.';
+import { isPending } from '../../../../../hooks/use_fetcher';
+import { StatsList } from './stats_list';
+import { useMobileStatisticsFetcher } from './use_mobile_statistics_fetcher';
+import { DEVICE_MODEL_IDENTIFIER } from '../../../../../../common/es_fields/apm';
+
+function DevicesTab({
+  environment,
+  kueryWithMobileFilters,
+  start,
+  end,
+  comparisonEnabled,
+  offset,
+}: TabContentProps) {
+  const {
+    agentName,
+    mainStatistics,
+    mainStatisticsStatus,
+    detailedStatistics,
+    detailedStatisticsStatus,
+  } = useMobileStatisticsFetcher({
+    field: DEVICE_MODEL_IDENTIFIER,
+    environment,
+    kueryWithMobileFilters,
+    start,
+    end,
+    comparisonEnabled,
+    offset,
+  });
+
+  return (
+    <StatsList
+      agentName={agentName}
+      isLoading={isPending(mainStatisticsStatus)}
+      mainStatistics={mainStatistics}
+      detailedStatisticsLoading={isPending(detailedStatisticsStatus)}
+      detailedStatistics={detailedStatistics}
+      comparisonEnabled={comparisonEnabled}
+      offset={offset}
+    />
+  );
+}
+
+export const devicesTab = {
+  dataTestSubj: 'apmDevicesTab',
+  key: 'devices_tab',
+  label: i18n.translate('xpack.apm.mobile.transactions.overview.tabs.devices', {
+    defaultMessage: 'Devices',
+  }),
+  component: DevicesTab,
+};

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

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { EuiSpacer, EuiTabs, EuiTab } from '@elastic/eui';
+import { push } from '../../../../shared/links/url_helpers';
+import { transactionsTab } from './transactions_tab';
+import { osVersionTab } from './os_version_tab';
+import { appVersionTab } from './app_version_tab';
+import { devicesTab } from './devices_tab';
+
+export interface TabContentProps {
+  environment: string;
+  start: string;
+  end: string;
+  kueryWithMobileFilters: string;
+  comparisonEnabled: boolean;
+  offset?: string;
+  mobileSelectedTab?: string;
+}
+
+const tabs = [transactionsTab, appVersionTab, osVersionTab, devicesTab];
+
+export function TransactionOverviewTabs({
+  environment,
+  start,
+  end,
+  kueryWithMobileFilters,
+  comparisonEnabled,
+  offset,
+  mobileSelectedTab,
+}: TabContentProps) {
+  const history = useHistory();
+
+  const { component: TabContent } =
+    tabs.find((tab) => tab.key === mobileSelectedTab) ?? transactionsTab;
+  return (
+    <>
+      <EuiTabs>
+        {tabs.map(({ dataTestSubj, key, label }) => (
+          <EuiTab
+            data-test-subj={dataTestSubj}
+            key={key}
+            isSelected={key === mobileSelectedTab}
+            onClick={() => {
+              push(history, {
+                query: {
+                  mobileSelectedTab: key,
+                },
+              });
+            }}
+          >
+            {label}
+          </EuiTab>
+        ))}
+      </EuiTabs>
+      <EuiSpacer size="m" />
+      <TabContent
+        {...{
+          environment,
+          start,
+          end,
+          kueryWithMobileFilters,
+          comparisonEnabled,
+          offset,
+        }}
+      />
+    </>
+  );
+}

x-pack/plugins/apm/public/components/app/mobile/transaction_overview/transaction_overview_tabs/os_version_tab.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { TabContentProps } from '.';
+import { isPending } from '../../../../../hooks/use_fetcher';
+import { StatsList } from './stats_list';
+import { useMobileStatisticsFetcher } from './use_mobile_statistics_fetcher';
+import { HOST_OS_VERSION } from '../../../../../../common/es_fields/apm';
+
+function OSVersionTab({
+  environment,
+  kueryWithMobileFilters,
+  start,
+  end,
+  comparisonEnabled,
+  offset,
+}: TabContentProps) {
+  const {
+    agentName,
+    mainStatistics,
+    mainStatisticsStatus,
+    detailedStatistics,
+    detailedStatisticsStatus,
+  } = useMobileStatisticsFetcher({
+    field: HOST_OS_VERSION,
+    environment,
+    kueryWithMobileFilters,
+    start,
+    end,
+    comparisonEnabled,
+    offset,
+  });
+
+  return (
+    <StatsList
+      agentName={agentName}
+      isLoading={isPending(mainStatisticsStatus)}
+      mainStatistics={mainStatistics}
+      detailedStatisticsLoading={isPending(detailedStatisticsStatus)}
+      detailedStatistics={detailedStatistics}
+      comparisonEnabled={comparisonEnabled}
+      offset={offset}
+    />
+  );
+}
+
+export const osVersionTab = {
+  dataTestSubj: 'apmOsVersionTab',
+  key: 'os_version_tab',
+  label: i18n.translate(
+    'xpack.apm.mobile.transactions.overview.tabs.os.version',
+    {
+      defaultMessage: 'OS version',
+    }
+  ),
+  component: OSVersionTab,
+};