mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-15 04:15:56 +08:00
Merge branch 'develop' into release/v0.7.5
This commit is contained in:
Prashant Shahi
commit
f4cc2a3a05
@ -68,6 +68,7 @@
|
||||
"react-graph-vis": "^1.0.5",
|
||||
"react-grid-layout": "^1.2.5",
|
||||
"react-i18next": "^11.16.1",
|
||||
"react-query": "^3.34.19",
|
||||
"react-redux": "^7.2.2",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-use": "^17.3.2",
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable sonarjs/cognitive-complexity */
|
||||
import { Button, Col, Modal, notification, Row, Typography } from 'antd';
|
||||
import getDisks from 'api/disks/getDisks';
|
||||
import getRetentionPeriodApi from 'api/settings/getRetention';
|
||||
@ -12,12 +13,7 @@ import { IDiskType } from 'types/api/disks/getDisks';
|
||||
import { PayloadProps } from 'types/api/settings/getRetention';
|
||||
|
||||
import Retention from './Retention';
|
||||
import {
|
||||
ButtonContainer,
|
||||
ErrorText,
|
||||
ErrorTextContainer,
|
||||
ToolTipContainer,
|
||||
} from './styles';
|
||||
import { ButtonContainer, ErrorText, ErrorTextContainer } from './styles';
|
||||
|
||||
function GeneralSettings(): JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
@ -31,10 +27,17 @@ function GeneralSettings(): JSX.Element {
|
||||
getDisks().then((response) => setAvailableDisks(response.payload));
|
||||
}, []);
|
||||
|
||||
const { payload: currentTTLValues, loading, error, errorMessage } = useFetch<
|
||||
const { payload, loading, error, errorMessage } = useFetch<
|
||||
PayloadProps,
|
||||
undefined
|
||||
>(getRetentionPeriodApi, undefined);
|
||||
|
||||
const [currentTTLValues, setCurrentTTLValues] = useState(payload);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentTTLValues(payload);
|
||||
}, [payload]);
|
||||
|
||||
const [metricsTotalRetentionPeriod, setMetricsTotalRetentionPeriod] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
@ -63,6 +66,7 @@ function GeneralSettings(): JSX.Element {
|
||||
: null,
|
||||
);
|
||||
}
|
||||
console.log({ changed: currentTTLValues });
|
||||
}, [currentTTLValues]);
|
||||
|
||||
const onModalToggleHandler = (): void => {
|
||||
@ -138,30 +142,51 @@ function GeneralSettings(): JSX.Element {
|
||||
const onOkHandler = async (): Promise<void> => {
|
||||
try {
|
||||
setPostApiLoading(true);
|
||||
const [metricsTTLApiResponse, tracesTTLApiResponse] = await Promise.all([
|
||||
const apiCalls = [];
|
||||
|
||||
if (
|
||||
!(
|
||||
currentTTLValues?.metrics_move_ttl_duration_hrs ===
|
||||
metricsS3RetentionPeriod &&
|
||||
currentTTLValues.metrics_ttl_duration_hrs === metricsTotalRetentionPeriod
|
||||
)
|
||||
) {
|
||||
apiCalls.push(() =>
|
||||
setRetentionApi({
|
||||
type: 'metrics',
|
||||
totalDuration: `${metricsTotalRetentionPeriod || -1}h`,
|
||||
coldStorage: s3Enabled ? 's3' : null,
|
||||
toColdDuration: `${metricsS3RetentionPeriod || -1}h`,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
apiCalls.push(() => Promise.resolve(null));
|
||||
}
|
||||
|
||||
if (
|
||||
!(
|
||||
currentTTLValues?.traces_move_ttl_duration_hrs ===
|
||||
tracesS3RetentionPeriod &&
|
||||
currentTTLValues.traces_ttl_duration_hrs === tracesTotalRetentionPeriod
|
||||
)
|
||||
) {
|
||||
apiCalls.push(() =>
|
||||
setRetentionApi({
|
||||
type: 'traces',
|
||||
totalDuration: `${tracesTotalRetentionPeriod || -1}h`,
|
||||
coldStorage: s3Enabled ? 's3' : null,
|
||||
toColdDuration: `${tracesS3RetentionPeriod || -1}h`,
|
||||
}),
|
||||
]);
|
||||
[
|
||||
{
|
||||
apiResponse: metricsTTLApiResponse,
|
||||
name: 'metrics',
|
||||
},
|
||||
{
|
||||
apiResponse: tracesTTLApiResponse,
|
||||
name: 'traces',
|
||||
},
|
||||
].forEach(({ apiResponse, name }) => {
|
||||
);
|
||||
} else {
|
||||
apiCalls.push(() => Promise.resolve(null));
|
||||
}
|
||||
const apiCallSequence = ['metrics', 'traces'];
|
||||
const apiResponses = await Promise.all(apiCalls.map((api) => api()));
|
||||
|
||||
apiResponses.forEach((apiResponse, idx) => {
|
||||
const name = apiCallSequence[idx];
|
||||
if (apiResponse) {
|
||||
if (apiResponse.statusCode === 200) {
|
||||
notifications.success({
|
||||
message: 'Success!',
|
||||
@ -176,6 +201,7 @@ function GeneralSettings(): JSX.Element {
|
||||
placement: 'topRight',
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
onModalToggleHandler();
|
||||
setPostApiLoading(false);
|
||||
@ -186,10 +212,18 @@ function GeneralSettings(): JSX.Element {
|
||||
placement: 'topRight',
|
||||
});
|
||||
}
|
||||
// Updates the currentTTL Values in order to avoid pushing the same values.
|
||||
setCurrentTTLValues({
|
||||
metrics_ttl_duration_hrs: metricsTotalRetentionPeriod || -1,
|
||||
metrics_move_ttl_duration_hrs: metricsS3RetentionPeriod || -1,
|
||||
traces_ttl_duration_hrs: tracesTotalRetentionPeriod || -1,
|
||||
traces_move_ttl_duration_hrs: tracesS3RetentionPeriod || -1,
|
||||
});
|
||||
|
||||
setModal(false);
|
||||
};
|
||||
|
||||
const [isDisabled, errorText] = useMemo(() => {
|
||||
const [isDisabled, errorText] = useMemo((): [boolean, string] => {
|
||||
// Various methods to return dynamic error message text.
|
||||
const messages = {
|
||||
compareError: (name: string | number): string =>
|
||||
@ -228,8 +262,18 @@ function GeneralSettings(): JSX.Element {
|
||||
errorText = messages.nullValueError('traces');
|
||||
}
|
||||
}
|
||||
if (
|
||||
currentTTLValues?.metrics_ttl_duration_hrs === metricsTotalRetentionPeriod &&
|
||||
currentTTLValues.metrics_move_ttl_duration_hrs ===
|
||||
metricsS3RetentionPeriod &&
|
||||
currentTTLValues.traces_ttl_duration_hrs === tracesTotalRetentionPeriod &&
|
||||
currentTTLValues.traces_move_ttl_duration_hrs === tracesS3RetentionPeriod
|
||||
) {
|
||||
isDisabled = true;
|
||||
}
|
||||
return [isDisabled, errorText];
|
||||
}, [
|
||||
currentTTLValues,
|
||||
metricsS3RetentionPeriod,
|
||||
metricsTotalRetentionPeriod,
|
||||
s3Enabled,
|
||||
@ -249,27 +293,16 @@ function GeneralSettings(): JSX.Element {
|
||||
return (
|
||||
<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
|
||||
{Element}
|
||||
{errorText ? (
|
||||
<ErrorTextContainer>
|
||||
<ErrorText>{errorText}</ErrorText>
|
||||
|
||||
<TextToolTip
|
||||
{...{
|
||||
text: `More details on how to set retention period`,
|
||||
url: 'https://signoz.io/docs/userguide/retention-period/',
|
||||
}}
|
||||
/>
|
||||
{errorText && <ErrorText>{errorText}</ErrorText>}
|
||||
</ErrorTextContainer>
|
||||
) : (
|
||||
<ToolTipContainer>
|
||||
<TextToolTip
|
||||
{...{
|
||||
text: `More details on how to set retention period`,
|
||||
url: 'https://signoz.io/docs/userguide/retention-period/',
|
||||
}}
|
||||
/>
|
||||
</ToolTipContainer>
|
||||
)}
|
||||
|
||||
<Row justify="space-around">{renderConfig}</Row>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -56,6 +56,7 @@ export const ErrorTextContainer = styled.div`
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
> article {
|
||||
margin-right: 1rem;
|
||||
|
||||
@ -36,7 +36,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
|
||||
history.replace(
|
||||
`${
|
||||
ROUTES.TRACE
|
||||
}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["ok","error"]}&filterToFetchData=["duration","status","serviceName"]&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&isSelectedFilterSkipped=true`,
|
||||
}?${urlParams.toString()}&selected={"serviceName":["${servicename}"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=[]&&isFilterExclude={"serviceName":false}&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&spanAggregateCurrentPage=1&spanAggregateOrder=ascend`,
|
||||
);
|
||||
};
|
||||
|
||||
@ -88,7 +88,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
|
||||
history.replace(
|
||||
`${
|
||||
ROUTES.TRACE
|
||||
}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&userSelectedFilter={"status":["error"],"serviceName":["${servicename}"]}&isSelectedFilterSkipped=true`,
|
||||
}?${urlParams.toString()}?selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=[]&isFilterExclude={"serviceName":false,"status":false}&userSelectedFilter={"serviceName":["${servicename}"],"status":["error"]}&spanAggregateCurrentPage=1&spanAggregateOrder=ascend`,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
|
||||
history.push(
|
||||
`${
|
||||
ROUTES.TRACE
|
||||
}?${urlParams.toString()}&selected={"status":["error","ok"],"serviceName":["${servicename}"],"operation":["${operation}"]}&filterToFetchData=["duration","status","serviceName","operation"]&isSelectedFilterSkipped=true&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"],"operation":["${operation}"]}&isSelectedFilterSkipped=true`,
|
||||
}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"operation":["${operation}"]}&filterToFetchData=["duration","status","serviceName","operation"]&spanAggregateCurrentPage=1&selectedTags=[]&&isFilterExclude={"serviceName":false,"operation":false}&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"],"operation":["${operation}"]}&spanAggregateCurrentPage=1&spanAggregateOrder=ascend`,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -130,7 +130,6 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
|
||||
filterToFetchData,
|
||||
spansAggregate.currentPage,
|
||||
selectedTags,
|
||||
updatedFilter,
|
||||
preIsFilterExclude,
|
||||
preUserSelectedMap,
|
||||
spansAggregate.order,
|
||||
|
||||
@ -126,7 +126,6 @@ function Duration(): JSX.Element {
|
||||
filterToFetchData,
|
||||
spansAggregate.currentPage,
|
||||
selectedTags,
|
||||
preFilter,
|
||||
isFilterExclude,
|
||||
userSelectedFilter,
|
||||
spansAggregate.order,
|
||||
|
||||
@ -110,7 +110,6 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
|
||||
updatedFilterData,
|
||||
spansAggregate.currentPage,
|
||||
selectedTags,
|
||||
updatedFilter,
|
||||
isFilterExclude,
|
||||
getPreUserSelected,
|
||||
spansAggregate.order,
|
||||
@ -139,7 +138,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
|
||||
...filterToFetchData.filter((name) => name !== PanelName),
|
||||
];
|
||||
|
||||
preSelectedFilter.delete(PanelName);
|
||||
// preSelectedFilter.delete(PanelName);
|
||||
|
||||
dispatch({
|
||||
type: UPDATE_ALL_FILTERS,
|
||||
@ -160,7 +159,6 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
|
||||
preFilterToFetchTheData,
|
||||
spansAggregate.currentPage,
|
||||
selectedTags,
|
||||
filter,
|
||||
isFilterExclude,
|
||||
userSelectedFilter,
|
||||
spansAggregate.order,
|
||||
@ -210,7 +208,6 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
|
||||
filterToFetchData,
|
||||
spansAggregate.currentPage,
|
||||
selectedTags,
|
||||
getUpdatedFilter,
|
||||
postIsFilterExclude,
|
||||
preUserSelected,
|
||||
spansAggregate.order,
|
||||
|
||||
@ -32,6 +32,7 @@ function TagValue(props: TagValueProps): JSX.Element {
|
||||
|
||||
return (
|
||||
<SelectComponent
|
||||
value={selectedValues[0]}
|
||||
onSelect={(value: unknown): void => {
|
||||
if (typeof value === 'string') {
|
||||
setLocalSelectedTags((tags) => [
|
||||
|
||||
@ -116,6 +116,7 @@ function AllTags({
|
||||
</Wrapper>
|
||||
|
||||
<ButtonContainer>
|
||||
<Space align="start">
|
||||
<Button onClick={onResetHandler}>Reset</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
@ -124,6 +125,7 @@ function AllTags({
|
||||
>
|
||||
Run Query
|
||||
</Button>
|
||||
</Space>
|
||||
</ButtonContainer>
|
||||
</Container>
|
||||
);
|
||||
|
||||
@ -6,7 +6,7 @@ export const Container = styled(Card)`
|
||||
min-height: 20vh;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
position: absolute !important;
|
||||
|
||||
.ant-card-body {
|
||||
padding-bottom: 0;
|
||||
@ -35,20 +35,16 @@ export const Wrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
export const ButtonContainer = styled.div`
|
||||
export const ButtonContainer = styled(Card)`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background-color: #303030;
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
padding-right: 38.01px;
|
||||
|
||||
margin-top: 1rem;
|
||||
padding-top: 11px !important;
|
||||
padding-bottom: 11px !important;
|
||||
padding-right: 38.01px !important;
|
||||
|
||||
> button:nth-child(1) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
margin-top: 1rem !important;
|
||||
`;
|
||||
|
||||
export const CurrentTagsContainer = styled.div`
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
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';
|
||||
@ -105,7 +104,6 @@ function Search({
|
||||
traces.filterToFetchData,
|
||||
traces.spansAggregate.currentPage,
|
||||
selectedTags,
|
||||
traces.filter,
|
||||
traces.isFilterExclude,
|
||||
traces.userSelectedFilter,
|
||||
traces.spansAggregate.order,
|
||||
@ -113,7 +111,6 @@ function Search({
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Container ref={tagRef}>
|
||||
<SearchComponent
|
||||
onChange={(event): void => onChangeHandler(event.target.value)}
|
||||
@ -147,7 +144,6 @@ function Search({
|
||||
<Tags updateFilters={updateFilters} onChangeHandler={onChangeHandler} />
|
||||
)}
|
||||
</Container>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ const { Search } = Input;
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const SearchComponent = styled(Search)`
|
||||
|
||||
@ -3,14 +3,17 @@ import Table, { ColumnsType } from 'antd/lib/table';
|
||||
import ROUTES from 'constants/routes';
|
||||
import dayjs from 'dayjs';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
import history from 'lib/history';
|
||||
import React from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Dispatch } from 'redux';
|
||||
import { updateURL } from 'store/actions/trace/util';
|
||||
import { AppState } from 'store/reducers';
|
||||
import AppActions from 'types/actions';
|
||||
import { UPDATE_SPAN_ORDER } from 'types/actions/trace';
|
||||
import {
|
||||
UPDATE_SPAN_ORDER,
|
||||
UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
|
||||
} from 'types/actions/trace';
|
||||
import { TraceReducer } from 'types/reducer/trace';
|
||||
|
||||
dayjs.extend(duration);
|
||||
@ -37,30 +40,17 @@ function TraceTable(): JSX.Element {
|
||||
return `${ROUTES.TRACE}/${record.traceID}?spanId=${record.spanID}`;
|
||||
};
|
||||
|
||||
const getValue = (value: string, record: TableType): JSX.Element => {
|
||||
return (
|
||||
<Link to={getLink(record)}>
|
||||
<Typography>{value}</Typography>
|
||||
</Link>
|
||||
);
|
||||
const getValue = (value: string): JSX.Element => {
|
||||
return <Typography>{value}</Typography>;
|
||||
};
|
||||
|
||||
const getHttpMethodOrStatus = (
|
||||
value: TableType['httpMethod'],
|
||||
record: TableType,
|
||||
): JSX.Element => {
|
||||
if (value.length === 0) {
|
||||
return (
|
||||
<Link to={getLink(record)}>
|
||||
<Typography>-</Typography>
|
||||
</Link>
|
||||
);
|
||||
return <Typography>-</Typography>;
|
||||
}
|
||||
return (
|
||||
<Link to={getLink(record)}>
|
||||
<Tag color="magenta">{value}</Tag>
|
||||
</Link>
|
||||
);
|
||||
return <Tag color="magenta">{value}</Tag>;
|
||||
};
|
||||
|
||||
const columns: ColumnsType<TableType> = [
|
||||
@ -69,13 +59,9 @@ function TraceTable(): JSX.Element {
|
||||
dataIndex: 'timestamp',
|
||||
key: 'timestamp',
|
||||
sorter: true,
|
||||
render: (value: TableType['timestamp'], record): JSX.Element => {
|
||||
render: (value: TableType['timestamp']): JSX.Element => {
|
||||
const day = dayjs(value);
|
||||
return (
|
||||
<Link to={getLink(record)}>
|
||||
<Typography>{day.format('YYYY/MM/DD HH:mm:ss')}</Typography>
|
||||
</Link>
|
||||
);
|
||||
return <Typography>{day.format('YYYY/MM/DD HH:mm:ss')}</Typography>;
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -94,15 +80,13 @@ function TraceTable(): JSX.Element {
|
||||
title: 'Duration',
|
||||
dataIndex: 'durationNano',
|
||||
key: 'durationNano',
|
||||
render: (value: TableType['durationNano'], record): JSX.Element => (
|
||||
<Link to={getLink(record)}>
|
||||
render: (value: TableType['durationNano']): JSX.Element => (
|
||||
<Typography>
|
||||
{`${dayjs
|
||||
.duration({ milliseconds: value / 1000000 })
|
||||
.asMilliseconds()
|
||||
.toFixed(2)} ms`}
|
||||
</Typography>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
@ -136,12 +120,18 @@ function TraceTable(): JSX.Element {
|
||||
},
|
||||
});
|
||||
|
||||
dispatch({
|
||||
type: UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
|
||||
payload: {
|
||||
currentPage: props.current,
|
||||
},
|
||||
});
|
||||
|
||||
updateURL(
|
||||
selectedFilter,
|
||||
filterToFetchData,
|
||||
props.current,
|
||||
selectedTags,
|
||||
filter,
|
||||
isFilterExclude,
|
||||
userSelectedFilter,
|
||||
spanOrder,
|
||||
@ -160,6 +150,13 @@ function TraceTable(): JSX.Element {
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onRow={(record): React.HTMLAttributes<TableType> => ({
|
||||
onClick: (event): void => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
history.push(getLink(record));
|
||||
},
|
||||
})}
|
||||
pagination={{
|
||||
current: spansAggregate.currentPage,
|
||||
pageSize: spansAggregate.pageSize,
|
||||
|
||||
@ -4,6 +4,7 @@ import './ReactI18';
|
||||
import AppRoutes from 'AppRoutes';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||
import { Provider } from 'react-redux';
|
||||
import reportWebVitals from 'reportWebVitals';
|
||||
import store from 'store';
|
||||
@ -12,12 +13,16 @@ if (process.env.NODE_ENV === 'development') {
|
||||
reportWebVitals(console.log);
|
||||
}
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
ReactDOM.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Provider store={store}>
|
||||
<React.StrictMode>
|
||||
<AppRoutes />
|
||||
</React.StrictMode>
|
||||
</Provider>,
|
||||
</Provider>
|
||||
</QueryClientProvider>,
|
||||
document.querySelector('#root'),
|
||||
);
|
||||
|
||||
|
||||
@ -2,27 +2,30 @@ 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 { useQuery } from 'react-query';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Props as TraceDetailProps } from 'types/api/trace/getTraceItem';
|
||||
|
||||
function TraceDetail(): JSX.Element {
|
||||
const { id } = useParams<TraceDetailProps>();
|
||||
const { data: traceDetailResponse, error, isLoading, isError } = useQuery(
|
||||
`getTraceItem/${id}`,
|
||||
() => getTraceItem({ id }),
|
||||
{
|
||||
cacheTime: 3000,
|
||||
},
|
||||
);
|
||||
|
||||
const traceDetailResponse = useFetch(getTraceItem, {
|
||||
id,
|
||||
});
|
||||
|
||||
if (traceDetailResponse.error) {
|
||||
if (traceDetailResponse?.error || error || isError) {
|
||||
return (
|
||||
<Typography>
|
||||
{traceDetailResponse.errorMessage || 'Something went wrong'}
|
||||
{traceDetailResponse?.error || 'Something went wrong'}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
if (traceDetailResponse.loading || traceDetailResponse.payload === undefined) {
|
||||
if (isLoading || !(traceDetailResponse && traceDetailResponse.payload)) {
|
||||
return <Spinner tip="Loading.." />;
|
||||
}
|
||||
|
||||
|
||||
@ -82,7 +82,6 @@ export const GetSpansAggregate = (
|
||||
traces.filterToFetchData,
|
||||
props.current,
|
||||
traces.selectedTags,
|
||||
traces.filter,
|
||||
traces.isFilterExclude,
|
||||
traces.userSelectedFilter,
|
||||
order,
|
||||
|
||||
@ -44,7 +44,6 @@ export const SelectedTraceFilter = (props: {
|
||||
traces.filterToFetchData,
|
||||
traces.spansAggregate.currentPage,
|
||||
traces.selectedTags,
|
||||
traces.filter,
|
||||
traces.isFilterExclude,
|
||||
traces.userSelectedFilter,
|
||||
traces.spansAggregate.order,
|
||||
|
||||
@ -20,7 +20,6 @@ export const updateURL = (
|
||||
filterToFetchData: TraceReducer['filterToFetchData'],
|
||||
spanAggregateCurrentPage: TraceReducer['spansAggregate']['currentPage'],
|
||||
selectedTags: TraceReducer['selectedTags'],
|
||||
filter: TraceReducer['filter'],
|
||||
isFilterExclude: TraceReducer['isFilterExclude'],
|
||||
userSelectedFilter: TraceReducer['userSelectedFilter'],
|
||||
spanAggregateOrder: TraceReducer['spansAggregate']['order'],
|
||||
@ -55,7 +54,7 @@ export const updateURL = (
|
||||
filterToFetchData,
|
||||
)}&spanAggregateCurrentPage=${spanAggregateCurrentPage}&selectedTags=${JSON.stringify(
|
||||
selectedTags,
|
||||
)}&filter=${JSON.stringify(Object.fromEntries(filter))}&${preResult
|
||||
)}&${preResult
|
||||
.map((e) => `${e.key}=${e.value}`)
|
||||
.join('&')}&isFilterExclude=${JSON.stringify(
|
||||
Object.fromEntries(isFilterExclude),
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
UPDATE_SELECTED_TAGS,
|
||||
UPDATE_SPAN_ORDER,
|
||||
UPDATE_SPANS_AGGREGATE,
|
||||
UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
|
||||
UPDATE_TAG_MODAL_VISIBILITY,
|
||||
UPDATE_TRACE_FILTER,
|
||||
UPDATE_TRACE_FILTER_LOADING,
|
||||
@ -213,6 +214,16 @@ const traceReducer = (
|
||||
};
|
||||
}
|
||||
|
||||
case UPDATE_SPANS_AGGREGATE_PAGE_NUMBER: {
|
||||
return {
|
||||
...state,
|
||||
spansAggregate: {
|
||||
...state.spansAggregate,
|
||||
currentPage: action.payload.currentPage,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
@ -26,6 +26,8 @@ export const UPDATE_FILTER_RESPONSE_SELECTED =
|
||||
export const UPDATE_FILTER_EXCLUDE = 'UPDATE_FILTER_EXCLUDE';
|
||||
|
||||
export const UPDATE_SPAN_ORDER = 'UPDATE_SPAN_ORDER';
|
||||
export const UPDATE_SPANS_AGGREGATE_PAGE_NUMBER =
|
||||
'UPDATE_SPANS_AGGREGATE_PAGE_NUMBER';
|
||||
|
||||
export interface UpdateFilter {
|
||||
type: typeof UPDATE_TRACE_FILTER;
|
||||
@ -152,6 +154,13 @@ export interface UpdateSpans {
|
||||
};
|
||||
}
|
||||
|
||||
export interface UpdateSpansAggregatePageNumber {
|
||||
type: typeof UPDATE_SPANS_AGGREGATE_PAGE_NUMBER;
|
||||
payload: {
|
||||
currentPage: TraceReducer['spansAggregate']['currentPage'];
|
||||
};
|
||||
}
|
||||
|
||||
export interface UpdateSpanOrder {
|
||||
type: typeof UPDATE_SPAN_ORDER;
|
||||
payload: {
|
||||
@ -177,4 +186,5 @@ export type TraceActions =
|
||||
| ResetTraceFilter
|
||||
| UpdateSelected
|
||||
| UpdateFilterExclude
|
||||
| UpdateSpanOrder;
|
||||
| UpdateSpanOrder
|
||||
| UpdateSpansAggregatePageNumber;
|
||||
|
||||
@ -1070,7 +1070,7 @@
|
||||
core-js-pure "^3.20.2"
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
version "7.17.8"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
|
||||
integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
|
||||
@ -3648,6 +3648,11 @@ bcrypt-pbkdf@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/bezier-js/-/bezier-js-6.1.0.tgz#162b7bdbabe866e3a796285a89d71085140755ec"
|
||||
integrity sha512-oc8fkHqG0R+dQuNiXVbPMB0cc8iDqkLAjbA2gq26QmV8tZqW9GGI7iNEX1ioRWlZperQS7v5BX03+9FLVWZbSw==
|
||||
|
||||
big-integer@^1.6.16:
|
||||
version "1.6.51"
|
||||
resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
|
||||
integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
|
||||
|
||||
big.js@^3.1.3:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
|
||||
@ -3737,6 +3742,20 @@ braces@^3.0.1, braces@~3.0.2:
|
||||
dependencies:
|
||||
fill-range "^7.0.1"
|
||||
|
||||
broadcast-channel@^3.4.1:
|
||||
version "3.7.0"
|
||||
resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
|
||||
integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
detect-node "^2.1.0"
|
||||
js-sha3 "0.8.0"
|
||||
microseconds "0.2.0"
|
||||
nano-time "1.0.0"
|
||||
oblivious-set "1.0.0"
|
||||
rimraf "3.0.2"
|
||||
unload "2.2.0"
|
||||
|
||||
browser-process-hrtime@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
|
||||
@ -5399,7 +5418,7 @@ detect-newline@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
|
||||
integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
|
||||
|
||||
detect-node@^2.0.4:
|
||||
detect-node@^2.0.4, detect-node@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
|
||||
integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
|
||||
@ -7998,6 +8017,11 @@ js-cookie@^2.2.1:
|
||||
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
|
||||
integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
|
||||
|
||||
js-sha3@0.8.0:
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
|
||||
integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
|
||||
|
||||
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||
@ -8563,6 +8587,14 @@ marked@4.0.10:
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.10.tgz#423e295385cc0c3a70fa495e0df68b007b879423"
|
||||
integrity sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==
|
||||
|
||||
match-sorter@^6.0.2:
|
||||
version "6.3.1"
|
||||
resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
|
||||
integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
remove-accents "0.4.2"
|
||||
|
||||
mdn-data@2.0.14:
|
||||
version "2.0.14"
|
||||
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
|
||||
@ -8632,6 +8664,11 @@ micromatch@^4.0.2, micromatch@^4.0.4:
|
||||
braces "^3.0.1"
|
||||
picomatch "^2.2.3"
|
||||
|
||||
microseconds@0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
|
||||
integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
|
||||
|
||||
mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
|
||||
version "1.52.0"
|
||||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
|
||||
@ -8789,6 +8826,13 @@ nano-css@^5.3.1:
|
||||
stacktrace-js "^2.0.2"
|
||||
stylis "^4.0.6"
|
||||
|
||||
nano-time@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
|
||||
integrity sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=
|
||||
dependencies:
|
||||
big-integer "^1.6.16"
|
||||
|
||||
nanoid@^2.0.3:
|
||||
version "2.1.11"
|
||||
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
|
||||
@ -9070,6 +9114,11 @@ object.values@^1.1.5:
|
||||
define-properties "^1.1.3"
|
||||
es-abstract "^1.19.1"
|
||||
|
||||
oblivious-set@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
|
||||
integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
|
||||
|
||||
observable-fns@^0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/observable-fns/-/observable-fns-0.6.1.tgz#636eae4fdd1132e88c0faf38d33658cc79d87e37"
|
||||
@ -10513,6 +10562,15 @@ react-motion@^0.5.2:
|
||||
prop-types "^15.5.8"
|
||||
raf "^3.1.0"
|
||||
|
||||
react-query@^3.34.19:
|
||||
version "3.34.19"
|
||||
resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.34.19.tgz#0ff049b6e0d2ed148e9abfdd346625d0e88dc229"
|
||||
integrity sha512-JO0Ymi58WKmvnhgg6bGIrYIeKb64KsKaPWo8JcGnmK2jJxAs2XmMBzlP75ZepSU7CHzcsWtIIyhMrLbX3pb/3w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
broadcast-channel "^3.4.1"
|
||||
match-sorter "^6.0.2"
|
||||
|
||||
react-redux@^7.2.2:
|
||||
version "7.2.6"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
|
||||
@ -10757,6 +10815,11 @@ relateurl@^0.2.7:
|
||||
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
|
||||
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
|
||||
|
||||
remove-accents@0.4.2:
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
|
||||
integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
|
||||
|
||||
remove-trailing-separator@^1.0.1:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
|
||||
@ -10904,7 +10967,7 @@ rfdc@^1.3.0:
|
||||
resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
|
||||
integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
|
||||
|
||||
rimraf@^3.0.0, rimraf@^3.0.2:
|
||||
rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
|
||||
integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
|
||||
@ -12273,6 +12336,14 @@ universalify@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
|
||||
integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
|
||||
|
||||
unload@2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
|
||||
integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.2"
|
||||
detect-node "^2.0.4"
|
||||
|
||||
unpipe@1.0.0, unpipe@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user