[APM] Fixes mixed units in service overview latencies (#88277)

* Closes #87726. Uses ms as the unit for latencies in service overview.

* removes optional chaining in those cases where it is not needed

* updates test snapshot with correct value

* Revert "updates test snapshot with correct value"

This reverts commit 9a1bdd7b44.

* update param name from time -> value

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

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

@@ -46,5 +46,8 @@ describe('duration formatters', () => {
     it('converts to formatted decimal milliseconds', () => {
       expect(asMillisecondDuration(0)).toEqual('0 ms');
     });
+    it('formats correctly with undefined values', () => {
+      expect(asMillisecondDuration(undefined)).toEqual('N/A');
+    });
   });
 });

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

@@ -186,9 +186,9 @@ export function asDuration(
  * `asDuration`, but this is used in places like tables where we always want
  * the same units.
  */
-export function asMillisecondDuration(time: number) {
+export function asMillisecondDuration(value: Maybe<number>) {
   return convertTo({
     unit: 'milliseconds',
-    microseconds: time,
+    microseconds: value,
   }).formatted;
 }

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

@@ -15,7 +15,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import {
-  asDuration,
+  asMillisecondDuration,
   asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
@@ -92,7 +92,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
           <SparkPlot
             color="euiColorVis1"
             series={latency.timeseries}
-            valueLabel={asDuration(latency.value)}
+            valueLabel={asMillisecondDuration(latency.value)}
           />
         );
       },

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

@@ -17,7 +17,7 @@ import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../../common/i18n';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../../common/service_nodes';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import {
-  asDuration,
+  asMillisecondDuration,
   asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
@@ -107,7 +107,7 @@ export function ServiceOverviewInstancesTable({ serviceName }: Props) {
           <SparkPlot
             color="euiColorVis1"
             series={latency?.timeseries}
-            valueLabel={asDuration(latency?.value)}
+            valueLabel={asMillisecondDuration(latency?.value)}
           />
         );
       },

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

@@ -16,7 +16,7 @@ import React, { useState } from 'react';
 import { ValuesType } from 'utility-types';
 import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
 import {
-  asDuration,
+  asMillisecondDuration,
   asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
@@ -201,7 +201,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
             color="euiColorVis1"
             compact
             series={latency.timeseries ?? undefined}
-            valueLabel={asDuration(latency.value)}
+            valueLabel={asMillisecondDuration(latency.value)}
           />
         );
       },