feat: add option to sort by a column

src/@types/parseable/api/query.ts

@@ -4,9 +4,18 @@ export type LogsQuery = {
 	endTime: Date;
 };
 
+export enum SortOrder {
+	ASCENDING = 1,
+	DESCENDING = -1
+}
+
 export type LogsSearch = {
 	search: string;
 	filters: Record<string, string[]>;
+	sort: {
+		field: string,
+		order: SortOrder
+	}
 };
 
 export type LogsData = {

src/hooks/useQueryLogs.ts

@@ -1,4 +1,4 @@
-import type { Log, LogsData, LogsQuery, LogsSearch } from '@/@types/parseable/api/query';
+import { SortOrder, type Log, type LogsData, type LogsQuery, type LogsSearch } from '@/@types/parseable/api/query';
 import { getQueryLogs } from '@/api/query';
 import { StatusCodes } from 'http-status-codes';
 import useMountedState from './useMountedState';
@@ -15,14 +15,21 @@ export const useQueryLogs = () => {
 	const [error, setError] = useMountedState<string | null>(null);
 	const [loading, setLoading] = useMountedState<boolean>(true);
 	const [pageLogData, setPageLogData] = useMountedState<LogsData | null>(null);
-	const [querySearch, setQuerySearch] = useMountedState<LogsSearch>({ search: '', filters: {} });
+	const [querySearch, setQuerySearch] = useMountedState<LogsSearch>({ 
+		search: '', 
+		filters: {}, 
+		sort: { 
+			field: 'p_timestamp', 
+			order: SortOrder.DESCENDING 
+		} 
+	});
 	const [isPending, startTransition] = useTransition();
 
 	const data: Log[] | null = useMemo(() => {
 		if (_dataRef.current) {
 			const logs = _dataRef.current;
 			const temp = [];
-			const { search, filters } = querySearch;
+			const { search, filters, sort } = querySearch;
 			const searchText = search.trim().toLowerCase();
 			const filteredKeys = Object.keys(filters);
 
@@ -51,6 +58,18 @@ export const useQueryLogs = () => {
 				}
 			}
 
+			const { field, order } = sort;
+
+			temp.sort(({[field]: aData}, {[field]: bData}) => {
+				let res = 0
+				if (aData === bData) res = 0;
+				else if (aData === null) res = -1;
+				else if (bData === null) res = 1;
+				else res = aData > bData ? 1 : -1;
+
+				return res*order;
+			})
+
 			return temp;
 		}
 
@@ -139,6 +158,7 @@ export const useQueryLogs = () => {
 		pageLogData,
 		setQuerySearch,
 		getColumnFilters,
+		sort: querySearch.sort,
 		error,
 		loading: loading || isPending,
 		getQueryData,

src/layouts/MainLayout/Context.tsx

@@ -1,4 +1,4 @@
-import type { LogsQuery, LogsSearch } from '@/@types/parseable/api/query';
+import { SortOrder, type LogsQuery, type LogsSearch } from '@/@types/parseable/api/query';
 import useSubscribeState, { SubData } from '@/hooks/useSubscribeState';
 import dayjs from 'dayjs';
 import type { FC } from 'react';
@@ -72,6 +72,10 @@ const MainLayoutPageProvider: FC<HeaderProviderProps> = ({ children }) => {
 	const subLogSearch = useSubscribeState<LogsSearch>({
 		search: '',
 		filters: {},
+		sort: {
+			field: 'p_timestamp',
+			order: SortOrder.DESCENDING
+		}
 	});
 	const subLogSelectedTimeRange = useSubscribeState<string>(DEFAULT_FIXED_DURATIONS.name);
 	const subRefreshInterval = useSubscribeState<number | null>(null);

src/pages/Logs/Column.tsx

@@ -1,7 +1,7 @@
-import type { Log } from '@/@types/parseable/api/query';
+import { Log, SortOrder } from '@/@types/parseable/api/query';
 import { Box, Checkbox, Popover, Text, TextInput, Tooltip, UnstyledButton, px } from '@mantine/core';
 import { type ChangeEvent, type FC, Fragment, useTransition, useRef, useCallback, useMemo } from 'react';
-import { IconFilter, IconSearch } from '@tabler/icons-react';
+import { IconFilter, IconSearch, IconSortAscending, IconSortDescending } from '@tabler/icons-react';
 import useMountedState from '@/hooks/useMountedState';
 import { useTableColumnStyle } from './styles';
 import EmptyBox from '@/components/Empty';
@@ -12,15 +12,58 @@ import compare from 'just-compare';
 import { parseLogData } from '@/utils';
 import { useDisclosure } from '@mantine/hooks';
 
+type SortWidgetProps = {
+	setSortOrder: (order: SortOrder | null) => void;
+	fieldSortOrder: SortOrder | null;
+}
+
+/**
+ * Component that allows selecting sorting by a given field
+ */
+const SortWidget: FC<SortWidgetProps> = (props) => {
+	const { setSortOrder, fieldSortOrder } = props;
+	const toggleAscending = () => {
+		setSortOrder(
+			fieldSortOrder === SortOrder.ASCENDING ?
+				null
+					:
+				SortOrder.ASCENDING
+		)
+	}
+	const toggleDescending = () => {
+		setSortOrder(
+			fieldSortOrder === SortOrder.DESCENDING ?
+				null
+					:
+				SortOrder.DESCENDING
+		)
+	}
+
+	return <>
+		<IconSortAscending
+			cursor={'pointer'}
+			onClick={toggleAscending}
+			stroke={fieldSortOrder === SortOrder.ASCENDING ? 2 : 1}
+		/>
+		<IconSortDescending
+			cursor={'pointer'}
+			onClick={toggleDescending}
+			stroke={fieldSortOrder === SortOrder.DESCENDING ? 2 : 1}
+		/>
+	</>
+}
+
 type Column = {
 	columnName: string;
 	getColumnFilters: (columnName: string) => Log[number][] | null;
 	appliedFilter: (columnName: string) => string[];
 	applyFilter: (columnName: string, value: string[]) => void;
+	setSorting: (order: SortOrder | null) => void;
+	fieldSortOrder: SortOrder | null
 };
 
 const Column: FC<Column> = (props) => {
-	const { columnName, getColumnFilters, appliedFilter, applyFilter } = props;
+	const { columnName, getColumnFilters, appliedFilter, applyFilter, setSorting, fieldSortOrder } = props;
 
 	// columnValues ref will always have the unfiltered data.
 	const _columnValuesRef = useRef<Log[number][] | null>(null);
@@ -87,6 +130,7 @@ const Column: FC<Column> = (props) => {
 				</Popover.Target>
 				<Popover.Dropdown>
 					<Box>
+						<SortWidget setSortOrder={setSorting} fieldSortOrder={fieldSortOrder}/>
 						<Text mb="xs">Filter by values:</Text>
 						<TextInput
 							className={searchInputStyle}

src/pages/Logs/LogTable.tsx

@@ -18,6 +18,7 @@ import Column from './Column';
 import FilterPills from './FilterPills';
 import { useHeaderContext } from '@/layouts/MainLayout/Context';
 import dayjs from 'dayjs';
+import { SortOrder } from '@/@types/parseable/api/query';
 
 const skipFields = ['p_metadata', 'p_tags'];
 
@@ -50,6 +51,7 @@ const LogTable: FC = () => {
 		loading: logsLoading,
 		error: logsError,
 		resetData: resetLogsData,
+		sort
 	} = useQueryLogs();
 
 	const appliedFilter = (key: string) => {
@@ -79,6 +81,29 @@ const LogTable: FC = () => {
 		setColumnToggles(new Map(columnToggles.set(columnName, value)));
 	};
 
+	/**
+	 * Function to get a setter to set sort order on a given field
+	 */
+	const sortingSetter = (columName: string) => {
+		return (order: SortOrder | null) => {
+			setQuerySearch((prev) => {
+				const sort = {
+					field: 'p_timestamp',
+					order: SortOrder.DESCENDING
+				}
+				if (order !== null) {
+					sort.field = columName;
+					sort.order = order;
+				}
+
+				return {
+					...prev,
+					sort
+				}
+			})
+		}
+	}
+
 	const onRetry = () => {
 		const query = subLogQuery.get();
 
@@ -157,13 +182,15 @@ const LogTable: FC = () => {
 						appliedFilter={appliedFilter}
 						applyFilter={applyFilter}
 						getColumnFilters={getColumnFilters}
+						setSorting={sortingSetter(field.name)}
+						fieldSortOrder={sort.field === field.name ? sort.order : null}
 					/>
 				);
 			});
 		}
 
 		return null;
-	}, [logsSchema, columnToggles, logs]);
+	}, [logsSchema, columnToggles, logs, sort]);
 
 	const { classes } = useLogTableStyles();