From dff5724e748b12bc6732fcfbd28b5e651416d1bb Mon Sep 17 00:00:00 2001
From: Kartik Gupta <kartikgupta7267@gmail.com>
Date: Tue, 25 Jul 2023 12:25:03 +0530
Subject: [PATCH] stats com2

---
 src/components/Navbar/index.tsx   |  20 +-
 src/constants/routes.ts           |   1 +
 src/hooks/useGetLogStreamAlert.ts |   3 +-
 src/pages/Config/index.tsx        |  17 ++
 src/pages/Stats/Alerts.tsx        |  78 +++----
 src/pages/Stats/Status.tsx        |  19 +-
 src/pages/Stats/index.tsx         |   2 +-
 src/pages/Stats/styles.tsx        | 332 ++----------------------------
 src/routes/elements.tsx           |   9 +
 src/routes/index.tsx              |   5 +-
 10 files changed, 109 insertions(+), 377 deletions(-)
 create mode 100644 src/pages/Config/index.tsx

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 4224f120..158eb8e2 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -10,6 +10,10 @@ import {
 	IconHelpCircle,
 	IconLogout,
 	IconUser,
+	IconTransferIn,
+	IconBinaryTree2,
+	IconTableShortcut,
+	IconSettings,
 } from '@tabler/icons-react';
 import { FC, useEffect, useState } from 'react';
 import docImage from '@/assets/images/doc.webp';
@@ -27,9 +31,10 @@ import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { LOGIN_ROUTE } from '@/constants/routes';
 
 const links = [
-	{ icon: IconColumns, label: 'Logs', pathname: '/logs' },
 	{ icon: IconZoomCode, label: 'Query', pathname: '/query' },
+	{ icon: IconTableShortcut, label: 'Logs', pathname: '/logs' },
 	{ icon: IconReportAnalytics, label: 'Stats', pathname: '/stats' },
+	{ icon: IconSettings, label: 'Config', pathname: '/config' },
 ];
 
 type NavbarProps = Omit<MantineNavbarProps, 'children'>;
@@ -107,7 +112,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 				setCurrentPage(location.pathname);
 			}
 		} else if (streams && Boolean(streams.length)) {
-			navigate(`/${streams[0].name}/logs`);
+			navigate(`/${streams[0].name}/query`);
 		}
 	}, [streams, location]);
 
@@ -156,16 +161,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 			<MantineNavbar.Section grow className={container}>
 				<NavLink
 					label="Streams"
-					icon={
-						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-							<path
-								d="M19 5C19 7.21 14.97 9 10 9C5.03 9 1 7.21 1 5M19 5C19 2.79 14.97 1 10 1C5.03 1 1 2.79 1 5M19 5V10M1 5V10M19 10C19 12.21 14.97 14 10 14C5.03 14 1 12.21 1 10M19 10V15C19 17.21 14.97 19 10 19C5.03 19 1 17.21 1 15V10"
-								stroke="#211F1F"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							/>
-						</svg>
-					}
+					icon={<IconBinaryTree2 size="1.5rem" stroke={1.3} />}
 					className={streamsBtn}
 				/>
 				<Select
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 4b9909d1..57671af7 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -4,3 +4,4 @@ export const LOGIN_ROUTE = '/login';
 export const ALL_ROUTE = '*';
 export const QUERY_ROUTE = '/:streamName/query';
 export const STATS_ROUTE = '/:streamName/stats';
+export const CONFIG_ROUTE = '/:streamName/config';
diff --git a/src/hooks/useGetLogStreamAlert.ts b/src/hooks/useGetLogStreamAlert.ts
index c4719022..62130bea 100644
--- a/src/hooks/useGetLogStreamAlert.ts
+++ b/src/hooks/useGetLogStreamAlert.ts
@@ -1,10 +1,9 @@
-import { LogStreamSchemaData } from '@/@types/parseable/api/stream';
 import { getLogStreamAlerts } from '@/api/logStream';
 import { StatusCodes } from 'http-status-codes';
 import useMountedState from './useMountedState';
 
 export const useGetLogStreamAlert = () => {
-	const [data, setData] = useMountedState<LogStreamSchemaData | null>(null);
+	const [data, setData] = useMountedState<any | null>(null);
 	const [error, setError] = useMountedState<string | null>(null);
 	const [loading, setLoading] = useMountedState<boolean>(false);
 
diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx
new file mode 100644
index 00000000..ed080f4f
--- /dev/null
+++ b/src/pages/Config/index.tsx
@@ -0,0 +1,17 @@
+import { Box } from '@mantine/core';
+import { useDocumentTitle } from '@mantine/hooks';
+import { FC } from 'react';
+
+const Config: FC = () => {
+	useDocumentTitle('Parseable | Config');
+
+
+	return (
+		<Box >
+
+
+		</Box>
+	);
+};
+
+export default Config;
diff --git a/src/pages/Stats/Alerts.tsx b/src/pages/Stats/Alerts.tsx
index 886bf688..70b1102a 100644
--- a/src/pages/Stats/Alerts.tsx
+++ b/src/pages/Stats/Alerts.tsx
@@ -1,11 +1,12 @@
 import { useGetLogStreamAlert } from '@/hooks/useGetLogStreamAlert';
-import { useGetLogStreamRetention } from '@/hooks/useGetLogStreamRetention';
-import { useGetLogStreamStat } from '@/hooks/useGetLogStreamStat';
 import { useHeaderContext } from '@/layouts/MainLayout/Context';
-import { Box, Text } from '@mantine/core';
-import { useDocumentTitle } from '@mantine/hooks';
+import { Box, Button, Modal, ScrollArea, Text, px } from '@mantine/core';
+import { useDisclosure, useDocumentTitle } from '@mantine/hooks';
 import { FC, useEffect } from 'react';
 import { useAlertsStyles } from './styles';
+import { IconArrowsMaximize } from '@tabler/icons-react';
+import { Prism } from '@mantine/prism';
+import useMountedState from '@/hooks/useMountedState';
 
 const Alerts: FC = () => {
 	useDocumentTitle('Parseable | Login');
@@ -13,54 +14,53 @@ const Alerts: FC = () => {
 		state: { subLogQuery },
 	} = useHeaderContext();
 	const { data, error, loading, getLogAlert, resetData } = useGetLogStreamAlert();
-	const {
-		data: data2,
-		error: error2,
-		loading: loading2,
-		getLogRetention: getLogRetention,
-		resetData: resetData2,
-	} = useGetLogStreamRetention();
-	const {
-		data: data3,
-		error: error3,
-		loading: loading3,
-		getLogStat: getLogStat,
-		resetData: resetData3,
-	} = useGetLogStreamStat();
+	const [opened, { open, close }] = useDisclosure(false);
+	const [Alert, setAlert] = useMountedState({name: "Loading...."});
+
 	useEffect(() => {
 		getLogAlert(subLogQuery.get().streamName);
-		getLogRetention(subLogQuery.get().streamName);
-		getLogStat(subLogQuery.get().streamName);
 		return () => {
 			resetData();
-			resetData2();
-			resetData3();
 		};
 	}, [subLogQuery]);
+	
+
 	const { classes } = useAlertsStyles();
-	const {
-		container,
-		headContainer,
-		statusText,
-		statusTextResult,
-		genterateContiner,
-		genterateText,
-		genterateTextResult,
-	} = classes;
+	const { container, headContainer, alertsText, alertsContainer, alertContainer, expandButton } = classes;
+	
 	return (
 		<Box className={container}>
 			<Box className={headContainer}>
-				<Text className={statusText}>
-					Status: <span className={statusTextResult}> {'- Receiving'}</span>
-				</Text>
-
-				<Box className={genterateContiner}>
-					<Text className={genterateText}>Genterated at :</Text>
-					<Text className={genterateTextResult}>{'07/07/2023 - 18:01:59'}</Text>
-				</Box>
+				<Text className={alertsText}>Alerts</Text>
 			</Box>
+			<Box className={alertsContainer}>
+				{!loading
+					? error
+						? 'ERROR'
+						: data
+						? data.alerts.map((item: any,index:number) => {
+								return (
+									<Box className={alertContainer} key={item.name + index}>
+										<Text>Name: {item.name}</Text>
+										<Button className={expandButton} onClick={()=>
+										{
+											setAlert(item);
+											open();
+										}}>
+											<IconArrowsMaximize size={px('1.2rem')} stroke={1.5} />
+										</Button>
+									</Box>
+								);
+						  })
+						: 'Not found'
+					: 'Loading'}
+			</Box>
+			<Modal size="auto" opened={opened} onClose={close} title={Alert.name} scrollAreaComponent={ScrollArea.Autosize}>
+				<Prism  language="json">{JSON.stringify(Alert,null,2)}</Prism>
+			</Modal>
 		</Box>
 	);
 };
 
+
 export default Alerts;
diff --git a/src/pages/Stats/Status.tsx b/src/pages/Stats/Status.tsx
index 73732c9b..2d0bad20 100644
--- a/src/pages/Stats/Status.tsx
+++ b/src/pages/Stats/Status.tsx
@@ -6,7 +6,7 @@ import { FC, useEffect } from 'react';
 import { useStatCardStyles, useStatusStyles } from './styles';
 import { Box, Text, ThemeIcon, Tooltip, px } from '@mantine/core';
 import dayjs from 'dayjs';
-import { IconBrandDeezer, IconInfoCircle, IconTimelineEventText } from '@tabler/icons-react';
+import { IconClockStop, IconDatabase, IconInfoCircle, IconTimelineEventText, IconTransferIn, IconWindowMinimize } from '@tabler/icons-react';
 import { useQueryResult } from '@/hooks/useQueryResult';
 import useMountedState from '@/hooks/useMountedState';
 function convert(val: number) {
@@ -140,16 +140,15 @@ const Status: FC = () => {
 				</Text>
 
 				<Box className={genterateContiner}>
-					<Text className={genterateText}>Genterated at :</Text>
-					<Text className={genterateTextResult}>
-						{!loadingStat
+					<Text className={genterateText}>Genterated at : <span className={genterateTextResult}>{!loadingStat
 							? errorStat
 								? 'ERROR'
 								: dataStat
 									? dayjs(dataStat?.time).format('DD-MM-YY HH:mm')
 									: 'Not found'
 							: 'Loading'}
-					</Text>
+							</span> 	
+							</Text>
 				</Box>
 			</Box>
 			<Box className={StatsContainer}>
@@ -169,7 +168,7 @@ const Status: FC = () => {
 				/>
 				<StatCard
 					data={{
-						Icon: IconBrandDeezer,
+						Icon: IconTransferIn,
 						value: !loadingStat
 							? !errorStat
 								? dataStat?.ingestion?.size
@@ -183,7 +182,7 @@ const Status: FC = () => {
 				/>
 				<StatCard
 					data={{
-						Icon: IconTimelineEventText,
+						Icon: IconDatabase,
 						value: !loadingStat
 							? !errorStat
 								? dataStat?.storage?.size
@@ -197,7 +196,7 @@ const Status: FC = () => {
 				/>
 				<StatCard
 					data={{
-						Icon: IconBrandDeezer,
+						Icon: IconWindowMinimize,
 						value: !loadingStat
 							? !errorStat
 								? dataStat?.ingestion?.size
@@ -210,13 +209,13 @@ const Status: FC = () => {
 								: 'ERROR'
 							: 'Loading...',
 						description: 'Compression percentage= storage used  / size of events *100 ',
-						title: 'Compression %',
+						title: 'Compression ',
 					}}
 				/>
 
 				<StatCard
 					data={{
-						Icon: IconTimelineEventText,
+						Icon: IconClockStop,
 						value: !loadingRetention
 							? !errorRetention
 								? dataRetention && dataRetention[0] && dataRetention[0].duration
diff --git a/src/pages/Stats/index.tsx b/src/pages/Stats/index.tsx
index 8bb3daaf..fa176e05 100644
--- a/src/pages/Stats/index.tsx
+++ b/src/pages/Stats/index.tsx
@@ -14,7 +14,7 @@ const Stats: FC = () => {
 		<Box className={container}>
 
 			<Status />
-						{/* <Alerts/> */}
+			<Alerts/>
 		</Box>
 	);
 };
diff --git a/src/pages/Stats/styles.tsx b/src/pages/Stats/styles.tsx
index 5d6ddeb4..64c3d222 100644
--- a/src/pages/Stats/styles.tsx
+++ b/src/pages/Stats/styles.tsx
@@ -1,13 +1,10 @@
 import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme';
 import { createStyles } from '@mantine/core';
 export const useStatsStyles = createStyles((theme) => {
-	const { widths } = theme.other;
+	const { widths ,heights} = theme.other;
 	return {
 		container: {
-			flex: 1,
 			width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`,
-			display: 'flex',
-			position: 'relative',
 		},
 	};
 });
@@ -15,7 +12,7 @@ export const useStatsStyles = createStyles((theme) => {
 export const useStatusStyles = createStyles((theme) => {
 	const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
 
-	const { fontWeights, widths, heights } = other;
+	const { fontWeights, widths } = other;
 
 	const pColor = colors[primaryColor][2];
 
@@ -23,12 +20,6 @@ export const useStatusStyles = createStyles((theme) => {
 
 	return {
 		container: {
-			position: 'relative',
-			flex: 1,
-			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
-			display: 'flex',
-			flexDirection: 'column',
-			overflow: 'hidden',
 		},
 		headContainer: {
 			display: 'flex',
@@ -51,12 +42,13 @@ export const useStatusStyles = createStyles((theme) => {
 			marginRight: spacing.sm,
 		},
 		genterateText: {
-			fontSize: fontSizes.xs,
+			fontSize: fontSizes.md,
 			fontWeight: fontWeights.semibold,
 			color: colors.gray[6],
 		},
 		genterateTextResult: {
-			fontSize: fontSizes.xs,
+			fontSize: fontSizes.md,
+			fontWeight: fontWeights.normal,
 			color: colors.gray[6],
 		},
 		StatsContainer: {
@@ -71,7 +63,7 @@ export const useStatusStyles = createStyles((theme) => {
 export const useStatCardStyles = createStyles((theme) => {
 	const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
 
-	const { fontWeights, widths, heights } = other;
+	const { fontWeights, widths } = other;
 
 	const pColor = colors[primaryColor][0];
 
@@ -117,7 +109,7 @@ export const useStatCardStyles = createStyles((theme) => {
 export const useAlertsStyles = createStyles((theme) => {
 	const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
 
-	const { fontWeights, widths, heights } = other;
+	const { fontWeights, widths, heights ,sizing} = other;
 
 	const pColor = colors[primaryColor][2];
 
@@ -125,321 +117,39 @@ export const useAlertsStyles = createStyles((theme) => {
 
 	return {
 		container: {
-			position: 'relative',
-			flex: 1,
-			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
-			display: 'flex',
-			flexDirection: 'column',
-			overflow: 'hidden',
+			height: '50%',
 		},
 		headContainer: {
-			display: 'flex',
-			justifyContent: 'space-between',
 			padding: spacing.md,
 			height: '55px',
-			alignItems: 'center',
 			borderBottom: `${widths.px} ${colors.gray[1]} solid`,
 		},
-
-		statusText: {
+		alertsText: {
 			fontSize: fontSizes.md,
 			fontWeight: fontWeights.semibold,
 			color: colors.gray[6],
 		},
-		statusTextResult: {
-			color: '#00CC14',
-		},
-		genterateContiner: {
-			marginRight: spacing.sm,
-		},
-		genterateText: {
-			fontSize: fontSizes.xs,
-			fontWeight: fontWeights.semibold,
+		alertsContainer: {
+			overflow: 'auto',
 			color: colors.gray[6],
 		},
-		genterateTextResult: {
-			fontSize: fontSizes.xs,
-			color: colors.gray[6],
-		},
-	};
-});
-
-export const useLogTableStyles = createStyles((theme) => {
-	const { spacing, other, radius, shadows, colors, fontSizes } = theme;
-	const { heights, widths, fontWeights } = other;
-	const pColor = colors.brandPrimary[0];
-	const sColor = colors.brandSecondary[0];
-
-	const defaultRadius = radius[theme.defaultRadius as string];
-
-	return {
-		container: {
-			position: 'relative',
-			flex: 1,
-			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
-			display: 'flex',
-			flexDirection: 'column',
-			overflow: 'hidden',
-			// padding: px(spacing.sm),
-		},
-
-		innerContainer: {
-			position: 'relative',
-			flex: 1,
-			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
-			display: 'flex',
-			flexDirection: 'column',
-			overflow: 'hidden',
-		},
-
-		paginationRow: {
-			'.mantine-Pagination-control': {
-				border: `solid 1px ${colors.gray[2]}`,
-				fontSize: fontSizes.sm,
-				'&:hover': {
-					color: sColor,
-				},
-				'&:data-active=true': {
-					color: pColor,
-				},
-			},
-			'.mantine-Pagination-control[data-active=true]': {
-				background: pColor,
-				'&:hover': {
-					backgroundColor: sColor,
-					color: colors.white[0],
-				},
-			},
-		},
-
-		tableContainer: {
-			position: 'relative',
-		},
-
-		tableStyle: {
-			whiteSpace: 'nowrap',
-			overflow: 'scroll',
-			width: '100%',
-			padding: 0,
-		},
-
-		theadStyle: {
-			position: 'sticky',
-			zIndex: 1,
-			top: 0,
-			'& th:last-of-type': {
-				position: 'sticky',
-				boxShadow: shadows.sm,
-				right: 0,
-			},
-		},
-
-		trStyle: {
-			cursor: 'pointer',
-			background: colors.white,
-			'&:hover': {
-				background: colors.gray[1],
-			},
-
-			'& td': {
-				height: heights[10],
-				textAlign: 'left',
-				verticalAlign: 'middle',
-				border: 'none !important',
-			},
-		},
-		trEvenStyle: {
-			cursor: 'pointer',
-			background: colors.gray[0],
-
-			'&:hover': {
-				background: colors.gray[1],
-			},
-
-			'& td': {
-				height: heights[10],
-				textAlign: 'left',
-				verticalAlign: 'middle',
-				border: 'none !important',
-			},
-		},
-
-		tdArrowContainer: {
-			display: 'flex',
-			justifyContent: 'center',
-			alignItems: 'center',
-		},
-
-		tdArrow: {
-			position: 'sticky',
-			right: 0,
-			background: 'inherit',
-			boxShadow: shadows.sm,
-
-			'tr:hover &': {
-				background: colors.gray[1],
-			},
-		},
-
-		thColumnMenuBtn: {
-			width: widths[10],
-			height: heights[10],
-		},
-
-		thColumnMenuDropdown: {
-			maxHeight: heights[96],
-			overflowX: 'hidden',
-			overflowY: 'scroll',
-		},
-
-		footerContainer: {
-			padding: spacing.md,
+		alertContainer: {
+			borderBottom: `${widths.px} ${colors.gray[1]} solid`,
+			padding: `${spacing.xs} ${spacing.lg}`,
 			display: 'flex',
-			flexDirection: 'row',
 			justifyContent: 'space-between',
-			background: colors.gray[0],
-			borderTop: `${widths.px} ${colors.gray[1]} solid`,
-		},
-
-		errorContainer: {
-			display: 'flex',
-			flexDirection: 'column',
 			alignItems: 'center',
-			justifyContent: 'center',
-			height: heights.full,
 		},
-
-		limitContainer: {},
-
-		limitBtn: {
-			display: 'flex',
-			flexDirection: 'row',
-			alignItems: 'center',
-			justifyContent: 'center',
-			cursor: 'pointer',
-			fontSize: fontSizes.sm,
+		expandButton: {
 			background: colors.white[0],
-			padding: `0.2rem ${spacing.xs}`,
-			border: `${widths.px} ${colors.gray[1]} solid`,
-			borderRadius: defaultRadius,
-			'&:hover': {
-				background: colors.gray[1],
-			},
-		},
-
-		limitBtnText: {},
-
-		limitActive: {
-			background: pColor,
-			fontWeight: fontWeights.medium,
-			color: colors.white[0],
-
-			'&:hover': {
-				background: sColor,
-			},
-		},
-		limitOption: {
-			fontWeight: fontWeights.normal,
-
-			'&:hover': {
-				color: sColor,
-			},
-		},
-	};
-});
-
-export const useViewLogStyles = createStyles((theme) => {
-	const { spacing, other, colors, fontSizes } = theme;
-	const { fontWeights } = other;
-	const pColor = colors.brandPrimary[0];
-
-	return {
-		container: {
-			padding: spacing.lg,
-		},
-
-		headerContainer: {
-			background: pColor,
-			display: 'flex',
-			alignItems: 'center',
-			justifyContent: 'space-between',
-		},
-
-		headerTimeStampTitle: {
-			color: colors.white,
-			fontSize: fontSizes.sm,
-			fontWeight: fontWeights.semibold,
-		},
-
-		headerTimeStamp: {
-			color: colors.white,
-			fontSize: fontSizes.sm,
-			fontWeight: fontWeights.medium,
-		},
-
-		dataChipContainer: {
-			display: 'flex',
-			flexWrap: 'wrap',
-		},
-	};
-});
-
-export const useTableColumnStyle = createStyles((theme) => {
-	const { spacing, colors, fontSizes, other, primaryColor } = theme;
-	const { fontWeights, widths } = other;
-
-	const pColor = colors[primaryColor];
-
-	return {
-		labelBtn: {
-			width: widths.full,
-			display: 'flex',
-			alignItems: 'center',
-			textAlign: 'left',
-			height: '100%',
-			'&:hover': {
-				background: colors.gray[1],
-			},
-		},
-
-		labelIcon: {
-			color: colors.gray[5],
-			marginLeft: spacing.xs,
-		},
-
-		labelIconActive: {
-			color: pColor[0],
-		},
-
-		searchInputStyle: {
-			marginBottom: spacing.xs,
-		},
-
-		checkBoxStyle: {
-			height: 35,
-			paddingTop: spacing.xs,
-			paddingBottom: spacing.xxs,
-			fontWeight: fontWeights.medium,
-			overflow: 'hidden',
-			whiteSpace: 'nowrap',
-
-			'& .mantine-Checkbox-label': {
-				fontSize: fontSizes.sm,
-			},
-
+			padding: 0,
+			marginRight: spacing.xs,
+			width: '36px',
+			color: theme.colors.gray[6],
+			border: `${sizing.px} ${colors.gray[2]} solid`,
 			'&:hover': {
 				background: colors.gray[1],
 			},
 		},
-
-		applyBtn: {
-			marginTop: spacing.xs,
-			width: widths.full,
-			background: pColor[0],
-
-			'&:hover': {
-				background: pColor[1],
-			},
-		},
 	};
-});
+});
\ No newline at end of file
diff --git a/src/routes/elements.tsx b/src/routes/elements.tsx
index c82f301a..ab093626 100644
--- a/src/routes/elements.tsx
+++ b/src/routes/elements.tsx
@@ -60,3 +60,12 @@ export const StatsElement: FC = () => {
 		</SuspensePage>
 	);
 };
+const Config = lazy(() => import('@/pages/Config'));
+
+export const ConfigElement: FC = () => {
+	return (
+		<SuspensePage>
+			<Config />
+		</SuspensePage>
+	);
+};
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 1b27492e..69c933c1 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,10 +1,10 @@
-import { ALL_ROUTE, HOME_ROUTE, LOGIN_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE } from '@/constants/routes';
+import { ALL_ROUTE, CONFIG_ROUTE, HOME_ROUTE, LOGIN_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE } from '@/constants/routes';
 import FullPageLayout from '@/layouts/FullPageLayout';
 import NotFound from '@/pages/Errors/NotFound';
 import type { FC } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import PrivateRoute from './PrivateRoute';
-import { HomeElement, LoginElement, LogsElement, QueryElement, MainLayoutElement, StatsElement } from './elements';
+import { HomeElement, LoginElement, LogsElement, QueryElement, MainLayoutElement, StatsElement,ConfigElement } from './elements';
 
 const AppRouter: FC = () => {
 	return (
@@ -16,6 +16,7 @@ const AppRouter: FC = () => {
 						<Route path={LOGS_ROUTE} element={<LogsElement />} />
 						<Route path={QUERY_ROUTE} element={<QueryElement />} />
 						<Route path={STATS_ROUTE} element={<StatsElement />} />
+						<Route path={CONFIG_ROUTE} element={<ConfigElement />} />
 					</Route>
 				</Route>
 				<Route path={LOGIN_ROUTE} element={<LoginElement />} />