1- import { FC , useCallback } from 'react' ;
1+ import { FC , useCallback , useEffect } from 'react' ;
22import { usePagination } from '@mantine/hooks' ;
3- import { Box , Center , Group , Menu , Pagination , Stack } from '@mantine/core' ;
3+ import { Box , Center , Group , Menu , Pagination , Stack , Tooltip } from '@mantine/core' ;
44import _ from 'lodash' ;
55import { Text } from '@mantine/core' ;
66import { IconSelector } from '@tabler/icons-react' ;
@@ -9,9 +9,37 @@ import classes from '../styles/Footer.module.css';
99import { LOGS_FOOTER_HEIGHT } from '@/constants/theme' ;
1010import { correlationStoreReducers , useCorrelationStore } from '@/pages/Correlation/providers/CorrelationProvider' ;
1111import { LOG_QUERY_LIMITS , LOAD_LIMIT } from '@/pages/Stream/providers/LogsProvider' ;
12+ import { HumanizeNumber } from '@/utils/formatBytes' ;
1213
1314const { setCurrentOffset, setCurrentPage, setPageAndPageData } = correlationStoreReducers ;
1415
16+ const TotalCount = ( props : { totalCount : number } ) => {
17+ return (
18+ < Tooltip label = { props . totalCount } >
19+ < Text style = { { fontSize : '0.7rem' } } > { HumanizeNumber ( props . totalCount ) } </ Text >
20+ </ Tooltip >
21+ ) ;
22+ } ;
23+
24+ const TotalLogsCount = ( props : { hasTableLoaded : boolean ; isTableEmpty : boolean } ) => {
25+ const [ { totalCount, perPage, pageData } ] = useCorrelationStore ( ( store ) => store . tableOpts ) ;
26+ const displayedCount = _ . size ( pageData ) ;
27+ const showingCount = displayedCount < perPage ? displayedCount : perPage ;
28+ if ( typeof totalCount !== 'number' || typeof displayedCount !== 'number' ) return < Stack /> ;
29+
30+ return (
31+ < Stack style = { { alignItems : 'center' , justifyContent : 'center' , flexDirection : 'row' } } gap = { 6 } >
32+ { ! props . isTableEmpty ? (
33+ < >
34+ < Text style = { { fontSize : '0.7rem' } } > { `Showing ${ showingCount } } </ Text >
35+ < TotalCount totalCount = { totalCount } />
36+ < Text style = { { fontSize : '0.7rem' } } > records</ Text >
37+ </ >
38+ ) : null }
39+ </ Stack >
40+ ) ;
41+ } ;
42+
1543const LimitControl : FC = ( ) => {
1644 const [ opened , setOpened ] = useMountedState ( false ) ;
1745 const [ perPage , setCorrelationStore ] = useCorrelationStore ( ( store ) => store . tableOpts . perPage ) ;
@@ -58,12 +86,18 @@ const LimitControl: FC = () => {
5886
5987const CorrelationFooter = ( props : { loaded : boolean ; hasNoData : boolean ; isFetchingCount : boolean } ) => {
6088 const [ tableOpts , setCorrelationStore ] = useCorrelationStore ( ( store ) => store . tableOpts ) ;
61- const { totalPages, currentOffset, currentPage, perPage, totalCount } = tableOpts ;
89+ const [ isCorrelatedData ] = useCorrelationStore ( ( store ) => store . isCorrelatedData ) ;
90+ const { totalPages, currentOffset, currentPage, perPage, totalCount, targetPage } = tableOpts ;
6291
6392 const onPageChange = useCallback ( ( page : number ) => {
64- setCorrelationStore ( ( store ) => setPageAndPageData ( store , page ) ) ;
93+ setCorrelationStore ( ( store ) => setPageAndPageData ( store , page , perPage ) ) ;
6594 } , [ ] ) ;
6695
96+ useEffect ( ( ) => {
97+ if ( ! props . loaded ) return ;
98+ pagination . setPage ( targetPage ? targetPage : 1 ) ;
99+ } , [ props . loaded ] ) ;
100+
67101 const pagination = usePagination ( { total : totalPages ?? 1 , initialPage : 1 , onChange : onPageChange } ) ;
68102 const onChangeOffset = useCallback (
69103 ( key : 'prev' | 'next' ) => {
@@ -87,11 +121,9 @@ const CorrelationFooter = (props: { loaded: boolean; hasNoData: boolean; isFetch
87121 return (
88122 < Stack className = { classes . footerContainer } gap = { 0 } style = { { height : LOGS_FOOTER_HEIGHT } } >
89123 < Stack w = "100%" justify = "center" align = "flex-start" >
90- { /* <TotalLogsCount
91- hasTableLoaded={props.loaded}
92- isFetchingCount={props.isFetchingCount}
93- isTableEmpty={props.hasNoData}
94- /> */ }
124+ { isCorrelatedData && totalCount > 0 && (
125+ < TotalLogsCount hasTableLoaded = { props . loaded } isTableEmpty = { props . hasNoData } />
126+ ) }
95127 </ Stack >
96128 < Stack w = "100%" justify = "center" >
97129 { props . loaded ? (
0 commit comments