From ed3deea655b4f0d44db94e249d7ceaff65d6c8a5 Mon Sep 17 00:00:00 2001
From: Garrett <garrett@coder.com>
Date: Tue, 30 Aug 2022 18:23:54 +0000
Subject: [PATCH 1/2] feat: Add dedicated labels to agent status and OS

---
 site/src/components/Resources/Resources.tsx | 87 +++++++++++++--------
 1 file changed, 53 insertions(+), 34 deletions(-)

diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index f96dc3c4bac03..f52163d4a80b5 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -7,8 +7,9 @@ import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { TableCellDataPrimary } from "components/TableCellData/TableCellData"
 import { FC } from "react"
-import { getDisplayAgentStatus, getWorkspaceStatus, WorkspaceStateEnum } from "util/workspace"
+import { getDisplayAgentStatus } from "util/workspace"
 import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { AppLink } from "../AppLink/AppLink"
 import { SSHButton } from "../SSHButton/SSHButton"
@@ -42,10 +43,6 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   const styles = useStyles()
   const theme: Theme = useTheme()
 
-  const workspaceStatus: keyof typeof WorkspaceStateEnum = getWorkspaceStatus(
-    workspace.latest_build,
-  )
-
   return (
     <div aria-label={Language.resources} className={styles.wrapper}>
       {getResourcesError ? (
@@ -103,40 +100,43 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                       )}
 
                       <TableCell className={styles.agentColumn}>
-                        {agent.name}
-                        <div className={styles.agentInfo}>
-                          <span className={styles.operatingSystem}>{agent.operating_system}</span>
-                          {WorkspaceStateEnum[workspaceStatus] !==
-                            WorkspaceStateEnum["stopped"] && (
-                            <span style={{ color: agentStatus.color }} className={styles.status}>
+                      <TableCellDataPrimary highlight>{agent.name}</TableCellDataPrimary>
+                      <div className={styles.data}>
+                        <div className={styles.dataRow}>
+                          <strong>status: </strong>
+                          <span style={{ color: agentStatus.color }} className={styles.status}>
                               {agentStatus.status}
                             </span>
-                          )}
                         </div>
+                        <div className={styles.dataRow}>
+                          <strong>os: </strong>
+                          {agent.operating_system}
+                        </div>
+                      </div>
                       </TableCell>
                       <TableCell>
-                        <>
-                          {canUpdateWorkspace && agent.status === "connected" && (
-                            <div className={styles.accessLinks}>
-                              <SSHButton workspaceName={workspace.name} agentName={agent.name} />
-                              <TerminalLink
-                                workspaceName={workspace.name}
-                                agentName={agent.name}
-                                userName={workspace.owner_name}
-                              />
-                              {agent.apps.map((app) => (
-                                <AppLink
-                                  key={app.name}
-                                  appIcon={app.icon}
-                                  appName={app.name}
-                                  userName={workspace.owner_name}
-                                  workspaceName={workspace.name}
-                                  agentName={agent.name}
-                                />
-                              ))}
-                            </div>
-                          )}
-                        </>
+                          <div className={styles.accessLinks}>
+                              {canUpdateWorkspace && agent.status === "connected" && (
+                                <>
+                                  <SSHButton workspaceName={workspace.name} agentName={agent.name} />
+                                  <TerminalLink
+                                    workspaceName={workspace.name}
+                                    agentName={agent.name}
+                                    userName={workspace.owner_name}
+                                  />
+                                  {agent.apps.map((app) => (
+                                    <AppLink
+                                      key={app.name}
+                                      appIcon={app.icon}
+                                      appName={app.name}
+                                      userName={workspace.owner_name}
+                                      workspaceName={workspace.name}
+                                      agentName={agent.name}
+                                    />
+                                  ))}
+                                </>
+                              )}
+                          </div>
                       </TableCell>
                     </TableRow>
                   )
@@ -204,4 +204,23 @@ const useStyles = makeStyles((theme) => ({
   status: {
     whiteSpace: "nowrap",
   },
+
+  data: {
+    color: theme.palette.text.secondary,
+    fontSize: 14,
+    marginTop: theme.spacing(0.75),
+    display: "grid",
+    gridAutoFlow: "row",
+    whiteSpace: "nowrap",
+    gap: theme.spacing(0.75),
+  },
+
+  dataRow: {
+    display: "flex",
+    alignItems: "center",
+
+    "& strong": {
+      marginRight: theme.spacing(1),
+    },
+  },
 }))

From 75fae122831700e38940184ef9b354c48efceb9b Mon Sep 17 00:00:00 2001
From: Garrett <garrett@coder.com>
Date: Tue, 30 Aug 2022 19:09:59 +0000
Subject: [PATCH 2/2] PR comments

---
 site/src/components/Resources/Resources.tsx | 74 ++++++++++-----------
 1 file changed, 34 insertions(+), 40 deletions(-)

diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index f52163d4a80b5..1b1e7db51684d 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -25,6 +25,8 @@ const Language = {
   resourceLabel: "Resource",
   agentsLabel: "Agents",
   agentLabel: "Agent",
+  statusLabel: "status: ",
+  osLabel: "os: ",
 }
 
 interface ResourcesProps {
@@ -100,43 +102,43 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                       )}
 
                       <TableCell className={styles.agentColumn}>
-                      <TableCellDataPrimary highlight>{agent.name}</TableCellDataPrimary>
-                      <div className={styles.data}>
-                        <div className={styles.dataRow}>
-                          <strong>status: </strong>
-                          <span style={{ color: agentStatus.color }} className={styles.status}>
+                        <TableCellDataPrimary highlight>{agent.name}</TableCellDataPrimary>
+                        <div className={styles.data}>
+                          <div className={styles.dataRow}>
+                            <strong>{Language.statusLabel}</strong>
+                            <span style={{ color: agentStatus.color }} className={styles.status}>
                               {agentStatus.status}
                             </span>
+                          </div>
+                          <div className={styles.dataRow}>
+                            <strong>{Language.osLabel}</strong>
+                            <span className={styles.operatingSystem}>{agent.operating_system}</span>
+                          </div>
                         </div>
-                        <div className={styles.dataRow}>
-                          <strong>os: </strong>
-                          {agent.operating_system}
-                        </div>
-                      </div>
                       </TableCell>
                       <TableCell>
-                          <div className={styles.accessLinks}>
-                              {canUpdateWorkspace && agent.status === "connected" && (
-                                <>
-                                  <SSHButton workspaceName={workspace.name} agentName={agent.name} />
-                                  <TerminalLink
-                                    workspaceName={workspace.name}
-                                    agentName={agent.name}
-                                    userName={workspace.owner_name}
-                                  />
-                                  {agent.apps.map((app) => (
-                                    <AppLink
-                                      key={app.name}
-                                      appIcon={app.icon}
-                                      appName={app.name}
-                                      userName={workspace.owner_name}
-                                      workspaceName={workspace.name}
-                                      agentName={agent.name}
-                                    />
-                                  ))}
-                                </>
-                              )}
-                          </div>
+                        <div className={styles.accessLinks}>
+                          {canUpdateWorkspace && agent.status === "connected" && (
+                            <>
+                              <SSHButton workspaceName={workspace.name} agentName={agent.name} />
+                              <TerminalLink
+                                workspaceName={workspace.name}
+                                agentName={agent.name}
+                                userName={workspace.owner_name}
+                              />
+                              {agent.apps.map((app) => (
+                                <AppLink
+                                  key={app.name}
+                                  appIcon={app.icon}
+                                  appName={app.name}
+                                  userName={workspace.owner_name}
+                                  workspaceName={workspace.name}
+                                  agentName={agent.name}
+                                />
+                              ))}
+                            </>
+                          )}
+                        </div>
                       </TableCell>
                     </TableRow>
                   )
@@ -181,14 +183,6 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: `${theme.spacing(4)}px !important`,
   },
 
-  agentInfo: {
-    display: "flex",
-    gap: theme.spacing(1.5),
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-    marginTop: theme.spacing(0.5),
-  },
-
   operatingSystem: {
     display: "block",
     textTransform: "capitalize",