chore: error details is updated (#1090)

* chore: error details is updated

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',

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, {
+					to={`${ROUTES.ERROR_DETAIL}?serviceName=${record.serviceName}&errorType=${record.exceptionType}`}
-						serviceName: record.serviceName,
-						errorType: record.exceptionType,
-					})}
 				>
 					{value}
 				</Link>

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={

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>

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 {

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 {

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,
+					errorType: errorType || '',
-					serviceName,
+					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.." />;
 	}

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;