Refactor design

coder · presleyp · May 20, 2022 · May 18, 2022 · May 18, 2022 · May 18, 2022
commit 85c2ac88ba2fca1064708b3a404d25e410ff5d7a
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -1,10 +1,13 @@
+import { makeStyles, Theme } from "@material-ui/core/styles"
8000import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
+import useTheme from "@material-ui/styles/useTheme"
 import React from "react"
 import { WorkspaceResource } from "../../api/typesGenerated"
+import { getDisplayAgentStatus } from "../../util/workspace"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 
@@ -22,39 +25,50 @@ interface ResourcesProps {
 }
 
 export const Resources: React.FC<ResourcesProps> = ({ resources, getResourcesError }) => {
+  const styles = useStyles()
+  const theme: Theme = useTheme()
+
   return (
-    <WorkspaceSection title={Language.resources}>
+    <WorkspaceSection title={Language.resources} contentsProps={{ className: styles.sectionContents }}>
       {getResourcesError ? (
         { getResourcesError }
       ) : (
-        <Table>
+        <Table className={styles.table}>
           <TableHead>
             <TableHeaderRow>
-              <TableCell size="small">{Language.resourceLabel}</TableCell>
-              <TableCell size="small">{Language.agentsLabel}</TableCell>
+              <TableCell>{Language.resourceLabel}</TableCell>
+              <TableCell />
             </TableHeaderRow>
           </TableHead>
           <TableBody>
             {resources?.map((resource) => (
               <TableRow key={resource.id}>
-                <TableCell size="small">{resource.name}</TableCell>
-                <TableCell>
-                  <Table>
-                    <TableHead>
-                      <TableHeaderRow>
-                        <TableCell size="small">{Language.agentLabel}</TableCell>
-                        <TableCell size="small">{Language.statusLabel}</TableCell>
-                      </TableHeaderRow>
-                    </TableHead>
-                    <TableBody>
-                      {resource.agents?.map((agent) => (
-                        <TableRow key={`${resource.id}-${agent.id}`}>
-                          <TableCell size="small">{agent.name}</TableCell>
-                          <TableCell size="small">{agent.status}</TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
+                <TableCell>{resource.name}</TableCell>
+                <TableCell className={styles.cellWithTable}>
+                  {resource.agents && (
+                    <Table>
+                      <TableHead>
+                        <TableHeaderRow>
+                          <TableCell width="50%">{Language.agentLabel}</TableCell>
+                          <TableCell width="50%">{Language.statusLabel}</TableCell>
+                        </TableHeaderRow>
+                      </TableHead>
+                      <TableBody>
+                        {resource.agents.map((agent) => (
+                          <TableRow key={`${resource.id}-${agent.id}`}>
+                            <TableCell>
+                              <span style={{ color: theme.palette.text.secondary }}>{agent.name}</span>
+                            </TableCell>
+                            <TableCell>
+                              <span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
+                                {getDisplayAgentStatus(theme, agent).status}
+                              </span>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
                 </TableCell>
               </TableRow>
             ))}
@@ -64,3 +78,30 @@ export const Resources: React.FC<ResourcesProps> = ({ resources, getResourcesErr
     </WorkspaceSection>
   )
 }
+
+const useStyles = makeStyles(() => ({
+  sectionContents: {
+    margin: 0,
+  },
+
+  table: {
+    border: 0,
+  },
+
+  cellWithTable: {
+    padding: 0,
+
+    "&:last-child": {
+      padding: 0,
+    },
+
+    "& table": {
+      borderTop: 0,
+      borderBottom: 0,
+
+      "& tr:last-child td": {
+        borderBottom: 0,
+      },
+    },
+  },
+}))
diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
@@ -1,7 +1,7 @@
 import { Theme } from "@material-ui/core/styles"
 import dayjs from "dayjs"
 import { WorkspaceBuildTransition } from "../api/types"
-import { WorkspaceBuild } from "../api/typesGenerated"
+import { WorkspaceAgent, WorkspaceBuild } from "../api/typesGenerated"
 
 export type WorkspaceStatus =
   | "queued"
@@ -148,3 +148,34 @@ export const displayWorkspaceBuildDuration = (build: WorkspaceBuild, inProgressL
   const duration = getWorkspaceBuildDurationInSeconds(build)
   return duration ? `${duration} seconds` : inProgressLabel
 }
+
+export const getDisplayAgentStatus = (
+  theme: Theme,
+  agent: WorkspaceAgent,
+): {
+  color: string
+  status: string
+} => {
+  switch (agent.status) {
+    case undefined:
+      return {
+        color: theme.palette.text.secondary,
+        status: DisplayStatusLanguage.loading,
+      }
+    case "connected":
+      return {
+        color: theme.palette.success.main,
+        status: `⦿ Connected`,
+      }
+    case "connecting":
+      return {
+        color: theme.palette.success.main,
+        status: `⦿ Connecting`,
+      }
+    case "disconnected":
+      return {
+        color: theme.palette.text.secondary,
+        status: `◍ Disconnected`,
+      }
+  }
+}