@@ -20,6 +20,7 @@ import {
2020 SegmentedControl ,
2121 Tabs ,
2222 Text ,
23+ Tooltip ,
2324} from '@mantine/core' ;
2425import ReactCodeMirror from '@uiw/react-codemirror' ;
2526
@@ -33,6 +34,7 @@ import DBHeatmapChart from './components/DBHeatmapChart';
3334import { DBSqlRowTable } from './components/DBRowTable' ;
3435import DBTableChart from './components/DBTableChart' ;
3536import OnboardingModal from './components/OnboardingModal' ;
37+ import { useDashboardRefresh } from './hooks/useDashboardRefresh' ;
3638import { useConnections } from './connection' ;
3739import { parseTimeQuery , useNewTimeQuery } from './timeQuery' ;
3840
@@ -457,6 +459,15 @@ function ClickhousePage() {
457459 // showRelativeInterval: isLive,
458460 } ) ;
459461
462+ // For future use if Live button is added
463+ const [ isLive , setIsLive ] = useState ( false ) ;
464+
465+ const { manualRefreshCooloff, refresh } = useDashboardRefresh ( {
466+ searchedTimeRange,
467+ onTimeRangeSelect,
468+ isLive,
469+ } ) ;
470+
460471 const filters = useMemo ( ( ) => {
461472 const { latencyMin, latencyMax } = latencyFilter ;
462473 return [
@@ -497,21 +508,35 @@ function ClickhousePage() {
497508 size = "xs"
498509 />
499510 </ Group >
500- < form
501- onSubmit = { e => {
502- e . preventDefault ( ) ;
503- onSearch ( displayedTimeInputValue ) ;
504- return false ;
505- } }
506- >
507- < TimePicker
508- inputValue = { displayedTimeInputValue }
509- setInputValue = { setDisplayedTimeInputValue }
510- onSearch = { range => {
511- onSearch ( range ) ;
511+ < Group gap = "xs" >
512+ < form
513+ onSubmit = { e => {
514+ e . preventDefault ( ) ;
515+ onSearch ( displayedTimeInputValue ) ;
516+ return false ;
512517 } }
513- />
514- </ form >
518+ >
519+ < TimePicker
520+ inputValue = { displayedTimeInputValue }
521+ setInputValue = { setDisplayedTimeInputValue }
522+ onSearch = { onSearch }
523+ />
524+ </ form >
525+ < Tooltip withArrow label = "Refresh dashboard" fz = "xs" color = "gray" >
526+ < Button
527+ onClick = { refresh }
528+ loading = { manualRefreshCooloff }
529+ disabled = { manualRefreshCooloff }
530+ color = "gray"
531+ variant = "outline"
532+ title = "Refresh dashboard"
533+ aria-label = "Refresh dashboard"
534+ px = "xs"
535+ >
536+ < i className = "bi bi-arrow-clockwise fs-5" > </ i >
537+ </ Button >
538+ </ Tooltip >
539+ </ Group >
515540 </ Group >
516541 < Tabs
517542 mt = "md"
0 commit comments