Skip to content

Commit cf35c0d

Browse files
BrunoQuaresmaBrunoQuaresma
authored
feat(site): add health warning and a health monitor page (coder#8844)
1 parent 44f9b02 commit cf35c0d

File tree

17 files changed

+814
-15
lines changed

17 files changed

+814
-15
lines changed

‎coderd/apidoc/docs.go

Lines changed: 4 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎coderd/apidoc/swagger.json

Lines changed: 4 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎codersdk/deployment.go

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1871,6 +1871,9 @@ const (
18711871
// Insights page
18721872
ExperimentTemplateInsightsPage Experiment = "template_insights_page"
18731873

1874+
// Deployment health page
1875+
ExperimentDeploymentHealthPage Experiment = "deployment_health_page"
1876+
18741877
// Add new experiments here!
18751878
// ExperimentExample Experiment = "example"
18761879
)
@@ -1881,6 +1884,7 @@ const (
18811884
// not be included here and will be essentially hidden.
18821885
var ExperimentsAll = Experiments{
18831886
ExperimentTemplateInsightsPage,
1887+
ExperimentDeploymentHealthPage,
18841888
}
18851889

18861890
// Experiments is a list of experiments that are enabled for the deployment.

‎docs/api/schemas.md

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/AppRouter.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ const TemplateInsightsPage = lazy(
183183
() =>
184184
import("./pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage"),
185185
)
186+
const HealthPage = lazy(() => import("./pages/HealthPage/HealthPage"))
186187

187188
export const AppRouter: FC = () => {
188189
return (
@@ -197,6 +198,8 @@ export const AppRouter: FC = () => {
197198
<Route element={<DashboardLayout />}>
198199
<Route index element={<IndexPage />} />
199200

201+
<Route path="health" element={<HealthPage />} />
202+
200203
<Route path="gitauth/:provider" element={<GitAuthPage />} />
201204

202205
<Route path="workspaces" element={<WorkspacesPage />} />

‎site/src/api/api.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1405,3 +1405,15 @@ export const getInsightsTemplate = async (
14051405
const response = await axios.get(`/api/v2/insights/templates?${params}`)
14061406
return response.data
14071407
}
1408+
1409+
export const getHealth = () => {
1410+
return axios.get<{
1411+
healthy: boolean
1412+
time: string
1413+
coder_version: string
1414+
derp: { healthy: boolean }
1415+
access_url: { healthy: boolean }
1416+
websocket: { healthy: boolean }
1417+
database: { healthy: boolean }
1418+
}>("/api/v2/debug/health")
1419+
}

‎site/src/api/typesGenerated.ts

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/components/Dashboard/DashboardLayout.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Box from "@mui/material/Box"
1616
import InfoOutlined from "@mui/icons-material/InfoOutlined"
1717
import Button from "@mui/material/Button"
1818
import { docs } from "utils/docs"
19+
import { HealthBanner } from "./HealthBanner"
1920

2021
export const DashboardLayout: FC = () => {
2122
const styles = useStyles()
@@ -30,6 +31,7 @@ export const DashboardLayout: FC = () => {
3031

3132
return (
3233
<>
34+
<HealthBanner />
3335
<ServiceBanner />
3436
{canViewDeployment && <LicenseBanner />}
3537

‎site/src/components/Dashboard/HealthBanner.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Alert } from "components/Alert/Alert"
2+
import { Link as RouterLink } from "react-router-dom"
3+
import Link from "@mui/material/Link"
4+
import { colors } from "theme/colors"
5+
import { useQuery } from "@tanstack/react-query"
6+
import { getHealth } from "api/api"
7+
import { useDashboard } from "./DashboardProvider"
8+
9+
export const HealthBanner = () => {
10+
const { data: healthStatus } = useQuery({
11+
queryKey: ["health"],
12+
queryFn: () => getHealth(),
13+
})
14+
const dashboard = useDashboard()
15+
const hasHealthIssues = healthStatus && !healthStatus.data.healthy
16+
17+
if (
18+
dashboard.experiments.includes("deployment_health_page") &&
19+
hasHealthIssues
20+
) {
21+
return (
22+
<Alert
23+
severity="error"
24+
variant="filled"
25+
sx={{
26+
border: 0,
27+
borderRadius: 0,
28+
backgroundColor: colors.red[10],
29+
}}
30+
>
31+
We have detected problems with your Coder deployment. Please{" "}
32+
<Link
33+
component={RouterLink}
34+
to="/health"
35+
sx={{ fontWeight: 600, color: "inherit" }}
36+
>
37+
inspect the health status
38+
</Link>
39+
.
40+
</Alert>
41+
)
42+
}
43+
44+
return null
45+
}

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import LockRounded from "@mui/icons-material/LockOutlined"
66
import Globe from "@mui/icons-material/PublicOutlined"
77
import HubOutlinedIcon from "@mui/icons-material/HubOutlined"
88
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined"
9+
import MonitorHeartOutlined from "@mui/icons-material/MonitorHeartOutlined"
910
import { GitIcon } from "components/Icons/GitIcon"
1011
import { Stack } from "components/Stack/Stack"
1112
import { ElementType, PropsWithChildren, ReactNode, FC } from "react"
@@ -93,6 +94,14 @@ export const Sidebar: React.FC = () => {
9394
>
9495
Security
9596
</SidebarNavItem>
97+
{dashboard.experiments.includes("deployment_health_page") && (
98+
<SidebarNavItem
99+
href="/health"
100+
icon={<SidebarNavItemIcon icon={MonitorHeartOutlined} />}
101+
>
102+
Health
103+
</SidebarNavItem>
104+
)}
96105
</nav>
97106
)
98107
}

0 commit comments

Comments
 (0)