stats com2

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

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

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);
 

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;

src/pages/Stats/Alerts.tsx

@@ -1,66 +1,66 @@
 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');
 	const {
 		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;

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

src/pages/Stats/index.tsx

@@ -14,7 +14,7 @@ const Stats: FC = () => {
 		<Box className={container}>
 
 			<Status />
-						{/* <Alerts/> */}
+			<Alerts/>
 		</Box>
 	);
 };