feat: add no found with no events are present (#1874)

* chore: not found component is updated
* feat: no events handling is updated

Co-authored-by: Ankit Nayan <ankit@signoz.io>

frontend/src/components/NotFound/constant.ts

@@ -0,0 +1 @@
+export const defaultText = 'Ah, seems like we reached a dead end!';

frontend/src/components/NotFound/index.tsx

@@ -2,45 +2,52 @@ import getLocalStorageKey from 'api/browser/localstorage/get';
 import NotFoundImage from 'assets/NotFound';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import { LOGGED_IN } from 'types/actions/app';
 
+import { defaultText } from './constant';
 import { Button, Container, Text, TextContainer } from './styles';
 
-function NotFound(): JSX.Element {
+function NotFound({ text = defaultText }: Props): JSX.Element {
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const isLoggedIn = getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN);
 
+	const onClickHandler = useCallback(() => {
+		if (isLoggedIn) {
+			dispatch({
+				type: LOGGED_IN,
+				payload: {
+					isLoggedIn: true,
+				},
+			});
+		}
+	}, [dispatch, isLoggedIn]);
+
 	return (
 		<Container>
 			<NotFoundImage />
 
 			<TextContainer>
-				<Text>Ah, seems like we reached a dead end!</Text>
+				<Text>{text}</Text>
 				<Text>Page Not Found</Text>
 			</TextContainer>
 
-			<Button
-				onClick={(): void => {
-					if (isLoggedIn) {
-						dispatch({
-							type: LOGGED_IN,
-							payload: {
-								isLoggedIn: true,
-							},
-						});
-					}
-				}}
-				to={ROUTES.APPLICATION}
-				tabIndex={0}
-			>
+			<Button onClick={onClickHandler} to={ROUTES.APPLICATION} tabIndex={0}>
 				Return To Services Page
 			</Button>
 		</Container>
 	);
 }
 
+interface Props {
+	text?: string;
+}
+
+NotFound.defaultProps = {
+	text: defaultText,
+};
+
 export default NotFound;

frontend/src/pages/TraceDetail/constants.ts

@@ -1 +1,4 @@
 export const SPAN_DETAILS_LEFT_COL_WIDTH = 350;
+
+export const noEventMessage =
+	'The requested trace id was not found. Sometimes this happens because of insertion delay in trace data. Please try again after some time';

frontend/src/pages/TraceDetail/index.tsx

@@ -1,5 +1,6 @@
 import { Typography } from 'antd';
 import getTraceItem from 'api/trace/getTraceItem';
+import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import TraceDetailContainer from 'container/TraceDetail';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -8,6 +9,8 @@ import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { Props as TraceDetailProps } from 'types/api/trace/getTraceItem';
 
+import { noEventMessage } from './constants';
+
 function TraceDetail(): JSX.Element {
 	const { id } = useParams<TraceDetailProps>();
 	const urlQuery = useUrlQuery();
@@ -19,6 +22,7 @@ function TraceDetail(): JSX.Element {
 		}),
 		[urlQuery],
 	);
+
 	const { data: traceDetailResponse, error, isLoading, isError } = useQuery(
 		`getTraceItem/${id}`,
 		() => getTraceItem({ id, spanId, levelUp, levelDown }),
@@ -39,6 +43,10 @@ function TraceDetail(): JSX.Element {
 		return <Spinner tip="Loading.." />;
 	}
 
+	if (traceDetailResponse.payload[0].events.length === 0) {
+		return <NotFound text={noEventMessage} />;
+	}
+
 	return <TraceDetailContainer response={traceDetailResponse.payload} />;
 }