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

View File

@ -48,7 +48,8 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
); );
const { treeData: tree, ...traceMetaData } = useMemo(() => { const { treeData: tree, ...traceMetaData } = useMemo(() => {
return getSpanTreeMetadata(getSortedData(treeData), spanServiceColors); const tree = getSortedData(treeData);
return getSpanTreeMetadata(tree, spanServiceColors);
}, [treeData, spanServiceColors]); }, [treeData, spanServiceColors]);
const [globalTraceMetadata] = useState<Record<string, number>>({ const [globalTraceMetadata] = useState<Record<string, number>>({
@ -119,7 +120,7 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
justifyContent: 'center', 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>
<StyledCol flex="auto" styledclass={[styles.timelineContainer]}> <StyledCol flex="auto" styledclass={[styles.timelineContainer]}>
<Timeline <Timeline