enhancement(FE): span time unit normalisation (#1021)

* feat: relevant span time unit on trace detail page

* fix: remove time unit on hover on flame graph

frontend/src/container/GantChart/SpanLength/index.tsx

@@ -1,7 +1,4 @@
-import {
-	IIntervalUnit,
-	resolveTimeFromInterval,
-} from 'container/TraceDetail/utils';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
 import React from 'react';
 import { toFixed } from 'utils/toFixed';
@@ -13,12 +10,12 @@ interface SpanLengthProps {
 	leftOffset: string;
 	bgColor: string;
 	inMsCount: number;
-	intervalUnit: IIntervalUnit;
 }
 
 function SpanLength(props: SpanLengthProps): JSX.Element {
-	const { width, leftOffset, bgColor, intervalUnit, inMsCount } = props;
+	const { width, leftOffset, bgColor, inMsCount } = props;
 	const { isDarkMode } = useThemeMode();
+	const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount);
 	return (
 		<SpanWrapper>
 			<SpanLine
@@ -34,9 +31,9 @@ function SpanLength(props: SpanLengthProps): JSX.Element {
 				width={width}
 			/>
 			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
-				resolveTimeFromInterval(inMsCount, intervalUnit),
+				time,
 				2,
-			)} ${intervalUnit.name}`}</SpanText>
+			)} ${timeUnitName}`}</SpanText>
 		</SpanWrapper>
 	);
 }

frontend/src/container/GantChart/Trace/index.tsx

@@ -153,7 +153,6 @@ function Trace(props: TraceProps): JSX.Element {
 						width={width.toString()}
 						bgColor={serviceColour}
 						inMsCount={inMsCount / 1e6}
-						intervalUnit={intervalUnit}
 					/>
 				</Col>
 			</CardContainer>

frontend/src/container/Timeline/index.tsx

@@ -37,11 +37,10 @@ function Timeline({
 		});
 
 		let intervalUnit = INTERVAL_UNITS[0];
-		for (let idx = 0; idx < INTERVAL_UNITS.length; idx += 1) {
+		for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
 			const standardInterval = INTERVAL_UNITS[idx];
-			if (baseSpread * standardInterval.multiplier < 1) {
-				const index = idx;
-				if (index > 1) intervalUnit = INTERVAL_UNITS[index - 1];
+			if (baseSpread * standardInterval.multiplier >= 1) {
+				intervalUnit = INTERVAL_UNITS[idx];
 				break;
 			}
 		}

frontend/src/container/TraceDetail/utils.ts

@@ -13,8 +13,9 @@ export const filterSpansByString = (
 		return JSON.stringify(spanWithoutChildren).includes(searchString);
 	});
 
+type TTimeUnitName = 'ms' | 's' | 'm';
 export interface IIntervalUnit {
-	name: 'ms' | 's' | 'm';
+	name: TTimeUnitName;
 	multiplier: number;
 }
 export const INTERVAL_UNITS: IIntervalUnit[] = [
@@ -39,6 +40,28 @@ export const resolveTimeFromInterval = (
 	return intervalTime * intervalUnit.multiplier;
 };
 
+export const convertTimeToRelevantUnit = (
+	intervalTime: number,
+): { time: number; timeUnitName: TTimeUnitName } => {
+	let relevantTime = {
+		time: intervalTime,
+		timeUnitName: INTERVAL_UNITS[0].name,
+	};
+
+	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
+		const intervalUnit = INTERVAL_UNITS[idx];
+		const convertedTimeForInterval = intervalTime * intervalUnit.multiplier;
+		if (convertedTimeForInterval >= 1) {
+			relevantTime = {
+				time: convertedTimeForInterval,
+				timeUnitName: intervalUnit.name,
+			};
+			break;
+		}
+	}
+	return relevantTime;
+};
+
 export const getSortedData = (treeData: ITraceTree): undefined | ITraceTree => {
 	const traverse = (treeNode: ITraceTree, level = 0): void => {
 		if (!treeNode) {

frontend/src/container/TraceFlameGraph/index.tsx

@@ -1,14 +1,9 @@
 /* eslint-disable react/no-unstable-nested-components */
 import Color from 'color';
 import { ITraceMetaData } from 'container/GantChart';
-import {
-	IIntervalUnit,
-	resolveTimeFromInterval,
-} from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
 import React, { useLayoutEffect, useMemo, useState } from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
-import { toFixed } from 'utils/toFixed';
 
 import {
 	SpanItemContainer,
@@ -98,14 +93,13 @@ function TraceFlameGraph(props: {
 	onSpanSelect: SpanItemProps['onSpanSelect'];
 	hoveredSpanId: string;
 	selectedSpanId: string;
-	intervalUnit: IIntervalUnit;
 }): JSX.Element {
 	const { treeData, traceMetaData, onSpanHover } = props;
 
 	if (!treeData || treeData.id === 'empty' || !traceMetaData) {
 		return <div />;
 	}
-	const { intervalUnit, onSpanSelect, hoveredSpanId, selectedSpanId } = props;
+	const { onSpanSelect, hoveredSpanId, selectedSpanId } = props;
 
 	const { globalStart, spread, levels } = traceMetaData;
 	function RenderSpanRecursive({
@@ -131,10 +125,7 @@ function TraceFlameGraph(props: {
 
 		const leftOffset = ((spanData.startTime - globalStart) * 100) / spread;
 		const width = ((spanData.value / 1e6) * 100) / spread;
-		const toolTipText = `${spanData.name}\n${toFixed(
-			resolveTimeFromInterval(spanData.value / 1e6, intervalUnit),
-			2,
-		)} ${intervalUnit.name}`;
+		const toolTipText = `${spanData.name}`;
 
 		return (
 			<>