Update resource status

BrunoQuaresma · BrunoQuaresma · commit 4496ec2bf822 · 2022-10-17T17:28:32.000Z
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -1,8 +1,13 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"
 import { Skeleton } from "@material-ui/lab"
 import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
 import { FC, useState } from "react"
-import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
+import {
+  Workspace,
+  WorkspaceAgent,
+  WorkspaceAgentStatus,
+  WorkspaceResource,
+} from "../../api/typesGenerated"
 import { AppLink } from "../AppLink/AppLink"
 import { SSHButton } from "../SSHButton/SSHButton"
 import { Stack } from "../Stack/Stack"
@@ -19,6 +24,23 @@ import IconButton from "@material-ui/core/IconButton"
 import Tooltip from "@material-ui/core/Tooltip"
 import { Maybe } from "components/Conditionals/Maybe"
 
+const getAgentStatusColor = (theme: Theme, agent: WorkspaceAgent) => {
+  switch (agent.status) {
+    case "connected":
+      return theme.palette.success.light
+    case "connecting":
+      return theme.palette.info.light
+    case "disconnected":
+      return theme.palette.text.secondary
+  }
+}
+
+const agentStatusLabels: Record<WorkspaceAgentStatus, string> = {
+  connected: "Connected",
+  connecting: "Connecting...",
+  disconnected: "Disconnected",
+}
+
 export interface ResourceCardProps {
   resource: WorkspaceResource
   workspace: Workspace
@@ -36,6 +58,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({
   hideSSHButton,
   serverVersion,
 }) => {
+  const theme = useTheme<Theme>()
   const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
     useState(false)
   const styles = useStyles()
@@ -110,6 +133,9 @@ export const ResourceCard: FC<ResourceCardProps> = ({
 
       <div>
         {resource.agents?.map((agent) => {
+          const statusColor = getAgentStatusColor(theme, agent)
+          const statusLabel = agentStatusLabels[agent.status]
+
           return (
             <Stack
               key={agent.id}
@@ -119,7 +145,13 @@ export const ResourceCard: FC<ResourceCardProps> = ({
               className={styles.agentRow}
             >
               <Stack direction="row" alignItems="baseline">
-                <div role="status" className={styles.agentStatus} />
+                <Tooltip title={statusLabel}>
+                  <div
+                    role="status"
+                    className={styles.agentStatus}
+                    style={{ backgroundColor: statusColor }}
+                  />
+                </Tooltip>
                 <div>
                   <div className={styles.agentName}>{agent.name}</div>
                   <Stack
@@ -248,7 +280,6 @@ const useStyles = makeStyles((theme) => ({
   agentStatus: {
     width: theme.spacing(1),
     height: theme.spacing(1),
-    backgroundColor: theme.palette.success.light,
     borderRadius: "100%",
   },
 
