feat: Add dedicated labels to agent status and OS (#3759)

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"
@@ -24,6 +25,8 @@ const Language = {
   resourceLabel: "Resource",
   agentsLabel: "Agents",
   agentLabel: "Agent",
+  statusLabel: "status: ",
+  osLabel: "os: ",
 }
 
 interface ResourcesProps {
@@ -42,10 +45,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,21 +102,24 @@ 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"] && (
+                        <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>
                       </TableCell>
                       <TableCell>
-                        <>
+                        <div className={styles.accessLinks}>
                           {canUpdateWorkspace && agent.status === "connected" && (
-                            <div className={styles.accessLinks}>
+                            <>
                               <SSHButton workspaceName={workspace.name} agentName={agent.name} />
                               <TerminalLink
                                 workspaceName={workspace.name}
@@ -134,9 +136,9 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                                   agentName={agent.name}
                                 />
                               ))}
-                            </div>
+                            </>
                           )}
-                        </>
+                        </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",
@@ -204,4 +198,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),
+    },
+  },
 }))