fix: trace detail events error handling

This commit is contained in:
Pranshu Chittora 2022-03-11 16:32:11 +05:30
parent f37e6ef1d1
commit 23f9949fad
No known key found for this signature in database
GPG Key ID: 3A9E57A016CC0626
5 changed files with 2159 additions and 13 deletions

View File

@ -49,7 +49,8 @@ const Timeline = ({
} }
} }
setIntervalUnit(intervalUnit); debugger;
intervalUnit = intervalUnit || INTERVAL_UNITS[0]
setIntervals( setIntervals(
getIntervals({ getIntervals({
baseInterval, baseInterval,
@ -58,6 +59,7 @@ const Timeline = ({
intervalUnit, intervalUnit,
}), }),
); );
setIntervalUnit(intervalUnit);
}, [traceMetaData, globalTraceMetadata]); }, [traceMetaData, globalTraceMetadata]);
return ( return (
@ -79,10 +81,9 @@ const Timeline = ({
{intervals && {intervals &&
intervals.map((interval, index) => ( intervals.map((interval, index) => (
<g <g
transform={`translate(${ transform={`translate(${Timeline_H_Spacing +
Timeline_H_Spacing +
(interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100 (interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100
},0)`} },0)`}
className={styles['timeline-tick']} className={styles['timeline-tick']}
key={interval.label + interval.percentage + index} key={interval.label + interval.percentage + index}
> >

View File

@ -46,6 +46,7 @@ export const getIntervals = ({
intervalSpreadNormalized, intervalSpreadNormalized,
intervalUnit, intervalUnit,
}) => { }) => {
debugger
const intervals: Interval[] = [ const intervals: Interval[] = [
{ {
label: `${toFixed(resolveTimeFromInterval(baseInterval, intervalUnit), 2)}${ label: `${toFixed(resolveTimeFromInterval(baseInterval, intervalUnit), 2)}${
@ -68,7 +69,7 @@ export const getIntervals = ({
tempBaseSpread -= intervalSpreadNormalized; tempBaseSpread -= intervalSpreadNormalized;
} }
elapsedIntervals = interval_time; elapsedIntervals = interval_time;
debugger;
const interval: Interval = { const interval: Interval = {
label: `${toFixed( label: `${toFixed(
resolveTimeFromInterval(interval_time + baseInterval, intervalUnit), resolveTimeFromInterval(interval_time + baseInterval, intervalUnit),

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,9 @@
import { Button, Modal, Collapse } from 'antd'; import { Button, Collapse, Modal } from 'antd';
import useThemeMode from 'hooks/useThemeMode'; import useThemeMode from 'hooks/useThemeMode';
import { keys, map } from 'lodash-es';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { ITraceTree } from 'types/api/trace/getTraceItem'; import { ITraceTree } from 'types/api/trace/getTraceItem';
import { CustomSubText, CustomSubTitle } from './styles'; import { CustomSubText, CustomSubTitle } from './styles';
// import Editor from 'components/Editor'; // import Editor from 'components/Editor';
@ -23,9 +25,8 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
return ( return (
<> <>
{event?.map(({ attributeMap, name }) => { {map(event, ({ attributeMap, name }) => {
const attributes = Object.keys(attributeMap); const attributes = keys(attributeMap);
return ( return (
<Collapse <Collapse
defaultActiveKey={[name || attributeMap.event]} defaultActiveKey={[name || attributeMap.event]}
@ -35,7 +36,7 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
header={name || attributeMap?.event} header={name || attributeMap?.event}
key={name || attributeMap.event} key={name || attributeMap.event}
> >
{attributes.map((event) => { {map(attributes, (event) => {
const value = attributeMap[event]; const value = attributeMap[event];
const isEllipsed = value.length > 24; const isEllipsed = value.length > 24;
@ -62,8 +63,6 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
</Button> </Button>
)} )}
</CustomSubText> </CustomSubText>
</> </>
); );
})} })}

View File

@ -17,8 +17,9 @@ import styles from './TraceGraph.module.css';
import history from 'lib/history'; import history from 'lib/history';
import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants'; 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],