State management of url ,spelling error fixed & alert length 0 condition added

src/components/Navbar/index.tsx

@@ -94,7 +94,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 		if (streamName) {
 			setActiveStream(streamName);
 			setSearchValue(streamName);
-			if (currentPage !== location.pathname) {
+
 				const now = dayjs();
 				subLogQuery.set((state) => {
 					state.streamName = streamName || '';
@@ -107,8 +107,6 @@ const Navbar: FC<NavbarProps> = (props) => {
 					state.filters = {};
 				});
 				subRefreshInterval.set(null);
-				setCurrentPage(location.pathname);
-			}
 		} else if (streams && Boolean(streams.length)) {
 			navigate(`/${streams[0].name}/query`);
 		}
@@ -117,7 +115,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 	const handleChange = (value: string) => {
 		setActiveStream(value);
 		setSearchValue(value);
-		navigate(`/${value}/logs`);
+		navigate(`/${value}${currentPage}`);
 	};
 
 	useEffect(() => {
@@ -184,6 +182,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 							sx={{ paddingLeft: 53 }}
 							onClick={() => {
 								navigate(`/${activeStream}${link.pathname}`);
+								setCurrentPage(link.pathname);
 							}}
 							key={link.label}
 							className={

src/pages/Query/QueryCodeEditor.tsx

@@ -44,9 +44,16 @@ const QueryCodeEditor: FC = () => {
 	useEffect(() => {
 		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;`);
+				result.set('');
+			}
+		});
 		return () => {
 			listener();
 			refreshIntervalListener();
+			subQueryListener();
 		};
 	}, [subSchemaToggle.get()]);
 

src/pages/Query/QuerySchemaList.tsx

@@ -15,14 +15,25 @@ const QuerySchemaList: FC = () => {
 		state: { subSchemaToggle },
 	} = useQueryPageContext();
 
+
 	useEffect(() => {
-		if (subLogQuery.get().streamName) {
+		const subSchemaToggleListener = subSchemaToggle.subscribe((state) => {
+			if (state) {
+				getDataSchema(subLogQuery.get().streamName);
+			}
+		});
+		const subQueryListener = subLogQuery.subscribe((state) => {
 			if (querySchema) {
 				resetData();
 			}
-			getDataSchema(subLogQuery.get().streamName);
-		}
-	}, [subLogQuery.get()]);
+			getDataSchema(state.streamName);
+		});
+		return () => {
+			subQueryListener();
+			subSchemaToggleListener();
+		};
+	}, [querySchema]);
+
 
 	const renderList = querySchema?.fields.map((field, index) => {
 		if (typeof field.data_type === 'string')
@@ -61,7 +72,7 @@ const QuerySchemaList: FC = () => {
 							<Table>
 								<thead className={theadSt}>
 									<tr>
-										<th>Feild</th>
+										<th>Field</th>
 										<th>Type</th>
 									</tr>
 								</thead>

src/pages/Stats/Alerts.tsx

@@ -2,11 +2,12 @@ import { useGetLogStreamAlert } from '@/hooks/useGetLogStreamAlert';
 import { useHeaderContext } from '@/layouts/MainLayout/Context';
 import { Box, Button, Modal, ScrollArea, Text, px } from '@mantine/core';
 import { useDisclosure, useDocumentTitle } from '@mantine/hooks';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { useAlertsStyles } from './styles';
 import { IconArrowsMaximize } from '@tabler/icons-react';
 import { Prism } from '@mantine/prism';
 import useMountedState from '@/hooks/useMountedState';
+import { heights } from '@/components/Mantine/sizing';
 
 const Alerts: FC = () => {
 	useDocumentTitle('Parseable | Login');
@@ -15,52 +16,77 @@ const Alerts: FC = () => {
 	} = useHeaderContext();
 	const { data, error, loading, getLogAlert, resetData } = useGetLogStreamAlert();
 	const [opened, { open, close }] = useDisclosure(false);
-	const [Alert, setAlert] = useMountedState({name: "Loading...."});
+	const [Alert, setAlert] = useMountedState({ name: 'Loading....' });
+	const AlertsWrapper = useRef<HTMLDivElement>(null);
+	const [editorHeight, setEditorHeight] = useMountedState(0);
 
 	useEffect(() => {
-		getLogAlert(subLogQuery.get().streamName);
+		const subQueryListener = subLogQuery.subscribe((state) => {
+			if (data) {
+				resetData();
+			}
+			getLogAlert(state.streamName);
+		});
 		return () => {
-			resetData();
+			subQueryListener();
 		};
-	}, [subLogQuery]);
-
+	}, [data]);
+	useEffect(() => {
+		if (data) {
+			resetData();
+		}
+		getLogAlert(subLogQuery.get().streamName);
+	}, []);
+
+	useEffect(() => {
+		setEditorHeight(AlertsWrapper.current?.offsetTop ? AlertsWrapper.current?.offsetTop + 15 : 0);
+	}, [heights.full, AlertsWrapper]);
 
 	const { classes } = useAlertsStyles();
-	const { container, headContainer, alertsText, alertsContainer, alertContainer, expandButton } = classes;
-
+	const { container, headContainer, alertsText, alertsContainer, alertContainer, expandButton } =
+		classes;
+
 	return (
-		<Box className={container}>
+		<ScrollArea
+			className={container}
+			ref={AlertsWrapper}
+			sx={{ height: `calc(${heights.full} - ${editorHeight}px) ` }}
+			type="auto">
 			<Box className={headContainer}>
 				<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={()=>
-										{
+				{!loading ? (
+					error ? (
+						'ERROR'
+					) : data && data.alerts.length > 0 ? (
+						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'}
+										<IconArrowsMaximize size={px('1.2rem')} stroke={1.5} />
+									</Button>
+								</Box>
+							);
+						})
+					) : (
+						<Text m={'lg'}>No Alert set for {subLogQuery.get().streamName}</Text>
+					)
+				) : (
+					'Loading'
+				)}
 			</Box>
 			<Modal size="auto" opened={opened} onClose={close} title={Alert.name} scrollAreaComponent={ScrollArea.Autosize}>
-				<Prism  language="json">{JSON.stringify(Alert,null,2)}</Prism>
+				<Prism language="json">{JSON.stringify(Alert, null, 2)}</Prism>
 			</Modal>
-		</Box>
+		</ScrollArea>
 	);
 };
 
-
 export default Alerts;

src/pages/Stats/Status.tsx

@@ -140,7 +140,7 @@ const Status: FC = () => {
 				</Text>
 
 				<Box className={genterateContiner}>
-					<Text className={genterateText}>Genterated at : <span className={genterateTextResult}>{!loadingStat
+					<Text className={genterateText}>Generated at : <span className={genterateTextResult}>{!loadingStat
 							? errorStat
 								? 'ERROR'
 								: dataStat
@@ -246,7 +246,7 @@ const StatCard: FC<statCardProps> = (props) => {
 		<Box className={statCard}>
 			<Box className={statCardDescription}>
 				<Tooltip withArrow label={data.description}>
-					<IconInfoCircle className={statCardDescriptionIcon} />
+					<IconInfoCircle className={statCardDescriptionIcon} size="1.5rem" stroke={1.3} />
 				</Tooltip>
 			</Box>
 			<ThemeIcon radius={80} className={statCardIcon} size={80}>

src/pages/Stats/styles.tsx

@@ -54,7 +54,7 @@ export const useStatusStyles = createStyles((theme) => {
 			display: 'flex',
 			flexDirection: 'row',
 			padding: spacing.md,
-			borderBottom: `${widths.px} ${colors.gray[1]} solid`,
+			paddingBottom: 0,
 			justifyContent: 'space-between',
 		},
 	};
@@ -106,18 +106,30 @@ export const useStatCardStyles = createStyles((theme) => {
 });
 
 export const useAlertsStyles = createStyles((theme) => {
-	const { colors, other, spacing, fontSizes } = theme;
+	const { colors, other, spacing, fontSizes,radius } = theme;
 
 	const { fontWeights, widths ,sizing} = other;
+	const defaultRadius = radius[theme.defaultRadius as string];
+
 
 	return {
 		container: {
-			height: '50%',
+			overflow: 'auto',
+			borderRadius: defaultRadius,
+			margin: spacing.md,
+			border: `${widths.px} ${colors.gray[1]} solid`,
+
 		},
 		headContainer: {
 			padding: spacing.md,
+			width: '100%',
 			height: '55px',
+			top: 0,
+			position: "sticky",
+			backgroundColor: colors.white,
+			zIndex: 1,
 			borderBottom: `${widths.px} ${colors.gray[1]} solid`,
+
 		},
 		alertsText: {
 			fontSize: fontSizes.md,