[APM] Service overview transactions table (#83429) (#84072)

Co-authored-by: Dario Gieselaar <[email protected]>

Author: sorenlouv

x-pack/plugins/apm/common/utils/formatters/duration.ts

@@ -8,9 +8,10 @@ import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import { memoize } from 'lodash';
 import { NOT_AVAILABLE_LABEL } from '../../../common/i18n';
-import { asDecimalOrInteger, asInteger } from './formatters';
+import { asDecimal, asDecimalOrInteger, asInteger } from './formatters';
 import { TimeUnit } from './datetime';
 import { Maybe } from '../../../typings/common';
+import { isFiniteNumber } from '../is_finite_number';
 
 interface FormatterOptions {
   defaultValue?: string;
@@ -99,7 +100,7 @@ function convertTo({
   microseconds: Maybe<number>;
   defaultValue?: string;
 }): ConvertedDuration {
-  if (microseconds == null) {
+  if (!isFiniteNumber(microseconds)) {
     return { value: defaultValue, formatted: defaultValue };
   }
 
@@ -143,14 +144,37 @@ export const getDurationFormatter: TimeFormatterBuilder = memoize(
   }
 );
 
+export function asTransactionRate(value: Maybe<number>) {
+  if (!isFiniteNumber(value)) {
+    return NOT_AVAILABLE_LABEL;
+  }
+
+  let displayedValue: string;
+
+  if (value === 0) {
+    displayedValue = '0';
+  } else if (value <= 0.1) {
+    displayedValue = '< 0.1';
+  } else {
+    displayedValue = asDecimal(value);
+  }
+
+  return i18n.translate('xpack.apm.transactionRateLabel', {
+    defaultMessage: `{value} tpm`,
+    values: {
+      value: displayedValue,
+    },
+  });
+}
+
 /**
  * Converts value and returns it formatted - 00 unit
  */
 export function asDuration(
   value: Maybe<number>,
   { defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
 ) {
-  if (value == null) {
+  if (!isFiniteNumber(value)) {
     return defaultValue;
   }
 

x-pack/plugins/apm/common/utils/formatters/formatters.ts

@@ -5,6 +5,9 @@
  */
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
+import { Maybe } from '../../../typings/common';
+import { NOT_AVAILABLE_LABEL } from '../../i18n';
+import { isFiniteNumber } from '../is_finite_number';
 
 export function asDecimal(value: number) {
   return numeral(value).format('0,0.0');
@@ -25,11 +28,11 @@ export function tpmUnit(type?: string) {
 }
 
 export function asPercent(
-  numerator: number,
+  numerator: Maybe<number>,
   denominator: number | undefined,
-  fallbackResult = ''
+  fallbackResult = NOT_AVAILABLE_LABEL
 ) {
-  if (!denominator || isNaN(numerator)) {
+  if (!denominator || !isFiniteNumber(numerator)) {
     return fallbackResult;
   }
 

x-pack/plugins/apm/common/utils/is_finite_number.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { isFinite } from 'lodash';
+import { Maybe } from '../../typings/common';
+
+// _.isNumber() returns true for NaN, _.isFinite() does not refine
+export function isFiniteNumber(value: Maybe<number>): value is number {
+  return isFinite(value);
+}

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx

@@ -65,21 +65,19 @@ export function ServiceStatsList({
       title: i18n.translate('xpack.apm.serviceMap.errorRatePopoverStat', {
         defaultMessage: 'Trans. error rate (avg.)',
       }),
-      description: isNumber(avgErrorRate) ? asPercent(avgErrorRate, 1) : null,
+      description: asPercent(avgErrorRate, 1, ''),
     },
     {
       title: i18n.translate('xpack.apm.serviceMap.avgCpuUsagePopoverStat', {
         defaultMessage: 'CPU usage (avg.)',
       }),
-      description: isNumber(avgCpuUsage) ? asPercent(avgCpuUsage, 1) : null,
+      description: asPercent(avgCpuUsage, 1, ''),
     },
     {
       title: i18n.translate('xpack.apm.serviceMap.avgMemoryUsagePopoverStat', {
         defaultMessage: 'Memory usage (avg.)',
       }),
-      description: isNumber(avgMemoryUsage)
-        ? asPercent(avgMemoryUsage, 1)
-        : null,
+      description: asPercent(avgMemoryUsage, 1, ''),
     },
   ];
 

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

@@ -128,7 +128,7 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) {
       }),
       field: 'cpu',
       sortable: true,
-      render: (value: number | null) => asPercent(value || 0, 1),
+      render: (value: number | null) => asPercent(value, 1),
     },
     {
       name: i18n.translate('xpack.apm.jvmsTable.heapMemoryColumnLabel', {

x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/ServiceListMetric.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { SparkPlotWithValueLabel } from '../../../shared/charts/spark_plot/spark_plot_with_value_label';
 
 export function ServiceListMetric({
@@ -16,14 +15,8 @@ export function ServiceListMetric({
   series?: Array<{ x: number; y: number | null }>;
   valueLabel: React.ReactNode;
 }) {
-  const {
-    urlParams: { start, end },
-  } = useUrlParams();
-
   return (
     <SparkPlotWithValueLabel
-      start={parseFloat(start!)}
-      end={parseFloat(end!)}
       valueLabel={valueLabel}
       series={series}
       color={color}

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

@@ -177,8 +177,7 @@ export const SERVICE_COLUMNS: Array<ITableColumn<ServiceListItem>> = [
     render: (_, { transactionErrorRate }) => {
       const value = transactionErrorRate?.value;
 
-      const valueLabel =
-        value !== null && value !== undefined ? asPercent(value, 1) : '';
+      const valueLabel = asPercent(value, 1);
 
       return (
         <ServiceListMetric

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

@@ -18,9 +18,9 @@ import { isRumAgentName } from '../../../../common/agent_name';
 import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
 import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
-import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
 import { SearchBar } from '../../shared/search_bar';
 import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
+import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';
 import { TableLinkFlexItem } from './table_link_flex_item';
 
 /**
@@ -78,30 +78,7 @@ export function ServiceOverview({
               </EuiFlexItem>
               <EuiFlexItem grow={6}>
                 <EuiPanel>
-                  <EuiFlexGroup justifyContent="spaceBetween">
-                    <EuiFlexItem>
-                      <EuiTitle size="xs">
-                        <h2>
-                          {i18n.translate(
-                            'xpack.apm.serviceOverview.transactionsTableTitle',
-                            {
-                              defaultMessage: 'Transactions',
-                            }
-                          )}
-                        </h2>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                    <TableLinkFlexItem>
-                      <TransactionOverviewLink serviceName={serviceName}>
-                        {i18n.translate(
-                          'xpack.apm.serviceOverview.transactionsTableLinkText',
-                          {
-                            defaultMessage: 'View transactions',
-                          }
-                        )}
-                      </TransactionOverviewLink>
-                    </TableLinkFlexItem>
-                  </EuiFlexGroup>
+                  <ServiceOverviewTransactionsTable serviceName={serviceName} />
                 </EuiPanel>
               </EuiFlexItem>
             </EuiFlexGroup>

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

@@ -21,10 +21,10 @@ import { px, truncate, unit } from '../../../../style/variables';
 import { SparkPlotWithValueLabel } from '../../../shared/charts/spark_plot/spark_plot_with_value_label';
 import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink';
 import { ErrorOverviewLink } from '../../../shared/Links/apm/ErrorOverviewLink';
+import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 import { ServiceOverviewTable } from '../service_overview_table';
 import { TableLinkFlexItem } from '../table_link_flex_item';
-import { FetchWrapper } from './fetch_wrapper';
 
 interface Props {
   serviceName: string;
@@ -135,8 +135,6 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
                 },
               }
             )}
-            start={parseFloat(start!)}
-            end={parseFloat(end!)}
           />
         );
       },
@@ -225,7 +223,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
-        <FetchWrapper status={status}>
+        <TableFetchWrapper status={status}>
           <ServiceOverviewTable
             columns={columns}
             items={items}
@@ -261,7 +259,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
               },
             }}
           />
-        </FetchWrapper>
+        </TableFetchWrapper>
       </EuiFlexItem>
     </EuiFlexGroup>
   );