diff --git a/src/hooks/useQueryLogs.ts b/src/hooks/useQueryLogs.ts index e6cb9201..7ca63450 100644 --- a/src/hooks/useQueryLogs.ts +++ b/src/hooks/useQueryLogs.ts @@ -2,16 +2,15 @@ import { SortOrder, type Log, type LogsData, type LogsSearch } from '@/@types/pa import { getQueryLogsWithHeaders, getQueryResultWithHeaders } from '@/api/query'; import { StatusCodes } from 'http-status-codes'; import useMountedState from './useMountedState'; -import { useCallback, useEffect, useRef } from 'react'; +import { useCallback, useRef } from 'react'; import { useLogsStore, logsStoreReducers, LOAD_LIMIT, isJqSearch } from '@/pages/Stream/providers/LogsProvider'; import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; -import { useQueryResult } from './useQueryResult'; import _ from 'lodash'; import { AxiosError } from 'axios'; import jqSearch from '@/utils/jqSearch'; import { useGetLogStreamSchema } from './useGetLogStreamSchema'; -const { setLogData, setTotalCount } = logsStoreReducers; +const { setLogData } = logsStoreReducers; type QueryLogs = { streamName: string; @@ -32,7 +31,6 @@ export const useQueryLogs = () => { const _dataRef = useRef(null); const [error, setError] = useMountedState(null); const [loading, setLoading] = useMountedState(false); - const [isFetchingCount, setIsFetchingCount] = useMountedState(false); const [pageLogData, setPageLogData] = useMountedState(null); const { getDataSchema } = useGetLogStreamSchema(); const [querySearch, setQuerySearch] = useMountedState({ @@ -111,44 +109,6 @@ export const useQueryLogs = () => { } }; - // fetchQueryMutation is used only on fetching count - // refactor this hook if you want to use mutation anywhere else - const { fetchQueryMutation } = useQueryResult(); - - useEffect(() => { - const { fields = [], records = [] } = fetchQueryMutation.data || {}; - const firstRecord = _.first(records); - if (_.includes(fields, 'count') && _.includes(_.keys(firstRecord), 'count')) { - const count = _.get(firstRecord, 'count', 0); - setLogsStore((store) => setTotalCount(store, _.toInteger(count))); - } - }, [fetchQueryMutation.data]); - - const fetchCount = () => { - try { - setIsFetchingCount(true); - const defaultQuery = `select count(*) as count from ${currentStream}`; - const query = isQuerySearchActive - ? custSearchQuery.replace(/SELECT[\s\S]*?FROM/i, 'SELECT COUNT(*) as count FROM') - : defaultQuery; - if (currentStream && query?.length > 0) { - const logsQuery = { - streamName: currentStream, - startTime: timeRange.startTime, - endTime: timeRange.endTime, - access: [], - }; - fetchQueryMutation.mutate({ - logsQuery, - query, - onSuccess: () => setIsFetchingCount(false), - }); - } - } catch (e) { - console.log(e); - } - }; - const resetData = () => { _dataRef.current = null; setPageLogData(null); @@ -164,7 +124,5 @@ export const useQueryLogs = () => { loading: loading, getQueryData, resetData, - fetchCount, - isFetchingCount, }; }; diff --git a/src/hooks/useQueryResult.tsx b/src/hooks/useQueryResult.tsx index 511b9f94..92354e56 100644 --- a/src/hooks/useQueryResult.tsx +++ b/src/hooks/useQueryResult.tsx @@ -1,9 +1,12 @@ -import { getQueryResultWithHeaders } from '@/api/query'; +import { getQueryResultWithHeaders, getQueryResult } from '@/api/query'; import { LogsQuery } from '@/@types/parseable/api/query'; import { notifications } from '@mantine/notifications'; import { isAxiosError, AxiosError } from 'axios'; import { IconCheck, IconFileAlert } from '@tabler/icons-react'; -import { useMutation } from 'react-query'; +import { useMutation, useQuery } from 'react-query'; +import { logsStoreReducers, useLogsStore } from '@/pages/Stream/providers/LogsProvider'; +import _ from 'lodash'; +import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; type QueryData = { logsQuery: LogsQuery; @@ -48,3 +51,42 @@ export const useQueryResult = () => { return { fetchQueryMutation }; }; + +export const useFetchCount = () => { + const [currentStream] = useAppStore((store) => store.currentStream); + const { setTotalCount } = logsStoreReducers; + const [custQuerySearchState] = useLogsStore((store) => store.custQuerySearchState); + const [timeRange, setLogsStore] = useLogsStore((store) => store.timeRange); + const { isQuerySearchActive, custSearchQuery } = custQuerySearchState; + + const defaultQuery = `select count(*) as count from ${currentStream}`; + const query = isQuerySearchActive + ? custSearchQuery.replace(/SELECT[\s\S]*?FROM/i, 'SELECT COUNT(*) as count FROM') + : defaultQuery; + + const logsQuery = { + streamName: currentStream || '', + startTime: timeRange.startTime, + endTime: timeRange.endTime, + access: [], + }; + const { + isLoading: isCountLoading, + isRefetching: isCountRefetching, + refetch: refetchCount, + } = useQuery(['fetchCount', logsQuery], () => getQueryResult(logsQuery, query), { + onSuccess: (resp) => { + const count = _.first(resp.data)?.count; + typeof count === 'number' && setLogsStore((store) => setTotalCount(store, count)); + }, + refetchOnWindowFocus: false, + retry: false, + enabled: currentStream !== null, + }); + + return { + isCountLoading, + isCountRefetching, + refetchCount, + }; +}; diff --git a/src/pages/Stream/Views/Explore/Footer.tsx b/src/pages/Stream/Views/Explore/Footer.tsx index 5c69fe25..f9a05902 100644 --- a/src/pages/Stream/Views/Explore/Footer.tsx +++ b/src/pages/Stream/Views/Explore/Footer.tsx @@ -92,14 +92,16 @@ const LimitControl: FC = () => { ); }; -const Footer = (props: { loaded: boolean; isLoading: boolean; hasNoData: boolean }) => { +const Footer = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: boolean }) => { + const [currentStream] = useAppStore((store) => store.currentStream); const [tableOpts, setLogsStore] = useLogsStore((store) => store.tableOpts); const [filteredData] = useLogsStore((store) => store.data.filteredData); const { totalPages, currentOffset, currentPage, perPage, headers, totalCount } = tableOpts; + const onPageChange = useCallback((page: number) => { setLogsStore((store) => setPageAndPageData(store, page)); }, []); - const [currentStream] = useAppStore((store) => store.currentStream); + const pagination = usePagination({ total: totalPages ?? 1, initialPage: 1, onChange: onPageChange }); const onChangeOffset = useCallback( (key: 'prev' | 'next') => { @@ -137,7 +139,7 @@ const Footer = (props: { loaded: boolean; isLoading: boolean; hasNoData: boolean diff --git a/src/pages/Stream/Views/Explore/JSONView.tsx b/src/pages/Stream/Views/Explore/JSONView.tsx index b6d3ff9e..cff93197 100644 --- a/src/pages/Stream/Views/Explore/JSONView.tsx +++ b/src/pages/Stream/Views/Explore/JSONView.tsx @@ -175,14 +175,14 @@ const TableContainer = (props: { children: ReactNode }) => { }; const JsonView = (props: { - isFetchingCount: boolean; errorMessage: string | null; hasNoData: boolean; showTable: boolean; + isFetchingCount: boolean; }) => { const [maximized] = useAppStore((store) => store.maximized); - const { isFetchingCount, errorMessage, hasNoData, showTable } = props; + const { errorMessage, hasNoData, showTable, isFetchingCount } = props; const [isSearching, setSearching] = useState(false); const primaryHeaderHeight = !maximized ? PRIMARY_HEADER_HEIGHT + STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT + STREAM_SECONDARY_TOOLBAR_HRIGHT @@ -214,7 +214,7 @@ const JsonView = (props: { ) : ( )} -