WIP: Logs table

src/components/Header/TimeRange.tsx

@@ -46,11 +46,21 @@ const TimeRange: FC = () => {
 
 	useEffect(() => {
 		if (!location.search) return;
-		const { from, to } = getAllParams();
+		const { from, to, interval } = getAllParams();
+		console.log({ from, to, interval });
+		if (interval) {
+			const duration = FIXED_DURATIONS.find((duration) => duration.label === interval);
+			if (!duration) return;
+			const now = dayjs().startOf('minute');
+			const startTime = now.subtract(duration.milliseconds, 'milliseconds');
+			const endTime = now;
+			setLogsStore((store) => setTimeRange(store, { startTime, endTime, type: 'fixed' }));
+			return;
+		}
 		if (from && to) {
 			const startTime = parseDate(from);
 			const endTime = parseDate(to);
-			setLogsStore((store) => setTimeRange(store, { startTime, endTime, type: 'custom' }));
+			setLogsStore((store) => setTimeRange(store, { startTime, endTime, type: 'fixed' }));
 		}
 	}, [location.search]);
 

src/pages/Dashboards/SideBar.tsx

@@ -8,7 +8,8 @@ import _ from 'lodash';
 import { Dashboard } from '@/@types/parseable/api/dashboards';
 import IconButton from '@/components/Button/IconButton';
 import { syncDashboardStoretoURL } from './hooks';
-import { useLogsStore } from '../Stream/providers/LogsProvider';
+// import { useLogsStore } from '../Stream/providers/LogsProvider';
+import { getAllParams } from '@/url-sync/syncStore';
 
 const { selectDashboard, toggleCreateDashboardModal, toggleImportDashboardModal } = dashboardsStoreReducers;
 interface DashboardItemProps extends Dashboard {
@@ -37,12 +38,13 @@ const DashboardListItem = (props: DashboardItemProps) => {
 const DashboardList = (props: { updateTimeRange: (dashboard: Dashboard) => void }) => {
 	const [dashboards, setDashbaordsStore] = useDashboardsStore((store) => store.dashboards);
 	const [activeDashboardId] = useDashboardsStore((store) => store.activeDashboard?.dashboard_id);
-	const [timeRange] = useLogsStore((store) => store.timeRange);
+	// const [timeRange] = useLogsStore((store) => store.timeRange);
 	const { updateURL } = syncDashboardStoretoURL();
 
 	useEffect(() => {
-		if (activeDashboardId) updateURL(activeDashboardId);
-	}, [timeRange]);
+		const { id } = getAllParams();
+		if (id) updateURL(id);
+	}, [updateURL]);
 
 	const onSelectDashboardId = useCallback(
 		(dashboardId: string) => {

src/pages/Dashboards/Toolbar.tsx

@@ -3,7 +3,7 @@ import { Box, Button, FileInput, Modal, px, Stack, Text, Menu, TextInput } from
 import {
 	IconCheck,
 	IconCopy,
-	IconDownload,
+	IconFileArrowRight,
 	IconFileDownload,
 	IconPencil,
 	IconPlus,
@@ -215,8 +215,8 @@ const ShareDashbboardButton = (props: { dashboard: Dashboard }) => {
 				</Button>
 			</Menu.Target>
 			<Menu.Dropdown>
-				<Menu.Item leftSection={<IconDownload size={15} stroke={1.02} />} onClick={downloadDashboard}>
-					Download
+				<Menu.Item leftSection={<IconFileArrowRight size={15} stroke={1.02} />} onClick={downloadDashboard}>
+					Export
 				</Menu.Item>
 				<Menu.Item leftSection={<IconCopy size={15} stroke={1.02} />} onClick={copyUrl}>
 					Copy URL

src/pages/Dashboards/hooks.ts

@@ -5,9 +5,12 @@ import dayjs from 'dayjs';
 import { useDashboardsStore } from './providers/DashboardsProvider';
 import { Dashboard } from '@/@types/parseable/api/dashboards';
 import { syncStoretoURL, simplifyDate } from '@/url-sync/syncStore';
+import { FIXED_DURATIONS } from '@/constants/timeConstants';
 
 const { setTimeRange } = logsStoreReducers;
 
+type FixedDurations = (typeof FIXED_DURATIONS)[number];
+
 export const useSyncTimeRange = () => {
 	const [dashboards] = useDashboardsStore((store) => store.dashboards);
 	const [, setLogsStore] = useLogsStore((_store) => null);
@@ -32,14 +35,29 @@ export const useSyncTimeRange = () => {
 export const syncDashboardStoretoURL = () => {
 	const [timeRange] = useLogsStore((store) => store.timeRange);
 
-	const from = simplifyDate(timeRange.startTime).toString();
-	const to = simplifyDate(timeRange.endTime).toString();
+	console.log(timeRange.type);
 
 	const updateURL = useCallback(
 		(id: string) => {
+			if (timeRange.type === 'custom') {
+				const startTime = simplifyDate(timeRange.startTime).toString();
+				const endTime = simplifyDate(timeRange.endTime).toString();
+				console.log(timeRange.type);
+				syncStoretoURL({ id, from: startTime, to: endTime });
+				return;
+			}
+			const interval: FixedDurations | undefined = FIXED_DURATIONS.find(
+				(duration) => duration.milliseconds === timeRange.interval,
+			);
+			if (interval) syncStoretoURL({ id, interval: interval?.label });
+		},
+		[timeRange],
+	);
+	const updateURLandDateTime = useCallback(
+		(id: string, from: string, to: string) => {
 			syncStoretoURL({ id, from, to });
 		},
 		[timeRange],
 	);
-	return { updateURL };
+	return { updateURL, updateURLandDateTime };
 };

src/pages/Stream/Views/Explore/useLogsFetcher.ts

@@ -17,6 +17,8 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
 	const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0;
 	const showTable = hasContentLoaded && !hasNoData && !errorMessage;
 
+	console.log(timeRange.type);
+
 	useEffect(() => {
 		setLogsStore(setCleanStoreForStreamChange);
 	}, [currentStream]);

src/pages/Stream/providers/LogsProvider.tsx

@@ -8,6 +8,7 @@ import { getPageSlice } from '../utils';
 import _ from 'lodash';
 import { sanitizeCSVData } from '@/utils/exportHelpers';
 import timeRangeUtils from '@/utils/timeRangeUtils';
+import { getAllParams, parseDate } from '@/url-sync/syncStore';
 
 const { makeTimeRangeLabel } = timeRangeUtils;
 
@@ -119,9 +120,9 @@ type LiveTailConfig = {
 const getDefaultTimeRange = (duration: FixedDuration = DEFAULT_FIXED_DURATIONS) => {
 	const now = dayjs().startOf('minute');
 	const { milliseconds } = duration;
-
-	const startTime = now.subtract(milliseconds, 'milliseconds');
-	const endTime = now;
+	const { from, to } = getAllParams();
+	const startTime = from ? parseDate(from) : now.subtract(milliseconds, 'milliseconds');
+	const endTime = to ? parseDate(to) : now;
 	const label = makeTimeRangeLabel(startTime.toDate(), endTime.toDate());
 
 	return {
@@ -993,7 +994,7 @@ const logsStoreReducers: LogsStoreReducers = {
 	setDisabledColumns,
 	setOrderedHeaders,
 	toggleWordWrap,
-	toggleWrapDisabledColumns
+	toggleWrapDisabledColumns,
 };
 
 export { LogsProvider, useLogsStore, logsStoreReducers };

src/url-sync/syncStore.ts

@@ -29,5 +29,6 @@ export const simplifyDate = (dateTime: Date) => {
 };
 
 export const parseDate = (dateTime: string) => {
-	return dayjs(dateTime, 'DD-MMM-YYYY_HH:mm', true);
+	const fomatDateForParsing = dateTime.replace('_', ' ');
+	return dayjs(fomatDateForParsing, 'DD-MMM-YYYY_HH:mm', true);
 };