feat: Log Count for correlation page

Author: praveen5959

src/api/query.ts

@@ -68,6 +68,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 +82,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/pages/Correlation/Views/CorrelationFooter.tsx

@@ -1,6 +1,6 @@
 import { FC, useCallback } 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,6 +86,7 @@ const LimitControl: FC = () => {
 
 const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: boolean }) => {
 	const [tableOpts, setCorrelationStore] = useCorrelationStore((store) => store.tableOpts);
+	const [isCorrelatedData] = useCorrelationStore((store) => store.isCorrelatedData);
 	const { totalPages, currentOffset, currentPage, perPage, totalCount } = tableOpts;
 
 	const onPageChange = useCallback((page: number) => {
@@ -84,14 +113,14 @@ const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetch
 		[currentOffset],
 	);
 
+	console.log('currentOffset', currentOffset);
+	// console.log(LOAD_LIMIT);
+	console.log('totalCount', totalCount);
+
 	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 && <TotalLogsCount hasTableLoaded={props.loaded} isTableEmpty={props.hasNoData} />}
 			</Stack>
 			<Stack w="100%" justify="center">
 				{props.loaded ? (

src/pages/Correlation/hooks/useCorrelationFetchCount.tsx

@@ -0,0 +1,63 @@
+import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import {
+	CORRELATION_LOAD_LIMIT,
+	correlationStoreReducers,
+	useCorrelationStore,
+} from '../providers/CorrelationProvider';
+import { useState } from 'react';
+import { useQuery } from 'react-query';
+import { getCorrelationQueryCount } from '@/api/query';
+import _ from 'lodash';
+import { useStreamStore } from '@/pages/Stream/providers/StreamProvider';
+
+const { setTotalCount } = correlationStoreReducers;
+
+export const useCorrelationFetchCount = () => {
+	const [timeRange] = useAppStore((store) => store.timeRange);
+	const [{ fields, tableOpts, selectedFields, correlationCondition }, setCorrelationData] = useCorrelationStore(
+		(store) => store,
+	);
+	const [streamInfo] = useStreamStore((store) => store.info);
+	const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp');
+	const [countLoading, setCountLoading] = useState(true);
+
+	const streamNames = Object.keys(fields);
+	const defaultQueryOpts = {
+		startTime: timeRange.startTime,
+		endTime: timeRange.endTime,
+		limit: CORRELATION_LOAD_LIMIT,
+		pageOffset: tableOpts.currentOffset,
+		timePartitionColumn,
+		selectedFields: _.flatMap(selectedFields, (values, key) => _.map(values, (value) => `${key}.${value}`)) || [],
+		correlationCondition: correlationCondition,
+	};
+	const queryOpts = { ...defaultQueryOpts, streamNames };
+
+	const { refetch: refetchCount } = useQuery(
+		['fetchCount', defaultQueryOpts],
+		async () => {
+			setCountLoading(true);
+			const data = await getCorrelationQueryCount(queryOpts);
+			const count = _.first(data.data)?.count;
+			typeof count === 'number' && setCorrelationData((store) => setTotalCount(store, count));
+			return data;
+		},
+		{
+			// query for count should always hit the endpoint for parseable query
+			refetchOnWindowFocus: false,
+			retry: false,
+			enabled: false,
+			onSuccess: () => {
+				setCountLoading(false);
+			},
+			onError: () => {
+				setCountLoading(false);
+			},
+		},
+	);
+
+	return {
+		countLoading,
+		refetchCount,
+	};
+};

src/pages/Correlation/index.tsx

@@ -31,6 +31,7 @@ import { useCorrelationsQuery } from '@/hooks/useCorrelations';
 import SavedCorrelationsButton from './components/SavedCorrelationsBtn';
 import SavedCorrelationsModal from './components/SavedCorrelationsModal';
 import SaveCorrelationModal from './components/SaveCorrelationModal';
+import { useCorrelationFetchCount } from './hooks/useCorrelationFetchCount';
 
 const { changeStream, syncTimeRange } = appStoreReducers;
 const {
@@ -78,6 +79,7 @@ const Correlation = () => {
 	const { getCorrelationData, loading: logsLoading, error: errorMessage } = useCorrelationQueryLogs();
 	const { getFetchStreamData, loading: streamsLoading } = useFetchStreamData();
 	const { fetchCorrelations, getCorrelationByIdMutation } = useCorrelationsQuery();
+	const { refetchCount, countLoading } = useCorrelationFetchCount();
 
 	// Local State
 	const [searchText, setSearchText] = useState('');
@@ -149,6 +151,7 @@ const Correlation = () => {
 
 	useEffect(() => {
 		if (isCorrelatedData) {
+			refetchCount();
 			getCorrelationData();
 		} else {
 			getFetchStreamData();
@@ -159,6 +162,7 @@ const Correlation = () => {
 		updateCorrelationCondition();
 		if (activeCorrelation && correlationCondition && isSavedCorrelation) {
 			setCorrelationData((store) => setIsCorrelatedFlag(store, true));
+			refetchCount();
 			getCorrelationData();
 		}
 		correlationCondition && setIsCorrelationEnabled(true);
@@ -474,6 +478,7 @@ const Correlation = () => {
 								onClick={() => {
 									setCorrelationData((store) => setIsCorrelatedFlag(store, true));
 									setIsCorrelationEnabled(false);
+									refetchCount();
 									getCorrelationData();
 								}}>
 								Correlate
@@ -496,7 +501,7 @@ const Correlation = () => {
 							{...{ errorMessage, logsLoading, streamsLoading, showTable, hasNoData }}
 							primaryHeaderHeight={primaryHeaderHeight}
 						/>
-						<CorrelationFooter loaded={showTable} hasNoData={hasNoData} isFetchingCount={true} />
+						<CorrelationFooter loaded={showTable} hasNoData={hasNoData} isFetchingCount={countLoading} />
 					</>
 				)}
 				{Object.keys(selectedFields).length === 0 && (

src/pages/Correlation/providers/CorrelationProvider.tsx

@@ -90,6 +90,7 @@ type CorrelationStoreReducers = {
 	toggleSaveCorrelationModal: (_store: CorrelationStore, val: boolean) => ReducerOutput;
 	cleanCorrelationStore: (store: CorrelationStore) => ReducerOutput;
 	setSavedCorrelationId: (store: CorrelationStore, id: string) => ReducerOutput;
+	setTotalCount: (store: CorrelationStore, count: number) => ReducerOutput;
 };
 
 const initialState: CorrelationStore = {
@@ -260,6 +261,15 @@ const cleanCorrelationStore = (store: CorrelationStore) => {
 	};
 };
 
+const setTotalCount = (store: CorrelationStore, totalCount: number) => {
+	return {
+		tableOpts: {
+			...store.tableOpts,
+			totalCount,
+		},
+	};
+};
+
 const toggleSaveCorrelationModal = (store: CorrelationStore, val: boolean) => {
 	return {
 		...store,
@@ -599,6 +609,7 @@ const correlationStoreReducers: CorrelationStoreReducers = {
 	setActiveCorrelation,
 	cleanCorrelationStore,
 	setSavedCorrelationId,
+	setTotalCount,
 };
 
 export { CorrelationProvider, useCorrelationStore, correlationStoreReducers };

src/utils/queryBuilder.ts

@@ -142,6 +142,12 @@ export class CorrelationQueryBuilder {
 		};
 	}
 
+	getCountQuery() {
+		return `WITH user_query_count as ( ${
+			this.getCorrelationQuery().query
+		} )SELECT count(*) as count from user_query_count`;
+	}
+
 	getParseableQuery() {
 		/* eslint-disable no-useless-escape */
 		const query = `SELECT * FROM \"${this.streamNames[0]}\" LIMIT ${this.limit}`;