GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 01:19:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

bug: timeline interval is updated

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/container/Timeline/index.tsx
View File

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

2144
frontend/src/container/TraceDetail/MockResponse.ts
View File

File diff suppressed because it is too large Load Diff

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

10
frontend/src/pages/TraceDetail/index.tsx
View File

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