diff --git a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap index 4d3c164262d1..c087f544711a 100644 --- a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap +++ b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap @@ -42,6 +42,8 @@ exports[`Error SERVICE_LANGUAGE_NAME 1`] = `"nodejs"`; exports[`Error SERVICE_NAME 1`] = `"service name"`; +exports[`Error SPAN_ACTION 1`] = `undefined`; + exports[`Error SPAN_DURATION 1`] = `undefined`; exports[`Error SPAN_ID 1`] = `undefined`; @@ -52,6 +54,8 @@ exports[`Error SPAN_SQL 1`] = `undefined`; exports[`Error SPAN_START 1`] = `undefined`; +exports[`Error SPAN_SUBTYPE 1`] = `undefined`; + exports[`Error SPAN_TYPE 1`] = `undefined`; exports[`Error TRACE_ID 1`] = `"trace id"`; @@ -114,6 +118,8 @@ exports[`Span SERVICE_LANGUAGE_NAME 1`] = `undefined`; exports[`Span SERVICE_NAME 1`] = `"service name"`; +exports[`Span SPAN_ACTION 1`] = `"my action"`; + exports[`Span SPAN_DURATION 1`] = `1337`; exports[`Span SPAN_ID 1`] = `"span id"`; @@ -124,6 +130,8 @@ exports[`Span SPAN_SQL 1`] = `"db statement"`; exports[`Span SPAN_START 1`] = `undefined`; +exports[`Span SPAN_SUBTYPE 1`] = `"my subtype"`; + exports[`Span SPAN_TYPE 1`] = `"span type"`; exports[`Span TRACE_ID 1`] = `"trace id"`; @@ -186,6 +194,8 @@ exports[`Transaction SERVICE_LANGUAGE_NAME 1`] = `"nodejs"`; exports[`Transaction SERVICE_NAME 1`] = `"service name"`; +exports[`Transaction SPAN_ACTION 1`] = `undefined`; + exports[`Transaction SPAN_DURATION 1`] = `undefined`; exports[`Transaction SPAN_ID 1`] = `undefined`; @@ -196,6 +206,8 @@ exports[`Transaction SPAN_SQL 1`] = `undefined`; exports[`Transaction SPAN_START 1`] = `undefined`; +exports[`Transaction SPAN_SUBTYPE 1`] = `undefined`; + exports[`Transaction SPAN_TYPE 1`] = `undefined`; exports[`Transaction TRACE_ID 1`] = `"trace id"`; diff --git a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts index d61d6e9560ea..e271d81af445 100644 --- a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts +++ b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts @@ -27,6 +27,8 @@ export const TRACE_ID = 'trace.id'; export const SPAN_START = 'span.start.us'; export const SPAN_DURATION = 'span.duration.us'; export const SPAN_TYPE = 'span.type'; +export const SPAN_SUBTYPE = 'span.subtype'; +export const SPAN_ACTION = 'span.action'; export const SPAN_NAME = 'span.name'; export const SPAN_ID = 'span.id'; export const SPAN_SQL = 'context.db.statement'; diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx index 5d950a6e13ac..61baf60e1de7 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx @@ -5,11 +5,12 @@ */ import { i18n } from '@kbn/i18n'; -import { first } from 'lodash'; import React from 'react'; import { + SPAN_ACTION, SPAN_DURATION, SPAN_NAME, + SPAN_SUBTYPE, SPAN_TYPE } from 'x-pack/plugins/apm/common/elasticsearch_fieldnames'; import { NOT_AVAILABLE_LABEL } from 'x-pack/plugins/apm/common/i18n'; @@ -17,7 +18,7 @@ import { Span } from '../../../../../../../../typings/es_schemas/Span'; import { asMillis, asPercent } from '../../../../../../../utils/formatters'; import { StickyProperties } from '../../../../../../shared/StickyProperties'; -function getSpanLabel(type: string) { +function formatType(type: string) { switch (type) { case 'db': return 'DB'; @@ -33,8 +34,25 @@ function getSpanLabel(type: string) { } } -function getPrimaryType(type: string) { - return first(type.split('.')); +function formatSubtype(subtype: string) { + switch (subtype) { + case 'mysql': + return 'MySQL'; + default: + return subtype; + } +} + +function getSpanTypes(span: Span) { + const { type, subtype, action } = span.span; + + const [primaryType, subtypeFromType, actionFromType] = type.split('.'); // This is to support 6.x data + + return { + spanType: formatType(primaryType), + spanSubtype: formatSubtype(subtype || subtypeFromType), + spanAction: action || actionFromType + }; } interface Props { @@ -49,7 +67,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) { const spanName = span.span.name; const spanDuration = span.span.duration.us; - const spanTypeLabel = getSpanLabel(getPrimaryType(span.span.type)); + const { spanType, spanSubtype, spanAction } = getSpanTypes(span); const stickyProperties = [ { label: i18n.translate( @@ -63,18 +81,6 @@ export function StickySpanProperties({ span, totalDuration }: Props) { truncated: true, width: '50%' }, - { - fieldName: SPAN_TYPE, - label: i18n.translate( - 'xpack.apm.transactionDetails.spanFlyout.typeLabel', - { - defaultMessage: 'Type' - } - ), - val: spanTypeLabel, - truncated: true, - width: '50%' - }, { fieldName: SPAN_DURATION, label: i18n.translate( @@ -95,8 +101,50 @@ export function StickySpanProperties({ span, totalDuration }: Props) { ), val: asPercent(spanDuration, totalDuration), width: '50%' + }, + { + fieldName: SPAN_TYPE, + label: i18n.translate( + 'xpack.apm.transactionDetails.spanFlyout.typeLabel', + { + defaultMessage: 'Type' + } + ), + val: spanType, + truncated: true, + width: '15%' } ]; + if (spanSubtype) { + stickyProperties.push({ + fieldName: SPAN_SUBTYPE, + label: i18n.translate( + 'xpack.apm.transactionDetails.spanFlyout.subtypeLabel', + { + defaultMessage: 'Subtype' + } + ), + val: spanSubtype, + truncated: true, + width: '15%' + }); + } + + if (spanAction) { + stickyProperties.push({ + fieldName: SPAN_ACTION, + label: i18n.translate( + 'xpack.apm.transactionDetails.spanFlyout.actionLabel', + { + defaultMessage: 'Action' + } + ), + val: spanAction, + truncated: true, + width: '15%' + }); + } + return ; }