diff --git a/CHANGELOG.md b/CHANGELOG.md index 950d3ecce..663f6b201 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan ### Fixed - [#175](https://github.com/kobsio/kobs/pull/175): [prometheus] Fix tooltip when no unit is provided. +- [#186](https://github.com/kobsio/kobs/pull/186): [jaeger] Fix tooltip position in traces chart. ### Changed diff --git a/plugins/jaeger/src/components/panel/TracesChart.tsx b/plugins/jaeger/src/components/panel/TracesChart.tsx index f9ea9ba58..0cbb5b193 100644 --- a/plugins/jaeger/src/components/panel/TracesChart.tsx +++ b/plugins/jaeger/src/components/panel/TracesChart.tsx @@ -24,13 +24,21 @@ function isIDatum(object: Datum): object is IDatum { } const TracesChart: React.FunctionComponent = ({ name, traces, showDetails }: ITracesChartProps) => { - const { series, min, max } = useMemo<{ series: Serie[]; min: number; max: number }>(() => { + const { series, min, max, first, last } = useMemo<{ + series: Serie[]; + min: number; + max: number; + first: number; + last: number; + }>(() => { // Initialize min and max so that we can simply compare during traversing. let minimalSpans = Number.MAX_SAFE_INTEGER; let maximalSpans = 0; + let firstTime = 0; + let lastTime = 0; const result: IDatum[] = []; - traces.forEach((trace) => { + traces.forEach((trace, index) => { if (trace.spans.length < minimalSpans) { minimalSpans = trace.spans.length; } @@ -38,6 +46,13 @@ const TracesChart: React.FunctionComponent = ({ name, traces, maximalSpans = trace.spans.length; } + if (trace.startTime < firstTime || index === 0) { + firstTime = trace.startTime; + } + if (trace.startTime > lastTime || index === 0) { + lastTime = trace.startTime; + } + result.push({ label: trace.traceName, size: trace.spans.length, @@ -48,6 +63,8 @@ const TracesChart: React.FunctionComponent = ({ name, traces, }); return { + first: firstTime, + last: lastTime, max: maximalSpans, min: minimalSpans, series: [ @@ -96,7 +113,8 @@ const TracesChart: React.FunctionComponent = ({ name, traces, }} theme={CHART_THEME} tooltip={(tooltip): ReactNode => { - const isFirstHalf = tooltip.node.index < series[0].data.length / 2; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const isFirstHalf = (tooltip.node.data as any).trace.startTime < (last + first) / 2; const hasError = isIDatum(tooltip.node.data) ? doesTraceContainsError(tooltip.node.data.trace) : false; const squareColor = hasError ? '#c9190b' : '#0066cc';