Visualize offset of spans in the Jaeger plugin

CHANGELOG.md

@@ -29,6 +29,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#47](https://github.com/kobsio/kobs/pull/47): Display the legend at the Prometheus page as table and use color of selected metric in chart.
 - [#53](https://github.com/kobsio/kobs/pull/53): Improve Jaeger plugin, by allow filtering of services and operations and adding several actions for traces.
 - [#55](https://github.com/kobsio/kobs/pull/55): Allow a user to add a tag from a span as filter in the Jaeger plugin.
+- [#57](https://github.com/kobsio/kobs/pull/57): Visualize the offset of spans in the Jaeger plugin.
 
 ## [v0.2.0](https://github.com/kobsio/kobs/releases/tag/v0.2.0) (2021-04-23)
 

app/src/plugins/jaeger/JaegerSpan.tsx

@@ -8,19 +8,16 @@ import JaegerTag from 'plugins/jaeger/JaegerTag';
 
 import 'plugins/jaeger/jaeger.css';
 
+const PADDING = 24;
+
 export interface IJaegerSpanProps {
   name: string;
   span: ISpan;
   processes: IProcesses;
-  padding: number;
+  level: number;
 }
 
-const JaegerSpan: React.FunctionComponent<IJaegerSpanProps> = ({
-  name,
-  span,
-  processes,
-  padding,
-}: IJaegerSpanProps) => {
+const JaegerSpan: React.FunctionComponent<IJaegerSpanProps> = ({ name, span, processes, level }: IJaegerSpanProps) => {
   const [expanded, setExpanded] = useState<boolean>(false);
 
   const time = (
@@ -47,13 +44,31 @@ const JaegerSpan: React.FunctionComponent<IJaegerSpanProps> = ({
     </span>
   );
 
+  const treeOffset = [];
+  for (let index = 0; index < level; index++) {
+    if (index > 0) {
+      treeOffset.push(
+        <span
+          style={{
+            borderRight: '1px dashed #8a8d90',
+            height: '40px',
+            paddingLeft: `${(index + 1) * PADDING - PADDING / 2}px`,
+            position: 'absolute',
+            zIndex: 300,
+          }}
+        ></span>,
+      );
+    }
+  }
+
   return (
     <React.Fragment>
       <AccordionItem>
+        {treeOffset}
         <AccordionToggle
           id={`span-${span.spanID}`}
           className="kobsio-jaeger-accordion-toggle"
-          style={{ paddingLeft: `${padding}px` }}
+          style={{ paddingLeft: `${level * PADDING}px` }}
           onClick={(): void => setExpanded(!expanded)}
           isExpanded={expanded}
         >
@@ -76,7 +91,7 @@ const JaegerSpan: React.FunctionComponent<IJaegerSpanProps> = ({
         </AccordionToggle>
 
         <AccordionContent id={`span-${span.spanID}`} isHidden={!expanded} isFixed={false}>
-          <div style={{ paddingLeft: `${padding - 16}px` }}>
+          <div style={{ paddingLeft: `${level * PADDING - 16}px` }}>
             {processes[span.processID].tags.length > 0 ? (
               <div className="pf-u-pb-md">
                 Process:
@@ -107,7 +122,7 @@ const JaegerSpan: React.FunctionComponent<IJaegerSpanProps> = ({
 
       {span.childs
         ? span.childs.map((span, index) => (
-            <JaegerSpan key={index} name={name} span={span} processes={processes} padding={padding + 16} />
+            <JaegerSpan key={index} name={name} span={span} processes={processes} level={level + 1} />
           ))
         : null}
     </React.Fragment>

app/src/plugins/jaeger/JaegerSpans.tsx

@@ -38,7 +38,7 @@ const JaegerSpans: React.FunctionComponent<IJaegerSpansProps> = ({ name, trace }
       <Card>
         <Accordion asDefinitionList={false}>
           {spans.map((span, index) => (
-            <JaegerSpan key={index} name={name} span={span} processes={trace.processes} padding={16} />
+            <JaegerSpan key={index} name={name} span={span} processes={trace.processes} level={1} />
           ))}
         </Accordion>
       </Card>