Improve agent status

BrunoQuaresma · BrunoQuaresma · commit a1b1f7fff914 · 2022-10-17T19:00:16.000Z
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
@@ -0,0 +1,93 @@
+import Tooltip from "@material-ui/core/Tooltip"
+import { makeStyles } from "@material-ui/core/styles"
+import { combineClasses } from "util/combineClasses"
+import { WorkspaceAgent } from "api/typesGenerated"
+import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
+
+const ConnectedStatus: React.FC = () => {
+  const styles = useStyles()
+
+  return (
+    <Tooltip title="Connected">
+      <div
+        role="status"
+        className={combineClasses([styles.status, styles.connected])}
+      />
+    </Tooltip>
+  )
+}
+
+const DisconnectedStatus: React.FC = () => {
+  const styles = useStyles()
+
+  return (
+    <Tooltip title="Disconnected">
+      <div
+        role="status"
+        className={combineClasses([styles.status, styles.disconnected])}
+      />
+    </Tooltip>
+  )
+}
+
+const ConnectingStatus: React.FC = () => {
+  const styles = useStyles()
+
+  return (
+    <Tooltip title="Connecting...">
+      <div
+        role="status"
+        className={combineClasses([styles.status, styles.connecting])}
+      />
+    </Tooltip>
+  )
+}
+
+export const AgentStatus: React.FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
+  return (
+    <ChooseOne>
+      <Cond condition={agent.status === "connected"}>
+        <ConnectedStatus />
+      </Cond>
+      <Cond condition={agent.status === "disconnected"}>
+        <DisconnectedStatus />
+      </Cond>
+      <Cond>
+        <ConnectingStatus />
+      </Cond>
+    </ChooseOne>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  status: {
+    width: theme.spacing(1),
+    height: theme.spacing(1),
+    borderRadius: "100%",
+  },
+
+  connected: {
+    backgroundColor: theme.palette.success.light,
+  },
+
+  disconnected: {
+    backgroundColor: theme.palette.text.secondary,
+  },
+
+  "@keyframes pulse": {
+    "0%": {
+      opacity: 0.25,
+    },
+    "50%": {
+      opacity: 1,
+    },
+    "100%": {
+      opacity: 0.25,
+    },
+  },
+
+  connecting: {
+    backgroundColor: theme.palette.info.light,
+    animation: "$pulse 1s ease-in-out forwards infinite",
+  },
+}))
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -1,13 +1,8 @@
-import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"
+import { makeStyles } from "@material-ui/core/styles"
 import { Skeleton } from "@material-ui/lab"
 import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
 import { FC, useState } from "react"
-import {
-  Workspace,
-  WorkspaceAgent,
-  WorkspaceAgentStatus,
-  WorkspaceResource,
-} from "../../api/typesGenerated"
+import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { AppLink } from "../AppLink/AppLink"
 import { SSHButton } from "../SSHButton/SSHButton"
 import { Stack } from "../Stack/Stack"
@@ -24,23 +19,7 @@ import IconButton from "@material-ui/core/IconButton"
 import Tooltip from "@material-ui/core/Tooltip"
 import { Maybe } from "components/Conditionals/Maybe"
 import { CopyableValue } from "components/CopyableValue/CopyableValue"
-
-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",
-}
+import { AgentStatus } from "./AgentStatus"
 
 export interface ResourceCardProps {
   resource: WorkspaceResource
@@ -59,7 +38,6 @@ export const ResourceCard: FC<ResourceCardProps> = ({
   hideSSHButton,
   serverVersion,
 }) => {
-  const theme = useTheme<Theme>()
   const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
     useState(false)
   const styles = useStyles()
@@ -136,9 +114,6 @@ 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}
@@ -148,13 +123,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({
               className={styles.agentRow}
             >
               <Stack direction="row" alignItems="baseline">
-                <Tooltip title={statusLabel}>
-                  <div
-                    role="status"
-                    className={styles.agentStatus}
-                    style={{ backgroundColor: statusColor }}
-                  />
-                </Tooltip>
+                <AgentStatus agent={agent} />
                 <div>
                   <div className={styles.agentName}>{agent.name}</div>
                   <Stack
@@ -279,12 +248,6 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 
-  agentStatus: {
-    width: theme.spacing(1),
-    height: theme.spacing(1),
-    borderRadius: "100%",
-  },
-
   agentName: {
     fontWeight: 600,
   },
