Add back agent status

BrunoQuaresma · BrunoQuaresma · commit c3411b308ce9 · 2024-01-16T17:06:15.000Z
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -36,6 +36,7 @@ import { AppLink } from "./AppLink/AppLink";
 import { PortForwardButton } from "./PortForwardButton";
 import { SSHButton } from "./SSHButton/SSHButton";
 import { TerminalLink } from "./TerminalLink/TerminalLink";
+import { AgentStatus } from "./AgentStatus";
 
 // Logs are stored as the Line interface to make rendering
 // much more efficient. Instead of mapping objects each time, we're
@@ -164,7 +165,10 @@ export const AgentRow: FC<AgentRowProps> = ({
     >
       <header css={styles.header}>
         <div css={styles.agentInfo}>
-          <div css={styles.agentName}>{agent.name}</div>
+          <div css={styles.agentNameAndStatus}>
+            <AgentStatus agent={agent} />
+            <span css={styles.agentName}>{agent.name}</span>
+          </div>
           {agent.status === "connected" && (
             <>
               <AgentVersion
@@ -615,7 +619,7 @@ const styles = {
   agentNameAndStatus: (theme) => ({
     display: "flex",
     alignItems: "center",
-    gap: 32,
+    gap: 12,
 
     [theme.breakpoints.down("md")]: {
       width: "100%",
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
@@ -272,8 +272,8 @@ export const AgentStatus: FC<AgentStatusProps> = ({ agent }) => {
 
 const styles = {
   status: {
-    width: 8,
-    height: 8,
+    width: 6,
+    height: 6,
     borderRadius: "100%",
     flexShrink: 0,
   },
@@ -306,15 +306,15 @@ const styles = {
 
   timeoutWarning: (theme) => ({
     color: theme.palette.warning.light,
-    width: 16,
-    height: 16,
+    width: 14,
+    height: 14,
     position: "relative",
   }),
 
   errorWarning: (theme) => ({
     color: theme.palette.error.main,
-    width: 16,
-    height: 16,
+    width: 14,
+    height: 14,
     position: "relative",
   }),
 } satisfies Record<string, Interpolation<Theme>>;
