From c48c5366499550b103e6305d2a5976636c5162e2 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Mon, 4 Feb 2019 22:50:33 -0800 Subject: [PATCH 1/3] [APM] closes #26247 by conditionally adding span subtype and action to the flyout if available --- .../elasticsearch_fieldnames.test.ts.snap | 12 +++ .../apm/common/elasticsearch_fieldnames.ts | 2 + .../SpanFlyout/StickySpanProperties.tsx | 83 +++++++++++++++---- 3 files changed, 81 insertions(+), 16 deletions(-) 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 4d3c164262d19..c087f544711a4 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 d61d6e9560ea1..e271d81af4450 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 5d950a6e13acb..a8170843a140f 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'; @@ -28,13 +29,30 @@ function getSpanLabel(type: string) { defaultMessage: 'Navigation timing' } ); + case 'mysql': + return 'MySQL'; + case 'query': + return i18n.translate( + 'xpack.apm.transactionDetails.spanFlyout.spanType.action.query', + { + defaultMessage: 'Query' + } + ); default: return type; } } -function getPrimaryType(type: string) { - return first(type.split('.')); +function getSpanTypes(span: Span) { + const { type, subtype, action } = span.span; + + const [primaryType, subtypeFromType, actionFromType] = type.split('.'); + + return { + type: primaryType, + subtype: subtype || subtypeFromType, + action: action || actionFromType + }; } interface Props { @@ -49,7 +67,10 @@ 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 { type, subtype, action } = getSpanTypes(span); + const spanTypeLabel = getSpanLabel(type); + const spanSubtypeLabel = getSpanLabel(subtype); + const spanActionLabel = getSpanLabel(action); const stickyProperties = [ { label: i18n.translate( @@ -63,18 +84,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 +104,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: spanTypeLabel, + truncated: true, + width: '15%' } ]; + if (spanSubtypeLabel) { + stickyProperties.push({ + fieldName: SPAN_SUBTYPE, + label: i18n.translate( + 'xpack.apm.transactionDetails.spanFlyout.subtypeLabel', + { + defaultMessage: 'Subtype' + } + ), + val: spanSubtypeLabel, + truncated: true, + width: '15%' + }); + } + + if (spanActionLabel) { + stickyProperties.push({ + fieldName: SPAN_ACTION, + label: i18n.translate( + 'xpack.apm.transactionDetails.spanFlyout.actionLabel', + { + defaultMessage: 'Action' + } + ), + val: spanActionLabel, + truncated: true, + width: '15%' + }); + } + return ; } From d19f75dc98f2d3bd2d22fea6c4bdafd74fec9e36 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Thu, 7 Feb 2019 01:56:15 -0800 Subject: [PATCH 2/3] renamed vars for better readability and tossed out the formatting on span action --- .../SpanFlyout/StickySpanProperties.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) 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 a8170843a140f..b415f51531ab5 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 @@ -18,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'; @@ -29,24 +29,24 @@ function getSpanLabel(type: string) { defaultMessage: 'Navigation timing' } ); + default: + return type; + } +} + +function formatSubtype(subtype: string) { + switch (subtype) { case 'mysql': return 'MySQL'; - case 'query': - return i18n.translate( - 'xpack.apm.transactionDetails.spanFlyout.spanType.action.query', - { - defaultMessage: 'Query' - } - ); default: - return type; + return subtype; } } function getSpanTypes(span: Span) { const { type, subtype, action } = span.span; - const [primaryType, subtypeFromType, actionFromType] = type.split('.'); + const [primaryType, subtypeFromType, actionFromType] = type.split('.'); // This is to support 6.x data return { type: primaryType, @@ -68,9 +68,8 @@ export function StickySpanProperties({ span, totalDuration }: Props) { const spanName = span.span.name; const spanDuration = span.span.duration.us; const { type, subtype, action } = getSpanTypes(span); - const spanTypeLabel = getSpanLabel(type); - const spanSubtypeLabel = getSpanLabel(subtype); - const spanActionLabel = getSpanLabel(action); + const spanType = formatType(type); + const spanSubtype = formatSubtype(subtype); const stickyProperties = [ { label: i18n.translate( @@ -113,13 +112,13 @@ export function StickySpanProperties({ span, totalDuration }: Props) { defaultMessage: 'Type' } ), - val: spanTypeLabel, + val: spanType, truncated: true, width: '15%' } ]; - if (spanSubtypeLabel) { + if (spanSubtype) { stickyProperties.push({ fieldName: SPAN_SUBTYPE, label: i18n.translate( @@ -128,13 +127,13 @@ export function StickySpanProperties({ span, totalDuration }: Props) { defaultMessage: 'Subtype' } ), - val: spanSubtypeLabel, + val: spanSubtype, truncated: true, width: '15%' }); } - if (spanActionLabel) { + if (action) { stickyProperties.push({ fieldName: SPAN_ACTION, label: i18n.translate( @@ -143,7 +142,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) { defaultMessage: 'Action' } ), - val: spanActionLabel, + val: action, truncated: true, width: '15%' }); From b67e31629a3efc5a3be11df940859b8ee04abb3f Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Thu, 7 Feb 2019 08:40:41 -0800 Subject: [PATCH 3/3] [APM] renamed some variables for clarity --- .../Waterfall/SpanFlyout/StickySpanProperties.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) 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 b415f51531ab5..61baf60e1de78 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 @@ -49,9 +49,9 @@ function getSpanTypes(span: Span) { const [primaryType, subtypeFromType, actionFromType] = type.split('.'); // This is to support 6.x data return { - type: primaryType, - subtype: subtype || subtypeFromType, - action: action || actionFromType + spanType: formatType(primaryType), + spanSubtype: formatSubtype(subtype || subtypeFromType), + spanAction: action || actionFromType }; } @@ -67,9 +67,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) { const spanName = span.span.name; const spanDuration = span.span.duration.us; - const { type, subtype, action } = getSpanTypes(span); - const spanType = formatType(type); - const spanSubtype = formatSubtype(subtype); + const { spanType, spanSubtype, spanAction } = getSpanTypes(span); const stickyProperties = [ { label: i18n.translate( @@ -133,7 +131,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) { }); } - if (action) { + if (spanAction) { stickyProperties.push({ fieldName: SPAN_ACTION, label: i18n.translate( @@ -142,7 +140,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) { defaultMessage: 'Action' } ), - val: action, + val: spanAction, truncated: true, width: '15%' });