Skip to content

Commit d07f713

Browse files
committed
feat(site): add refresh feat into the UI
1 parent e804f42 commit d07f713

File tree

4 files changed

+36
-28
lines changed

4 files changed

+36
-28
lines changed

site/src/api/queries/debug.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as API from "api/api";
2+
import { QueryClient } from "react-query";
3+
4+
export const health = () => ({
5+
queryKey: ["health"],
6+
queryFn: async () => API.getHealth(),
7+
});
8+
9+
export const refreshHealth = (queryClient: QueryClient) => {
10+
return {
11+
mutationFn: async () => {
12+
await queryClient.cancelQueries(["health"]);
13+
const newHealthData = await API.getHealth(true);
14+
queryClient.setQueryData(["health"], newHealthData);
15+
},
16+
};
17+
};

site/src/api/queries/deployment.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,6 @@ export const deploymentStats = () => {
2121
};
2222
};
2323

24-
export const health = () => {
25-
return {
26-
queryKey: ["deployment", "health"],
27-
queryFn: () => API.getHealth(false),
28-
};
29-
};
30-
3124
export const deploymentSSHConfig = () => {
3225
return {
3326
queryKey: ["deployment", "sshConfig"],

site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { type FC } from "react";
22
import { useQuery } from "react-query";
3-
import { deploymentStats, health } from "api/queries/deployment";
3+
import { deploymentStats } from "api/queries/deployment";
44
import { usePermissions } from "hooks/usePermissions";
55
import { DeploymentBannerView } from "./DeploymentBannerView";
66
import { useDashboard } from "../DashboardProvider";
7+
import { health } from "api/queries/debug";
78

89
export const DeploymentBanner: FC = () => {
910
const dashboard = useDashboard();

site/src/pages/HealthPage/HealthPage.tsx

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { type Interpolation, type Theme } from "@emotion/react";
22
import Box from "@mui/material/Box";
3-
import { useQuery, useQueryClient } from "react-query";
3+
import { useMutation, useQuery, useQueryClient } from "react-query";
44
import { getHealth } from "api/api";
55
import { Loader } from "components/Loader/Loader";
66
import { useTab } from "hooks";
@@ -22,6 +22,7 @@ import { DashboardFullPage } from "components/Dashboard/DashboardLayout";
2222
import { LoadingButton } from "@mui/lab";
2323
import ReplayIcon from "@mui/icons-material/Replay";
2424
import { FC } from "react";
25+
import { health, refreshHealth } from "api/queries/debug";
2526

2627
const sections = {
2728
derp: "DERP",
@@ -33,16 +34,13 @@ const sections = {
3334
export default function HealthPage() {
3435
const tab = useTab("tab", "derp");
3536
const queryClient = useQueryClient();
36-
const forceRefresh = async () => {
37-
await queryClient.invalidateQueries(["health"]);
38-
}
3937
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(),
4439
refetchInterval: 30_000,
4540
});
41+
const { mutate: forceRefresh, isLoading: isRefreshing } = useMutation(
42+
refreshHealth(queryClient),
43+
);
4644

4745
return (
4846
<>
@@ -51,7 +49,12 @@ export default function HealthPage() {
5149
</Helmet>
5250

5351
{healthStatus ? (
54-
<HealthPageView healthStatus={healthStatus} tab={tab} forceRefresh={forceRefresh} />
52+
<HealthPageView
53+
tab={tab}
54+
healthStatus={healthStatus}
55+
forceRefresh={forceRefresh}
56+
isRefreshing={isRefreshing}
57+
/>
5558
) : (
5659
<Loader />
5760
)}
@@ -63,10 +66,12 @@ export function HealthPageView({
6366
healthStatus,
6467
tab,
6568
forceRefresh,
69+
isRefreshing,
6670
}: {
6771
healthStatus: Awaited<ReturnType<typeof getHealth>>;
6872
tab: ReturnType<typeof useTab>;
69-
forceRefresh: () => Promise<void>;
73+
forceRefresh: () => void;
74+
isRefreshing: boolean;
7075
}) {
7176
return (
7277
<DashboardFullPage>
@@ -114,15 +119,7 @@ export function HealthPageView({
114119
value={healthStatus.coder_version}
115120
/>
116121
</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} />
126123
</FullWidthPageHeader>
127124
<Box
128125
sx={{
@@ -275,7 +272,7 @@ export const RefreshButton: FC<HealthcheckAction> = ({
275272
startIcon={<ReplayIcon />}
276273
onClick={handleAction}
277274
>
278-
{loading ? <>Refreshing&hellip;</> : <>Refresh</>}
275+
Refresh
279276
</LoadingButton>
280277
);
281278
};

0 commit comments

Comments
 (0)