chore: add errors + warnings to workspace proxy table

Emyrk · Emyrk · commit ec2cfb3deddb · 2023-07-06T15:38:35.000-04:00
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -1,9 +1,9 @@
-import { Region, WorkspaceProxy } from "api/typesGenerated"
+import { Region, Workspace, WorkspaceProxy } from "api/typesGenerated"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import { Avatar } from "components/Avatar/Avatar"
 import TableCell from "@mui/material/TableCell"
 import TableRow from "@mui/material/TableRow"
-import { FC } from "react"
+import { FC, useState } from "react"
 import {
   HealthyBadge,
   NotHealthyBadge,
@@ -12,22 +12,52 @@ import {
 } from "components/DeploySettingsLayout/Badges"
 import { ProxyLatencyReport } from "contexts/useProxyLatency"
 import { getLatencyColor } from "utils/latency"
+import Collapse from "@mui/material/Collapse"
+import { makeStyles } from "@mui/styles"
+import { combineClasses } from "utils/combineClasses"
+import ListItem from "@mui/material/ListItem"
+import List from "@mui/material/List"
+import { Box, ListSubheader } from "@mui/material"
+import { Maybe } from "components/Conditionals/Maybe"
+import { CodeBlock } from "components/CodeBlock/CodeBlock"
+import { CodeExample } from "components/CodeExample/CodeExample"
 
 export const ProxyRow: FC<{
   latency?: ProxyLatencyReport
   proxy: Region
 }> = ({ proxy, latency }) => {
+  const styles = useStyles()
   // If we have a more specific proxy status, use that.
   // All users can see healthy/unhealthy, some can see more.
   let statusBadge = <ProxyStatus proxy={proxy} />
+  let shouldShowMessages = false
   if ("status" in proxy) {
-    statusBadge = <DetailedProxyStatus proxy={proxy as WorkspaceProxy} />
+    const wsproxy = proxy as WorkspaceProxy
+    statusBadge = <DetailedProxyStatus proxy={wsproxy} />
+    shouldShowMessages = Boolean(
+      (wsproxy.status?.report?.warnings &&
+        wsproxy.status?.report?.warnings.length > 0) ||
+        (wsproxy.status?.report?.errors &&
+          wsproxy.status?.report?.errors.length > 0),
+    )
   }
 
+  const [isMsgsOpen, setIsMsgsOpen] = useState(false)
+  const toggle = () => {
+    if (shouldShowMessages) {
+      setIsMsgsOpen((v) => !v)
+    }
+  }
   return (
     <>
-      <TableRow key={proxy.name} data-testid={`${proxy.name}`}>
-        <TableCell>
+      <TableRow
+        className={combineClasses({
+          [styles.clickable]: shouldShowMessages,
+        })}
+        key={proxy.name}
+        data-testid={`${proxy.name}`}
+      >
+        <TableCell onClick={toggle}>
           <AvatarData
             title={
               proxy.display_name && proxy.display_name.length > 0
@@ -44,6 +74,7 @@ export const ProxyRow: FC<{
                 />
               )
             }
+            subtitle={shouldShowMessages ? "Click to view details" : undefined}
           />
         </TableCell>
 
@@ -62,10 +93,61 @@ export const ProxyRow: FC<{
           {latency ? `${latency.latencyMS.toFixed(0)} ms` : "Not available"}
         </TableCell>
       </TableRow>
+      <Maybe condition={shouldShowMessages}>
+        <TableRow>
+          <TableCell colSpan={4} sx={{ padding: "0px !important" }}>
+            <Collapse in={isMsgsOpen}>
+              <ProxyMessagesRow proxy={proxy as WorkspaceProxy} />
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </Maybe>
+    </>
+  )
+}
+
+const ProxyMessagesRow: FC<{
+  proxy: WorkspaceProxy
+}> = ({ proxy }) => {
+  return (
+    <>
+      <ProxyMessagesList
+        title="Errors"
+        messages={proxy.status?.report?.errors}
+      />
+      <ProxyMessagesList
+        title="Warnings"
+        messages={proxy.status?.report?.warnings}
+      />
     </>
   )
 }
 
+const ProxyMessagesList: FC<{
+  title: string
+  messages?: string[]
+}> = ({ title, messages }) => {
+  if (!messages) {
+    return <></>
+  }
+  return (
+    <List
+      subheader={
+        <ListSubheader component="div" id="nested-list-subheader">
+          {title}
+        </ListSubheader>
+      }
+    >
+      {messages.map((error, index) => (
+        <ListItem key={"warning" + index}>
+          <CodeExample code={error} />
+          {/* <CodeBlock lines={[error]} /> */}
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
 // DetailedProxyStatus allows a more precise status to be displayed.
 const DetailedProxyStatus: FC<{
   proxy: WorkspaceProxy
@@ -100,3 +182,13 @@ const ProxyStatus: FC<{
 
   return icon
 }
+
+const useStyles = makeStyles((theme) => ({
+  clickable: {
+    cursor: "pointer",
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+}))
