Remove color from span type

elastic · Oct 18, 2018 · edd6d4c · edd6d4c
1 parent e784426
commit edd6d4c
Showing 1 changed file with 7 additions and 17 deletions.
diff --git a/...ctionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/...ctionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
@@ -7,22 +7,14 @@
 // tslint:disable-next-line  no-var-requires
 const numeral = require('@elastic/numeral');
 import React from 'react';
-import styled from 'styled-components';
 
-// @ts-ignore
+import { first } from 'lodash';
 import { Span } from '../../../../../../../../typings/Span';
-import { units } from '../../../../../../../style/variables';
 // @ts-ignore
 import { asMillis } from '../../../../../../../utils/formatters';
 // @ts-ignore
-import { Indicator } from '../../../../../../shared/charts/Legend';
-// @ts-ignore
 import { StickyProperties } from '../../../../../../shared/StickyProperties';
 
-const LegendIndicator = styled(Indicator)`
-  display: inline-block;
-`;
-
 function getSpanLabel(type: string) {
   switch (type) {
     case 'db':
@@ -34,6 +26,10 @@ function getSpanLabel(type: string) {
   }
 }
 
+function getPrimaryType(type: string) {
+  return first(type.split('.'));
+}
+
 interface Props {
   span: Span;
   totalDuration: number;
@@ -43,8 +39,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) {
   const spanName = span.span.name;
   const spanDuration = span.span.duration.us;
   const relativeDuration = spanDuration / totalDuration;
-  const spanTypeLabel = getSpanLabel(span.span.type);
-  const spanTypeColor = 'red'; // TODO
+  const spanTypeLabel = getSpanLabel(getPrimaryType(span.span.type));
 
   const stickyProperties = [
     {
@@ -55,12 +50,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) {
     {
       fieldName: 'span.type',
       label: 'Type',
-      val: (
-        <div>
-          <LegendIndicator radius={units.minus - 1} color={spanTypeColor} />
-          {spanTypeLabel}
-        </div>
-      )
+      val: spanTypeLabel
     },
     {
       fieldName: 'span.duration.us',