diff --git a/frontend/src/components/NotFound/constant.ts b/frontend/src/components/NotFound/constant.ts new file mode 100644 index 0000000000..b23534f3ab --- /dev/null +++ b/frontend/src/components/NotFound/constant.ts @@ -0,0 +1 @@ +export const defaultText = 'Ah, seems like we reached a dead end!'; diff --git a/frontend/src/components/NotFound/index.tsx b/frontend/src/components/NotFound/index.tsx index 6c6d25a6ce..04d140e34f 100644 --- a/frontend/src/components/NotFound/index.tsx +++ b/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>(); const isLoggedIn = getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN); + const onClickHandler = useCallback(() => { + if (isLoggedIn) { + dispatch({ + type: LOGGED_IN, + payload: { + isLoggedIn: true, + }, + }); + } + }, [dispatch, isLoggedIn]); + return ( - Ah, seems like we reached a dead end! + {text} Page Not Found - ); } +interface Props { + text?: string; +} + +NotFound.defaultProps = { + text: defaultText, +}; + export default NotFound; diff --git a/frontend/src/pages/TraceDetail/constants.ts b/frontend/src/pages/TraceDetail/constants.ts index 0253cbeff0..42fb237070 100644 --- a/frontend/src/pages/TraceDetail/constants.ts +++ b/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'; diff --git a/frontend/src/pages/TraceDetail/index.tsx b/frontend/src/pages/TraceDetail/index.tsx index 16316aa729..97c3140408 100644 --- a/frontend/src/pages/TraceDetail/index.tsx +++ b/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(); 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 ; } + if (traceDetailResponse.payload[0].events.length === 0) { + return ; + } + return ; }