fix: styling trace diagram

kubeshop · Feb 16, 2022 · 12cb151 · 12cb151
1 parent 0242f6d
commit 12cb151
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 9 deletions.
diff --git a/web/src/hooks/Charts.ts b/web/src/hooks/Charts.ts
@@ -11,8 +11,11 @@ export const useDAGChart = (spanMap: ISpanMap) => {
 
   const layout = d3DAG
     .sugiyama()
+    .layering(d3DAG.layeringSimplex())
     .decross(d3DAG.decrossOpt())
-    .nodeSize(() => [250, 100]);
+    .coord(d3DAG.coordCenter())
+    .nodeSize(() => [300, 150]);
+
   const {width, height} = layout(dag as any);
 
   return {dag, layout: {width, height}};

diff --git a/web/src/pages/Trace/TraceDiagram.styled.tsx b/web/src/pages/Trace/TraceDiagram.styled.tsx
@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+enum NotchColor {
+  HTTP = '#B9E28C',
+  DB = '#DBCBD8',
+  RPC = '#9AD4D6',
+  MESSAGING = '#101935',
+}
+
+const getNotchColor = (system: string) => {
+  if (system.startsWith('http.method')) {
+    return NotchColor.HTTP;
+  }
+  if (system.startsWith('db.system')) {
+    return NotchColor.DB;
+  }
+  if (system.startsWith('rpc.system')) {
+    return NotchColor.RPC;
+  }
+  if (system.startsWith('messaging.system')) {
+    return NotchColor.MESSAGING;
+  }
+  return '#F49D6E';
+};
+
+export const TraceNode = styled.div<{selected: boolean}>`
+  background-color: white;
+  border: 2px solid ${({selected}) => (selected ? 'rgb(0, 161, 253)' : 'rgb(213, 215, 224)')};
+  border-radius: 16px;
+  min-width: fit-content;
+  display: flex;
+  width: 200px;
+  height: 80px;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TraceNotch = styled.div<{system: string}>`
+  background-color: ${({system}) => getNotchColor(system)};
+  margin-top: -8px;
+  position: absolute;
+  top: 0px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  border-radius: 16px;
+  width: 70%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`;
diff --git a/web/src/pages/Trace/TraceDiagram.tsx b/web/src/pages/Trace/TraceDiagram.tsx
@@ -1,14 +1,54 @@
+import Text from 'antd/lib/typography/Text';
 import {useMemo} from 'react';
-import ReactFlow, {Background, BackgroundVariant} from 'react-flow-renderer';
+import ReactFlow, {Background, BackgroundVariant, Handle, NodeProps, Position} from 'react-flow-renderer';
 import {useDAGChart} from '../../hooks/Charts';
+import {ISpan} from '../../types';
+import * as S from './TraceDiagram.styled';
 
-interface IProps {
+interface IPropsTraceNode extends NodeProps<ISpan> {}
+
+interface IPropsTraceDiagram {
   spanMap: any;
   selectedSpan: any;
   onSelectSpan: (span: any) => void;
 }
 
-const TraceDiagram = ({spanMap, selectedSpan, onSelectSpan}: IProps): JSX.Element => {
+const TraceNode = ({id, data, selected, ...rest}: IPropsTraceNode) => {
+  const systemTag = data.tags.find(el => {
+    if (el.key.startsWith('http')) {
+      return el;
+    }
+    if (el.key.startsWith('db.system')) {
+      return el;
+    }
+    if (el.key.startsWith('rpc.system')) {
+      return el;
+    }
+    if (el.key.startsWith('messaging.system')) {
+      return el;
+    }
+    return false;
+  });
+
+  return (
+    <S.TraceNode selected={selected}>
+      <S.TraceNotch system={systemTag?.key || ''}>
+        <Text>{(systemTag?.value as string) || 'Service'}</Text>
+      </S.TraceNotch>
+      <Handle type="target" id={id} position={Position.Top} style={{top: 0, borderRadius: 0, visibility: 'hidden'}} />
+
+      <Text>{`/${data?.operationName?.split('/')?.pop()}`}</Text>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id={id}
+        style={{bottom: 0, borderRadius: 0, visibility: 'hidden'}}
+      />
+    </S.TraceNode>
+  );
+};
+
+const TraceDiagram = ({spanMap, selectedSpan, onSelectSpan}: IPropsTraceDiagram): JSX.Element => {
   const {
     dag,
     layout: {height},
@@ -22,9 +62,9 @@ const TraceDiagram = ({spanMap, selectedSpan, onSelectSpan}: IProps): JSX.Elemen
     const dagNodes = dag.descendants().map((i: any) => {
       return {
         id: i.data.id,
-        type: 'input',
-        data: {label: <p style={{wordWrap: 'break-word'}}>{spanMap[i.data.id].data.operationName}</p>},
-        position: {x: i.x, y: i.y},
+        type: 'TraceNode',
+        data: spanMap[i.data.id].data,
+        position: {x: i.x, y: parseFloat(i.y)},
         sourcePosition: 'top',
         className: `${i.data.id === selectedSpan.id ? 'selected' : ''}`,
       };
@@ -35,15 +75,18 @@ const TraceDiagram = ({spanMap, selectedSpan, onSelectSpan}: IProps): JSX.Elemen
         id: `${source.data.id}_${target.data.id}`,
         source: source.data.id,
         target: target.data.id,
-        animated: true,
+        data: spanMap[source.data.id].data,
+        labelShowBg: false,
+        animated: false,
+        arrowHeadType: 'arrowclosed',
       } as any);
     });
     return dagNodes;
   }, [spanMap, dag, selectedSpan]);
 
   return (
     <div style={{height: height + 100}}>
-      <ReactFlow elements={dagElements as any} onElementClick={handleElementClick}>
+      <ReactFlow nodeTypes={{TraceNode}} elements={dagElements as any} onElementClick={handleElementClick}>
         <Background variant={BackgroundVariant.Lines} gap={4} size={1} />
       </ReactFlow>
     </div>

diff --git a/web/src/types/index.ts b/web/src/types/index.ts
@@ -0,0 +1,28 @@
+type RefType = 'CHILD_OF';
+export interface ISpan {
+  traceID: string;
+  spanID: string;
+  operationName: string;
+  references: Array<{
+    refType: RefType;
+    traceID: string;
+    spanID: string;
+  }>;
+  startTime: number;
+  duration: number;
+  tags: Array<{
+    key: string;
+    type: string;
+    value: unknown;
+  }>;
+  logs: Array<{
+    timestamp: number;
+    fields: Array<{
+      key: string;
+      type: string;
+      value: unknown;
+    }>;
+  }>;
+  processID: string;
+  warnings: null;
+}