Query schema & other UI Changes

src/components/Header/SubHeader.tsx

@@ -1,7 +1,7 @@
 import useMountedState from '@/hooks/useMountedState';
 import { Box, Breadcrumbs, Button, Menu, Text, TextInput, UnstyledButton, px } from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
-import { IconClock, IconRefresh, IconRefreshOff, IconSearch } from '@tabler/icons-react';
+import { IconClock,IconRefresh, IconReload , IconRefreshOff, IconSearch } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import ms from 'ms';
 import type { ChangeEvent, FC, KeyboardEvent } from 'react';
@@ -35,18 +35,16 @@ const SubHeader: FC = () => {
 						</svg>
 						<Text >Streams </Text>
 						<Text >{streamName}</Text>
-						<Text className={activeBtn}> {useMatch("/:streamName/logs")? "Logs": "Query" } </Text>
+						<Text className={activeBtn}> {useMatch("/:streamName/logs") ? "Logs" : "Query"} </Text>
 					</Breadcrumbs>
 				</Box>
 			</Box>
-			<Box>
-				{useMatch("/:streamName/logs")
-					&& <Box className={innerContainer}>
-						<Search />
-					</Box>}
-			</Box>
+
 			<Box>
 				<Box className={innerContainer}>
+					{useMatch("/:streamName/logs") && <Search />}
+					{useMatch("/:streamName/logs") && <RefreshNow />}
+
 					<TimeRange />
 					<RefreshInterval />
 				</Box>
@@ -105,6 +103,33 @@ const Search: FC = () => {
 	);
 };
 
+const RefreshNow: FC = () => {
+	const {
+		state: { subLogQuery, subLogSelectedTimeRange },
+	} = useHeaderContext();
+
+
+	const onRefresh = () => {
+		if (subLogSelectedTimeRange.get().includes('Past')) {
+			const now = dayjs();
+			const timeDiff = subLogQuery.get().endTime.getTime() - subLogQuery.get().startTime.getTime();
+			subLogQuery.set((state) => {
+				state.startTime = now.subtract(timeDiff).toDate();
+				state.endTime = now.toDate();
+			});
+		}
+	};
+	const { classes } = useLogQueryStyles();
+	const { refreshNowBtn } = classes;
+
+	return (
+
+		<Button className={refreshNowBtn} onClick={onRefresh}>
+			<IconReload  size={px('1.2rem')} stroke={1.5} />
+		</Button>
+	);
+};
+
 const RefreshInterval: FC = () => {
 	const {
 		state: { subRefreshInterval },
@@ -195,7 +220,7 @@ const TimeRange: FC = () => {
 	} = classes;
 
 	return (
-		<Menu withArrow position="top-start">
+		<Menu withArrow position="top">
 			<Menu.Target>
 				<Button className={timeRangeBTn} leftIcon={<IconClock size={px('1.2rem')} stroke={1.5} />}>
 					<Text>{selectedRange}</Text>

src/components/Header/index.tsx

@@ -14,7 +14,7 @@ type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>
 
 const Header: FC<HeaderProps> = (props) => {
 	const { classes } = useHeaderStyles();
-	const { container, logoContainer, burgerIcon ,navContainer} = classes;
+	const { container, logoContainer, burgerIcon ,navContainer, imageSty} = classes;
 	const {
 		state: { subNavbarTogle },
 	} = useHeaderContext();
@@ -30,7 +30,7 @@ const Header: FC<HeaderProps> = (props) => {
 		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
 			<Box className={logoContainer}>
 				<Link to={HOME_ROUTE} style={{ height: 25 }}>
-					<Image maw={HEADER_HEIGHT * 2.5} mx="auto" src={logoInvert} alt="Parseable Logo" />
+					<Image className={imageSty} height={26} src={logoInvert} alt="Parseable Logo" />
 				</Link>
 				<Burger
 					className={burgerIcon}

src/components/Header/styles.tsx

@@ -24,7 +24,10 @@ export const useHeaderStyles = createStyles((theme) => {
 			alignItems: 'self-end',
 			width: NAVBAR_WIDTH,
 			justifyContent: "space-between",
-			padding: spacing.md,
+			// padding: spacing.md,
+		},
+		imageSty:{
+			marginLeft: spacing.md,
 		},
 		burgerIcon: {
 			size:"24px",
@@ -56,7 +59,6 @@ export const useLogQueryStyles = createStyles((theme) => {
 		innerContainer: {
 			display: 'flex',
 			paddingTop: spacing.xxs,
-			marginRight: spacing.md,
 		},
 		homeIcon: {
 			size:"24px",
@@ -71,15 +73,25 @@ export const useLogQueryStyles = createStyles((theme) => {
 			display: 'flex',
 			justifyContent: 'center',
 			alignItems: 'center',
-
-			background: pColor,
-			color: colors.white[0],
+			background: colors.white[0],
+			color: colors.black[0],
 			minWidth: widths[20],
 			border: `${sizing.px} ${colors.gray[2]} solid`,
 			padding: `${spacing.xs} ${spacing.sm}`,
 			marginRight: spacing.xs,
 			'&:hover': {
-				background: sColor,
+				background: colors.gray[1],
+			},
+		},
+		refreshNowBtn: {
+			background: colors.white[0],
+			padding:0,
+			marginRight: spacing.xs,
+			width: "36px",
+			color: colors.black[0],
+			border: `${sizing.px} ${colors.gray[2]} solid`,
+			'&:hover': {
+				background: colors.gray[1],
 			},
 		},
 
@@ -161,6 +173,7 @@ export const useLogQueryStyles = createStyles((theme) => {
 
 		searchContainer: {
 			display: 'flex',
+			paddingRight: spacing.sm,
 		},
 
 		searchTypeBtn: {

src/components/Navbar/index.tsx

@@ -1,6 +1,6 @@
 import type { NavbarProps as MantineNavbarProps } from '@mantine/core';
 import { Navbar as MantineNavbar, NavLink, Select, Anchor, Card, Box, Modal, Text, Image } from '@mantine/core';
-import { IconNews, IconCodeCircle2, IconCheck, IconFileAlert, IconReload, IconHelpCircle, IconLogout, IconUser } from '@tabler/icons-react';
+import { IconColumns , IconZoomCode,IconReportAnalytics , IconCheck, IconFileAlert, IconReload, IconHelpCircle, IconLogout, IconUser } from '@tabler/icons-react';
 import { FC, useEffect, useState } from 'react';
 import docImage from '@/assets/images/doc.webp';
 import githubLogo from '@/assets/images/github-logo.webp';
@@ -18,8 +18,9 @@ import { LOGIN_ROUTE } from '@/constants/routes';
 
 
 const links = [
-	{ icon: IconNews, label: 'Logs', pathname: "/logs" },
-	{ icon: IconCodeCircle2, label: 'Query', pathname: "/query" },
+	{ icon: IconColumns , label: 'Logs', pathname: "/logs" },
+	{ icon: IconZoomCode , label: 'Query', pathname: "/query" },
+	{ icon: IconReportAnalytics , label: 'Stats', pathname: "/metrics"}
 ];
 
 type NavbarProps = Omit<MantineNavbarProps, 'children'>;
@@ -159,7 +160,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 					return (
 						<NavLink
 							label={link.label}
-							icon={<link.icon size="1rem" stroke={1.5} />}
+							icon={<link.icon size="1.3rem" stroke={1.5} />}
 							sx={{ paddingLeft: 53 }}
 							onClick={() => { navigate(`/${activeStream}${link.pathname}`);  }}
 							key={link.label}
@@ -171,9 +172,9 @@ const Navbar: FC<NavbarProps> = (props) => {
 				{error && <NavLink label="Retry" icon={<IconReload size="1rem" stroke={1.5} />} component="button" onClick={getData} sx={{ paddingLeft: 0 }} />}
 			</MantineNavbar.Section>
 			<MantineNavbar.Section className={lowerContainer}>
-				<NavLink label={username} icon={<IconUser size="1.5rem" stroke={1.5} />} className={userBtn} component="a" />
-				<NavLink label="Help" icon={<IconHelpCircle size="1.5rem" stroke={1.5} />} className={actionBtn} component="a" onClick={open} />
-				<NavLink label="Log out" icon={<IconLogout size="1.5rem" stroke={1.5} />} className={actionBtn} component="a" onClick={onSignOut} />
+				<NavLink label={username} icon={<IconUser size="1.3rem" stroke={1.3} />} className={userBtn} component="a" />
+				<NavLink label="Help" icon={<IconHelpCircle size="1.3rem" stroke={1.3} />} className={actionBtn} component="a" onClick={open} />
+				<NavLink label="Log out" icon={<IconLogout size="1.3rem" stroke={1.3} />} className={actionBtn} component="a" onClick={onSignOut} />
 			</MantineNavbar.Section>
 			<Modal withinPortal opened={opened} onClose={close} withCloseButton={false} size="sm" centered>
 				<Text className={helpTitle}>Need any help?</Text>

src/components/Navbar/styles.tsx

@@ -23,7 +23,8 @@ export const useNavbarStyles = createStyles((theme) => {
 			lineHeight: "normal",
 		},
 		streamsBtn: {
-			padding:"24px 24px 14px 24px", ":hover": { background: "white" }
+			padding:"24px 24px 14px 24px", ":hover": { background: "white" },
+			cursor: 'default'
 
 		},
 		linkBtnActive: {
@@ -64,17 +65,21 @@ export const useNavbarStyles = createStyles((theme) => {
 		},
 		actionBtn: {
 			paddingLeft:"24px", 
-			height:"56px",
+			height:"40px",
 			color: theme.colors.gray[6],
 			'&:hover *': {
 				color: sColor,
 			}
 		},
 
 		userBtn: {		
+			cursor: 'default',
 			paddingLeft:"24px", 
-			height:"56px",
+			height:"40px",
 			color: theme.colors.gray[6],
+			'&:hover ': {
+				background: white,
+			}
 		},
 
 		helpTitle: {

src/layouts/MainLayout/Context.tsx

@@ -9,7 +9,7 @@ const Context = createContext({});
 const { Provider } = Context;
 
 const now = dayjs();
-export const REFRESH_INTERVALS = [1000, 2000, 5000, 10000, 20000, 60000];
+export const REFRESH_INTERVALS = [10000, 30000, 60000, 300000, 600000, 1200000];
 export const FIXED_DURATIONS = [
 	{
 		name: 'Past 10 Minutes',

src/pages/Logs/LogTable.tsx

@@ -17,6 +17,7 @@ import { RetryBtn } from '@/components/Button/Retry';
 import Column from './Column';
 import FilterPills from './FilterPills';
 import { useHeaderContext } from '@/layouts/MainLayout/Context';
+import dayjs from 'dayjs';
 
 const skipFields = ['p_metadata', 'p_tags'];
 
@@ -25,10 +26,10 @@ const LogTable: FC = () => {
 		state: { subLogStreamError },
 	} = useLogsPageContext();
 	const {
-		state: { subLogSearch ,subLogQuery },
+		state: { subLogSearch ,subLogQuery , subRefreshInterval ,subLogSelectedTimeRange},
 	}= useHeaderContext();
 
-
+	const [refreshInterval, setRefreshInterval] = useMountedState<number | null>(null);
 	const [logStreamError, setLogStreamError] = useMountedState<string | null>(null);
 	const [columnToggles, setColumnToggles] = useMountedState<Map<string, boolean>>(new Map());
 	const {
@@ -94,6 +95,7 @@ const LogTable: FC = () => {
 	useEffect(() => {
 		const streamErrorListener = subLogStreamError.subscribe(setLogStreamError);
 		const logSearchListener = subLogSearch.subscribe(setQuerySearch);
+		const refreshIntervalListener = subRefreshInterval.subscribe(setRefreshInterval);
 		const logQueryListener = subLogQuery.subscribe((query) => {
 			if (query.streamName) {
 				if (logsSchema) {
@@ -109,11 +111,28 @@ const LogTable: FC = () => {
 
 		return () => {
 			streamErrorListener();
+			refreshIntervalListener();
 			logQueryListener();
 			logSearchListener();
 		};
 	}, [logsSchema]);
 
+	useEffect(() => {
+		if (subRefreshInterval.get()) {
+		  const interval = setInterval(() => {
+			if(subLogSelectedTimeRange.get().includes('Past')){
+				const now =dayjs();
+				const timeDiff=subLogQuery.get().endTime.getTime()-subLogQuery.get().startTime.getTime();
+				subLogQuery.set((state) => {
+				  state.startTime = now.subtract(timeDiff).toDate();
+				  state.endTime = now.toDate();
+				});
+			  }
+		  }, subRefreshInterval.get() as number);
+		  return () => clearInterval(interval);
+		}
+	  }, [refreshInterval]);
+
 	useEffect(() => {
 		const query = subLogQuery.get();
 

src/pages/Logs/ViewLog.tsx

@@ -106,9 +106,9 @@ const DataChip: FC<DataChipProps> = (props) => {
 		<Fragment>
 			<Divider label={title} variant="dashed" labelPosition="center" my="lg" />
 			<Box className={dataChipContainer}>
-				{[...dataList, ...dataList, ...dataList, ...dataList, ...dataList].map((data) => {
+				{[...dataList].map((data,i) => {
 					return (
-						<Chip checked={false} key={data} variant="filled" mb="xs">
+						<Chip checked={false} key={data+i} variant="filled" mb="xs">
 							{data}
 						</Chip>
 					);

src/pages/Logs/styles.tsx

@@ -43,6 +43,8 @@ export const useLogTableStyles = createStyles((theme) => {
 
 		paginationRow: {
 			'.mantine-Pagination-control': {
+			border: `solid 1px ${colors.gray[2]}`,
+
 				'&:hover': {
 					color: sColor,
 				},
@@ -60,8 +62,7 @@ export const useLogTableStyles = createStyles((theme) => {
 		},
 
 		tableContainer: {
-			position: 'relative',
-			boxShadow: shadows.sm,
+			position: 'relative'
 		},
 
 		tableStyle: {
@@ -90,7 +91,7 @@ export const useLogTableStyles = createStyles((theme) => {
 			},
 
 			'& td': {
-				height: heights[14],
+				height: heights[10],
 				textAlign: 'left',
 				verticalAlign: 'middle',
 				border:"none !important",
@@ -106,7 +107,7 @@ export const useLogTableStyles = createStyles((theme) => {
 			},
 
 			'& td': {
-				height: heights[14],
+				height: heights[10],
 				textAlign: 'left',
 				verticalAlign: 'middle',
 				border:"none !important",
@@ -148,6 +149,7 @@ export const useLogTableStyles = createStyles((theme) => {
 			flexDirection: 'row',
 			justifyContent: 'space-between',
 			background: colors.gray[0],
+			borderTop: `${widths.px} ${colors.gray[1]} solid`,
 		},
 
 		errorContainer: {
@@ -169,7 +171,6 @@ export const useLogTableStyles = createStyles((theme) => {
 			justifyContent: 'center',
 			cursor: 'pointer',
 			background: colors.white[0],
-			boxShadow: shadows.sm,
 			padding: `0.2rem ${spacing.xs}`,
 			border: `${widths.px} ${colors.gray[1]} solid`,
 			borderRadius: defaultRadius,
@@ -179,7 +180,7 @@ export const useLogTableStyles = createStyles((theme) => {
 		},
 
 		limitBtnText: {
-			marginRight: spacing.md,
+
 		},
 
 		limitActive: {

src/pages/Query/Context.tsx

@@ -12,6 +12,7 @@ export const defaultQueryResult = ""
 
 interface QueryPageContextState {
     result: SubData<string>;
+	subSchemaToggle: SubData<boolean>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -28,9 +29,11 @@ interface QueryPageProviderProps {
 
 const QueryPageProvider: FC<QueryPageProviderProps> = ({ children }) => {
     const result = useSubscribeState<string>(defaultQueryResult);
+	const subSchemaToggle = useSubscribeState<boolean>(false);
 
 	const state: QueryPageContextState = {
 		result,
+		subSchemaToggle
 	};
 
 	const methods: QueryPageContextMethods = {};

src/pages/Query/ErrorMarker.tsx

@@ -27,7 +27,7 @@ export function errChecker(code: string, streamName: string) {
         let wordsArray=wordsString.split(' ');
         wordsArray.map((word:string, i:any) => {
             if (word.toLowerCase() === 'from' && wordsArray[i + 1]) {   
-                if(wordsArray[i+1]!==streamName){
+                if(wordsArray[i+1]!==streamName && wordsArray[i+1]!==`${streamName};`){
                     ErrorMarker.push({
                         startLineNumber: j+1,
                         endLineNumber: j+1,