diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 9aac1a42dfef2b64e17b21762ed9e4675252c5db..3c7db9c995307c82909bc262d1dfc08f47986d14 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -19,7 +19,7 @@ const ROUTES = { CHANNELS_NEW: '/setting/channels/new', CHANNELS_EDIT: '/setting/channels/edit/:id', ALL_ERROR: '/errors', - ERROR_DETAIL: '/errors/:serviceName/:errorType', + ERROR_DETAIL: '/error-detail', VERSION: '/status', MY_SETTINGS: '/my-settings', ORG_SETTINGS: '/settings/org-settings', diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx index 500a5edb24ec2d2185390a89b239f997bbae563e..49d2dc0bef07972bd9e100fb078668d444047cfb 100644 --- a/frontend/src/container/AllError/index.tsx +++ b/frontend/src/container/AllError/index.tsx @@ -7,7 +7,7 @@ import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; -import { generatePath, Link } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { AppState } from 'store/reducers'; import { Exception } from 'types/api/errors/getAll'; import { GlobalReducer } from 'types/reducer/globalTime'; @@ -48,10 +48,7 @@ function AllErrors(): JSX.Element { key: 'exceptionType', render: (value, record): JSX.Element => ( <Link - to={generatePath(ROUTES.ERROR_DETAIL, { - serviceName: record.serviceName, - errorType: record.exceptionType, - })} + to={`${ROUTES.ERROR_DETAIL}?serviceName=${record.serviceName}&errorType=${record.exceptionType}`} > {value} </Link> diff --git a/frontend/src/container/ErrorDetails/index.tsx b/frontend/src/container/ErrorDetails/index.tsx index 702967fa0834bf2feeb13ccdb87af1ea3e8e627c..a5f8efe756a3e560d487412c6c25996770186cd2 100644 --- a/frontend/src/container/ErrorDetails/index.tsx +++ b/frontend/src/container/ErrorDetails/index.tsx @@ -18,10 +18,12 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element { const { search } = useLocation(); const params = new URLSearchParams(search); const queryErrorId = params.get('errorId'); + const serviceName = params.get('serviceName'); + const errorType = params.get('errorType'); const errorDetail = idPayload; - const [stackTraceValue] = useState(errorDetail.excepionStacktrace); + const [stackTraceValue] = useState(errorDetail.exceptionStacktrace); const columns = useMemo( () => [ @@ -41,7 +43,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element { const keyToExclude = useMemo( () => [ - 'excepionStacktrace', + 'exceptionStacktrace', 'exceptionType', 'errorId', 'timestamp', @@ -64,9 +66,11 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element { return; } - history.push(`${history.location.pathname}?errorId=${id}`); - setLoading(false); + + history.push( + `${history.location.pathname}?errorId=${id}&serviceName=${serviceName}&errorType=${errorType}`, + ); } catch (error) { notification.error({ message: t('something_went_wrong'), @@ -101,7 +105,6 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element { </div> <div> <Space align="end" direction="horizontal"> - {/* <Button icon={<LeftOutlined />} /> */} <Button loading={isLoading} disabled={ diff --git a/frontend/src/container/GridGraphComponent/index.tsx b/frontend/src/container/GridGraphComponent/index.tsx index 9725957a43347852ad6fe76d6e8a905d79209d22..d2139b1a08bceb3a3e494a22f42dd9913ca42158 100644 --- a/frontend/src/container/GridGraphComponent/index.tsx +++ b/frontend/src/container/GridGraphComponent/index.tsx @@ -60,7 +60,9 @@ function GridGraphComponent({ <ValueContainer isDashboardPage={isDashboardPage}> <ValueGraph value={ - yAxisUnit ? getYAxisFormattedValue(value, yAxisUnit) : value.toString() + yAxisUnit + ? getYAxisFormattedValue(String(value), yAxisUnit) + : value.toString() } /> </ValueContainer> diff --git a/frontend/src/container/TopNav/Breadcrumbs/index.tsx b/frontend/src/container/TopNav/Breadcrumbs/index.tsx index d3919ac49ea57ba809c9297f610c31604fc12ea7..efa48fbbbe6f72a5dd7b9f4436767f4357c3f001 100644 --- a/frontend/src/container/TopNav/Breadcrumbs/index.tsx +++ b/frontend/src/container/TopNav/Breadcrumbs/index.tsx @@ -15,6 +15,7 @@ const breadcrumbNameMap = { [ROUTES.VERSION]: 'Status', [ROUTES.ORG_SETTINGS]: 'Organization Settings', [ROUTES.MY_SETTINGS]: 'My Settings', + [ROUTES.ERROR_DETAIL]: 'Errors', }; function ShowBreadcrumbs(props: RouteComponentProps): JSX.Element { diff --git a/frontend/src/container/TopNav/index.tsx b/frontend/src/container/TopNav/index.tsx index df32232843747f12b2fdfc87309122ecd17e74b6..ffd1b28175d0bfe52e5616ad7e974f30d5bdfbb7 100644 --- a/frontend/src/container/TopNav/index.tsx +++ b/frontend/src/container/TopNav/index.tsx @@ -18,6 +18,7 @@ const routesToSkip = [ ROUTES.VERSION, ROUTES.ALL_DASHBOARD, ROUTES.ORG_SETTINGS, + ROUTES.ERROR_DETAIL, ]; function TopNav(): JSX.Element | null { diff --git a/frontend/src/pages/ErrorDetails/index.tsx b/frontend/src/pages/ErrorDetails/index.tsx index 16f2f212a5b3f171a403e8fbdab7c9588257fc64..ddc677c7b50350ba04b491fba3129650dc344853 100644 --- a/frontend/src/pages/ErrorDetails/index.tsx +++ b/frontend/src/pages/ErrorDetails/index.tsx @@ -2,17 +2,17 @@ import { Typography } from 'antd'; import getByErrorType from 'api/errors/getByErrorTypeAndService'; import getById from 'api/errors/getById'; import Spinner from 'components/Spinner'; +import ROUTES from 'constants/routes'; import ErrorDetailsContainer from 'container/ErrorDetails'; import React from 'react'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; -import { useLocation, useParams } from 'react-router-dom'; +import { Redirect, useLocation } from 'react-router-dom'; import { AppState } from 'store/reducers'; import { PayloadProps } from 'types/api/errors/getById'; import { GlobalReducer } from 'types/reducer/globalTime'; function ErrorDetails(): JSX.Element { - const { errorType, serviceName } = useParams<ErrorDetailsParams>(); const { maxTime, minTime } = useSelector<AppState, GlobalReducer>( (state) => state.globalTime, ); @@ -20,6 +20,8 @@ function ErrorDetails(): JSX.Element { const params = new URLSearchParams(search); const errorId = params.get('errorId'); + const errorType = params.get('errorType'); + const serviceName = params.get('serviceName'); const { data, status } = useQuery( [ @@ -35,11 +37,11 @@ function ErrorDetails(): JSX.Element { queryFn: () => getByErrorType({ end: maxTime, - errorType, - serviceName, + errorType: errorType || '', + serviceName: serviceName || '', start: minTime, }), - enabled: errorId === null, + enabled: errorId === null && errorType !== null && serviceName !== null, cacheTime: 5000, }, ); @@ -62,11 +64,18 @@ function ErrorDetails(): JSX.Element { errorId: errorId || data?.payload?.errorId || '', start: minTime, }), - enabled: errorId !== null || status === 'success', + enabled: + (errorId !== null || status === 'success') && + errorType !== null && + serviceName !== null, cacheTime: 5000, }, ); + if (errorType === null || serviceName === null) { + return <Redirect to={ROUTES.ALL_ERROR} />; + } + if (status === 'loading' || ErrorIdStatus === 'loading') { return <Spinner tip="Loading.." />; } diff --git a/frontend/src/types/api/errors/getByErrorTypeAndService.ts b/frontend/src/types/api/errors/getByErrorTypeAndService.ts index 0072d1b2d67aac933121fede5882c226d244cd83..4f987874b7bfefd925b374522221f14b87e4d28f 100644 --- a/frontend/src/types/api/errors/getByErrorTypeAndService.ts +++ b/frontend/src/types/api/errors/getByErrorTypeAndService.ts @@ -10,7 +10,7 @@ export interface Props { export interface PayloadProps { errorId: string; exceptionType: string; - excepionStacktrace: string; + exceptionStacktrace: string; exceptionEscaped: string; exceptionMessage: string; timestamp: string;