[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;
 }