Query UI 1

src/api/query.ts

@@ -5,7 +5,7 @@ import { LogsQuery } from '@/@types/parseable/api/query';
 export const getQueryLogs = (logsQuery: LogsQuery) => {
 	const { startTime, endTime, streamName } = logsQuery;
 
-	const query = `SELECT * FROM ${streamName} ORDER BY p_timestamp DESC`;
+	const query = `SELECT * FROM ${streamName} ORDER BY p_timestamp DESC Limit 6000`;
 
 	return Axios().post(
 		LOG_QUERY_URL,

src/components/Header/SubHeader.tsx

@@ -8,7 +8,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react';
 import { Fragment, useEffect, useMemo } from 'react';
 import { FIXED_DURATIONS, REFRESH_INTERVALS, useHeaderContext } from '@/layouts/MainLayout/Context';
 import { useLogQueryStyles } from './styles';
-
+import { useMatch } from 'react-router-dom';
 const SubHeader: FC = () => {
 	const { classes } = useLogQueryStyles();
 	const { container, innerContainer, homeIcon, activeBtn } = classes;
@@ -22,7 +22,6 @@ const SubHeader: FC = () => {
 		const listener = subLogQuery.subscribe((state) => {
 			setStreamName(state.streamName);
 		});
-
 		return () => listener();
 	}, []);
 
@@ -31,19 +30,20 @@ const SubHeader: FC = () => {
 			<Box>
 				<Box className={innerContainer}>
 					<Breadcrumbs separator=">">
-						<svg className={ homeIcon} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+						<svg className={homeIcon} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
 							<path d="M9.99998 19V14H14V19C14 19.55 14.45 20 15 20H18C18.55 20 19 19.55 19 19V12H20.7C21.16 12 21.38 11.43 21.03 11.13L12.67 3.6C12.29 3.26 11.71 3.26 11.33 3.6L2.96998 11.13C2.62998 11.43 2.83998 12 3.29998 12H4.99998V19C4.99998 19.55 5.44998 20 5.99998 20H8.99998C9.54998 20 9.99998 19.55 9.99998 19Z" fill="#211F1F" />
 						</svg>
 						<Text >Streams </Text>
 						<Text >{streamName}</Text>
-						<Text className={activeBtn}>Logs </Text>
+						<Text className={activeBtn}> {useMatch("/:streamName/logs")? "Logs": "Query" } </Text>
 					</Breadcrumbs>
 				</Box>
 			</Box>
 			<Box>
-				<Box className={innerContainer}>
-					<Search />
-				</Box>
+				{useMatch("/:streamName/logs")
+					&& <Box className={innerContainer}>
+						<Search />
+					</Box>}
 			</Box>
 			<Box>
 				<Box className={innerContainer}>

src/pages/Query/Context.tsx

@@ -1,57 +1,17 @@
 import useSubscribeState, { SubData } from '@/hooks/useSubscribeState';
-import type { LogsQuery } from '@/@types/parseable/api/query';
+
 import type { FC } from 'react';
 import { ReactNode, createContext, useContext } from 'react';
-import dayjs from 'dayjs';
 
 const Context = createContext({});
 
 const { Provider } = Context;
 
-const now = dayjs();
-
-export const LOG_QUERY_LIMITS = [30, 50, 100, 150, 200];
-export const REFRESH_INTERVALS = [1000, 2000, 5000, 10000, 20000, 60000];
-export const FIXED_DURATIONS = [
-	{
-		name: 'Past 10 Minutes',
-		milliseconds: dayjs.duration({ minutes: 10 }).asMilliseconds(),
-	},
-	{
-		name: 'Past 1 Hour',
-		milliseconds: dayjs.duration({ hours: 1 }).asMilliseconds(),
-	},
-	{
-		name: 'Past 5 Hours',
-		milliseconds: dayjs.duration({ hours: 5 }).asMilliseconds(),
-	},
-	{
-		name: 'Past 24 Hours',
-		milliseconds: dayjs.duration({ days: 1 }).asMilliseconds(),
-	},
-	{
-		name: 'Past 3 Days',
-		milliseconds: dayjs.duration({ days: 3 }).asMilliseconds(),
-	},
-	{
-		name: 'Past 7 Days',
-		milliseconds: dayjs.duration({ days: 7 }).asMilliseconds(),
-	},
-	{
-		name: 'Past 2 Months',
-		milliseconds: dayjs.duration({ months: 2 }).asMilliseconds(),
-	},
-] as const;
-
-export const DEFAULT_FIXED_DURATIONS = FIXED_DURATIONS[0];
 
 export const defaultQueryResult = ""
 
 interface QueryPageContextState {
     result: SubData<string>;
-    subLogQuery: SubData<LogsQuery>;
-	subRefreshInterval: SubData<number | null>;
-	subLogSelectedTimeRange: SubData<string>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -68,19 +28,9 @@ interface QueryPageProviderProps {
 
 const QueryPageProvider: FC<QueryPageProviderProps> = ({ children }) => {
     const result = useSubscribeState<string>(defaultQueryResult);
-    const subLogQuery = useSubscribeState<LogsQuery>({
-		startTime: now.subtract(DEFAULT_FIXED_DURATIONS.milliseconds, 'milliseconds').toDate(),
-		endTime: now.toDate(),
-		streamName: '',
-	});
-	const subRefreshInterval = useSubscribeState<number | null>(null);
-	const subLogSelectedTimeRange = useSubscribeState<string>(DEFAULT_FIXED_DURATIONS.name);
 
 	const state: QueryPageContextState = {
 		result,
-        subLogQuery,
-		subRefreshInterval,
-		subLogSelectedTimeRange,
 	};
 
 	const methods: QueryPageContextMethods = {};