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

* [APM] closes #26247 by conditionally adding span subtype and action to the flyout if available

* renamed vars for better readability and tossed out the formatting on span action

* [APM] renamed some variables for clarity

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"`;

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';

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 <StickyProperties stickyProperties={stickyProperties} />;
 }