[APM] Color by span type when there's only one service (#90424)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Mar 7, 2021 · e2abb03 · e2abb03
1 parent acb7b77
commit e2abb03
Show file tree

Hide file tree

Showing 11 changed files with 666 additions and 160 deletions.
diff --git a/...ransaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts b/...ransaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts
@@ -11,7 +11,7 @@ import { getErrorMarks } from './get_error_marks';
 describe('getErrorMarks', () => {
   describe('returns empty array', () => {
     it('when items are missing', () => {
-      expect(getErrorMarks([], {})).toEqual([]);
+      expect(getErrorMarks([])).toEqual([]);
     });
   });
 
@@ -22,17 +22,17 @@ describe('getErrorMarks', () => {
         offset: 10,
         skew: 5,
         doc: { error: { id: 1 }, service: { name: 'opbeans-java' } },
+        color: 'red',
       } as unknown,
       {
         docType: 'error',
         offset: 50,
         skew: 0,
         doc: { error: { id: 2 }, service: { name: 'opbeans-node' } },
+        color: 'blue',
       } as unknown,
     ] as IWaterfallError[];
-    expect(
-      getErrorMarks(items, { 'opbeans-java': 'red', 'opbeans-node': 'blue' })
-    ).toEqual([
+    expect(getErrorMarks(items)).toEqual([
       {
         type: 'errorMark',
         offset: 15,
@@ -59,30 +59,32 @@ describe('getErrorMarks', () => {
         offset: 10,
         skew: 5,
         doc: { error: { id: 1 }, service: { name: 'opbeans-java' } },
+        color: '',
       } as unknown,
       {
         docType: 'error',
         offset: 50,
         skew: 0,
         doc: { error: { id: 2 }, service: { name: 'opbeans-node' } },
+        color: '',
       } as unknown,
     ] as IWaterfallError[];
-    expect(getErrorMarks(items, {})).toEqual([
+    expect(getErrorMarks(items)).toEqual([
       {
         type: 'errorMark',
         offset: 15,
         verticalLine: false,
         id: 1,
         error: { error: { id: 1 }, service: { name: 'opbeans-java' } },
-        serviceColor: undefined,
+        serviceColor: '',
       },
       {
         type: 'errorMark',
         offset: 50,
         verticalLine: false,
         id: 2,
         error: { error: { id: 2 }, service: { name: 'opbeans-node' } },
-        serviceColor: undefined,
+        serviceColor: '',
       },
     ]);
   });

diff --git a/...app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts b/...app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
@@ -7,22 +7,16 @@
 
 import { isEmpty } from 'lodash';
 import { ErrorRaw } from '../../../../../../../typings/es_schemas/raw/error_raw';
-import {
-  IWaterfallError,
-  IServiceColors,
-} from '../Waterfall/waterfall_helpers/waterfall_helpers';
+import { IWaterfallError } from '../Waterfall/waterfall_helpers/waterfall_helpers';
 import { Mark } from '.';
 
 export interface ErrorMark extends Mark {
   type: 'errorMark';
   error: ErrorRaw;
-  serviceColor?: string;
+  serviceColor: string;
 }
 
-export const getErrorMarks = (
-  errorItems: IWaterfallError[],
-  serviceColors: IServiceColors
-): ErrorMark[] => {
+export const getErrorMarks = (errorItems: IWaterfallError[]): ErrorMark[] => {
   if (isEmpty(errorItems)) {
     return [];
   }
@@ -33,6 +27,6 @@ export const getErrorMarks = (
     verticalLine: false,
     id: error.doc.error.id,
     error: error.doc,
-    serviceColor: serviceColors[error.doc.service.name],
+    serviceColor: error.color,
   }));
 };
diff --git a/...nents/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx b/...nents/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx
diff --git a/.../transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/.../transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
@@ -14,7 +14,7 @@ import { asDuration } from '../../../../../../../common/utils/formatters';
 import { isRumAgentName } from '../../../../../../../common/agent_name';
 import { px, unit, units } from '../../../../../../style/variables';
 import { ErrorCount } from '../../ErrorCount';
-import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
+import { IWaterfallSpanOrTransaction } from './waterfall_helpers/waterfall_helpers';
 import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
 import { TRACE_ID } from '../../../../../../../common/elasticsearch_fieldnames';
 import { SyncBadge } from './SyncBadge';
@@ -75,14 +75,14 @@ const ItemText = euiStyled.span`
 interface IWaterfallItemProps {
   timelineMargins: Margins;
   totalDuration?: number;
-  item: IWaterfallItem;
+  item: IWaterfallSpanOrTransaction;
   color: string;
   isSelected: boolean;
   errorCount: number;
   onClick: () => unknown;
 }
 
-function PrefixIcon({ item }: { item: IWaterfallItem }) {
+function PrefixIcon({ item }: { item: IWaterfallSpanOrTransaction }) {
   switch (item.docType) {
     case 'span': {
       // icon for database spans
@@ -110,7 +110,7 @@ function PrefixIcon({ item }: { item: IWaterfallItem }) {
 
 interface SpanActionToolTipProps {
   children: ReactNode;
-  item?: IWaterfallItem;
+  item?: IWaterfallSpanOrTransaction;
 }
 
 function SpanActionToolTip({ item, children }: SpanActionToolTipProps) {
@@ -124,15 +124,15 @@ function SpanActionToolTip({ item, children }: SpanActionToolTipProps) {
   return <>{children}</>;
 }
 
-function Duration({ item }: { item: IWaterfallItem }) {
+function Duration({ item }: { item: IWaterfallSpanOrTransaction }) {
   return (
     <EuiText color="subdued" size="xs">
       {asDuration(item.duration)}
     </EuiText>
   );
 }
 
-function HttpStatusCode({ item }: { item: IWaterfallItem }) {
+function HttpStatusCode({ item }: { item: IWaterfallSpanOrTransaction }) {
   // http status code for transactions of type 'request'
   const httpStatusCode =
     item.docType === 'transaction' && item.doc.transaction.type === 'request'
@@ -146,7 +146,7 @@ function HttpStatusCode({ item }: { item: IWaterfallItem }) {
   return <EuiText size="xs">{httpStatusCode}</EuiText>;
 }
 
-function NameLabel({ item }: { item: IWaterfallItem }) {
+function NameLabel({ item }: { item: IWaterfallSpanOrTransaction }) {
   switch (item.docType) {
     case 'span':
       return <EuiText size="s">{item.doc.span.name}</EuiText>;
@@ -156,8 +156,6 @@ function NameLabel({ item }: { item: IWaterfallItem }) {
           <h5>{item.doc.transaction.name}</h5>
         </EuiTitle>
       );
-    default:
-      return null;
   }
 }
 

diff --git a/...action_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx b/...action_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
@@ -14,22 +14,21 @@ import { Margins } from '../../../../../shared/charts/Timeline';
 import { WaterfallItem } from './WaterfallItem';
 import {
   IWaterfall,
-  IWaterfallItem,
+  IWaterfallSpanOrTransaction,
 } from './waterfall_helpers/waterfall_helpers';
 
 interface AccordionWaterfallProps {
   isOpen: boolean;
-  item: IWaterfallItem;
+  item: IWaterfallSpanOrTransaction;
   level: number;
-  serviceColors: IWaterfall['serviceColors'];
   duration: IWaterfall['duration'];
   waterfallItemId?: string;
   location: Location;
   errorsPerTransaction: IWaterfall['errorsPerTransaction'];
-  childrenByParentId: Record<string, IWaterfallItem[]>;
+  childrenByParentId: Record<string, IWaterfallSpanOrTransaction[]>;
   onToggleEntryTransaction?: () => void;
   timelineMargins: Margins;
-  onClickWaterfallItem: (item: IWaterfallItem) => void;
+  onClickWaterfallItem: (item: IWaterfallSpanOrTransaction) => void;
 }
 
 const StyledAccordion = euiStyled(EuiAccordion).withConfig({
@@ -98,7 +97,6 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
   const {
     item,
     level,
-    serviceColors,
     duration,
     childrenByParentId,
     waterfallItemId,
@@ -134,7 +132,7 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
           <WaterfallItem
             key={item.id}
             timelineMargins={timelineMargins}
-            color={serviceColors[item.doc.service.name]}
+            color={item.color}
             item={item}
             totalDuration={duration}
             isSelected={item.id === waterfallItemId}
@@ -161,7 +159,6 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
           isOpen={isOpen}
           item={child}
           level={nextLevel}
-          serviceColors={serviceColors}
           waterfallItemId={waterfallItemId}
           location={location}
           errorsPerTransaction={errorsPerTransaction}

diff --git a/...ents/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/...ents/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
@@ -21,6 +21,7 @@ import { WaterfallFlyout } from './WaterfallFlyout';
 import {
   IWaterfall,
   IWaterfallItem,
+  IWaterfallSpanOrTransaction,
 } from './waterfall_helpers/waterfall_helpers';
 
 const Container = euiStyled.div`
@@ -76,13 +77,13 @@ export function Waterfall({
   const itemContainerHeight = 58; // TODO: This is a nasty way to calculate the height of the svg element. A better approach should be found
   const waterfallHeight = itemContainerHeight * waterfall.items.length;
 
-  const { serviceColors, duration } = waterfall;
+  const { duration } = waterfall;
 
   const agentMarks = getAgentMarks(waterfall.entryWaterfallTransaction?.doc);
-  const errorMarks = getErrorMarks(waterfall.errorItems, serviceColors);
+  const errorMarks = getErrorMarks(waterfall.errorItems);
 
   function renderItems(
-    childrenByParentId: Record<string | number, IWaterfallItem[]>
+    childrenByParentId: Record<string | number, IWaterfallSpanOrTransaction[]>
   ) {
     const { entryWaterfallTransaction } = waterfall;
     if (!entryWaterfallTransaction) {
@@ -95,7 +96,6 @@ export function Waterfall({
         isOpen={isAccordionOpen}
         item={entryWaterfallTransaction}
         level={0}
-        serviceColors={serviceColors}
         waterfallItemId={waterfallItemId}
         location={location}
         errorsPerTransaction={waterfall.errorsPerTransaction}