feat: Log Count for correlation page

src/api/query.ts

@@ -18,6 +18,7 @@ type CorrelationLogs = {
 	startTime: Date;
 	endTime: Date;
 	limit: number;
+	pageOffset: number;
 	correlationCondition?: string;
 	selectedFields?: string[];
 };
@@ -68,6 +69,12 @@ export const getCorrelationQueryLogsWithHeaders = (logsQuery: CorrelationLogs) =
 	return Axios().post<LogsResponseWithHeaders>(endPoint, queryBuilder.getCorrelationQuery(), {});
 };
 
+export const getCorrelationQueryCount = (logsQuery: CorrelationLogs) => {
+	const queryBuilder = new CorrelationQueryBuilder(logsQuery);
+	const endPoint = LOG_QUERY_URL();
+	return Axios().post<Log[]>(endPoint, makeCustomQueryRequestData(logsQuery, queryBuilder.getCountQuery()), {});
+};
+
 export const getStreamDataWithHeaders = (logsQuery: CorrelationLogs) => {
 	const queryBuilder = new CorrelationQueryBuilder(logsQuery);
 	const endPoint = LOG_QUERY_URL({ fields: true }, queryBuilder.getResourcePath());
@@ -76,7 +83,7 @@ export const getStreamDataWithHeaders = (logsQuery: CorrelationLogs) => {
 
 // ------ Custom sql query
 
-const makeCustomQueryRequestData = (logsQuery: LogsQuery, query: string) => {
+const makeCustomQueryRequestData = (logsQuery: LogsQuery | CorrelationLogs, query: string) => {
 	const { startTime, endTime } = logsQuery;
 	return { query, startTime: optimizeTime(startTime), endTime: optimizeTime(endTime) };
 };

src/components/Navbar/components/CorrelationIcon.tsx

@@ -7,21 +7,28 @@ export const CorrelationIcon = forwardRef<
 		strokeWidth?: number;
 	}
 >(({ stroke, strokeWidth }, ref) => (
-	<svg ref={ref} height="1.2rem" width="1.2rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path
-			d="M13.3333 17.3333L14.6667 18.6667C15.0203 19.0203 15.4999 19.219 16 19.219C16.5001 19.219 16.9797 19.0203 17.3333 18.6667L22.6667 13.3333C23.0203 12.9797 23.219 12.5001 23.219 12C23.219 11.4999 23.0203 11.0203 22.6667 10.6667L17.3333 5.33333C16.9797 4.97971 16.5001 4.78105 16 4.78105C15.4999 4.78105 15.0203 4.97971 14.6667 5.33333L9.33333 10.6667C8.97971 11.0203 8.78105 11.4999 8.78105 12C8.78105 12.5001 8.97971 12.9797 9.33333 13.3333L10.6667 14.6667"
-			stroke={stroke}
-			strokeWidth={strokeWidth}
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-		<path
-			d="M10.6667 6.66667L9.33333 5.33333C8.97971 4.97971 8.5001 4.78105 8 4.78105C7.4999 4.78105 7.02029 4.97971 6.66667 5.33333L1.33333 10.6667C0.979711 11.0203 0.781049 11.4999 0.781049 12C0.781049 12.5001 0.979711 12.9797 1.33333 13.3333L6.66667 18.6667C7.02029 19.0203 7.4999 19.219 8 19.219C8.5001 19.219 8.97971 19.0203 9.33333 18.6667L14.6667 13.3333C15.0203 12.9797 15.219 12.5001 15.219 12C15.219 11.4999 15.0203 11.0203 14.6667 10.6667L13.3333 9.33333"
-			stroke={stroke}
-			strokeWidth={strokeWidth}
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
+	<svg ref={ref} height="1.2rem" width="1.2rem" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clipPath="url(#clip0_481_602)">
+			<path
+				d="M16.3953 21.6621L18.0485 23.3153C18.4869 23.7537 19.0815 24 19.7015 24C20.3215 24 20.9161 23.7537 21.3545 23.3153L27.9669 16.7029C28.4053 16.2645 28.6516 15.6699 28.6516 15.0499C28.6516 14.4299 28.4053 13.8353 27.9669 13.3969L21.3545 6.78457C20.9161 6.34615 20.3215 6.09985 19.7015 6.09985C19.0815 6.09985 18.4869 6.34615 18.0485 6.78457L11.4362 13.3969C10.9978 13.8353 10.7515 14.4299 10.7515 15.0499C10.7515 15.6699 10.9978 16.2645 11.4362 16.7029L13.0893 18.3561"
+				stroke={stroke}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M13.0892 8.43764L11.4361 6.78457C10.9977 6.34615 10.4031 6.09985 9.78305 6.09985C9.16303 6.09985 8.56841 6.34615 8.12999 6.78457L1.51772 13.3969C1.07931 13.8353 0.833008 14.4299 0.833008 15.0499C0.833008 15.6699 1.07931 16.2645 1.51772 16.7029L8.12999 23.3153C8.56841 23.7537 9.16303 24 9.78305 24C10.4031 24 10.9977 23.7537 11.4361 23.3153L18.0484 16.7029C18.4868 16.2645 18.7332 15.6699 18.7332 15.0499C18.7332 14.4299 18.4868 13.8353 18.0484 13.3969L16.3953 11.7438"
+				stroke={stroke}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<rect x="7" y="-0.199951" width="25" height="10.5" rx="3" fill="#2DD4BF" />
+			<path
+				d="M11.5503 5.49194H9.90674L9.89795 4.58667H11.2778C11.521 4.58667 11.7202 4.55591 11.8755 4.49438C12.0308 4.42993 12.1465 4.33765 12.2227 4.21753C12.3018 4.09448 12.3413 3.94507 12.3413 3.76929C12.3413 3.57007 12.3032 3.40894 12.2271 3.28589C12.1538 3.16284 12.0381 3.07349 11.8799 3.01782C11.7246 2.96216 11.5239 2.93433 11.2778 2.93433H10.3638V8.30005H9.04541V1.90161H11.2778C11.6499 1.90161 11.9824 1.93677 12.2754 2.00708C12.5713 2.07739 12.8218 2.18433 13.0269 2.32788C13.2319 2.47144 13.3887 2.65308 13.4971 2.8728C13.6055 3.0896 13.6597 3.34741 13.6597 3.64624C13.6597 3.90991 13.5996 4.15308 13.4795 4.37573C13.3623 4.59839 13.1763 4.78003 12.9214 4.92065C12.6694 5.06128 12.3398 5.13892 11.9326 5.15356L11.5503 5.49194ZM11.4932 8.30005H9.54639L10.0605 7.27173H11.4932C11.7246 7.27173 11.9136 7.23511 12.0601 7.16187C12.2065 7.08569 12.3149 6.98315 12.3853 6.85425C12.4556 6.72534 12.4907 6.57739 12.4907 6.4104C12.4907 6.2229 12.4585 6.0603 12.394 5.92261C12.3325 5.78491 12.2329 5.67944 12.0952 5.6062C11.9575 5.53003 11.7759 5.49194 11.5503 5.49194H10.2803L10.2891 4.58667H11.8711L12.1743 4.94263C12.564 4.93677 12.8774 5.00562 13.1147 5.14917C13.355 5.28979 13.5293 5.4729 13.6377 5.69849C13.749 5.92407 13.8047 6.16577 13.8047 6.42358C13.8047 6.83374 13.7153 7.17944 13.5366 7.46069C13.3579 7.73901 13.0957 7.94849 12.75 8.08911C12.4072 8.22974 11.9883 8.30005 11.4932 8.30005ZM19.0869 7.27173V8.30005H15.6812V7.27173H19.0869ZM16.1118 1.90161V8.30005H14.7935V1.90161H16.1118ZM18.6431 4.50757V5.50952H15.6812V4.50757H18.6431ZM19.0825 1.90161V2.93433H15.6812V1.90161H19.0825ZM22.8047 1.90161V8.30005H21.4907V1.90161H22.8047ZM24.7734 1.90161V2.93433H19.5527V1.90161H24.7734ZM27.6519 2.99585L25.9116 8.30005H24.5098L26.8872 1.90161H27.7793L27.6519 2.99585ZM29.0977 8.30005L27.353 2.99585L27.2124 1.90161H28.1133L30.5039 8.30005H29.0977ZM29.0186 5.91821V6.95093H25.6392V5.91821H29.0186Z"
+				fill="black"
+			/>
+		</g>
 	</svg>
 ));
 

src/hooks/useCorrelationQueryLogs.tsx

@@ -1,19 +1,21 @@
-import { getCorrelationQueryLogsWithHeaders } from '@/api/query';
-import useMountedState from './useMountedState';
-import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
-import _ from 'lodash';
-import { AxiosError } from 'axios';
-import { useStreamStore } from '@/pages/Stream/providers/StreamProvider';
 import {
 	CORRELATION_LOAD_LIMIT,
 	correlationStoreReducers,
 	useCorrelationStore,
 } from '@/pages/Correlation/providers/CorrelationProvider';
+
+import { AxiosError } from 'axios';
+import { LogsResponseWithHeaders } from '@/@types/parseable/api/query';
+import _ from 'lodash';
+import { getCorrelationQueryLogsWithHeaders } from '@/api/query';
 import { notifyError } from '@/utils/notification';
+import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import useMountedState from './useMountedState';
 import { useQuery } from 'react-query';
-import { LogsResponseWithHeaders } from '@/@types/parseable/api/query';
+import { useState } from 'react';
+import { useStreamStore } from '@/pages/Stream/providers/StreamProvider';
 
-const { setStreamData } = correlationStoreReducers;
+const { setStreamData, setIsCorrelatedFlag } = correlationStoreReducers;
 
 export const useCorrelationQueryLogs = () => {
 	const [error, setError] = useMountedState<string | null>(null);
@@ -22,6 +24,7 @@ export const useCorrelationQueryLogs = () => {
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp');
 	const [timeRange] = useAppStore((store) => store.timeRange);
+	const [loadingState, setLoading] = useState<boolean>(true);
 	const [
 		{
 			tableOpts: { currentOffset },
@@ -39,13 +42,10 @@ export const useCorrelationQueryLogs = () => {
 		correlationCondition: correlationCondition,
 	};
 
-	const {
-		isLoading: logsLoading,
-		isRefetching: logsRefetching,
-		refetch: getCorrelationData,
-	} = useQuery(
+	const { refetch: getCorrelationData } = useQuery(
 		['fetch-logs', defaultQueryOpts],
 		async () => {
+			setLoading(true);
 			const queryOpts = { ...defaultQueryOpts, streamNames };
 			const response = await getCorrelationQueryLogsWithHeaders(queryOpts);
 			return [response];
@@ -54,6 +54,7 @@ export const useCorrelationQueryLogs = () => {
 			enabled: false,
 			refetchOnWindowFocus: false,
 			onSuccess: async (responses) => {
+				setLoading(false);
 				responses.map((data: { data: LogsResponseWithHeaders }) => {
 					const logs = data.data;
 					const isInvalidResponse = _.isEmpty(logs) || _.isNil(logs);
@@ -63,13 +64,15 @@ export const useCorrelationQueryLogs = () => {
 					if (fields.length > 0 && !correlationCondition) {
 						return setCorrelationStore((store) => setStreamData(store, currentStream || '', records));
 					} else if (fields.length > 0 && correlationCondition) {
+						setCorrelationStore((store) => setIsCorrelatedFlag(store, true));
 						return setCorrelationStore((store) => setStreamData(store, 'correlatedStream', records));
 					} else {
 						notifyError({ message: `${currentStream} doesn't have any fields` });
 					}
 				});
 			},
 			onError: (data: AxiosError) => {
+				setLoading(false);
 				const errorMessage = data.response?.data as string;
 				setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to query logs');
 			},
@@ -78,7 +81,7 @@ export const useCorrelationQueryLogs = () => {
 
 	return {
 		error,
-		loading: logsLoading || logsRefetching,
+		loadingState,
 		getCorrelationData,
 	};
 };

src/hooks/useCorrelations.tsx

@@ -1,18 +1,11 @@
 import { useMutation, useQuery } from 'react-query';
 import _ from 'lodash';
 
-import {
-	deleteSavedCorrelation,
-	getCorrelationById,
-	getCorrelations,
-	saveCorrelation,
-	updateCorrelation,
-} from '@/api/correlations';
+import { deleteSavedCorrelation, getCorrelations, saveCorrelation, updateCorrelation } from '@/api/correlations';
 import { correlationStoreReducers, useCorrelationStore } from '@/pages/Correlation/providers/CorrelationProvider';
 import { notifyError, notifySuccess } from '@/utils/notification';
 import { AxiosError, isAxiosError } from 'axios';
 import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
-import dayjs from 'dayjs';
 
 const {
 	setCorrelations,
@@ -22,7 +15,7 @@ const {
 	cleanCorrelationStore,
 	toggleSavedCorrelationsModal,
 } = correlationStoreReducers;
-const { setTimeRange, syncTimeRange } = appStoreReducers;
+const { syncTimeRange } = appStoreReducers;
 export const useCorrelationsQuery = () => {
 	const [{ correlationId }, setCorrelatedStore] = useCorrelationStore((store) => store);
 	const [, setAppStore] = useAppStore((store) => store);
@@ -44,30 +37,6 @@ export const useCorrelationsQuery = () => {
 		},
 	});
 
-	const {
-		mutate: getCorrelationByIdMutation,
-		isError: fetchCorrelationIdError,
-		isSuccess: fetchCorrelationIdSuccess,
-		isLoading: fetchCorrelationIdLoading,
-	} = useMutation((correlationId: string) => getCorrelationById(correlationId), {
-		onSuccess: (data: any) => {
-			data.data.startTime &&
-				data.data.endTime &&
-				setAppStore((store) =>
-					setTimeRange(store, {
-						startTime: dayjs(data.data.startTime),
-						endTime: dayjs(data.data.endTime),
-						type: 'custom',
-					}),
-				);
-			setCorrelatedStore((store) => setCorrelationId(store, data.data.id));
-			setCorrelatedStore((store) => setActiveCorrelation(store, data.data));
-		},
-		onError: () => {
-			notifyError({ message: 'Failed to fetch correlation' });
-		},
-	});
-
 	const { mutate: deleteSavedCorrelationMutation, isLoading: isDeleting } = useMutation(
 		(data: { correlationId: string; onSuccess?: () => void }) => deleteSavedCorrelation(data.correlationId),
 		{
@@ -143,11 +112,6 @@ export const useCorrelationsQuery = () => {
 		deleteSavedCorrelationMutation,
 		isDeleting,
 
-		fetchCorrelationIdError,
-		fetchCorrelationIdSuccess,
-		fetchCorrelationIdLoading,
-		getCorrelationByIdMutation,
-
 		saveCorrelationMutation,
 		isCorrelationSaving,
 

src/layouts/MainLayout/providers/AppProvider.tsx

@@ -1,11 +1,12 @@
-import { LogStreamData } from '@/@types/parseable/api/stream';
-import initContext from '@/utils/initContext';
+import { FIXED_DURATIONS, FixedDuration } from '@/constants/timeConstants';
+import dayjs, { Dayjs } from 'dayjs';
+
 import { AboutData } from '@/@types/parseable/api/about';
-import _ from 'lodash';
 import { AxiosResponse } from 'axios';
+import { LogStreamData } from '@/@types/parseable/api/stream';
 import { SavedFilterType } from '@/@types/parseable/api/savedFilters';
-import { FIXED_DURATIONS, FixedDuration } from '@/constants/timeConstants';
-import dayjs, { Dayjs } from 'dayjs';
+import _ from 'lodash';
+import initContext from '@/utils/initContext';
 import timeRangeUtils from '@/utils/timeRangeUtils';
 
 const { makeTimeRangeLabel } = timeRangeUtils;
@@ -57,6 +58,7 @@ type AppStore = {
 	helpModalOpen: boolean;
 	createStreamModalOpen: boolean;
 	currentStream: null | string;
+	streamForCorrelation: null | string;
 	userRoles: UserRoles | null;
 	userSpecificStreams: null | LogStreamData;
 	userAccessMap: { [key: string]: boolean };
@@ -76,6 +78,7 @@ type AppStoreReducers = {
 	toggleMaximize: (store: AppStore) => ReducerOutput;
 	toggleHelpModal: (store: AppStore, val?: boolean) => ReducerOutput;
 	changeStream: (store: AppStore, stream: string) => ReducerOutput;
+	setStreamForCorrelation: (store: AppStore, stream: string) => ReducerOutput;
 	setUserRoles: (store: AppStore, roles: UserRoles | null) => ReducerOutput;
 	setshiftInterval: (store: AppStore, interval: number) => ReducerOutput;
 	syncTimeRange: (store: AppStore) => ReducerOutput;
@@ -93,6 +96,7 @@ const initialState: AppStore = {
 	maximized: false,
 	helpModalOpen: false,
 	currentStream: null,
+	streamForCorrelation: null,
 	userRoles: null,
 	userSpecificStreams: null,
 	userAccessMap: {},
@@ -208,6 +212,10 @@ const changeStream = (store: AppStore, stream: string) => {
 	return { currentStream: stream, activeSavedFilters };
 };
 
+const setStreamForCorrelation = (_store: AppStore, stream: string) => {
+	return { streamForCorrelation: stream };
+};
+
 const setUserRoles = (_store: AppStore, roles: UserRoles | null) => {
 	return { userRoles: roles };
 };
@@ -240,6 +248,7 @@ const appStoreReducers: AppStoreReducers = {
 	toggleMaximize,
 	toggleHelpModal,
 	changeStream,
+	setStreamForCorrelation,
 	setUserRoles,
 	setUserSpecificStreams,
 	setUserAccessMap,

src/pages/Correlation/Views/CorrelationFooter.tsx

@@ -1,6 +1,6 @@
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useEffect } from 'react';
 import { usePagination } from '@mantine/hooks';
-import { Box, Center, Group, Menu, Pagination, Stack } from '@mantine/core';
+import { Box, Center, Group, Menu, Pagination, Stack, Tooltip } from '@mantine/core';
 import _ from 'lodash';
 import { Text } from '@mantine/core';
 import { IconSelector } from '@tabler/icons-react';
@@ -9,9 +9,37 @@ import classes from '../styles/Footer.module.css';
 import { LOGS_FOOTER_HEIGHT } from '@/constants/theme';
 import { correlationStoreReducers, useCorrelationStore } from '@/pages/Correlation/providers/CorrelationProvider';
 import { LOG_QUERY_LIMITS, LOAD_LIMIT } from '@/pages/Stream/providers/LogsProvider';
+import { HumanizeNumber } from '@/utils/formatBytes';
 
 const { setCurrentOffset, setCurrentPage, setPageAndPageData } = correlationStoreReducers;
 
+const TotalCount = (props: { totalCount: number }) => {
+	return (
+		<Tooltip label={props.totalCount}>
+			<Text style={{ fontSize: '0.7rem' }}>{HumanizeNumber(props.totalCount)}</Text>
+		</Tooltip>
+	);
+};
+
+const TotalLogsCount = (props: { hasTableLoaded: boolean; isTableEmpty: boolean }) => {
+	const [{ totalCount, perPage, pageData }] = useCorrelationStore((store) => store.tableOpts);
+	const displayedCount = _.size(pageData);
+	const showingCount = displayedCount < perPage ? displayedCount : perPage;
+	if (typeof totalCount !== 'number' || typeof displayedCount !== 'number') return <Stack />;
+
+	return (
+		<Stack style={{ alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} gap={6}>
+			{!props.isTableEmpty ? (
+				<>
+					<Text style={{ fontSize: '0.7rem' }}>{`Showing ${showingCount} out of`}</Text>
+					<TotalCount totalCount={totalCount} />
+					<Text style={{ fontSize: '0.7rem' }}>records</Text>
+				</>
+			) : null}
+		</Stack>
+	);
+};
+
 const LimitControl: FC = () => {
 	const [opened, setOpened] = useMountedState(false);
 	const [perPage, setCorrelationStore] = useCorrelationStore((store) => store.tableOpts.perPage);
@@ -58,12 +86,18 @@ const LimitControl: FC = () => {
 
 const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: boolean }) => {
 	const [tableOpts, setCorrelationStore] = useCorrelationStore((store) => store.tableOpts);
-	const { totalPages, currentOffset, currentPage, perPage, totalCount } = tableOpts;
+	const [isCorrelatedData] = useCorrelationStore((store) => store.isCorrelatedData);
+	const { totalPages, currentOffset, currentPage, perPage, totalCount, targetPage } = tableOpts;
 
 	const onPageChange = useCallback((page: number) => {
-		setCorrelationStore((store) => setPageAndPageData(store, page));
+		setCorrelationStore((store) => setPageAndPageData(store, page, perPage));
 	}, []);
 
+	useEffect(() => {
+		if (!props.loaded) return;
+		pagination.setPage(targetPage ? targetPage : 1);
+	}, [props.loaded]);
+
 	const pagination = usePagination({ total: totalPages ?? 1, initialPage: 1, onChange: onPageChange });
 	const onChangeOffset = useCallback(
 		(key: 'prev' | 'next') => {
@@ -87,11 +121,9 @@ const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetch
 	return (
 		<Stack className={classes.footerContainer} gap={0} style={{ height: LOGS_FOOTER_HEIGHT }}>
 			<Stack w="100%" justify="center" align="flex-start">
-				{/* <TotalLogsCount
-					hasTableLoaded={props.loaded}
-					isFetchingCount={props.isFetchingCount}
-					isTableEmpty={props.hasNoData}
-				/> */}
+				{isCorrelatedData && totalCount > 0 && (
+					<TotalLogsCount hasTableLoaded={props.loaded} isTableEmpty={props.hasNoData} />
+				)}
 			</Stack>
 			<Stack w="100%" justify="center">
 				{props.loaded ? (