From 69d0d0f37564b89bb9e5aad269d29545fb29e440 Mon Sep 17 00:00:00 2001
From: Cian Johnston <cian@coder.com>
Date: Thu, 11 Jan 2024 17:57:13 +0000
Subject: [PATCH 1/2] feat(site): add docs links on health page

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

diff --git a/site/src/pages/HealthPage/AccessURLPage.tsx b/site/src/pages/HealthPage/AccessURLPage.tsx
index 0a4c3b7894e74..a38213a37deed 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,
@@ -36,7 +37,7 @@ export const AccessURLPage = () => {
         {accessUrl.warnings.map((warning) => {
           return (
             <Alert key={warning.code} severity="warning">
-              {warning.message}
+              {HealthMessageDocsLink(warning)}: {warning.message}
             </Alert>
           );
         })}
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
index fda3b8f7c44a3..24da675d5d5d0 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"
+    >
+      {msg.code}
+    </Link>
+  );
+};
diff --git a/site/src/pages/HealthPage/DERPPage.tsx b/site/src/pages/HealthPage/DERPPage.tsx
index d64547c786ec2..75df0bcdf8ca2 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,
@@ -60,7 +61,7 @@ export const DERPPage = () => {
         {derp.warnings.map((warning: HealthMessage) => {
           return (
             <Alert key={warning.code} severity="warning">
-              {warning.message}
+              {HealthMessageDocsLink(warning)}: {warning.message}
             </Alert>
           );
         })}
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 35503c3f39388..d4d9fdc2fc01a 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,
@@ -76,7 +77,7 @@ export const DERPRegionPage: FC = () => {
         {warnings.map((warning: HealthMessage) => {
           return (
             <Alert key={warning.code} severity="warning">
-              {warning.message}
+              {HealthMessageDocsLink(warning)}: {warning.message}
             </Alert>
           );
         })}
diff --git a/site/src/pages/HealthPage/DatabasePage.tsx b/site/src/pages/HealthPage/DatabasePage.tsx
index 62f3d316e346d..1e3210d2c435a 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,
@@ -36,7 +37,7 @@ export const DatabasePage = () => {
         {database.warnings.map((warning) => {
           return (
             <Alert key={warning.code} severity="warning">
-              {warning.message}
+              {HealthMessageDocsLink(warning)}: {warning.message}
             </Alert>
           );
         })}
diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
index 9c11ed0d706fe..b17247b702c6a 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";
@@ -43,7 +44,7 @@ export const ProvisionerDaemonsPage = () => {
         {daemons.warnings.map((warning) => {
           return (
             <Alert key={warning.code} severity="warning">
-              {warning.message}
+              {HealthMessageDocsLink(warning)}: {warning.message}
             </Alert>
           );
         })}
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index a60175410ee40..473f2ec01fcfc 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,
@@ -45,7 +46,7 @@ export const WorkspaceProxyPage = () => {
         {workspace_proxy.warnings.map((warning) => {
           return (
             <Alert key={warning.code} severity="warning">
-              {warning.message}
+              {HealthMessageDocsLink(warning)}: {warning.message}
             </Alert>
           );
         })}

From 298eb1285c82c6e536f3433f0a399251e64ba951 Mon Sep 17 00:00:00 2001
From: Cian Johnston <cian@coder.com>
Date: Thu, 11 Jan 2024 19:36:03 +0000
Subject: [PATCH 2/2] apply suggestions

---
 site/src/pages/HealthPage/AccessURLPage.tsx          | 8 ++++++--
 site/src/pages/HealthPage/Content.tsx                | 2 +-
 site/src/pages/HealthPage/DERPPage.tsx               | 8 ++++++--
 site/src/pages/HealthPage/DERPRegionPage.tsx         | 8 ++++++--
 site/src/pages/HealthPage/DatabasePage.tsx           | 8 ++++++--
 site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx | 8 ++++++--
 site/src/pages/HealthPage/WorkspaceProxyPage.tsx     | 8 ++++++--
 7 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/site/src/pages/HealthPage/AccessURLPage.tsx b/site/src/pages/HealthPage/AccessURLPage.tsx
index a38213a37deed..d39ed5e504ee2 100644
--- a/site/src/pages/HealthPage/AccessURLPage.tsx
+++ b/site/src/pages/HealthPage/AccessURLPage.tsx
@@ -36,8 +36,12 @@ export const AccessURLPage = () => {
       <Main>
         {accessUrl.warnings.map((warning) => {
           return (
-            <Alert key={warning.code} severity="warning">
-              {HealthMessageDocsLink(warning)}: {warning.message}
+            <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 24da675d5d5d0..33548e5011909 100644
--- a/site/src/pages/HealthPage/Content.tsx
+++ b/site/src/pages/HealthPage/Content.tsx
@@ -252,7 +252,7 @@ export const HealthMessageDocsLink = (msg: HealthMessage) => {
       target="_blank"
       rel="noreferrer"
     >
-      {msg.code}
+      Docs for {msg.code}
     </Link>
   );
 };
diff --git a/site/src/pages/HealthPage/DERPPage.tsx b/site/src/pages/HealthPage/DERPPage.tsx
index 75df0bcdf8ca2..c3771ad280b77 100644
--- a/site/src/pages/HealthPage/DERPPage.tsx
+++ b/site/src/pages/HealthPage/DERPPage.tsx
@@ -60,8 +60,12 @@ export const DERPPage = () => {
       <Main>
         {derp.warnings.map((warning: HealthMessage) => {
           return (
-            <Alert key={warning.code} severity="warning">
-              {HealthMessageDocsLink(warning)}: {warning.message}
+            <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 d4d9fdc2fc01a..2449250fd6ac1 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -76,8 +76,12 @@ export const DERPRegionPage: FC = () => {
       <Main>
         {warnings.map((warning: HealthMessage) => {
           return (
-            <Alert key={warning.code} severity="warning">
-              {HealthMessageDocsLink(warning)}: {warning.message}
+            <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 1e3210d2c435a..1bd5a0a15e708 100644
--- a/site/src/pages/HealthPage/DatabasePage.tsx
+++ b/site/src/pages/HealthPage/DatabasePage.tsx
@@ -36,8 +36,12 @@ export const DatabasePage = () => {
       <Main>
         {database.warnings.map((warning) => {
           return (
-            <Alert key={warning.code} severity="warning">
-              {HealthMessageDocsLink(warning)}: {warning.message}
+            <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 b17247b702c6a..34cb72a84c53e 100644
--- a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
+++ b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
@@ -43,8 +43,12 @@ export const ProvisionerDaemonsPage = () => {
       <Main>
         {daemons.warnings.map((warning) => {
           return (
-            <Alert key={warning.code} severity="warning">
-              {HealthMessageDocsLink(warning)}: {warning.message}
+            <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 473f2ec01fcfc..d3798052dc2e8 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -45,8 +45,12 @@ export const WorkspaceProxyPage = () => {
         )}
         {workspace_proxy.warnings.map((warning) => {
           return (
-            <Alert key={warning.code} severity="warning">
-              {HealthMessageDocsLink(warning)}: {warning.message}
+            <Alert
+              actions={HealthMessageDocsLink(warning)}
+              key={warning.code}
+              severity="warning"
+            >
+              {warning.message}
             </Alert>
           );
         })}