Feat: Column filtering

src/hooks/useQueryLogs.ts

@@ -40,7 +40,7 @@ export const useQueryLogs = () => {
 
 				if (searchText) {
 					for (const key in log) {
-						const logValue = parseLogData(log[key]);
+						const logValue = parseLogData(log[key], key);
 						if (logValue?.toString().toLowerCase().includes(searchText)) {
 							temp.push(log);
 							continue mainLoop;

src/pages/Logs/Column.tsx

@@ -13,20 +13,20 @@ import { parseLogData } from '@/utils';
 import { useDisclosure } from '@mantine/hooks';
 
 type Column = {
-	label: string;
+	columnName: string;
 	getColumnFilters: (columnName: string) => Log[number][] | null;
 	appliedFilter: (columnName: string) => string[];
 	applyFilter: (columnName: string, value: string[]) => void;
 };
 
 const Column: FC<Column> = (props) => {
-	const { label, getColumnFilters, appliedFilter, applyFilter } = props;
+	const { columnName, getColumnFilters, appliedFilter, applyFilter } = props;
 
 	// columnValues ref will always have the unfiltered data.
 	const _columnValuesRef = useRef<Log[number][] | null>(null);
 
 	const [columnValues, setColumnValues] = useMountedState<Log[number][] | null>(null);
-	const [selectedFilters, setSelectedFilters] = useMountedState<string[]>(appliedFilter(label));
+	const [selectedFilters, setSelectedFilters] = useMountedState<string[]>(appliedFilter(columnName));
 	const [isPending, startTransition] = useTransition();
 
 	const onSearch = (e: ChangeEvent<HTMLInputElement>) => {
@@ -37,7 +37,7 @@ const Column: FC<Column> = (props) => {
 
 			if (values && search) {
 				return values.filter((x) => {
-					return parseLogData(x)?.toString().includes(search);
+					return parseLogData(x, columnName)?.toString().includes(search);
 				});
 			}
 
@@ -51,19 +51,19 @@ const Column: FC<Column> = (props) => {
 
 	const onOpen = useCallback(() => {
 		if (!_columnValuesRef.current) {
-			_columnValuesRef.current = getColumnFilters(label);
+			_columnValuesRef.current = getColumnFilters(columnName);
 			startTransition(() => {
 				setColumnValues(_columnValuesRef.current);
 			});
 		}
 	}, []);
 
 	const onApply = () => {
-		applyFilter(label, selectedFilters);
+		applyFilter(columnName, selectedFilters);
 	};
 
-	const filterActive = useMemo(() => !!appliedFilter(label)?.length, [selectedFilters]);
-	const canApply = useMemo(() => !compare(selectedFilters, appliedFilter(label)), [selectedFilters]);
+	const filterActive = useMemo(() => Boolean(appliedFilter(columnName)?.length), [selectedFilters]);
+	const canApply = useMemo(() => !compare(selectedFilters, appliedFilter(columnName)), [selectedFilters]);
 
 	const { classes, cx } = useTableColumnStyle();
 	const { labelBtn, applyBtn, labelIcon, labelIconActive, searchInputStyle } = classes;
@@ -73,7 +73,7 @@ const Column: FC<Column> = (props) => {
 			<Popover position="bottom" withArrow withinPortal shadow="md" zIndex={1} onOpen={onOpen}>
 				<Popover.Target>
 					<UnstyledButton className={labelBtn}>
-						<span className="label">{label}</span>
+						<span className="label">{columnName}</span>
 						<IconFilter
 							stroke={filterActive ? 3 : 1.8}
 							size={px('1rem')}
@@ -94,23 +94,20 @@ const Column: FC<Column> = (props) => {
 						/>
 						{isPending ? (
 							<Loading visible position="relative" variant="oval" my="xl" />
-						) : (
+						) : columnValues?.length ? (
 							<Fragment>
-								{columnValues?.length ? (
-									<Fragment>
-										<CheckboxVirtualList
-											list={columnValues}
-											selectedFilters={selectedFilters}
-											setFilters={setFilters}
-										/>
-										<Button className={applyBtn} onClick={onApply} disabled={!canApply}>
-											Apply
-										</Button>
-									</Fragment>
-								) : (
-									<EmptyBox mb="lg" />
-								)}
+								<CheckboxVirtualList
+									columnName={columnName}
+									list={columnValues}
+									selectedFilters={selectedFilters}
+									setFilters={setFilters}
+								/>
+								<Button className={applyBtn} onClick={onApply} disabled={!canApply}>
+									Apply
+								</Button>
 							</Fragment>
+						) : (
+							<EmptyBox mb="lg" />
 						)}
 					</Box>
 				</Popover.Dropdown>
@@ -120,21 +117,22 @@ const Column: FC<Column> = (props) => {
 };
 
 type CheckboxVirtualListProps = {
+	columnName: string;
 	list: Log[number][];
 	selectedFilters: string[];
 	setFilters: (value: string[]) => void;
 };
 
 const CheckboxVirtualList: FC<CheckboxVirtualListProps> = (props) => {
-	const { list, selectedFilters, setFilters } = props;
+	const { list, selectedFilters, setFilters, columnName } = props;
 
 	return (
 		<Checkbox.Group value={selectedFilters} onChange={setFilters}>
 			<List itemCount={list.length} itemSize={35} height={250} width={250} overscanCount={10}>
 				{({ index }) => {
 					const label = list[index]?.toString() || '';
 
-					return <CheckboxRow key={index} value={label} label={label} />;
+					return <CheckboxRow key={index} value={label} label={label} columnName={columnName} />;
 				}}
 			</List>
 		</Checkbox.Group>
@@ -144,10 +142,11 @@ const CheckboxVirtualList: FC<CheckboxVirtualListProps> = (props) => {
 type CheckboxRowProps = {
 	label: string;
 	value: string;
+	columnName: string;
 };
 
 const CheckboxRow: FC<CheckboxRowProps> = (props) => {
-	const { value, label } = props;
+	const { value, label, columnName } = props;
 	const [opened, { open, close }] = useDisclosure(false);
 	const { classes } = useTableColumnStyle();
 	const { checkBoxStyle } = classes;
@@ -161,7 +160,7 @@ const CheckboxRow: FC<CheckboxRowProps> = (props) => {
 				maxWidth: 250,
 			}}>
 			<div onMouseOver={open} onMouseOut={close}>
-				<Checkbox value={value} label={parseLogData(label)} className={checkBoxStyle} />
+				<Checkbox value={value} label={parseLogData(label, columnName)} className={checkBoxStyle} />
 			</div>
 		</Tooltip>
 	);

src/pages/Logs/LogRow.tsx

@@ -42,7 +42,9 @@ const LogRow: FC<LogRowProps> = (props) => {
 						{logsSchema.map((logSchema, logSchemaIndex) => {
 							if (!isColumnActive(logSchema.name) || skipFields.includes(logSchema.name)) return null;
 
-							return <td key={`${logSchema.name}-${logSchemaIndex}`}>{parseLogData(log[logSchema.name])}</td>;
+							return (
+								<td key={`${logSchema.name}-${logSchemaIndex}`}>{parseLogData(log[logSchema.name], logSchema.name)}</td>
+							);
 						})}
 						<TdArrow />
 					</tr>

src/pages/Logs/LogTable.tsx

@@ -117,7 +117,7 @@ const LogTable: FC = () => {
 				return (
 					<Column
 						key={field.name}
-						label={field.name}
+						columnName={field.name}
 						appliedFilter={appliedFilter}
 						applyFilter={applyFilter}
 						getColumnFilters={getColumnFilters}

src/utils/index.ts

@@ -16,8 +16,10 @@ export const scrollTo = (opts?: ScrollToOptions) => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const parseLogData = (value?: any) => {
-	if (typeof value === 'string' && dayjs(value).isValid()) {
+export const parseLogData = (value?: any, columnName?: string) => {
+	const dateColumnNames = ['date', 'datetime', 'time', 'timestamp', 'p_timestamp'];
+
+	if (columnName && dateColumnNames.includes(columnName) && dayjs(value).isValid()) {
 		return dayjs(value).utc(true).format('DD/MM/YYYY HH:mm:ss');
 	}