Critical path sections are overlaying on each span

Signed-off-by: GLVS Kiriti <glvskiriti2003369@gmail.com>
jaegertracing · Jul 14, 2023 · 04520d0 · 04520d0
1 parent b1e8960
commit 04520d0
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 5 deletions.
diff --git a/packages/jaeger-ui/src/components/TracePage/CriticalPath/index.tsx b/packages/jaeger-ui/src/components/TracePage/CriticalPath/index.tsx
@@ -63,7 +63,6 @@ export const computeCriticalPath = (
 function TraceCriticalPath(trace: Trace) {
   let traceData: Trace = trace;
   let criticalPath: criticalPathSection[] = [];
-  console.log('Hi');
   const rootSpanId = findRootSpanId(trace.spans);
   // If there is root span then algorithm implements
   if (rootSpanId) {

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.css
@@ -44,6 +44,13 @@ limitations under the License.
   z-index: 1;
 }
 
+.SpanBar--cp {
+  position: absolute;
+  top: 46%;
+  height: 8%;
+  z-index: 1;
+}
+
 .SpanBar--label {
   color: #aaa;
   font-size: 12px;

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.tsx
@@ -21,7 +21,7 @@ import AccordianLogs from './SpanDetail/AccordianLogs';
 
 import { ViewedBoundsFunctionType } from './utils';
 import { TNil } from '../../../types';
-import { Span } from '../../../types/trace';
+import { Span, criticalPathSection } from '../../../types/trace';
 
 import './SpanBar.css';
 
@@ -30,6 +30,7 @@ type TCommonProps = {
   hintSide: string;
   // onClick: (evt: React.MouseEvent<any>) => void;
   onClick?: (evt: React.MouseEvent<any>) => void;
+  criticalPath: criticalPathSection[]
   viewEnd: number;
   viewStart: number;
   getViewedBounds: ViewedBoundsFunctionType;
@@ -59,8 +60,13 @@ function toPercent(value: number) {
   return `${(value * 100).toFixed(1)}%`;
 }
 
+function toPercentInDecimal(value: number) {
+  return `${(value * 100)}%`;
+}
+
 function SpanBar(props: TInnerProps) {
   const {
+    criticalPath,
     viewEnd,
     viewStart,
     getViewedBounds,
@@ -130,6 +136,23 @@ function SpanBar(props: TInnerProps) {
           }}
         />
       )}
+      {criticalPath.map((each,index)=>{
+        const critcalPathViewBounds = getViewedBounds(each.section_start, each.section_end);
+        const criticalPathViewStart = critcalPathViewBounds.start;
+        const criticalPathViewEnd = critcalPathViewBounds.end;
+        return (
+          <div
+          key={index}
+          className="SpanBar--cp"
+          style={{
+            background: "black",
+            left: toPercentInDecimal(criticalPathViewStart),
+            width: toPercentInDecimal(criticalPathViewEnd-criticalPathViewStart)
+          }}
+        />
+        )
+      })}
+
     </div>
   );
 }

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx
@@ -25,13 +25,14 @@ import SpanBar from './SpanBar';
 import Ticks from './Ticks';
 
 import { TNil } from '../../../types';
-import { Span } from '../../../types/trace';
+import { criticalPathSection, Span } from '../../../types/trace';
 
 import './SpanBarRow.css';
 
 type SpanBarRowProps = {
   className?: string;
   color: string;
+  criticalPath: criticalPathSection[]
   columnDivision: number;
   isChildrenExpanded: boolean;
   isDetailExpanded: boolean;
@@ -87,6 +88,7 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
     const {
       className,
       color,
+      criticalPath,
       columnDivision,
       isChildrenExpanded,
       isDetailExpanded,
@@ -201,6 +203,7 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
         >
           <Ticks numTicks={numTicks} />
           <SpanBar
+            criticalPath = {criticalPath}
             rpc={rpc}
             viewStart={viewStart}
             viewEnd={viewEnd}

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx
@@ -40,7 +40,7 @@ import { extractUiFindFromState, TExtractUiFindFromStateReturn } from '../../com
 import getLinks from '../../../model/link-patterns';
 import colorGenerator from '../../../utils/color-generator';
 import { TNil, ReduxState } from '../../../types';
-import { Log, Span, Trace, KeyValuePair } from '../../../types/trace';
+import { Log, Span, Trace, KeyValuePair, criticalPathSection } from '../../../types/trace';
 import TTraceTimeline from '../../../types/TTraceTimeline';
 
 import './VirtualizedTraceView.css';
@@ -59,6 +59,7 @@ type TVirtualizedTraceViewOwnProps = {
   scrollToFirstVisibleSpan: () => void;
   registerAccessors: (accesors: Accessors) => void;
   trace: Trace;
+  criticalPath: criticalPathSection[];
 };
 
 type TDispatchProps = {
@@ -339,11 +340,14 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
       findMatchesIDs,
       spanNameColumnWidth,
       trace,
+      criticalPath
     } = this.props;
     // to avert flow error
     if (!trace) {
       return null;
     }
+
+    const criticalPathSections = criticalPath.filter((each)=>each.spanId===spanID);
     const color = colorGenerator.getColorByKey(serviceName);
     const isCollapsed = childrenHiddenIDs.has(spanID);
     const isDetailExpanded = detailStates.has(spanID);
@@ -381,6 +385,7 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
         <SpanBarRow
           className={this.getClippingCssClasses()}
           color={color}
+          criticalPath={criticalPathSections}
           columnDivision={spanNameColumnWidth}
           isChildrenExpanded={!isCollapsed}
           isDetailExpanded={isDetailExpanded}

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx
@@ -23,7 +23,7 @@ import { merge as mergeShortcuts } from '../keyboard-shortcuts';
 import { Accessors } from '../ScrollManager';
 import { TUpdateViewRangeTimeFunction, IViewRange, ViewRangeTimeUpdate } from '../types';
 import { TNil, ReduxState } from '../../../types';
-import { Span, Trace } from '../../../types/trace';
+import { criticalPathSection, Span, Trace } from '../../../types/trace';
 
 import './index.css';
 
@@ -41,6 +41,7 @@ type TProps = TDispatchProps & {
   scrollToFirstVisibleSpan: () => void;
   spanNameColumnWidth: number;
   trace: Trace;
+  criticalPath: criticalPathSection[];
   updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
   updateViewRangeTime: TUpdateViewRangeTimeFunction;
   viewRange: IViewRange;

diff --git a/packages/jaeger-ui/src/components/TracePage/index.tsx b/packages/jaeger-ui/src/components/TracePage/index.tsx
@@ -397,6 +397,7 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
           scrollToFirstVisibleSpan={this._scrollManager.scrollToFirstVisibleSpan}
           findMatchesIDs={spanFindMatches}
           trace={data}
+          criticalPath = {criticalPath}
           updateNextViewRangeTime={this.updateNextViewRangeTime}
           updateViewRangeTime={this.updateViewRangeTime}
           viewRange={viewRange}