[7.x] [APM] Various improvements from #104851 (#107726)

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

@@ -108,7 +108,10 @@ function getFormatsAccordingToDateDifference(
 }
 
 export function asAbsoluteDateTime(
-  time: number,
+  /**
+   * timestamp in milliseconds or ISO timestamp
+   */
+  time: number | string,
   timeUnit: TimeUnit = 'milliseconds'
 ) {
   const momentTime = moment(time);

x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/index.tsx

@@ -127,10 +127,10 @@ export function AgentConfigurationList({
       width: theme.eui.euiSizeXL,
       name: '',
       sortable: true,
-      render: (isApplied: boolean) => (
+      render: (_, { applied_by_agent: appliedByAgent }) => (
         <EuiToolTip
           content={
-            isApplied
+            appliedByAgent
               ? i18n.translate(
                   'xpack.apm.agentConfig.configTable.appliedTooltipMessage',
                   { defaultMessage: 'Applied by at least one agent' }
@@ -142,7 +142,7 @@ export function AgentConfigurationList({
           }
         >
           <EuiHealth
-            color={isApplied ? 'success' : theme.eui.euiColorLightShade}
+            color={appliedByAgent ? 'success' : theme.eui.euiColorLightShade}
           />
         </EuiToolTip>
       ),
@@ -177,7 +177,7 @@ export function AgentConfigurationList({
         { defaultMessage: 'Service environment' }
       ),
       sortable: true,
-      render: (environment: string) => getOptionLabel(environment),
+      render: (_, { service }) => getOptionLabel(service.environment),
     },
     {
       align: 'right',
@@ -187,8 +187,8 @@ export function AgentConfigurationList({
         { defaultMessage: 'Last updated' }
       ),
       sortable: true,
-      render: (value: number) => (
-        <TimestampTooltip time={value} timeUnit="minutes" />
+      render: (_, item) => (
+        <TimestampTooltip time={item['@timestamp']} timeUnit="minutes" />
       ),
     },
     ...(canSave

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx

@@ -43,7 +43,7 @@ const columns: Array<ITableColumn<Jobs[0]>> = [
       'xpack.apm.settings.anomalyDetection.jobList.actionColumnLabel',
       { defaultMessage: 'Action' }
     ),
-    render: (jobId: string) => (
+    render: (_, { job_id: jobId }) => (
       <MLExplorerLink jobId={jobId}>
         {i18n.translate(
           'xpack.apm.settings.anomalyDetection.jobList.mlJobLinkText',

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx

@@ -18,7 +18,7 @@ import React, { useState } from 'react';
 import { CustomLink } from '../../../../../../common/custom_link/custom_link_types';
 import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context';
 import { LoadingStatePrompt } from '../../../../shared/LoadingStatePrompt';
-import { ManagedTable } from '../../../../shared/managed_table';
+import { ITableColumn, ManagedTable } from '../../../../shared/managed_table';
 import { TimestampTooltip } from '../../../../shared/TimestampTooltip';
 
 interface Props {
@@ -31,7 +31,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
   const { core } = useApmPluginContext();
   const canSave = core.application.capabilities.apm.save;
 
-  const columns = [
+  const columns: Array<ITableColumn<CustomLink>> = [
     {
       field: 'label',
       name: i18n.translate(

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

@@ -17,7 +17,7 @@ import { truncate, unit } from '../../../../utils/style';
 import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink';
 import { ErrorOverviewLink } from '../../../shared/Links/apm/ErrorOverviewLink';
 import { APMQueryParams } from '../../../shared/Links/url_helpers';
-import { ManagedTable } from '../../../shared/managed_table';
+import { ITableColumn, ManagedTable } from '../../../shared/managed_table';
 import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 
 const GroupIdLink = euiStyled(ErrorDetailLink)`
@@ -52,8 +52,8 @@ interface Props {
 function ErrorGroupList({ items, serviceName }: Props) {
   const { urlParams } = useUrlParams();
 
-  const columns = useMemo(
-    () => [
+  const columns = useMemo(() => {
+    return [
       {
         name: (
           <>
@@ -80,7 +80,7 @@ function ErrorGroupList({ items, serviceName }: Props) {
         field: 'groupId',
         sortable: false,
         width: `${unit * 6}px`,
-        render: (groupId: string) => {
+        render: (_, { groupId }) => {
           return (
             <GroupIdLink serviceName={serviceName} errorGroupId={groupId}>
               {groupId.slice(0, 5) || NOT_AVAILABLE_LABEL}
@@ -94,7 +94,7 @@ function ErrorGroupList({ items, serviceName }: Props) {
         }),
         field: 'type',
         sortable: false,
-        render: (type: string) => {
+        render: (_, { type }) => {
           return (
             <ErrorLink
               title={type}
@@ -121,18 +121,18 @@ function ErrorGroupList({ items, serviceName }: Props) {
         field: 'message',
         sortable: false,
         width: '50%',
-        render: (message: string, item: ErrorGroupItem) => {
+        render: (_, item: ErrorGroupItem) => {
           return (
             <MessageAndCulpritCell>
               <EuiToolTip
                 id="error-message-tooltip"
-                content={message || NOT_AVAILABLE_LABEL}
+                content={item.message || NOT_AVAILABLE_LABEL}
               >
                 <MessageLink
                   serviceName={serviceName}
                   errorGroupId={item.groupId}
                 >
-                  {message || NOT_AVAILABLE_LABEL}
+                  {item.message || NOT_AVAILABLE_LABEL}
                 </MessageLink>
               </EuiToolTip>
               <br />
@@ -151,8 +151,8 @@ function ErrorGroupList({ items, serviceName }: Props) {
         field: 'handled',
         sortable: false,
         align: 'right',
-        render: (isUnhandled: boolean) =>
-          isUnhandled === false && (
+        render: (_, { handled }) =>
+          handled === false && (
             <EuiBadge color="warning">
               {i18n.translate('xpack.apm.errorsTable.unhandledLabel', {
                 defaultMessage: 'Unhandled',
@@ -167,8 +167,10 @@ function ErrorGroupList({ items, serviceName }: Props) {
         field: 'occurrenceCount',
         sortable: true,
         dataType: 'number',
-        render: (value?: number) =>
-          value ? numeral(value).format('0.[0]a') : NOT_AVAILABLE_LABEL,
+        render: (_, { occurrenceCount }) =>
+          occurrenceCount
+            ? numeral(occurrenceCount).format('0.[0]a')
+            : NOT_AVAILABLE_LABEL,
       },
       {
         field: 'latestOccurrenceAt',
@@ -180,16 +182,15 @@ function ErrorGroupList({ items, serviceName }: Props) {
           }
         ),
         align: 'right',
-        render: (value?: number) =>
-          value ? (
-            <TimestampTooltip time={value} timeUnit="minutes" />
+        render: (_, { latestOccurrenceAt }) =>
+          latestOccurrenceAt ? (
+            <TimestampTooltip time={latestOccurrenceAt} timeUnit="minutes" />
           ) : (
             NOT_AVAILABLE_LABEL
           ),
       },
-    ],
-    [serviceName, urlParams]
-  );
+    ] as Array<ITableColumn<ErrorGroupItem>>;
+  }, [serviceName, urlParams]);
 
   return (
     <ManagedTable

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

@@ -79,7 +79,7 @@ function ServiceNodeOverview() {
       ),
       field: 'name',
       sortable: true,
-      render: (name: string) => {
+      render: (_, { name }) => {
         const { displayedName, tooltip } =
           name === SERVICE_NODE_NAME_MISSING
             ? {
@@ -112,7 +112,7 @@ function ServiceNodeOverview() {
       }),
       field: 'cpu',
       sortable: true,
-      render: (value: number | null) => asPercent(value, 1),
+      render: (_, { cpu }) => asPercent(cpu, 1),
     },
     {
       name: i18n.translate('xpack.apm.jvmsTable.heapMemoryColumnLabel', {

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

@@ -51,14 +51,14 @@ export function getColumns({
       },
     },
     {
-      field: 'last_seen',
+      field: 'lastSeen',
       name: i18n.translate(
         'xpack.apm.serviceOverview.errorsTableColumnLastSeen',
         {
           defaultMessage: 'Last seen',
         }
       ),
-      render: (_, { last_seen: lastSeen }) => {
+      render: (_, { lastSeen }) => {
         return <TimestampTooltip time={lastSeen} timeUnit="minutes" />;
       },
       width: `${unit * 9}px`,

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

@@ -32,7 +32,7 @@ type ErrorGroupMainStatistics = APIReturnType<'GET /api/apm/services/{serviceNam
 type ErrorGroupDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/detailed_statistics'>;
 
 type SortDirection = 'asc' | 'desc';
-type SortField = 'name' | 'last_seen' | 'occurrences';
+type SortField = 'name' | 'lastSeen' | 'occurrences';
 
 const PAGE_SIZE = 5;
 const DEFAULT_SORT = {

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

@@ -25,14 +25,6 @@ interface ServiceOverviewInstancesChartAndTableProps {
   serviceName: string;
 }
 
-export interface MainStatsServiceInstanceItem {
-  serviceNodeName: string;
-  errorRate: number;
-  throughput: number;
-  latency: number;
-  cpuUsage: number;
-  memoryUsage: number;
-}
 type ApiResponseMainStats = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics'>;
 type ApiResponseDetailedStats = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/detailed_statistics'>;
 

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

@@ -31,9 +31,10 @@ import { MetricOverviewLink } from '../../../shared/Links/apm/MetricOverviewLink
 import { ServiceNodeMetricOverviewLink } from '../../../shared/Links/apm/ServiceNodeMetricOverviewLink';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { getLatencyColumnLabel } from '../../../shared/transactions_table/get_latency_column_label';
-import { MainStatsServiceInstanceItem } from '../service_overview_instances_chart_and_table';
 import { InstanceActionsMenu } from './instance_actions_menu';
 
+type ServiceInstanceMainStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics'>;
+type MainStatsServiceInstanceItem = ServiceInstanceMainStatistics['currentPeriod'][0];
 type ServiceInstanceDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/detailed_statistics'>;
 
 export function getColumns({

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

@@ -20,14 +20,15 @@ import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 import {
   PAGE_SIZE,
-  MainStatsServiceInstanceItem,
   SortDirection,
   SortField,
 } from '../service_overview_instances_chart_and_table';
 import { OverviewTableContainer } from '../../../shared/overview_table_container';
 import { getColumns } from './get_columns';
 import { InstanceDetails } from './intance_details';
 
+type ServiceInstanceMainStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics'>;
+type MainStatsServiceInstanceItem = ServiceInstanceMainStatistics['currentPeriod'][0];
 type ServiceInstanceDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/detailed_statistics'>;
 
 export interface TableOptions {

x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx

@@ -73,7 +73,8 @@ const traceListColumns: Array<ITableColumn<TraceGroup>> = [
     }),
     sortable: true,
     dataType: 'number',
-    render: (time: number) => asMillisecondDuration(time),
+    render: (_, { averageResponseTime }) =>
+      asMillisecondDuration(averageResponseTime),
   },
   {
     field: 'transactionsPerMinute',
@@ -82,7 +83,8 @@ const traceListColumns: Array<ITableColumn<TraceGroup>> = [
     }),
     sortable: true,
     dataType: 'number',
-    render: (value: number) => asTransactionRate(value),
+    render: (_, { transactionsPerMinute }) =>
+      asTransactionRate(transactionsPerMinute),
   },
   {
     field: 'impact',
@@ -112,7 +114,7 @@ const traceListColumns: Array<ITableColumn<TraceGroup>> = [
     width: '20%',
     align: 'left',
     sortable: true,
-    render: (value: number) => <ImpactBar value={value} />,
+    render: (_, { impact }) => <ImpactBar value={impact} />,
   },
 ];
 

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers.ts

@@ -7,12 +7,13 @@
 
 import { euiPaletteColorBlind } from '@elastic/eui';
 import { first, flatten, groupBy, isEmpty, sortBy, sum, uniq } from 'lodash';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { TraceAPIResponse } from '../../../../../../../../server/lib/traces/get_trace';
+import { APIReturnType } from '../../../../../../../services/rest/createCallApmApi';
 import { APMError } from '../../../../../../../../typings/es_schemas/ui/apm_error';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
 
+type TraceAPIResponse = APIReturnType<'GET /api/apm/traces/{traceId}'>;
+
 interface IWaterfallGroup {
   [key: string]: IWaterfallSpanOrTransaction[];
 }

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallContainer.stories.tsx

@@ -7,9 +7,8 @@
 
 import React, { ComponentType } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { TraceAPIResponse } from '../../../../../../server/lib/traces/get_trace';
 import { MockApmPluginContextWrapper } from '../../../../../context/apm_plugin/mock_apm_plugin_context';
+import { APIReturnType } from '../../../../../services/rest/createCallApmApi';
 import { WaterfallContainer } from './index';
 import { getWaterfall } from './Waterfall/waterfall_helpers/waterfall_helpers';
 import {
@@ -20,6 +19,8 @@ import {
   urlParams,
 } from './waterfallContainer.stories.data';
 
+type TraceAPIResponse = APIReturnType<'GET /api/apm/traces/{traceId}'>;
+
 export default {
   title: 'app/TransactionDetails/Waterfall',
   component: WaterfallContainer,

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

@@ -15,9 +15,9 @@ import {
 
 interface Props {
   /**
-   * timestamp in milliseconds
+   * timestamp in milliseconds or ISO timestamp
    */
-  time: number;
+  time: number | string;
   timeUnit?: TimeUnit;
 }