@@ -102,4 +92,11 @@ const Timeline = ({
);
};
+interface TimelineProps {
+ traceMetaData: object;
+ globalTraceMetadata: object;
+ intervalUnit: object;
+ setIntervalUnit: Function;
+}
+
export default Timeline;
diff --git a/frontend/src/container/Timeline/utils.ts b/frontend/src/container/Timeline/utils.ts
index e7e6a79a01..f6edc34271 100644
--- a/frontend/src/container/Timeline/utils.ts
+++ b/frontend/src/container/Timeline/utils.ts
@@ -1,20 +1,22 @@
-import { isEqual } from 'lodash-es';
-import { toFixed } from 'utils/toFixed';
import {
INTERVAL_UNITS,
resolveTimeFromInterval,
} from 'container/TraceDetail/utils';
+import { isEqual } from 'lodash-es';
+import { toFixed } from 'utils/toFixed';
+
+import { Interval } from './types';
export const getIntervalSpread = ({
localTraceMetaData,
globalTraceMetadata,
-}) => {
- const {
- globalStart: localStart,
- globalEnd: localEnd,
- spread: localSpread,
- } = localTraceMetaData;
- const { globalStart, globalEnd, globalSpread } = globalTraceMetadata;
+}): {
+ baseInterval: number;
+ baseSpread: number;
+ intervalSpreadNormalized: number;
+} => {
+ const { globalStart: localStart, spread: localSpread } = localTraceMetaData;
+ const { globalStart } = globalTraceMetadata;
let baseInterval = 0;
@@ -24,7 +26,7 @@ export const getIntervalSpread = ({
const MIN_INTERVALS = 5;
const baseSpread = localSpread;
- let intervalSpread = (baseSpread / MIN_INTERVALS) * 1.0;
+ const intervalSpread = (baseSpread / MIN_INTERVALS) * 1.0;
const integerPartString = intervalSpread.toString().split('.')[0];
const integerPartLength = integerPartString.length;
const intervalSpreadNormalized =
@@ -45,7 +47,7 @@ export const getIntervals = ({
baseSpread,
intervalSpreadNormalized,
intervalUnit,
-}) => {
+}): Interval[] => {
const intervals: Interval[] = [
{
label: `${toFixed(resolveTimeFromInterval(baseInterval, intervalUnit), 2)}${
diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
index 7ee07f2c20..a5d01a2822 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
@@ -1,19 +1,19 @@
-import React, { useState } from 'react';
-import { CheckBoxContainer } from './styles';
import { Checkbox, notification, Typography } from 'antd';
-import { connect, useDispatch, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
-
-import { SelectedTraceFilter } from 'store/actions/trace/selectTraceFilter';
-import AppActions from 'types/actions';
-import { ThunkDispatch } from 'redux-thunk';
-import { bindActionCreators, Dispatch } from 'redux';
-import { getFilter, updateURL } from 'store/actions/trace/util';
import getFilters from 'api/trace/getFilters';
import { AxiosError } from 'axios';
-import { GlobalReducer } from 'types/reducer/globalTime';
+import React, { useState } from 'react';
+import { connect, useDispatch, useSelector } from 'react-redux';
+import { bindActionCreators, Dispatch } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
+import { SelectedTraceFilter } from 'store/actions/trace/selectTraceFilter';
+import { getFilter, updateURL } from 'store/actions/trace/util';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
+
+import { CheckBoxContainer } from './styles';
const CheckBoxComponent = (props: CheckBoxProps): JSX.Element => {
const {
diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx
index a19e7c4ecd..2502e21e07 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
+
import CheckBoxComponent from '../Common/Checkbox';
const CommonCheckBox = (props: CommonCheckBoxProps): JSX.Element => {
diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
index f6025b8fbd..c6f42c4656 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
@@ -1,20 +1,20 @@
-import React, { useState } from 'react';
-
import { Input, Slider } from 'antd';
-import { Container, InputContainer, Text } from './styles';
-import { useDispatch, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { TraceReducer } from 'types/reducer/trace';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { getFilter, updateURL } from 'store/actions/trace/util';
+import { SliderRangeProps } from 'antd/lib/slider';
+import getFilters from 'api/trace/getFilters';
import dayjs from 'dayjs';
import durationPlugin from 'dayjs/plugin/duration';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
import { Dispatch } from 'redux';
+import { getFilter, updateURL } from 'store/actions/trace/util';
+import { AppState } from 'store/reducers';
import AppActions from 'types/actions';
import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
-import getFilters from 'api/trace/getFilters';
import { GlobalReducer } from 'types/reducer/globalTime';
-import { SliderRangeProps } from 'antd/lib/slider';
+import { TraceReducer } from 'types/reducer/trace';
+
+import { Container, InputContainer, Text } from './styles';
dayjs.extend(durationPlugin);
diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts
index 150391fce2..d80c0e503d 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
import { Typography } from 'antd';
+import styled from 'styled-components';
export const DurationText = styled.div`
display: flex;
diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx
index 98364e14d4..3afcd0fbcd 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import { Card } from 'antd';
-
-import Duration from './Duration';
-import CommonCheckBox from './CommonCheckBox';
+import Spinner from 'components/Spinner';
+import React from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
-import Spinner from 'components/Spinner';
+import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
+
+import CommonCheckBox from './CommonCheckBox';
+import Duration from './Duration';
const PanelBody = (props: PanelBodyProps): JSX.Element => {
const { type } = props;
diff --git a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx
index 785362c25c..6ee390b60c 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx
@@ -1,6 +1,9 @@
-import React, { useState } from 'react';
import { DownOutlined, RightOutlined } from '@ant-design/icons';
-import { Card, Typography, Divider, notification } from 'antd';
+import { Card, Divider, notification, Typography } from 'antd';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import {
ButtonComponent,
@@ -9,19 +12,16 @@ import {
IconContainer,
TextCotainer,
} from './styles';
-import { useDispatch, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
const { Text } = Typography;
-import { AllPanelHeading } from 'types/reducer/trace';
import getFilters from 'api/trace/getFilters';
-import { GlobalReducer } from 'types/reducer/globalTime';
+import { AxiosError } from 'axios';
+import { Dispatch } from 'redux';
import { getFilter, updateURL } from 'store/actions/trace/util';
import AppActions from 'types/actions';
-import { Dispatch } from 'redux';
import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
-import { AxiosError } from 'axios';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { AllPanelHeading } from 'types/reducer/trace';
const PanelHeading = (props: PanelHeadingProps): JSX.Element => {
const {
diff --git a/frontend/src/container/Trace/Graph/config.ts b/frontend/src/container/Trace/Graph/config.ts
index f72e23f97a..b0b500c06d 100644
--- a/frontend/src/container/Trace/Graph/config.ts
+++ b/frontend/src/container/Trace/Graph/config.ts
@@ -1,10 +1,10 @@
import { ChartData, ChartDataset, ChartDatasetProperties } from 'chart.js';
-import { TraceReducer } from 'types/reducer/trace';
import dayjs from 'dayjs';
import { colors } from 'lib/getRandomColor';
+import { TraceReducer } from 'types/reducer/trace';
function transposeArray(array: number[][], arrayLength: number) {
- let newArray: number[][] = [];
+ const newArray: number[][] = [];
for (let i = 0; i < array.length; i++) {
newArray.push([]);
}
diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx
index f82a39a291..a9dacda144 100644
--- a/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx
+++ b/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx
@@ -1,6 +1,6 @@
import { AutoComplete, AutoCompleteProps, Input, notification } from 'antd';
import getTagFilters from 'api/trace/getTagFilter';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { GlobalReducer } from 'types/reducer/globalTime';
@@ -18,7 +18,7 @@ const TagsKey = (props: TagsKeysProps): JSX.Element => {
const [options, setOptions] = useState
([]);
- const onSearchHandler = async () => {
+ const onSearchHandler = useCallback(async () => {
try {
setSelectLoading(true);
const response = await getTagFilters({
@@ -55,11 +55,16 @@ const TagsKey = (props: TagsKeysProps): JSX.Element => {
});
setSelectLoading(false);
}
- };
+ }, [globalTime, traces]);
+
+ const counter = useRef(0);
useEffect(() => {
- onSearchHandler();
- }, []);
+ if (counter.current === 0) {
+ counter.current = 1;
+ onSearchHandler();
+ }
+ }, [onSearchHandler]);
return (
{
style={{ width: 300 }}
options={options}
value={selectedKey}
- onChange={(value) => {
+ onChange={(value): void => {
if (options && options.find((option) => option.value === value)) {
setSelectedKey(value);
diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx
index f8072ab895..004e1f96a0 100644
--- a/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx
+++ b/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx
@@ -1,21 +1,21 @@
-import React from 'react';
-
+import { CloseOutlined } from '@ant-design/icons';
import { Select } from 'antd';
+import { SelectValue } from 'antd/lib/select';
+import React from 'react';
+import { connect, useSelector } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
+import { UpdateSelectedTags } from 'store/actions/trace/updateTagsSelected';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
+import { TraceReducer } from 'types/reducer/trace';
+
import {
Container,
IconContainer,
SelectComponent,
ValueSelect,
} from './styles';
-import { connect, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { TraceReducer } from 'types/reducer/trace';
-import { CloseOutlined } from '@ant-design/icons';
-import { SelectValue } from 'antd/lib/select';
-import { ThunkDispatch } from 'redux-thunk';
-import AppActions from 'types/actions';
-import { bindActionCreators } from 'redux';
-import { UpdateSelectedTags } from 'store/actions/trace/updateTagsSelected';
import TagsKey from './TagKey';
const { Option } = Select;
@@ -45,11 +45,11 @@ const SingleTags = (props: AllTagsProps): JSX.Element => {
Values: selectedValues,
} = props.tag;
- const onDeleteTagHandler = (index: number) => {
+ const onDeleteTagHandler = (index: number): void => {
props.onCloseHandler(index);
};
- const onChangeOperatorHandler = (key: SelectValue) => {
+ const onChangeOperatorHandler = (key: SelectValue): void => {
props.setLocalSelectedTags([
...traces.selectedTags.slice(0, props.index),
{
@@ -83,7 +83,7 @@ const SingleTags = (props: AllTagsProps): JSX.Element => {
{
+ onChange={(value): void => {
props.setLocalSelectedTags((tags) => [
...tags.slice(0, props.index),
{
@@ -99,7 +99,7 @@ const SingleTags = (props: AllTagsProps): JSX.Element => {
onDeleteTagHandler(props.index)}
+ onClick={(): void => onDeleteTagHandler(props.index)}
>
diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/styles.ts b/frontend/src/container/Trace/Search/AllTags/Tag/styles.ts
index 91da16b124..8da702197d 100644
--- a/frontend/src/container/Trace/Search/AllTags/Tag/styles.ts
+++ b/frontend/src/container/Trace/Search/AllTags/Tag/styles.ts
@@ -1,5 +1,5 @@
+import { Select, Space } from 'antd';
import styled from 'styled-components';
-import { Button, Select, Space } from 'antd';
export const SpaceComponent = styled(Space)`
&&& {
diff --git a/frontend/src/container/Trace/Search/AllTags/index.tsx b/frontend/src/container/Trace/Search/AllTags/index.tsx
index e2a449ff6d..95083efb47 100644
--- a/frontend/src/container/Trace/Search/AllTags/index.tsx
+++ b/frontend/src/container/Trace/Search/AllTags/index.tsx
@@ -1,27 +1,28 @@
+import { CaretRightFilled } from '@ant-design/icons';
+import { Button, Space, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
-import { Button, Space, Typography } from 'antd';
-import { CaretRightFilled } from '@ant-design/icons';
import {
- Container,
ButtonContainer,
+ Container,
CurrentTagsContainer,
- Wrapper,
ErrorContainer,
+ Wrapper,
} from './styles';
import Tags from './Tag';
const { Text } = Typography;
import { PlusOutlined } from '@ant-design/icons';
+import { isEqual } from 'lodash-es';
import { connect, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { TraceReducer } from 'types/reducer/trace';
import { bindActionCreators } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
-import AppActions from 'types/actions';
import { UpdateTagIsError } from 'store/actions/trace/updateIsTagsError';
-import { parseTagsToQuery } from '../util';
-import { isEqual } from 'lodash-es';
import { UpdateTagVisiblity } from 'store/actions/trace/updateTagPanelVisiblity';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
+import { TraceReducer } from 'types/reducer/trace';
+
+import { parseTagsToQuery } from '../util';
const { Paragraph } = Typography;
@@ -37,7 +38,7 @@ const AllTags = ({
TraceReducer['selectedTags']
>(traces.selectedTags);
- const onTagAddHandler = () => {
+ const onTagAddHandler = (): void => {
setLocalSelectedTags((tags) => [
...tags,
{
@@ -52,16 +53,16 @@ const AllTags = ({
if (!isEqual(traces.selectedTags, localSelectedTags)) {
setLocalSelectedTags(traces.selectedTags);
}
- }, [traces.selectedTags]);
+ }, [traces.selectedTags, localSelectedTags]);
- const onCloseHandler = (index: number) => {
+ const onCloseHandler = (index: number): void => {
setLocalSelectedTags([
...localSelectedTags.slice(0, index),
...localSelectedTags.slice(index + 1, localSelectedTags.length),
]);
};
- const onRunQueryHandler = () => {
+ const onRunQueryHandler = (): void => {
const parsedQuery = parseTagsToQuery(localSelectedTags);
if (parsedQuery.isError) {
@@ -74,7 +75,7 @@ const AllTags = ({
}
};
- const onResetHandler = () => {
+ const onResetHandler = (): void => {
setLocalSelectedTags([]);
};
@@ -102,10 +103,10 @@ const AllTags = ({
{localSelectedTags.map((tags, index) => (
onCloseHandler(index)}
+ onCloseHandler={(): void => onCloseHandler(index)}
setLocalSelectedTags={setLocalSelectedTags}
/>
))}
diff --git a/frontend/src/container/Trace/Search/AllTags/styles.ts b/frontend/src/container/Trace/Search/AllTags/styles.ts
index ef875287a1..c43b32c5ea 100644
--- a/frontend/src/container/Trace/Search/AllTags/styles.ts
+++ b/frontend/src/container/Trace/Search/AllTags/styles.ts
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
import { Card } from 'antd';
+import styled from 'styled-components';
export const Container = styled(Card)`
top: 120%;
diff --git a/frontend/src/container/Trace/Search/index.tsx b/frontend/src/container/Trace/Search/index.tsx
index 1b6e59eba6..df919e3134 100644
--- a/frontend/src/container/Trace/Search/index.tsx
+++ b/frontend/src/container/Trace/Search/index.tsx
@@ -1,20 +1,21 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Space } from 'antd';
-import { Container, SearchComponent } from './styles';
-import useClickOutside from 'hooks/useClickOutside';
-import Tags from './AllTags';
-import { connect, useDispatch, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { TraceReducer } from 'types/reducer/trace';
-import { ThunkDispatch } from 'redux-thunk';
-import AppActions from 'types/actions';
-import { bindActionCreators, Dispatch } from 'redux';
-import { UpdateTagVisiblity } from 'store/actions/trace/updateTagPanelVisiblity';
-import { parseQueryToTags, parseTagsToQuery } from './util';
-import { UpdateTagIsError } from 'store/actions/trace/updateIsTagsError';
import { CaretRightFilled } from '@ant-design/icons';
+import { Space } from 'antd';
+import useClickOutside from 'hooks/useClickOutside';
+import React, { useEffect, useRef, useState } from 'react';
+import { connect, useDispatch, useSelector } from 'react-redux';
+import { bindActionCreators, Dispatch } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
+import { UpdateTagIsError } from 'store/actions/trace/updateIsTagsError';
+import { UpdateTagVisiblity } from 'store/actions/trace/updateTagPanelVisiblity';
import { updateURL } from 'store/actions/trace/util';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
+import { TraceReducer } from 'types/reducer/trace';
+
+import Tags from './AllTags';
+import { Container, SearchComponent } from './styles';
+import { parseQueryToTags, parseTagsToQuery } from './util';
const Search = ({
updateTagVisiblity,
@@ -38,7 +39,7 @@ const Search = ({
if (value.length === 0 && traces.isTagModalError) {
updateTagIsError(false);
}
- }, [traces.isTagModalError, value]);
+ }, [traces.isTagModalError, value, updateTagIsError]);
const tagRef = useRef(null);
@@ -69,11 +70,11 @@ const Search = ({
}
});
- const onChangeHandler = (search: string) => {
+ const onChangeHandler = (search: string): void => {
setValue(search);
};
- const setIsTagsModalHandler = (value: boolean) => {
+ const setIsTagsModalHandler = (value: boolean): void => {
updateTagVisiblity(value);
};
@@ -82,7 +83,9 @@ const Search = ({
setIsTagsModalHandler(true);
};
- const updateFilters = async (selectedTags: TraceReducer['selectedTags']) => {
+ const updateFilters = async (
+ selectedTags: TraceReducer['selectedTags'],
+ ): Promise => {
dispatch({
type: UPDATE_ALL_FILTERS,
payload: {
@@ -111,7 +114,7 @@ const Search = ({
onChangeHandler(event.target.value)}
+ onChange={(event): void => onChangeHandler(event.target.value)}
value={value}
allowClear
disabled={traces.filterLoading}
@@ -119,7 +122,7 @@ const Search = ({
placeholder="Click to filter by tags"
type={'search'}
enterButton={}
- onSearch={(string) => {
+ onSearch={(string): void => {
if (string.length === 0) {
updateTagVisiblity(false);
updateFilters([]);
diff --git a/frontend/src/container/Trace/Search/styles.ts b/frontend/src/container/Trace/Search/styles.ts
index f6f342aca9..9cbec7a213 100644
--- a/frontend/src/container/Trace/Search/styles.ts
+++ b/frontend/src/container/Trace/Search/styles.ts
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
import { Input } from 'antd';
+import styled from 'styled-components';
const { Search } = Input;
diff --git a/frontend/src/container/Trace/TraceGraphFilter/index.tsx b/frontend/src/container/Trace/TraceGraphFilter/index.tsx
index e929efadee..2d676b0682 100644
--- a/frontend/src/container/Trace/TraceGraphFilter/index.tsx
+++ b/frontend/src/container/Trace/TraceGraphFilter/index.tsx
@@ -1,21 +1,22 @@
+import { SelectProps, Space } from 'antd';
+import { SelectValue } from 'antd/lib/select';
import React from 'react';
-import { Space, SelectProps } from 'antd';
-import { functions, groupBy } from './config';
import { useDispatch, useSelector } from 'react-redux';
+import { Dispatch } from 'redux';
import { AppState } from 'store/reducers';
-import { TraceReducer } from 'types/reducer/trace';
import AppActions from 'types/actions';
import {
UPDATE_SELECTED_FUNCTION,
UPDATE_SELECTED_GROUP_BY,
} from 'types/actions/trace';
-import { Dispatch } from 'redux';
+import { TraceReducer } from 'types/reducer/trace';
+
+import { functions, groupBy } from './config';
import { SelectComponent } from './styles';
-import { SelectValue } from 'antd/lib/select';
const { Option } = SelectComponent;
-const TraceGraphFilter = () => {
+const TraceGraphFilter = (): JSX.Element => {
const { selectedFunction, selectedGroupBy } = useSelector<
AppState,
TraceReducer
@@ -75,11 +76,13 @@ const TraceGraphFilter = () => {
value={groupBy.find((e) => selectedGroupBy === e.key)?.displayValue}
onChange={onClickSelectedGroupByHandler}
>
- {groupBy.map((value) => (
-
- ))}
+ {groupBy.map(
+ (value): JSX.Element => (
+
+ ),
+ )}
);
diff --git a/frontend/src/container/Trace/TraceGraphFilter/styles.ts b/frontend/src/container/Trace/TraceGraphFilter/styles.ts
index be712d4cba..2acd767d8c 100644
--- a/frontend/src/container/Trace/TraceGraphFilter/styles.ts
+++ b/frontend/src/container/Trace/TraceGraphFilter/styles.ts
@@ -1,5 +1,4 @@
import { Select } from 'antd';
-
import styled from 'styled-components';
export const SelectComponent = styled(Select)`
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx
index ebe2ea2559..8de84e5bdc 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx
@@ -1,13 +1,13 @@
-import { Button, Modal, Collapse } from 'antd';
+import { Button, Collapse, Modal } from 'antd';
import useThemeMode from 'hooks/useThemeMode';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
import { ITraceTree } from 'types/api/trace/getTraceItem';
+
import { CustomSubText, CustomSubTitle } from './styles';
-// import Editor from 'components/Editor';
const { Panel } = Collapse;
-const ErrorTag = ({ event }: ErrorTagProps) => {
+const ErrorTag = ({ event }: ErrorTagProps): JSX.Element => {
const [isOpen, setIsOpen] = useState(false);
const { isDarkMode } = useThemeMode();
// const useTextRef = useRef('');
@@ -17,7 +17,7 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
subText: '',
});
- const onToggleHandler = (state: boolean) => {
+ const onToggleHandler = (state: boolean): void => {
setIsOpen(state);
};
@@ -30,6 +30,7 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
{
{isEllipsed && (
)}
-
-
);
})}
@@ -72,7 +71,7 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
);
})}
onToggleHandler(false)}
+ onCancel={(): void => onToggleHandler(false)}
title="Log Message"
visible={isOpen}
destroyOnClose
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
index 35ed013d9c..21ccde3de9 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
@@ -1,6 +1,9 @@
import { Space, Tabs, Typography } from 'antd';
+import useThemeMode from 'hooks/useThemeMode';
import React from 'react';
import { ITraceTree } from 'types/api/trace/getTraceItem';
+
+import ErrorTag from './ErrorTag';
import {
CardContainer,
CustomSubText,
@@ -8,8 +11,6 @@ import {
CustomText,
CustomTitle,
} from './styles';
-import ErrorTag from './ErrorTag';
-import useThemeMode from 'hooks/useThemeMode';
const { TabPane } = Tabs;
@@ -40,7 +41,7 @@ const SelectedSpanDetails = (props: SelectedSpanDetailsProps): JSX.Element => {
{tags.length !== 0 ? (
tags.map((tags) => {
return (
-
+
{tags.value && (
<>
{tags.key}
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index 99d693fc85..7c9d5ab8de 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -1,21 +1,22 @@
-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';
const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
@@ -25,10 +26,10 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
);
const urlQuery = useUrlQuery();
- const [spanId, _setSpanId] = useState(urlQuery.get('spanId'));
+ const [spanId] = useState(urlQuery.get('spanId'));
const [intervalUnit, setIntervalUnit] = useState(INTERVAL_UNITS[0]);
- const [searchSpanString, setSearchSpanString] = useState('');
+ // const [searchSpanString, setSearchSpanString] = useState('');
const [activeHoverId, setActiveHoverId] = useState('');
const [activeSelectedId, setActiveSelectedId] = useState(spanId || '');
@@ -38,9 +39,9 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
const { treeData: tree, ...traceMetaData } = useMemo(() => {
return getSpanTreeMetadata(getSortedData(treeData), spanServiceColors);
- }, [treeData]);
+ }, [treeData, spanServiceColors]);
- const [globalTraceMetadata, _setGlobalTraceMetadata] = useState