Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] Add span subtype and action to Span Flyout #30041

Merged
merged 3 commits into from
Feb 7, 2019
Merged

[APM] Add span subtype and action to Span Flyout #30041

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c48c536
[APM] closes #26247 by conditionally adding span subtype and action t…
ogupte Feb 5, 2019
d19f75d
renamed vars for better readability and tossed out the formatting on …
ogupte Feb 7, 2019
b67e316
[APM] renamed some variables for clarity
ogupte Feb 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand All @@ -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"`;
Expand Down Expand Up @@ -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"`;
Expand All @@ -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"`;
Expand Down Expand Up @@ -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`;
Expand All @@ -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"`;
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
84 changes: 67 additions & 17 deletions ...ctionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,20 @@
*/

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';
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';
Expand All @@ -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 {
type: primaryType,
subtype: subtype || subtypeFromType,
action: action || actionFromType
};
sorenlouv marked this conversation as resolved.
Show resolved Hide resolved
}

interface Props {
Expand All @@ -49,7 +67,9 @@ 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 spanType = formatType(type);
const spanSubtype = formatSubtype(subtype);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Last thing (I promise): can you move these formatters inside getSpanTypes (unless we need the unformatted for anything)

Copy link
Member

@sorenlouv sorenlouv Feb 7, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer spanType, spanSubtype and spanAction as the exported names over type, subtype and action for clarity

const stickyProperties = [
{
label: i18n.translate(
Expand All @@ -63,18 +83,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(
Expand All @@ -95,8 +103,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 (action) {
stickyProperties.push({
fieldName: SPAN_ACTION,
label: i18n.translate(
'xpack.apm.transactionDetails.spanFlyout.actionLabel',
{
defaultMessage: 'Action'
}
),
val: action,
truncated: true,
width: '15%'
});
}

return <StickyProperties stickyProperties={stickyProperties} />;
}