feat: timestamp is updated for selected start time (#852)

* feat: timestamp is updated for selected start time

* feat: startTime for the tree is updated
This commit is contained in:
palash-signoz 2022-03-17 11:56:25 +05:30 committed by GitHub
parent e28733d246
commit ab10a699b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions

View File

@ -35,7 +35,8 @@ const Timeline = ({
for (let idx = 0; idx < INTERVAL_UNITS.length; idx++) {
const standard_interval = INTERVAL_UNITS[idx];
if (baseSpread * standard_interval.multiplier < 1) {
if (idx > 1) intervalUnit = INTERVAL_UNITS[idx - 1];
const index = parseInt(idx, 10);
if (index > 1) intervalUnit = INTERVAL_UNITS[index - 1];
break;
}
}
@ -69,9 +70,10 @@ const Timeline = ({
{intervals &&
intervals.map((interval, index) => (
<TimelineInterval
transform={`translate(${Timeline_H_Spacing +
transform={`translate(${
Timeline_H_Spacing +
(interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100
},0)`}
},0)`}
key={`${interval.label + interval.percentage + index}`}
>
<text y={13} fill={isDarkMode ? 'white' : 'black'}>
@ -91,10 +93,16 @@ const Timeline = ({
};
interface TimelineProps {
traceMetaData: object;
traceMetaData: {
globalStart: number;
globalEnd: number;
spread: number;
totalSpans: number;
levels: number;
};
globalTraceMetadata: Record<string, number>;
intervalUnit: IIntervalUnit;
setIntervalUnit: VoidFunction;
setIntervalUnit: React.Dispatch<React.SetStateAction<IIntervalUnit>>;
}
export default Timeline;

View File

@ -48,7 +48,8 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
);
const { treeData: tree, ...traceMetaData } = useMemo(() => {
return getSpanTreeMetadata(getSortedData(treeData), spanServiceColors);
const tree = getSortedData(treeData);
return getSpanTreeMetadata(tree, spanServiceColors);
}, [treeData, spanServiceColors]);
const [globalTraceMetadata] = useState<Record<string, number>>({
@ -119,7 +120,7 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
justifyContent: 'center',
}}
>
{dayjs(traceMetaData.globalStart / 1e6).format('hh:mm:ssa MM/DD')}
{tree && dayjs(tree.startTime).format('hh:mm:ss a MM/DD')}
</StyledCol>
<StyledCol flex="auto" styledclass={[styles.timelineContainer]}>
<Timeline