From 04520d0bb8e0dd38250662d8c14c103d03dea353 Mon Sep 17 00:00:00 2001 From: GLVS Kiriti Date: Fri, 14 Jul 2023 19:32:41 +0530 Subject: [PATCH] Critical path sections are overlaying on each span Signed-off-by: GLVS Kiriti --- .../TracePage/CriticalPath/index.tsx | 1 - .../TracePage/TraceTimelineViewer/SpanBar.css | 7 ++++++ .../TracePage/TraceTimelineViewer/SpanBar.tsx | 25 ++++++++++++++++++- .../TraceTimelineViewer/SpanBarRow.tsx | 5 +++- .../VirtualizedTraceView.tsx | 7 +++++- .../TracePage/TraceTimelineViewer/index.tsx | 3 ++- .../src/components/TracePage/index.tsx | 1 + 7 files changed, 44 insertions(+), 5 deletions(-) diff --git a/packages/jaeger-ui/src/components/TracePage/CriticalPath/index.tsx b/packages/jaeger-ui/src/components/TracePage/CriticalPath/index.tsx index 07f5deeab9..8293683ce6 100644 --- 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 index 36da603c1c..5c67643798 100644 --- 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 index 282e0f1af5..7b9d6be57a 100644 --- 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) => void; onClick?: (evt: React.MouseEvent) => 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 ( +
+ ) + })} +
); } diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx index 199fd0abf3..dadb500640 100644 --- 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 { const { className, color, + criticalPath, columnDivision, isChildrenExpanded, isDetailExpanded, @@ -201,6 +203,7 @@ export default class SpanBarRow extends React.PureComponent { > void; registerAccessors: (accesors: Accessors) => void; trace: Trace; + criticalPath: criticalPathSection[]; }; type TDispatchProps = { @@ -339,11 +340,14 @@ export class VirtualizedTraceViewImpl extends React.Componenteach.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 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 index b3b4ec520b..4924825413 100644 --- 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 { scrollToFirstVisibleSpan={this._scrollManager.scrollToFirstVisibleSpan} findMatchesIDs={spanFindMatches} trace={data} + criticalPath = {criticalPath} updateNextViewRangeTime={this.updateNextViewRangeTime} updateViewRangeTime={this.updateViewRangeTime} viewRange={viewRange}