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

@@ -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>
           );

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>
+  );
+};

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>
           );

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>
           );

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>
           );

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>
           );

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>
           );