fix(site): show wsproxy errors in context in WorkspaceProxyPage (#11556)

johnstcn · web-flow · commit 8a12ee783144 · 2024-01-11T10:47:02.000Z
* Shows the overall report error at the top of the page, if present.
* Shows workspaceproxy errors above warnings inside the corresponding element, if present.
* Improves unregistered proxy status
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -39,6 +39,9 @@ export const WorkspaceProxyPage = () => {
       </Header>
 
       <Main>
+        {workspace_proxy.error && (
+          <Alert severity="error">{workspace_proxy.error}</Alert>
+        )}
         {workspace_proxy.warnings.map((warning) => {
           return (
             <Alert key={warning.code} severity="warning">
@@ -48,6 +51,7 @@ export const WorkspaceProxyPage = () => {
         })}
 
         {regions.map((region) => {
+          const errors = region.status?.report?.errors ?? [];
           const warnings = region.status?.report?.warnings ?? [];
 
           return (
@@ -138,14 +142,23 @@ export const WorkspaceProxyPage = () => {
                   color: theme.palette.text.secondary,
                 }}
               >
-                {warnings.length > 0 ? (
+                {region.status?.status === "unregistered" ? (
+                  <span>Has not connected yet</span>
+                ) : warnings.length === 0 && errors.length === 0 ? (
+                  <span>OK</span>
+                ) : (
                   <div css={{ display: "flex", flexDirection: "column" }}>
-                    {warnings.map((warning, i) => (
-                      <span key={i}>{warning}</span>
+                    {[...errors, ...warnings].map((msg, i) => (
+                      <span
+                        css={{
+                          ":first-letter": { textTransform: "uppercase" },
+                        }}
+                        key={i}
+                      >
+                        {msg}
+                      </span>
                     ))}
                   </div>
-                ) : (
-                  <span>No warnings</span>
                 )}
                 <span data-chromatic="ignore">
                   {createDayString(region.updated_at)}
