From 26f5ce63a8ac1269dd63dcf4fc59d99a01f2cf5a Mon Sep 17 00:00:00 2001
From: Cian Johnston <cian@coder.com>
Date: Thu, 11 Jan 2024 20:32:25 +0000
Subject: [PATCH] feat(site): add docs links on health page (#11582)

* feat(site): add docs links on health page

* apply suggestions
---
 site/src/pages/HealthPage/AccessURLPage.tsx      |  7 ++++++-
 site/src/pages/HealthPage/Content.tsx            | 16 +++++++++++++++-
 site/src/pages/HealthPage/DERPPage.tsx           |  7 ++++++-
 site/src/pages/HealthPage/DERPRegionPage.tsx     |  7 ++++++-
 site/src/pages/HealthPage/DatabasePage.tsx       |  7 ++++++-
 .../pages/HealthPage/ProvisionerDaemonsPage.tsx  |  7 ++++++-
 site/src/pages/HealthPage/WorkspaceProxyPage.tsx |  7 ++++++-
 7 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/HealthPage/AccessURLPage.tsx b/site/src/pages/HealthPage/AccessURLPage.tsx
index 0a4c3b7894..d39ed5e504 100644
--- a/site/src/pages/HealthPage/AccessURLPage.tsx
+++ b/site/src/pages/HealthPage/AccessURLPage.tsx
@@ -2,6 +2,7 @@ import { useOutletContext } from "react-router-dom";
 import {
   Header,
   HeaderTitle,
+  HealthMessageDocsLink,
   Main,
   GridData,
   GridDataLabel,
@@ -35,7 +36,11 @@ export const AccessURLPage = () => {
       <Main>
         {accessUrl.warnings.map((warning) => {
           return (
-            <Alert key={warning.code} severity="warning">
+            <Alert
+              actions={HealthMessageDocsLink(warning)}
+              key={warning.code}
+              severity="warning"
+            >
               {warning.message}
             </Alert>
           );
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
index fda3b8f7c4..33548e5011 100644
--- a/site/src/pages/HealthPage/Content.tsx
+++ b/site/src/pages/HealthPage/Content.tsx
@@ -9,9 +9,11 @@ import {
 import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import { healthyColor } from "./healthyColor";
+import { docs } from "utils/docs";
 import { css } from "@emotion/css";
 import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
-import { HealthSeverity } from "api/typesGenerated";
+import { HealthMessage, HealthSeverity } from "api/typesGenerated";
+import Link from "@mui/material/Link";
 import { useTheme } from "@mui/material/styles";
 
 const CONTENT_PADDING = 36;
@@ -242,3 +244,15 @@ export const Logs = (props: LogsProps) => {
     </div>
   );
 };
+
+export const HealthMessageDocsLink = (msg: HealthMessage) => {
+  return (
+    <Link
+      href={docs(`/admin/healthcheck#${msg.code.toLocaleLowerCase()}`)}
+      target="_blank"
+      rel="noreferrer"
+    >
+      Docs for {msg.code}
+    </Link>
+  );
+};
diff --git a/site/src/pages/HealthPage/DERPPage.tsx b/site/src/pages/HealthPage/DERPPage.tsx
index d64547c786..c3771ad280 100644
--- a/site/src/pages/HealthPage/DERPPage.tsx
+++ b/site/src/pages/HealthPage/DERPPage.tsx
@@ -2,6 +2,7 @@ import { Link, useOutletContext } from "react-router-dom";
 import {
   Header,
   HeaderTitle,
+  HealthMessageDocsLink,
   Main,
   SectionLabel,
   BooleanPill,
@@ -59,7 +60,11 @@ export const DERPPage = () => {
       <Main>
         {derp.warnings.map((warning: HealthMessage) => {
           return (
-            <Alert key={warning.code} severity="warning">
+            <Alert
+              actions={HealthMessageDocsLink(warning)}
+              key={warning.code}
+              severity="warning"
+            >
               {warning.message}
             </Alert>
           );
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 35503c3f39..2449250fd6 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -17,6 +17,7 @@ import { pageTitle } from "utils/page";
 import {
   Header,
   HeaderTitle,
+  HealthMessageDocsLink,
   Main,
   BooleanPill,
   Pill,
@@ -75,7 +76,11 @@ export const DERPRegionPage: FC = () => {
       <Main>
         {warnings.map((warning: HealthMessage) => {
           return (
-            <Alert key={warning.code} severity="warning">
+            <Alert
+              actions={HealthMessageDocsLink(warning)}
+              key={warning.code}
+              severity="warning"
+            >
               {warning.message}
             </Alert>
           );
diff --git a/site/src/pages/HealthPage/DatabasePage.tsx b/site/src/pages/HealthPage/DatabasePage.tsx
index 62f3d316e3..1bd5a0a15e 100644
--- a/site/src/pages/HealthPage/DatabasePage.tsx
+++ b/site/src/pages/HealthPage/DatabasePage.tsx
@@ -2,6 +2,7 @@ import { useOutletContext } from "react-router-dom";
 import {
   Header,
   HeaderTitle,
+  HealthMessageDocsLink,
   Main,
   GridData,
   GridDataLabel,
@@ -35,7 +36,11 @@ export const DatabasePage = () => {
       <Main>
         {database.warnings.map((warning) => {
           return (
-            <Alert key={warning.code} severity="warning">
+            <Alert
+              actions={HealthMessageDocsLink(warning)}
+              key={warning.code}
+              severity="warning"
+            >
               {warning.message}
             </Alert>
           );
diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
index 9c11ed0d70..34cb72a84c 100644
--- a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
+++ b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
@@ -3,6 +3,7 @@ import {
   Header,
   HeaderTitle,
   HealthyDot,
+  HealthMessageDocsLink,
   Main,
   Pill,
 } from "./Content";
@@ -42,7 +43,11 @@ export const ProvisionerDaemonsPage = () => {
       <Main>
         {daemons.warnings.map((warning) => {
           return (
-            <Alert key={warning.code} severity="warning">
+            <Alert
+              actions={HealthMessageDocsLink(warning)}
+              key={warning.code}
+              severity="warning"
+            >
               {warning.message}
             </Alert>
           );
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index a60175410e..d3798052dc 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -3,6 +3,7 @@ import {
   BooleanPill,
   Header,
   HeaderTitle,
+  HealthMessageDocsLink,
   HealthyDot,
   Main,
   Pill,
@@ -44,7 +45,11 @@ export const WorkspaceProxyPage = () => {
         )}
         {workspace_proxy.warnings.map((warning) => {
           return (
-            <Alert key={warning.code} severity="warning">
+            <Alert
+              actions={HealthMessageDocsLink(warning)}
+              key={warning.code}
+              severity="warning"
+            >
               {warning.message}
             </Alert>
           );