logo ,% , linkactive fixed

src/components/Header/SubHeader.tsx

@@ -11,7 +11,7 @@ import { useLogQueryStyles } from './styles';
 import { useMatch } from 'react-router-dom';
 const SubHeader: FC = () => {
 	const { classes } = useLogQueryStyles();
-	const { container, innerContainer, homeIcon, activeBtn } = classes;
+	const { container, innerContainer, homeIcon } = classes;
 	const {
 		state: { subLogQuery },
 	} = useHeaderContext();
@@ -43,11 +43,13 @@ const SubHeader: FC = () => {
 						</svg>
 						<Text>Streams </Text>
 						<Text>{streamName}</Text>
-						{useMatch('/:streamName/stats') && <Text className={activeBtn}>Stats </Text>}
+						{useMatch('/:streamName/stats') && <Text >Stats </Text>}
 
-						{useMatch('/:streamName/logs') && <Text className={activeBtn}>Logs </Text>}
+						{useMatch('/:streamName/logs') && <Text >Logs </Text>}
 
-						{useMatch('/:streamName/query') && <Text className={activeBtn}>Query </Text>}
+						{useMatch('/:streamName/query') && <Text >Query </Text>}
+
+						{useMatch('/:streamName/config') && <Text >Config </Text>}
 					</Breadcrumbs>
 				</Box>
 			</Box>

src/components/Header/index.tsx

@@ -29,14 +29,14 @@ const Header: FC<HeaderProps> = (props) => {
 	return (
 		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
 			<Box className={logoContainer}>
-				<Link to={HOME_ROUTE} style={{ height: 25 }}>
-					<Image className={imageSty} height={26} src={logoInvert} alt="Parseable Logo" />
+				<Link to={HOME_ROUTE} >
+					<Image className={imageSty} src={logoInvert} height={24} alt="Parseable Logo" />
 				</Link>
 				<Burger
 					className={burgerIcon}
 					opened={isSubNavbarOpen}
 					onClick={() => subNavbarTogle.set((state) => !state)}
-					size={'sm'}
+					size={24}
 				/>
 			</Box>
 			<Box className={navContainer}>

src/components/Header/styles.tsx

@@ -20,17 +20,20 @@ export const useHeaderStyles = createStyles((theme) => {
 		},
 		logoContainer: {
 			display: 'flex',
-			alignItems: 'self-end',
-			width: NAVBAR_WIDTH,
 			justifyContent: 'space-between',
-			// padding: spacing.md,
+			alignItems: 'center',
+			padding: spacing.md,
+			paddingRight:0,
+			width: NAVBAR_WIDTH,
+			height: "24px",
+
 		},
 		imageSty: {
-			marginLeft: spacing.md,
+
 		},
 		burgerIcon: {
-			size: '24px',
-			color: theme.colors.gray[7],
+
+
 		},
 		navContainer: {
 			width: `calc(100% - ${NAVBAR_WIDTH}px)`,
@@ -55,16 +58,10 @@ export const useLogQueryStyles = createStyles((theme) => {
 
 		innerContainer: {
 			display: 'flex',
-			paddingTop: spacing.xxs,
 			color: colors.gray[6],
 		},
 		homeIcon: {
 			size: '24px',
-			strokeWidth: 1.0,
-		},
-		activeBtn: {
-			color: colors.brandPrimary[0],
-			textDecoration: 'underline',
 		},
 
 		intervalBtn: {

src/components/Navbar/index.tsx

@@ -49,6 +49,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 	const [currentPage, setCurrentPage] = useState('/logs');
 	const [opened, { open, close }] = useDisclosure(false);
 	const [ deleteStream, setDeleteStream] = useState('');
+	const [disableLink, setDisableLink] = useState(false);
 	const {
 		container,
 		linkBtnActive,
@@ -71,7 +72,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 	const [isSubNavbarOpen, setIsSubNavbarOpen] = useMountedState(false);
 	const [openedDelete, { close:closeDelete, open:openDelete}] = useDisclosure();
 	let location = useLocation();
-	const {data:deleteData, loading:deleteLoading, error:deleteError, deleteLogStreamFun , resetData: resetDatalogStraeam} = useDeleteLogStream();
+	const {data:deleteData, loading:deleteLoading, error:deleteError, deleteLogStreamFun , resetData: resetDeleteStraeam} = useDeleteLogStream();
 
 	useEffect(() => {
 		const listener = subNavbarTogle.subscribe(setIsSubNavbarOpen);
@@ -96,10 +97,27 @@ const Navbar: FC<NavbarProps> = (props) => {
 	} = useHeaderContext();
 
 	useEffect(() => {
-		if (streamName) {
+		if(streams && streams.length!==0 && !streams.find((stream)=>stream.name===streamName)&& streamName && streamName===deleteStream){
+
+			navigate(`/${streams[0].name}/query`);
+			return;
+		}
+		else if(streamName&&streams && streams.length!==0 && !streams.find((stream)=>stream.name===streamName) ){
+			notifications.show({
+				id: 'error-data',
+				color: 'red',
+				title: 'Error Occured',
+				message: `${streamName} stream not found`,
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 5000,
+			});
+
+			navigate(`/${streams[0].name}/query`);
+			return;
+		}
+		else if (streamName && streams?.length!==0 && streams?.find((stream)=>stream.name===streamName)) {
 			setActiveStream(streamName);
 			setSearchValue(streamName);
-
 				const now = dayjs();
 				subLogQuery.set((state) => {
 					state.streamName = streamName || '';
@@ -155,6 +173,20 @@ const Navbar: FC<NavbarProps> = (props) => {
 				autoClose: 2000,
 			});
 		}
+		if(streams && streams.length===0){
+			notifications.update({
+				id: 'load-data',
+				color: 'red',
+				title: 'No Streams',
+				message: 'No Streams Found in your account',
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 2000,
+			});
+			setActiveStream('');
+			setSearchValue('');
+			setDisableLink(true);
+			navigate(`/`);
+		}
 	}, [streams, error, loading]);
 	const handleCloseDelete = () => {
 		closeDelete();
@@ -188,7 +220,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 				icon: <IconCheck size="1rem" />,
 				autoClose: 1000,
 			});
-			resetDatalogStraeam();
+			resetDeleteStraeam();
 			resetStreamArray();
 			getData();
 			return;
@@ -238,6 +270,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 							label={link.label}
 							icon={<link.icon size="1.3rem" stroke={1.2} />}
 							sx={{ paddingLeft: 53 }}
+							disabled={disableLink}
 							onClick={() => {
 								navigate(`/${activeStream}${link.pathname}`);
 								setCurrentPage(link.pathname);
@@ -255,6 +288,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 				sx={{ paddingLeft: 53 }}
 				onClick={openDelete}
 				className={ linkBtn}
+				disabled={disableLink}
 			/>
 				{error && <div>{error}</div>}
 				{error && (

src/hooks/useQueryLogs.ts

@@ -139,7 +139,11 @@ export const useQueryLogs = () => {
 
 				return;
 			}
-
+			if (typeof data === 'string' && data.includes('Stream is not initialized yet')) {
+				_dataRef.current = [];
+				return;
+			}
+			console.log(logsQueryRes);
 			setError('Failed to query log');
 		} catch {
 			setError('Failed to query log');

src/hooks/useQueryResult.ts

@@ -26,7 +26,7 @@ export const useQueryResult = () => {
 
 			if (typeof data === 'string' && data.includes('Stream is not initialized yet')) {
 				setData({
-					data: [],
+					data: [data],
 				});
 				return;
 			}

src/pages/Home/index.tsx

@@ -1,10 +1,34 @@
+import { EmptySimple } from '@/components/Empty';
+import { Text, Button, Center } from '@mantine/core';
+import { IconExternalLink } from '@tabler/icons-react';
 import type { FC } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
+import { useHomeStyles } from './styles';
 
 const Home: FC = () => {
 	const location = useLocation();
-	const pathname = location.state?.from?.pathname ?? '/';
-	return <Navigate to={{ pathname }} />;
+	const pathname = location.state?.from?.pathname;
+
+	const { classes } = useHomeStyles();
+	const { container, messageStyle ,btnStyle} = classes;
+	if (pathname) {
+		return <Navigate to={{ pathname }} />;
+	} else {
+		return (
+			<Center className={container}>
+				<EmptySimple height={70} width={100} />
+				<Text className={messageStyle}>No Stream found on this account</Text>
+				<Button
+					target='_blank'
+					component="a"
+					href="https://www.parseable.io/docs/category/log-ingestion"
+					className={btnStyle}
+					leftIcon={<IconExternalLink size="0.9rem" />}>
+					Documentation
+				</Button>
+			</Center>
+		);
+	}
 };
 
 export default Home;

src/pages/Home/styles.tsx

@@ -0,0 +1,26 @@
+import {  NAVBAR_WIDTH } from '@/constants/theme';
+import { createStyles } from '@mantine/core';
+export const useHomeStyles = createStyles((theme) => {
+	const { spacing ,colors} = theme;
+	return {
+		container: {
+			height: '100%',
+			width: `calc(100% - ${NAVBAR_WIDTH}px)`,
+			paddingTop: spacing.xl,
+			flexDirection: 'column',
+			justifyContent: 'center',
+			alignItems: 'center',
+		},
+		messageStyle: {
+			marginTop: spacing.md,
+			color: colors.dimmed[0],
+		},
+		btnStyle: {
+			marginTop: spacing.md,
+			color: colors.white,
+			backgroundColor: colors.brandPrimary[0],
+		},
+
+	};
+});
+

src/pages/Logs/LogTable.tsx

@@ -248,7 +248,7 @@ const LogTable: FC = () => {
 							</Box>
 						</Box>
 					) : (
-						<EmptyBox message="No Data Available" />
+					<EmptyBox message="No Data Available" />	
 					)
 				) : (
 					<Loading visible variant="oval" position="absolute" zIndex={0} />

src/pages/Query/QueryCodeEditor.tsx

@@ -2,7 +2,7 @@ import React, { FC, useEffect } from 'react';
 import Editor from '@monaco-editor/react';
 import { useQueryPageContext } from './Context';
 import { useHeaderContext } from '@/layouts/MainLayout/Context';
-import { Box, Button, Text, px } from '@mantine/core';
+import { Box, Button, Text, Tooltip, px } from '@mantine/core';
 import { useQueryResult } from '@/hooks/useQueryResult';
 import { ErrorMarker, errChecker } from './ErrorMarker';
 import { notifications } from '@mantine/notifications';
@@ -64,6 +64,12 @@ const QueryCodeEditor: FC = () => {
 	function handleEditorDidMount(editor: any, monaco: any) {
 		editorRef.current = editor;
 		monacoRef.current = monaco;
+		editor.addCommand(
+			monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter,
+			async () => {
+				runQuery();
+			},
+		  );
 	}
 	const runQuery = () => {
 		resetData();
@@ -122,12 +128,18 @@ const QueryCodeEditor: FC = () => {
 			<Box className={container}>
 				<Text className={textContext}>Query</Text>
 				<Box style={{ height: '100%', width: '100%', textAlign: 'right' }}>
-					<Button variant="default" className={actionBtn} onClick={() => subSchemaToggle.set(!isSchemaOpen)}>
+				<Tooltip label={`View Schema for ${subLogQuery.get().streamName}`} sx={{color:"white",backgroundColor:"black"}}withArrow position="right">
+					<Button variant="default" className={actionBtn} 
+					aria-label='Schema'
+					onClick={() => subSchemaToggle.set(!isSchemaOpen)}>
 						<IconFileInfo size={px('1.2rem')} stroke={1.5} />
 					</Button>
+				</Tooltip>
+					<Tooltip label={"Click to Run Query or ctrl + enter "} sx={{color:"white",backgroundColor:"black"}}withArrow position="right">
 					<Button variant="default" className={runQueryBtn} onClick={runQuery}>
 						<IconPlayerPlayFilled size={px('1.2rem')} stroke={1.5} />
 					</Button>
+					</Tooltip>
 				</Box>
 			</Box>
 			<Box sx={{ marginTop: '5px', height: 'calc(100% - 60px)' }}>

src/pages/Stats/Status.tsx

@@ -38,6 +38,7 @@ const Status: FC = () => {
 	useDocumentTitle('Parseable | Login');
 	const [statusFIXEDDURATIONS, setStatusFIXEDDURATIONS] = useMountedState(0);
 	const [status, setStatus] = useMountedState("Loading....");
+	const [statusSuccess, setStatusSuccess] = useMountedState(true);
 	FIXED_DURATIONS
 	const {
 		state: { subLogQuery },
@@ -103,10 +104,12 @@ const Status: FC = () => {
 	useEffect(() => {
 		if (queryResult?.data[0] && queryResult?.data[0]["COUNT(UInt8(1))"]) {
 			setStatus(`${queryResult?.data[0]["COUNT(UInt8(1))"]} events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`);
+			setStatusSuccess(true);
 			return;
 		}
 		if (errorQueryResult) {
 			setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS-1].name}`);
+			setStatusSuccess(false);
 			return;
 		}
 		if(queryResult?.data[0] && queryResult?.data[0]["COUNT(UInt8(1))"]&&queryResult?.data[0]["COUNT(UInt8(1))"]===0){
@@ -118,10 +121,12 @@ const Status: FC = () => {
 			}
 			else{
 				setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`);
+				setStatusSuccess(false);
 			}
 		}
 		else{
-			setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`);
+			setStatus(`Not Recieved any events`);
+			setStatusSuccess(false);
 			return;
 		}
 	}, [queryResult, errorQueryResult]);
@@ -135,12 +140,13 @@ const Status: FC = () => {
 		genterateText,
 		genterateTextResult,
 		StatsContainer,
+		statusTextFailed,
 	} = classes;
 	return (
 		<Box className={container}>
 			<Box className={headContainer}>
 				<Text className={statusText}>
-					Status: <span className={statusTextResult}> {status}</span>
+					Status: <span className={statusSuccess?statusTextResult:statusTextFailed}> {status}</span>
 				</Text>
 
 				<Box className={genterateContiner}>
@@ -163,7 +169,7 @@ const Status: FC = () => {
 							? !errorStat
 								? dataStat?.ingestion?.count
 									? convert(dataStat.ingestion.count)
-									: 'NotFound'
+									: '0'
 								: 'ERROR'
 							: 'Loading...',
 						description: `No of events received: ${dataStat?.ingestion.count}`,
@@ -204,15 +210,15 @@ const Status: FC = () => {
 						value: !loadingStat
 							? !errorStat
 								? dataStat?.ingestion?.size
-									? `${(
+									? `${(100-
 										(parseInt(dataStat.storage.size.split(' ')[0]) /
 											parseInt(dataStat.ingestion.size.split(' ')[0])) *
-										100
+										100 
 									).toPrecision(4)} %`
 									: 'NotFound'
 								: 'ERROR'
 							: 'Loading...',
-						description: 'Compression percentage= storage used  / size of events *100 ',
+						description: 'Compression percentage= 100 - storage used  / size of events *100',
 						title: 'Compression ',
 					}}
 				/>