bug: timeline interval is updated

fix: add if condition for timeline interval

chore: remove mock response
This commit is contained in:
Pranshu Chittora 2022-03-11 16:40:48 +05:30
parent 23f9949fad
commit 08ca3b7849
No known key found for this signature in database
GPG Key ID: 3A9E57A016CC0626
4 changed files with 28 additions and 2176 deletions

View File

@ -1,36 +1,25 @@
import React, { useState, useMemo } from 'react';
import { isEqual } from 'lodash-es';
import React, { useState, useMemo, useEffect } from 'react';
import styles from './style.module.css';
import { useMeasure } from 'react-use';
import { toFixed } from 'utils/toFixed';
import {
INTERVAL_UNITS,
resolveTimeFromInterval,
} from 'container/TraceDetail/utils';
import { INTERVAL_UNITS } from 'container/TraceDetail/utils';
import useThemeMode from 'hooks/useThemeMode';
import { Interval } from './types';
import { getIntervalSpread, getIntervals } from './utils';
interface TimelineProps {
traceMetaData: object;
globalTraceMetadata: object;
intervalUnit: object;
setIntervalUnit: Function;
}
const Timeline_Height = 22;
const Timeline_H_Spacing = 0;
const Timeline = ({
traceMetaData,
globalTraceMetadata,
intervalUnit,
setIntervalUnit,
}: TimelineProps) => {
const [ref, { width }] = useMeasure<HTMLDivElement>();
const { isDarkMode } = useThemeMode();
const Timeline_Height = 22;
const Timeline_H_Spacing = 0;
const [intervals, setIntervals] = useState<Interval[] | null>(null);
useMemo(() => {
useEffect(() => {
const {
baseInterval,
baseSpread,
@ -44,7 +33,7 @@ const Timeline = ({
for (const idx in INTERVAL_UNITS) {
const standard_interval = INTERVAL_UNITS[idx];
if (baseSpread * standard_interval.multiplier < 1) {
intervalUnit = INTERVAL_UNITS[idx - 1];
if (idx > 1) intervalUnit = INTERVAL_UNITS[idx - 1];
break;
}
}
@ -103,4 +92,11 @@ const Timeline = ({
);
};
interface TimelineProps {
traceMetaData: object;
globalTraceMetadata: object;
intervalUnit: object;
setIntervalUnit: Function;
}
export default Timeline;

File diff suppressed because it is too large Load Diff

View File

@ -1,25 +1,25 @@
import React, { useEffect, useMemo, useState } from 'react';
import { Col, Divider, Row, Typography, Space, Button } from 'antd';
import { FilterOutlined } from '@ant-design/icons';
import { Button, Col, Divider, Row, Space, Typography } from 'antd';
import GanttChart from 'container/GantChart';
import { getNodeById } from 'container/GantChart/utils';
import Timeline from 'container/Timeline';
import TraceFlameGraph from 'container/TraceFlameGraph';
import dayjs from 'dayjs';
import useUrlQuery from 'hooks/useUrlQuery';
import { spanServiceNameToColorMapping } from 'lib/getRandomColor';
import { getSortedData } from './utils';
import history from 'lib/history';
import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants';
import React, { useEffect, useMemo, useState } from 'react';
import { ITraceTree, PayloadProps } from 'types/api/trace/getTraceItem';
import { getSpanTreeMetadata } from 'utils/getSpanTreeMetadata';
import { spanToTreeUtil } from 'utils/spanToTree';
import SelectedSpanDetails from './SelectedSpanDetails';
import useUrlQuery from 'hooks/useUrlQuery';
import styles from './TraceGraph.module.css';
import history from 'lib/history';
import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants';
import { getSortedData } from './utils';
import { INTERVAL_UNITS } from './utils';
import { Mock_Response } from './MockResponse'
const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
response = Mock_Response
const spanServiceColors = useMemo(
() => spanServiceNameToColorMapping(response[0].events),
[response],

View File

@ -1,11 +1,11 @@
import React from 'react';
import useFetch from 'hooks/useFetch';
import { Typography } from 'antd';
import getTraceItem from 'api/trace/getTraceItem';
import Spinner from 'components/Spinner';
import TraceDetailContainer from 'container/TraceDetail';
import useFetch from 'hooks/useFetch';
import React from 'react';
import { useParams } from 'react-router-dom';
import { Props as TraceDetailProps } from 'types/api/trace/getTraceItem';
import Spinner from 'components/Spinner';
import { Typography } from 'antd';
import TraceDetailContainer from 'container/TraceDetail';
const TraceDetail = (): JSX.Element => {
const { id } = useParams<TraceDetailProps>();