1
1
import { type Interpolation , type Theme } from "@emotion/react" ;
2
2
import Box from "@mui/material/Box" ;
3
- import { useQuery , useQueryClient } from "react-query" ;
3
+ import { useMutation , useQuery , useQueryClient } from "react-query" ;
4
4
import { getHealth } from "api/api" ;
5
5
import { Loader } from "components/Loader/Loader" ;
6
6
import { useTab } from "hooks" ;
@@ -22,6 +22,7 @@ import { DashboardFullPage } from "components/Dashboard/DashboardLayout";
22
22
import { LoadingButton } from "@mui/lab" ;
23
23
import ReplayIcon from "@mui/icons-material/Replay" ;
24
24
import { FC } from "react" ;
25
+ import { health , refreshHealth } from "api/queries/debug" ;
25
26
26
27
const sections = {
27
28
derp : "DERP" ,
@@ -33,16 +34,13 @@ const sections = {
33
34
export default function HealthPage ( ) {
34
35
const tab = useTab ( "tab" , "derp" ) ;
35
36
const queryClient = useQueryClient ( ) ;
36
- const forceRefresh = async ( ) => {
37
- await queryClient . invalidateQueries ( [ "health" ] ) ;
38
- }
39
37
const { data : healthStatus } = useQuery ( {
40
- queryKey : [ "health" ] ,
41
- // TODO: We don't want to set force=true each time.
42
- // Only if the "refresh" button is clicked.
43
- queryFn : async ( ) => getHealth ( true ) ,
38
+ ...health ( ) ,
44
39
refetchInterval : 30_000 ,
45
40
} ) ;
41
+ const { mutate : forceRefresh , isLoading : isRefreshing } = useMutation (
42
+ refreshHealth ( queryClient ) ,
43
+ ) ;
46
44
47
45
return (
48
46
< >
@@ -51,7 +49,12 @@ export default function HealthPage() {
51
49
</ Helmet >
52
50
53
51
{ healthStatus ? (
54
- < HealthPageView healthStatus = { healthStatus } tab = { tab } forceRefresh = { forceRefresh } />
52
+ < HealthPageView
53
+ tab = { tab }
54
+ healthStatus = { healthStatus }
55
+ forceRefresh = { forceRefresh }
56
+ isRefreshing = { isRefreshing }
57
+ />
55
58
) : (
56
59
< Loader />
57
60
) }
@@ -63,10 +66,12 @@ export function HealthPageView({
63
66
healthStatus,
64
67
tab,
65
68
forceRefresh,
69
+ isRefreshing,
66
70
} : {
67
71
healthStatus : Awaited < ReturnType < typeof getHealth > > ;
68
72
tab : ReturnType < typeof useTab > ;
69
- forceRefresh : ( ) => Promise < void > ;
73
+ forceRefresh : ( ) => void ;
74
+ isRefreshing : boolean ;
70
75
} ) {
71
76
return (
72
77
< DashboardFullPage >
@@ -114,15 +119,7 @@ export function HealthPageView({
114
119
value = { healthStatus . coder_version }
115
120
/>
116
121
</ Stats >
117
- < RefreshButton
118
- loading = { false }
119
- handleAction = { async ( ) => {
120
- await forceRefresh ( ) . catch ( ( e ) => {
121
- // handle error
122
- console . log ( "error forcing refresh: " + e )
123
- } )
124
- } }
125
- />
122
+ < RefreshButton loading = { isRefreshing } handleAction = { forceRefresh } />
126
123
</ FullWidthPageHeader >
127
124
< Box
128
125
sx = { {
@@ -275,7 +272,7 @@ export const RefreshButton: FC<HealthcheckAction> = ({
275
272
startIcon = { < ReplayIcon /> }
276
273
onClick = { handleAction }
277
274
>
278
- { loading ? < > Refreshing… </ > : < > Refresh</ > }
275
+ Refresh
279
276
</ LoadingButton >
280
277
) ;
281
278
} ;
0 commit comments