From 0e6dd0c58e947881d19195ee6b1ee232aa08ac5a Mon Sep 17 00:00:00 2001
From: Kartik Gupta <kartikgupta7267@gmail.com>
Date: Wed, 26 Jul 2023 17:09:59 +0530
Subject: [PATCH] final update and config page

---
 src/api/constants.ts                  |   8 +-
 src/api/logStream.ts                  |  25 +++-
 src/components/Navbar/index.tsx       |  97 ++++++++++++-
 src/hooks/useDeleteLogStream.ts       |  39 +++++
 src/hooks/useGetLogStreamList.ts      |   5 +-
 src/hooks/usePutLogStreamAlerts.ts    |  39 +++++
 src/hooks/usePutLogStreamRetention.ts |  39 +++++
 src/hooks/useQueryLogs.ts             |   2 +-
 src/hooks/useQueryResult.ts           |   2 +-
 src/pages/Config/index.tsx            | 197 +++++++++++++++++++++++++-
 src/pages/Config/styles.tsx           |  33 +++++
 src/pages/Logs/ViewLog.tsx            |  10 +-
 src/pages/Logs/styles.tsx             |   4 +
 src/pages/Query/QueryCodeEditor.tsx   |  15 +-
 src/pages/Stats/Status.tsx            |  10 +-
 15 files changed, 489 insertions(+), 36 deletions(-)
 create mode 100644 src/hooks/useDeleteLogStream.ts
 create mode 100644 src/hooks/usePutLogStreamAlerts.ts
 create mode 100644 src/hooks/usePutLogStreamRetention.ts
 create mode 100644 src/pages/Config/styles.tsx

diff --git a/src/api/constants.ts b/src/api/constants.ts
index 64920165..3e244fae 100644
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -4,6 +4,8 @@ export const HEALTH_LIVENESS_URL = `${API_V1}/liveness`;
 export const LOG_STREAM_LIST_URL = `${API_V1}/logstream`;
 export const LOG_STREAMS_SCHEMA_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/schema`;
 export const LOG_QUERY_URL = `${API_V1}/query`;
-export const STATS_STREAMS_ALERTS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/alert`;
-export const STATS_STREAMS_RETRNTION_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/retention`;
-export const STATS_STREAMS_STATS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/stats`;
+export const LOG_STREAMS_ALERTS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/alert`;
+export const LOG_STREAMS_RETRNTION_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/retention`;
+export const LOG_STREAMS_STATS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/stats`;
+export const DELETE_STREAMS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}`;
+
diff --git a/src/api/logStream.ts b/src/api/logStream.ts
index adf8a8e7..12ad545e 100644
--- a/src/api/logStream.ts
+++ b/src/api/logStream.ts
@@ -1,10 +1,11 @@
 import { Axios } from './axios';
 import {
+	DELETE_STREAMS_URL,
 	LOG_STREAMS_SCHEMA_URL,
 	LOG_STREAM_LIST_URL,
-	STATS_STREAMS_ALERTS_URL,
-	STATS_STREAMS_RETRNTION_URL,
-	STATS_STREAMS_STATS_URL,
+	LOG_STREAMS_ALERTS_URL,
+	LOG_STREAMS_RETRNTION_URL,
+	LOG_STREAMS_STATS_URL,
 } from './constants';
 import { LogStreamData, LogStreamSchemaData } from '@/@types/parseable/api/stream';
 
@@ -17,13 +18,25 @@ export const getLogStreamSchema = (streamName: string) => {
 };
 
 export const getLogStreamAlerts = (streamName: string) => {
-	return Axios().get(STATS_STREAMS_ALERTS_URL(streamName));
+	return Axios().get(LOG_STREAMS_ALERTS_URL(streamName));
+};
+
+export const putLogStreamAlerts = (streamName: string, data: any) => {
+	return Axios().put(LOG_STREAMS_ALERTS_URL(streamName), data);
 };
 
 export const getLogStreamRetention = (streamName: string) => {
-	return Axios().get(STATS_STREAMS_RETRNTION_URL(streamName));
+	return Axios().get(LOG_STREAMS_RETRNTION_URL(streamName));
+};
+
+export const putLogStreamRetention = (streamName: string, data: any) => {
+	return Axios().put(LOG_STREAMS_RETRNTION_URL(streamName), data);
 };
 
 export const getLogStreamStats = (streamName: string) => {
-	return Axios().get(STATS_STREAMS_STATS_URL(streamName));
+	return Axios().get(LOG_STREAMS_STATS_URL(streamName));
 };
+
+export const deleteLogStream = (streamName: string) => {
+	return Axios().delete(DELETE_STREAMS_URL(streamName));
+}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 57cfc033..e36be286 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,5 +1,5 @@
 import type { NavbarProps as MantineNavbarProps } from '@mantine/core';
-import { Navbar as MantineNavbar, NavLink, Select, Anchor, Card, Box, Modal, Text, Image } from '@mantine/core';
+import { Navbar as MantineNavbar, NavLink, Select, Anchor, Card, Box, Modal, Text, Image, Button, TextInput } from '@mantine/core';
 import {
 	IconZoomCode,
 	IconReportAnalytics,
@@ -12,6 +12,7 @@ import {
 	IconBinaryTree2,
 	IconTableShortcut,
 	IconSettings,
+	IconTrash,
 } from '@tabler/icons-react';
 import { FC, useEffect, useState } from 'react';
 import docImage from '@/assets/images/doc.webp';
@@ -27,6 +28,7 @@ import useMountedState from '@/hooks/useMountedState';
 import dayjs from 'dayjs';
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { LOGIN_ROUTE } from '@/constants/routes';
+import { useDeleteLogStream } from '@/hooks/useDeleteLogStream';
 
 const links = [
 	{ icon: IconZoomCode, label: 'Query', pathname: '/query' },
@@ -40,11 +42,13 @@ type NavbarProps = Omit<MantineNavbarProps, 'children'>;
 const Navbar: FC<NavbarProps> = (props) => {
 	const [username] = useLocalStorage({ key: 'username', getInitialValueInEffect: false });
 	const navigate = useNavigate();
-	const { data: streams, loading, error, getData } = useGetLogStreamList();
+	const { data: streams, loading, error, getData, resetData:resetStreamArray} = useGetLogStreamList();
 	const [activeStream, setActiveStream] = useState('');
 	const [searchValue, setSearchValue] = useState('');
 	const { classes } = useNavbarStyles();
 	const [currentPage, setCurrentPage] = useState('/logs');
+	const [opened, { open, close }] = useDisclosure(false);
+	const [ deleteStream, setDeleteStream] = useState('');
 	const {
 		container,
 		linkBtnActive,
@@ -65,8 +69,9 @@ const Navbar: FC<NavbarProps> = (props) => {
 		state: { subNavbarTogle },
 	} = useHeaderContext();
 	const [isSubNavbarOpen, setIsSubNavbarOpen] = useMountedState(false);
-	const [opened, { close, open }] = useDisclosure();
+	const [openedDelete, { close:closeDelete, open:openDelete}] = useDisclosure();
 	let location = useLocation();
+	const {data:deleteData, loading:deleteLoading, error:deleteError, deleteLogStreamFun , resetData: resetDatalogStraeam} = useDeleteLogStream();
 
 	useEffect(() => {
 		const listener = subNavbarTogle.subscribe(setIsSubNavbarOpen);
@@ -151,6 +156,59 @@ const Navbar: FC<NavbarProps> = (props) => {
 			});
 		}
 	}, [streams, error, loading]);
+	const handleCloseDelete = () => {
+		closeDelete();
+		setDeleteStream('');
+	};
+	const handleDelete = () => {
+		deleteLogStreamFun(deleteStream||"");
+		closeDelete();
+	};
+
+	useEffect(() => {
+		if (deleteLoading) {
+			notifications.show({
+				id: 'delete-data',
+				loading: true,
+				color: '#545BEB',
+				title: 'Deleting Stream',
+				message: 'Stream will be deleted.',
+				autoClose: false,
+				withCloseButton: false,
+
+			});
+			return;
+		}
+		if (deleteData && !deleteLoading) {
+			notifications.update({
+				id: 'delete-data',
+				color: 'green',
+				title: 'Stream was deleted',
+				message: 'Successfully Deleted!!',
+				icon: <IconCheck size="1rem" />,
+				autoClose: 1000,
+			});
+			resetDatalogStraeam();
+			resetStreamArray();
+			getData();
+			return;
+		}
+		if (deleteError) {
+			notifications.update({
+				id: 'delete-data',
+				color: 'red',
+				title: 'Error Occured',
+				message: 'Error Occured while deleting stream',
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 2000,
+			});
+			return;
+		}
+		if(streams && streams.length!==0 && deleteStream===streamName){
+			navigate(`/${streams[0].name}/query`);
+		}
+
+	}, [deleteData, deleteError, deleteLoading,streams]);
 
 	return (
 		<MantineNavbar {...props} withBorder zIndex={1} hiddenBreakpoint={window.outerWidth + 20} hidden={isSubNavbarOpen}>
@@ -190,7 +248,14 @@ const Navbar: FC<NavbarProps> = (props) => {
 							}
 						/>
 					);
-				})}
+						})}
+				<NavLink
+				label={"Delete"}
+				icon={<IconTrash size="1.3rem" stroke={1.2} />}
+				sx={{ paddingLeft: 53 }}
+				onClick={openDelete}
+				className={ linkBtn}
+			/>
 				{error && <div>{error}</div>}
 				{error && (
 					<NavLink
@@ -219,6 +284,30 @@ const Navbar: FC<NavbarProps> = (props) => {
 					onClick={onSignOut}
 				/>
 			</MantineNavbar.Section>
+			<Modal withinPortal size="md" opened={openedDelete} onClose={handleCloseDelete} title={"Delete Stream"}centered>
+				<Text>Are you sure you want to delete this stream?</Text>
+				<TextInput
+				 type="text" 
+				onChange={(e) => {
+					console.log(e.target.value);
+					setDeleteStream(e.target.value);
+				}
+				}
+				 placeholder= {`Type the name of the stream to confirm. i.e: ${streamName}`} />
+				
+				<Box mt={10} display="flex" sx={{justifyContent:"end"}}>
+				<Button variant="filled" color='red' sx={{margin:"12px"}} disabled={deleteStream===streamName?false:true}
+					onClick={handleDelete}
+					>
+						Delete
+					</Button>
+					<Button onClick={handleCloseDelete} variant='filled' color='green'sx={{margin:"12px"}}>
+						Cancel
+					</Button>
+
+				</Box>
+
+			</Modal>
 			<Modal withinPortal opened={opened} onClose={close} withCloseButton={false} size="sm" centered>
 				<Text className={helpTitle}>Need any help?</Text>
 				<Text className={helpDescription}>Here you can find useful resources and information.</Text>
diff --git a/src/hooks/useDeleteLogStream.ts b/src/hooks/useDeleteLogStream.ts
new file mode 100644
index 00000000..c708e1d1
--- /dev/null
+++ b/src/hooks/useDeleteLogStream.ts
@@ -0,0 +1,39 @@
+import { deleteLogStream } from '@/api/logStream';
+import { StatusCodes } from 'http-status-codes';
+import useMountedState from './useMountedState';
+
+export const useDeleteLogStream = () => {
+	const [data, setData] = useMountedState<any | null>(null);
+	const [error, setError] = useMountedState<string | null>(null);
+	const [loading, setLoading] = useMountedState<boolean>(false);
+
+	const deleteLogStreamFun = async (streamName: string) => {
+		try {
+			setLoading(true);
+			setError(null);
+			const res = await deleteLogStream(streamName);
+
+			switch (res.status) {
+				case StatusCodes.OK: {
+					const streams = res.data;
+
+					setData(streams);
+					break;
+				}
+				default: {
+					setError('Failed to get ALert');
+				}
+			}
+		} catch {
+			setError('Failed to get ALert');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetData = () => {
+		setData(null);
+	};
+
+	return { data, error, loading, deleteLogStreamFun, resetData };
+};
diff --git a/src/hooks/useGetLogStreamList.ts b/src/hooks/useGetLogStreamList.ts
index 4e1e7c86..4e972ddf 100644
--- a/src/hooks/useGetLogStreamList.ts
+++ b/src/hooks/useGetLogStreamList.ts
@@ -33,10 +33,13 @@ export const useGetLogStreamList = () => {
 			setLoading(false);
 		}
 	};
+	const resetData = () => {
+		setData(null);
+	};
 
 	useEffect(() => {
 		getData();
 	}, []);
 
-	return { data, error, loading, getData };
+	return { data, error, loading, getData ,resetData};
 };
diff --git a/src/hooks/usePutLogStreamAlerts.ts b/src/hooks/usePutLogStreamAlerts.ts
new file mode 100644
index 00000000..b6ee44b3
--- /dev/null
+++ b/src/hooks/usePutLogStreamAlerts.ts
@@ -0,0 +1,39 @@
+import { StatusCodes } from 'http-status-codes';
+import useMountedState from './useMountedState';
+import { putLogStreamAlerts } from '@/api/logStream';
+
+export const usePutLogStreamAlerts = () => {
+	const [data, setData] = useMountedState<{
+		data: any;
+	} | null>(null);
+	const [error, setError] = useMountedState<string | null>(null);
+	const [loading, setLoading] = useMountedState<boolean>(false);
+
+	const putAlertsData = async (streamName :string, payload:any) => {
+		try {
+			setLoading(true);
+			setError(null);
+
+			const [logsAlertsRes] = await Promise.all([putLogStreamAlerts(streamName, payload)]);
+
+			const data = logsAlertsRes.data;
+
+			if (logsAlertsRes.status === StatusCodes.OK) {
+				setData({ data });
+				return;
+			}
+
+			setError(logsAlertsRes.data);
+		} catch (error: any) {
+			setError(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetData = () => {
+		setData(null);
+	};
+
+	return { data, error, loading, putAlertsData, resetData };
+};
diff --git a/src/hooks/usePutLogStreamRetention.ts b/src/hooks/usePutLogStreamRetention.ts
new file mode 100644
index 00000000..3c85567b
--- /dev/null
+++ b/src/hooks/usePutLogStreamRetention.ts
@@ -0,0 +1,39 @@
+import { StatusCodes } from 'http-status-codes';
+import useMountedState from './useMountedState';
+import { putLogStreamRetention } from '@/api/logStream';
+
+export const usePutLogStreamRetention = () => {
+	const [data, setData] = useMountedState<{
+		data: any;
+	} | null>(null);
+	const [error, setError] = useMountedState<string | null>(null);
+	const [loading, setLoading] = useMountedState<boolean>(false);
+
+	const putRetentionData = async (streamName :string, payload:any) => {
+		try {
+			setLoading(true);
+			setError(null);
+
+			const [logRetentionRes] = await Promise.all([putLogStreamRetention(streamName, payload)]);
+
+			const data = logRetentionRes.data;
+
+			if (logRetentionRes.status === StatusCodes.OK) {
+				setData({ data });
+				return;
+			}
+
+			setError(logRetentionRes.data);
+		} catch (error: any) {
+			setError(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetData = () => {
+		setData(null);
+	};
+
+	return { data, error, loading, putRetentionData, resetData };
+};
\ No newline at end of file
diff --git a/src/hooks/useQueryLogs.ts b/src/hooks/useQueryLogs.ts
index 2d7e665e..99c87677 100644
--- a/src/hooks/useQueryLogs.ts
+++ b/src/hooks/useQueryLogs.ts
@@ -13,7 +13,7 @@ export const useQueryLogs = () => {
 	const _dataRef = useRef<Log[] | null>(null);
 
 	const [error, setError] = useMountedState<string | null>(null);
-	const [loading, setLoading] = useMountedState<boolean>(true);
+	const [loading, setLoading] = useMountedState<boolean>(false);
 	const [pageLogData, setPageLogData] = useMountedState<LogsData | null>(null);
 	const [querySearch, setQuerySearch] = useMountedState<LogsSearch>({ 
 		search: '', 
diff --git a/src/hooks/useQueryResult.ts b/src/hooks/useQueryResult.ts
index 3e3c2b4b..6f42618d 100644
--- a/src/hooks/useQueryResult.ts
+++ b/src/hooks/useQueryResult.ts
@@ -8,7 +8,7 @@ export const useQueryResult = () => {
 		data: any;
 	} | null>(null);
 	const [error, setError] = useMountedState<string | null>(null);
-	const [loading, setLoading] = useMountedState<boolean>(true);
+	const [loading, setLoading] = useMountedState<boolean>(false);
 
 	const getQueryData = async (logsQuery: LogsQuery, query = '') => {
 		try {
diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx
index ed080f4f..480ea0f5 100644
--- a/src/pages/Config/index.tsx
+++ b/src/pages/Config/index.tsx
@@ -1,15 +1,204 @@
-import { Box } from '@mantine/core';
+import { Accordion, Box, Button } from '@mantine/core';
 import { useDocumentTitle } from '@mantine/hooks';
-import { FC } from 'react';
+import Editor from '@monaco-editor/react';
+import { FC, useEffect } from 'react';
+import { useConfigStyles } from './styles';
+import useMountedState from '@/hooks/useMountedState';
+import { usePutLogStreamAlerts } from '@/hooks/usePutLogStreamAlerts';
+import { useHeaderContext } from '@/layouts/MainLayout/Context';
+import { notifications } from '@mantine/notifications';
+import { IconCheck, IconFileAlert } from '@tabler/icons-react';
+import { usePutLogStreamRetention } from '@/hooks/usePutLogStreamRetention';
 
 const Config: FC = () => {
 	useDocumentTitle('Parseable | Config');
+	const [alertQuery, setAlertQuery] = useMountedState<string>('');
+	const [retentionQuery, setRetentionQuery] = useMountedState<string>('');
+	const {state:{subLogQuery}}=useHeaderContext();
+	const {data :resultAlertsData,error:alertError,loading:alertLoading,putAlertsData,resetData:resetAlertData} = usePutLogStreamAlerts();
+	const {data :resultRetentionData,error:retentionError,loading:retentionLoading,putRetentionData,resetData:resetRetentionData} = usePutLogStreamRetention();
+	const handleAlertQueryEditorChange = (code: any) => {
+		setAlertQuery(code);
+	};
+	const handleRetentionQueryEditorChange = (code: any) => {
+		setRetentionQuery(code);
+	};
 
+	const onSubmitAlertQuery = () => {
+		let alertQueryObj={};
+		try {	
+			alertQueryObj=JSON.parse(alertQuery);
+		} catch (e) {
+			notifications.show({
+				id: 'load-data',
+				loading: false,
+				color: 'red',
+				title: 'Error Occured',
+				message: `Error Occured, please check your query and try again ${e}`,
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 3000
+			});
+			return;
+		}
+		putAlertsData(subLogQuery.get().streamName,alertQueryObj);
+	};
+	const onSubmitRetentionQuery = () => {
+		let retentionQueryObj={};
+		try {
+			retentionQueryObj=JSON.parse(retentionQuery);
+		} catch (e) {
+			notifications.show({
+				id: 'load-data',
+				loading: false,
+				color: 'red',
+				title: 'Error Occured',
+				message: `Error Occured, please check your query and try again ${e}`,
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 3000
+			});
+			return;
+		}
+		putRetentionData(subLogQuery.get().streamName,retentionQueryObj);
+	};
 
-	return (
-		<Box >
+	useEffect(() => {
+		if(alertLoading){
+			notifications.show({
+				id: 'load-data',
+				loading: true,
+				color: '#545BEB',
+				title: 'Running Query',
+				message: 'Alert will be Added.',
+				autoClose: false,
+				withCloseButton: false,
+			});
+		}
+		if(resultAlertsData){
+			notifications.update({
+				id: 'load-data',
+				loading: false,
+				color: 'green',
+				title: 'Success',
+				message: 'Alert Added.',
+				icon: <IconCheck size="1rem" />,
+				autoClose: 1000
+			});
+			resetAlertData();
+		}
+		if(alertError){
+			notifications.update({
+				id: 'load-data',
+				loading: false,
+				color: 'red',
+				title: 'Error Occured',
+				message: `Error Occured, please check your query and try again ${alertError}`,
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 3000
+			});
+			resetAlertData();
+		}
+	}	, [resultAlertsData,alertError,alertLoading]);
 
+	useEffect(() => {
+		if(retentionLoading){
+			notifications.show({
+				id: 'load-data',
+				loading: true,
+				color: '#545BEB',
+				title: 'Running Query',
+				message: 'Retention will be Added.',
+				autoClose: false,
+				withCloseButton: false,
+			});
+		}
+		if(resultRetentionData){
+			notifications.update({
+				id: 'load-data',
+				loading: false,
+				color: 'green',
+				title: 'Success',
+				message: 'Retention Added.',
+				icon: <IconCheck size="1rem" />,
+				autoClose: 1000
+			});
+			resetRetentionData();
+		}
+		if(retentionError){
+			notifications.update({
+				id: 'load-data',
+				loading: false,
+				color: 'red',
+				title: 'Error Occured',
+				message: `Error Occured, please check your query and try again ${retentionError}`,
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 3000
+			});
+			resetRetentionData();
+		}
+	}	, [resultRetentionData,retentionError,retentionLoading]);
 
+	const {classes}=useConfigStyles();
+	const {container,submitBtn,accordionSt,innerContainer} =classes
+	return (
+		<Box className={container}>
+			<Box className={innerContainer}>
+				<Accordion defaultValue="" variant="contained" radius="md" w={"90%"} className={accordionSt}>
+					<Accordion.Item value="Alert">
+						<Accordion.Control>Alert</Accordion.Control>
+						<Accordion.Panel>
+							<Box >
+							<Box sx={{  height: '500px'}}>
+								<Editor
+									onChange={handleAlertQueryEditorChange}
+									value={alertQuery}
+									defaultLanguage="json"
+									options={{
+										scrollBeyondLastLine: false,
+										readOnly: false,
+										fontSize: 12,
+										wordWrap: 'on',
+										minimap: { enabled: false },
+										automaticLayout: true,
+										mouseWheelZoom: true,
+										glyphMargin: true,
+									}}
+								/>
+							</Box>
+							<Button className={submitBtn} onClick={onSubmitAlertQuery}>Submit</Button>
+							</Box>
+						</Accordion.Panel>
+					</Accordion.Item>
+				</Accordion>
+			</Box>
+			<Box className={innerContainer}>
+				<Accordion defaultValue="" variant="contained" radius="md" w={"90%"} className={accordionSt}>
+					<Accordion.Item value="Retention">
+						<Accordion.Control>Retention</Accordion.Control>
+						<Accordion.Panel>
+							<Box >
+							<Box sx={{  height: '500px'}}>
+								<Editor
+									onChange={handleRetentionQueryEditorChange}
+									value={retentionQuery}
+									defaultLanguage="json"
+									options={{
+										scrollBeyondLastLine: false,
+										readOnly: false,
+										fontSize: 12,
+										wordWrap: 'on',
+										minimap: { enabled: false },
+										automaticLayout: true,
+										mouseWheelZoom: true,
+										glyphMargin: true,
+									}}
+								/>
+							</Box>
+							<Button className={submitBtn} onClick={onSubmitRetentionQuery}>Submit</Button>
+							</Box>
+						</Accordion.Panel>
+					</Accordion.Item>
+				</Accordion>
+			</Box>
 		</Box>
 	);
 };
diff --git a/src/pages/Config/styles.tsx b/src/pages/Config/styles.tsx
new file mode 100644
index 00000000..3b90ee1e
--- /dev/null
+++ b/src/pages/Config/styles.tsx
@@ -0,0 +1,33 @@
+import {  NAVBAR_WIDTH } from '@/constants/theme';
+import { createStyles } from '@mantine/core';
+export const useConfigStyles = createStyles((theme) => {
+	const { spacing ,colors} = theme;
+	const { widths, } = theme.other;
+	return {
+		container: {
+			width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`,
+			display: 'flex',
+			margin: spacing.md,
+			flex: 1,
+		},
+		submitBtn: {
+			marginTop: spacing.md,
+			backgroundColor: theme.colors.brandPrimary[0],
+			color: theme.colors.white,
+		},
+		accordionSt: {
+			borderRadius: '60px',
+			border: 'none',
+			'& .mantine-Accordion-item': {
+				border:`${widths.px} ${colors.gray[1]} solid`,
+			},
+		},
+		innerContainer: {
+			width: '50%',
+			justifyContent: 'center',
+			display: 'flex',
+		},
+		
+	};
+});
+
diff --git a/src/pages/Logs/ViewLog.tsx b/src/pages/Logs/ViewLog.tsx
index 0a6bc929..ecf2c553 100644
--- a/src/pages/Logs/ViewLog.tsx
+++ b/src/pages/Logs/ViewLog.tsx
@@ -1,5 +1,5 @@
 import useMountedState from '@/hooks/useMountedState';
-import { Box, Chip, CloseButton, Divider, Drawer, Text, px } from '@mantine/core';
+import { Box, Chip, CloseButton, Divider, Drawer, ScrollArea, Text, px } from '@mantine/core';
 import { Prism } from '@mantine/prism';
 import type { FC } from 'react';
 import { useEffect, Fragment, useMemo } from 'react';
@@ -52,15 +52,17 @@ const ViewLog: FC = () => {
 					<DataChip title="Meta Data" dataList={p_metadata} />
 					<DataChip title="Tags" dataList={p_tags} />
 					<Divider label={'Logger Message'} variant="dashed" labelPosition="center" my="lg" />
+					
 					<Prism
 						copyLabel="Copy"
 						language="json"
 						withLineNumbers
-						style={{
-							maxWidth: '100%',
-						}}>
+						sx={{overflow: 'auto' }}
+						scrollAreaComponent={ScrollArea}
+						>
 						{JSON.stringify(log, null, 2)}
 					</Prism>
+					
 				</Box>
 			)}
 		</Drawer>
diff --git a/src/pages/Logs/styles.tsx b/src/pages/Logs/styles.tsx
index 7bb147dc..f52cca49 100644
--- a/src/pages/Logs/styles.tsx
+++ b/src/pages/Logs/styles.tsx
@@ -208,7 +208,11 @@ export const useViewLogStyles = createStyles((theme) => {
 		},
 
 		headerContainer: {
+			position: 'sticky',
+			top: 0,
+			zIndex: 10,
 			background: pColor,
+			padding: spacing.md,
 			display: 'flex',
 			alignItems: 'center',
 			justifyContent: 'space-between',
diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx
index 04545b5d..564f60a4 100644
--- a/src/pages/Query/QueryCodeEditor.tsx
+++ b/src/pages/Query/QueryCodeEditor.tsx
@@ -25,6 +25,7 @@ const QueryCodeEditor: FC = () => {
 	const [isSchemaOpen, setIsSchemaOpen] = useMountedState(false);
 	const [query, setQuery] = React.useState<string>(`SELECT * FROM ${subLogQuery.get().streamName} LIMIT 100`);
 	const [refreshInterval, setRefreshInterval] = useMountedState<number | null>(null);
+	const [currentStreamName, setCurrentStreamName] = useMountedState<string>('');
 
 	const handleEditorChange = (code: any) => {
 		setQuery(code);
@@ -45,8 +46,10 @@ const QueryCodeEditor: FC = () => {
 		const listener = subSchemaToggle.subscribe(setIsSchemaOpen);
 		const refreshIntervalListener = subRefreshInterval.subscribe(setRefreshInterval);
 		const subQueryListener = subLogQuery.subscribe((state) => {
-			if (state.streamName) {
-				setQuery(`SELECT * FROM ${state.streamName} LIMIT 100;`);
+			if (state.streamName!==currentStreamName) {
+				setCurrentStreamName(state.streamName);
+				setQuery(`SELECT * FROM ${state.streamName} LIMIT 100  ; `);
+				console.log(['state.streamName',state.streamName,currentStreamName]);
 				result.set('');
 			}
 		});
@@ -55,14 +58,8 @@ const QueryCodeEditor: FC = () => {
 			refreshIntervalListener();
 			subQueryListener();
 		};
-	}, [subSchemaToggle.get()]);
+	}, [currentStreamName]);
 
-	useEffect(() => {
-		if (subLogQuery.get().streamName) {
-			setQuery(`SELECT * FROM ${subLogQuery.get().streamName} LIMIT 100;`);
-			result.set('');
-		}
-	}, [subLogQuery.get().streamName]);
 
 	function handleEditorDidMount(editor: any, monaco: any) {
 		editorRef.current = editor;
diff --git a/src/pages/Stats/Status.tsx b/src/pages/Stats/Status.tsx
index 1eb556de..c311c72d 100644
--- a/src/pages/Stats/Status.tsx
+++ b/src/pages/Stats/Status.tsx
@@ -109,7 +109,7 @@ const Status: FC = () => {
 			setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS-1].name}`);
 			return;
 		}
-		if(queryResult?.data[0]["COUNT(UInt8(1))"]===0){
+		if(queryResult?.data[0] && queryResult?.data[0]["COUNT(UInt8(1))"]&&queryResult?.data[0]["COUNT(UInt8(1))"]===0){
 			setStatus("Loading...");
 			if(FIXED_DURATIONS.length-1>statusFIXEDDURATIONS){
 				setStatusFIXEDDURATIONS(statusFIXEDDURATIONS+1);
@@ -120,6 +120,10 @@ const Status: FC = () => {
 				setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`);
 			}
 		}
+		else{
+			setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`);
+			return;
+		}
 	}, [queryResult, errorQueryResult]);
 	const { classes } = useStatusStyles();
 	const {
@@ -173,7 +177,7 @@ const Status: FC = () => {
 							? !errorStat
 								? dataStat?.ingestion?.size
 									? formatBytes(dataStat.ingestion.size.split(' ')[0])
-									: 'NotFound'
+									: '0'
 								: 'ERROR'
 							: 'Loading...',
 						description: 'Size of events received',
@@ -187,7 +191,7 @@ const Status: FC = () => {
 							? !errorStat
 								? dataStat?.storage?.size
 									? formatBytes(dataStat.storage.size.split(' ')[0])
-									: 'NotFound'
+									: '0'
 								: 'ERROR'
 							: 'Loading...',
 						description: 'Amount of storage used by stream',