From 178bd31122ad80a6de37f65670f8e7f122e202fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 10:37:33 +0200 Subject: [PATCH 01/10] Remove `MainStatsServiceInstanceItem` interface --- .../service_overview_instances_chart_and_table.tsx | 8 -------- .../service_overview_instances_table/get_columns.tsx | 3 ++- .../service_overview_instances_table/index.tsx | 3 ++- .../custom_tooltip.stories.tsx | 5 ++++- .../custom_tooltip.tsx | 5 ++++- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx index 719409b0f97ff..a6ef16fe85510 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx +++ b/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'>; diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx index d956612a9ac49..1ff896cff57f7 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx +++ b/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({ diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx index bfd5fea82c6cd..91955dbea47e5 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx @@ -20,7 +20,6 @@ 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'; @@ -28,6 +27,8 @@ 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 { diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.stories.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.stories.tsx index 6128526c577e4..ae3c871e25a1a 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.stories.tsx @@ -7,10 +7,13 @@ import { TooltipInfo } from '@elastic/charts'; import React from 'react'; +import { APIReturnType } from '../../../../services/rest/createCallApmApi'; import { getDurationFormatter } from '../../../../../common/utils/formatters'; -import { MainStatsServiceInstanceItem } from '../../../app/service_overview/service_overview_instances_chart_and_table'; import { CustomTooltip } from './custom_tooltip'; +type ServiceInstanceMainStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics'>; +type MainStatsServiceInstanceItem = ServiceInstanceMainStatistics['currentPeriod'][0]; + function getLatencyFormatter(props: TooltipInfo) { const maxLatency = Math.max( ...props.values.map((value) => { diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx index 027f764317e46..a0197c2f50c96 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx @@ -9,13 +9,16 @@ import { TooltipInfo } from '@elastic/charts'; import { EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; +import { APIReturnType } from '../../../../services/rest/createCallApmApi'; import { getServiceNodeName } from '../../../../../common/service_nodes'; import { asTransactionRate, TimeFormatter, } from '../../../../../common/utils/formatters'; import { useTheme } from '../../../../hooks/use_theme'; -import { MainStatsServiceInstanceItem } from '../../../app/service_overview/service_overview_instances_chart_and_table'; + +type ServiceInstanceMainStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics'>; +type MainStatsServiceInstanceItem = ServiceInstanceMainStatistics['currentPeriod'][0]; const latencyLabel = i18n.translate( 'xpack.apm.instancesLatencyDistributionChartTooltipLatencyLabel', From cc44b06422c80f53a67912ab5de758137f02adc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 10:53:47 +0200 Subject: [PATCH 02/10] Improve types in tables --- .../agent_configurations/List/index.tsx | 12 +++--- .../Settings/anomaly_detection/jobs_list.tsx | 2 +- .../custom_link/custom_link_table.tsx | 4 +- .../app/error_group_overview/List/index.tsx | 39 ++++++++++--------- .../app/service_node_overview/index.tsx | 4 +- .../app/trace_overview/trace_list.tsx | 8 ++-- .../components/shared/managed_table/index.tsx | 1 + 7 files changed, 38 insertions(+), 32 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/index.tsx index 51a025df88d8e..140584a625b90 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/index.tsx +++ b/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 }) => ( ), @@ -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) => ( - + render: (_, item) => ( + ), }, ...(canSave diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx index d520036d5f387..81a0da9792830 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx @@ -43,7 +43,7 @@ const columns: Array> = [ 'xpack.apm.settings.anomalyDetection.jobList.actionColumnLabel', { defaultMessage: 'Action' } ), - render: (jobId: string) => ( + render: (_, { job_id: jobId }) => ( {i18n.translate( 'xpack.apm.settings.anomalyDetection.jobList.mlJobLinkText', diff --git a/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx index f49f27d94a085..4a242bb661e3a 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx +++ b/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> = [ { field: 'label', name: i18n.translate( diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx index 6e181535cc05c..9e24d7fd74366 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx +++ b/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(() => { + const a: Array> = [ { name: ( <> @@ -80,7 +80,7 @@ function ErrorGroupList({ items, serviceName }: Props) { field: 'groupId', sortable: false, width: `${unit * 6}px`, - render: (groupId: string) => { + render: (_, { groupId }) => { return ( {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 ( { + render: (_, item: ErrorGroupItem) => { return ( - {message || NOT_AVAILABLE_LABEL} + {item.message || NOT_AVAILABLE_LABEL}
@@ -151,8 +151,8 @@ function ErrorGroupList({ items, serviceName }: Props) { field: 'handled', sortable: false, align: 'right', - render: (isUnhandled: boolean) => - isUnhandled === false && ( + render: (_, { handled }) => + handled === false && ( {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,17 @@ function ErrorGroupList({ items, serviceName }: Props) { } ), align: 'right', - render: (value?: number) => - value ? ( - + render: (_, { latestOccurrenceAt }) => + latestOccurrenceAt ? ( + ) : ( NOT_AVAILABLE_LABEL ), }, - ], - [serviceName, urlParams] - ); + ]; + + return a; + }, [serviceName, urlParams]); return ( { + 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', { diff --git a/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx index f1c8df553abf7..231c49a9a2197 100644 --- a/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx +++ b/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx @@ -73,7 +73,8 @@ const traceListColumns: Array> = [ }), sortable: true, dataType: 'number', - render: (time: number) => asMillisecondDuration(time), + render: (_, { averageResponseTime }) => + asMillisecondDuration(averageResponseTime), }, { field: 'transactionsPerMinute', @@ -82,7 +83,8 @@ const traceListColumns: Array> = [ }), sortable: true, dataType: 'number', - render: (value: number) => asTransactionRate(value), + render: (_, { transactionsPerMinute }) => + asTransactionRate(transactionsPerMinute), }, { field: 'impact', @@ -112,7 +114,7 @@ const traceListColumns: Array> = [ width: '20%', align: 'left', sortable: true, - render: (value: number) => , + render: (_, { impact }) => , }, ]; diff --git a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx index 98f8fb4162267..af8b317f5ec33 100644 --- a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx @@ -21,6 +21,7 @@ export interface ITableColumn { align?: string; width?: string; sortable?: boolean; + truncateText?: boolean; render?: (value: any, item: T) => unknown; } From 775577008a7983632d0f2d3f92fb792878cc62ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Wed, 4 Aug 2021 17:21:23 +0200 Subject: [PATCH 03/10] Use `TickFormatter ` --- .../apm/public/components/shared/charts/timeseries_chart.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx index 65ecdec0f36a5..cda3b216dcb31 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx @@ -19,6 +19,7 @@ import { RectAnnotation, ScaleType, Settings, + TickFormatter, YDomainRange, } from '@elastic/charts'; import { EuiIcon } from '@elastic/eui'; @@ -56,11 +57,11 @@ interface Props { /** * Formatter for y-axis tick values */ - yLabelFormat: (y: number) => string; + yLabelFormat: TickFormatter; /** * Formatter for legend and tooltip values */ - yTickFormat?: (y: number) => string; + yTickFormat?: TickFormatter; showAnnotations?: boolean; yDomain?: YDomainRange; anomalyTimeseries?: ReturnType< From 5e83a7fabb24a95e5b8cd161b5a72a945ea62e3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 11:12:02 +0200 Subject: [PATCH 04/10] Simplify chart selectors --- .../service_overview_errors_table/get_column.tsx | 4 ++-- .../service_overview/service_overview_errors_table/index.tsx | 2 +- .../get_service_error_group_main_statistics.ts | 2 +- .../apm/server/lib/services/get_service_error_groups/index.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx index b458f6147b3f1..cd2c70b0f10b7 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx +++ b/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 ; }, width: `${unit * 9}px`, diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx index 5c3384df567fe..c8604be50ee15 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx +++ b/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 = { diff --git a/x-pack/plugins/apm/server/lib/services/get_service_error_groups/get_service_error_group_main_statistics.ts b/x-pack/plugins/apm/server/lib/services/get_service_error_groups/get_service_error_group_main_statistics.ts index 0e4ed72814cbb..0d50e14fc89b0 100644 --- a/x-pack/plugins/apm/server/lib/services/get_service_error_groups/get_service_error_group_main_statistics.ts +++ b/x-pack/plugins/apm/server/lib/services/get_service_error_groups/get_service_error_group_main_statistics.ts @@ -82,7 +82,7 @@ export async function getServiceErrorGroupMainStatistics({ response.aggregations?.error_groups.buckets.map((bucket) => ({ group_id: bucket.key as string, name: getErrorName(bucket.sample.hits.hits[0]._source), - last_seen: new Date( + lastSeen: new Date( bucket.sample.hits.hits[0]?._source['@timestamp'] ).getTime(), occurrences: bucket.doc_count, diff --git a/x-pack/plugins/apm/server/lib/services/get_service_error_groups/index.ts b/x-pack/plugins/apm/server/lib/services/get_service_error_groups/index.ts index b89bc86e29172..a58539da722c3 100644 --- a/x-pack/plugins/apm/server/lib/services/get_service_error_groups/index.ts +++ b/x-pack/plugins/apm/server/lib/services/get_service_error_groups/index.ts @@ -47,7 +47,7 @@ export async function getServiceErrorGroups({ pageIndex: number; numBuckets: number; sortDirection: 'asc' | 'desc'; - sortField: 'name' | 'last_seen' | 'occurrences'; + sortField: 'name' | 'lastSeen' | 'occurrences'; transactionType: string; }) { return withApmSpan('get_service_error_groups', async () => { @@ -108,7 +108,7 @@ export async function getServiceErrorGroups({ response.aggregations?.error_groups.buckets.map((bucket) => ({ group_id: bucket.key as string, name: getErrorName(bucket.sample.hits.hits[0]._source), - last_seen: new Date( + lastSeen: new Date( bucket.sample.hits.hits[0]?._source['@timestamp'] ).getTime(), occurrences: { From 417f361f527b475cc2c178e869ef1a7e7c792dcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 10:16:03 +0200 Subject: [PATCH 05/10] Remove unused `KeyValue` --- .../lib/services/get_service_instance_metadata_details.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instance_metadata_details.ts b/x-pack/plugins/apm/server/lib/services/get_service_instance_metadata_details.ts index 1479b0fdbb73c..4d67a0a2b43ad 100644 --- a/x-pack/plugins/apm/server/lib/services/get_service_instance_metadata_details.ts +++ b/x-pack/plugins/apm/server/lib/services/get_service_instance_metadata_details.ts @@ -19,11 +19,6 @@ import { getProcessorEventForAggregatedTransactions, } from '../helpers/aggregated_transactions'; -export interface KeyValue { - key: string; - value: any | undefined; -} - export async function getServiceInstanceMetadataDetails({ serviceName, serviceNodeName, From d722d5be651d68d68037ddf7700bdd576ed8c031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 11:23:03 +0200 Subject: [PATCH 06/10] Avoid unneeded types --- .../plugins/apm/common/utils/formatters/datetime.ts | 5 ++++- .../components/shared/TimestampTooltip/index.tsx | 4 ++-- .../components/shared/charts/timeseries_chart.tsx | 5 ++--- .../plugins/apm/server/lib/traces/get_trace_items.ts | 12 ++---------- 4 files changed, 10 insertions(+), 16 deletions(-) diff --git a/x-pack/plugins/apm/common/utils/formatters/datetime.ts b/x-pack/plugins/apm/common/utils/formatters/datetime.ts index 88f70753f47c8..df9cb38b5d009 100644 --- a/x-pack/plugins/apm/common/utils/formatters/datetime.ts +++ b/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); diff --git a/x-pack/plugins/apm/public/components/shared/TimestampTooltip/index.tsx b/x-pack/plugins/apm/public/components/shared/TimestampTooltip/index.tsx index 17c802ab6a381..c4ba189221c85 100644 --- a/x-pack/plugins/apm/public/components/shared/TimestampTooltip/index.tsx +++ b/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; } diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx index cda3b216dcb31..65ecdec0f36a5 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx @@ -19,7 +19,6 @@ import { RectAnnotation, ScaleType, Settings, - TickFormatter, YDomainRange, } from '@elastic/charts'; import { EuiIcon } from '@elastic/eui'; @@ -57,11 +56,11 @@ interface Props { /** * Formatter for y-axis tick values */ - yLabelFormat: TickFormatter; + yLabelFormat: (y: number) => string; /** * Formatter for legend and tooltip values */ - yTickFormat?: TickFormatter; + yTickFormat?: (y: number) => string; showAnnotations?: boolean; yDomain?: YDomainRange; anomalyTimeseries?: ReturnType< diff --git a/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts b/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts index 026cf9dcceb79..6c957df313866 100644 --- a/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts +++ b/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts @@ -15,15 +15,10 @@ import { TRANSACTION_ID, ERROR_LOG_LEVEL, } from '../../../common/elasticsearch_fieldnames'; -import { APMError } from '../../../typings/es_schemas/ui/apm_error'; import { rangeQuery } from '../../../../observability/server'; import { Setup, SetupTimeRange } from '../helpers/setup_request'; import { PromiseValueType } from '../../../typings/common'; -export interface ErrorsPerTransaction { - [transactionId: string]: number; -} - export async function getTraceItems( traceId: string, setup: Setup & SetupTimeRange @@ -96,10 +91,7 @@ export async function getTraceItems( const items = traceResponse.hits.hits.map((hit) => hit._source); - const errorFrequencies: { - errorsPerTransaction: ErrorsPerTransaction; - errorDocs: APMError[]; - } = { + const errorFrequencies = { errorDocs: errorResponse.hits.hits.map(({ _source }) => _source), errorsPerTransaction: errorResponse.aggregations?.by_transaction_id.buckets.reduce( @@ -109,7 +101,7 @@ export async function getTraceItems( [current.key]: current.doc_count, }; }, - {} as ErrorsPerTransaction + {} as Record ) ?? {}, }; From 154375e904373f4e464b106d092086babceeb34e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 11:33:51 +0200 Subject: [PATCH 07/10] Add types to table --- .../components/app/error_group_overview/List/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx index 9e24d7fd74366..0575146a6bf5a 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx @@ -53,7 +53,7 @@ function ErrorGroupList({ items, serviceName }: Props) { const { urlParams } = useUrlParams(); const columns = useMemo(() => { - const a: Array> = [ + return [ { name: ( <> @@ -189,9 +189,7 @@ function ErrorGroupList({ items, serviceName }: Props) { NOT_AVAILABLE_LABEL ), }, - ]; - - return a; + ] as Array>; }, [serviceName, urlParams]); return ( From e00a7c989616bbddfb200304a6202d6945922abe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 11:40:50 +0200 Subject: [PATCH 08/10] Use `APIReturnType` instead of `PromiseReturnType` --- .../Waterfall/waterfall_helpers/waterfall_helpers.ts | 5 +++-- .../waterfall_container/WaterfallContainer.stories.tsx | 5 +++-- x-pack/plugins/apm/server/lib/traces/get_trace.ts | 2 -- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers.ts index 9ace59fae6320..b6e427e8cc0a1 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers.ts +++ b/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[]; } diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallContainer.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallContainer.stories.tsx index 20ca3194fbfdf..f8abff2c9609c 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/WaterfallContainer.stories.tsx +++ b/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, diff --git a/x-pack/plugins/apm/server/lib/traces/get_trace.ts b/x-pack/plugins/apm/server/lib/traces/get_trace.ts index 3c60cd84fca39..a0cc6b7241d4e 100644 --- a/x-pack/plugins/apm/server/lib/traces/get_trace.ts +++ b/x-pack/plugins/apm/server/lib/traces/get_trace.ts @@ -5,11 +5,9 @@ * 2.0. */ -import { PromiseReturnType } from '../../../../observability/typings/common'; import { Setup, SetupTimeRange } from '../helpers/setup_request'; import { getTraceItems } from './get_trace_items'; -export type TraceAPIResponse = PromiseReturnType; export async function getTrace(traceId: string, setup: Setup & SetupTimeRange) { const { errorsPerTransaction, ...trace } = await getTraceItems( traceId, From 63275d49686bb5be6b01b4f1772335826a0cdfb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 15:31:00 +0200 Subject: [PATCH 09/10] Fix last_seen in snapshot --- .../tests/services/error_groups_main_statistics.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/test/apm_api_integration/tests/services/error_groups_main_statistics.ts b/x-pack/test/apm_api_integration/tests/services/error_groups_main_statistics.ts index 3b91cb947c7f7..3f6edf1ccccfa 100644 --- a/x-pack/test/apm_api_integration/tests/services/error_groups_main_statistics.ts +++ b/x-pack/test/apm_api_integration/tests/services/error_groups_main_statistics.ts @@ -108,7 +108,7 @@ export default function ApiTest({ getService }: FtrProviderContext) { expectSnapshot(firstItem).toMatchInline(` Object { "group_id": "d16d39e7fa133b8943cea035430a7b4e", - "last_seen": 1627975146078, + "lastSeen": 1627975146078, "name": "Response status 404", "occurrences": 17, } From 1dbe61a141ad125bc2fe6c75b510904f0c5f43b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Thu, 5 Aug 2021 23:58:12 +0200 Subject: [PATCH 10/10] Removed legacy APM e2e --- .../apm/e2e/cypress/integration/apm.feature | 6 ---- .../cypress/support/step_definitions/apm.ts | 31 ------------------- 2 files changed, 37 deletions(-) delete mode 100644 x-pack/plugins/apm/e2e/cypress/integration/apm.feature delete mode 100644 x-pack/plugins/apm/e2e/cypress/support/step_definitions/apm.ts diff --git a/x-pack/plugins/apm/e2e/cypress/integration/apm.feature b/x-pack/plugins/apm/e2e/cypress/integration/apm.feature deleted file mode 100644 index 0cc8f00d48dfd..0000000000000 --- a/x-pack/plugins/apm/e2e/cypress/integration/apm.feature +++ /dev/null @@ -1,6 +0,0 @@ -Feature: APM - - Scenario: Transaction latency charts - Given a user browses the APM UI application - When the user inspects the opbeans-node service - Then should redirect to correct path diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/apm.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/apm.ts deleted file mode 100644 index d41f4cf508396..0000000000000 --- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/apm.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - * 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 { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'; -import { loginAndWaitForPage } from '../../integration/helpers'; - -/** The default time in ms to wait for a Cypress command to complete */ -export const DEFAULT_TIMEOUT = 60 * 1000; - -Given(`a user browses the APM UI application`, () => { - // Open service inventory page - loginAndWaitForPage(`/app/apm/services`, { - from: '2020-06-01T14:59:32.686Z', - to: '2020-06-16T16:59:36.219Z', - }); -}); - -When(`the user inspects the opbeans-node service`, () => { - // click opbeans-node service - cy.get(':contains(opbeans-node)', { timeout: DEFAULT_TIMEOUT }) - .last() - .click({ force: true }); -}); - -Then(`should redirect to correct path`, () => { - cy.url().should('contain', `/app/apm/services/opbeans-node/overview`); -});