Update agent row

coder · BrunoQuaresma · Apr 20, 2023 · Apr 18, 2023 · Apr 18, 2023 · Apr 18, 2023
commit 0d4561c20a0760a4e8ad0afc7acb418ba4076c8f
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -77,18 +77,21 @@ export interface AgentMetadataViewProps {
 }
 
 export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
+  const styles = useStyles()
   if (metadata.length === 0) {
     return <></>
   }
   return (
-    <Stack alignItems="baseline" direction="row" spacing={6}>
-      {metadata.map((m) => {
-        if (m.description === undefined) {
-          throw new Error("Metadata item description is undefined")
-        }
-        return <MetadataItem key={m.description.key} item={m} />
-      })}
-    </Stack>
+    <div className={styles.root}>
+      <Stack alignItems="baseline" direction="row" spacing={6}>
+        {metadata.map((m) => {
+          if (m.description === undefined) {
+            throw new Error("Metadata item description is undefined")
+          }
+          return <MetadataItem key={m.description.key} item={m} />
+        })}
+      </Stack>
+    </div>
   )
 }
 
@@ -99,8 +102,8 @@ export const AgentMetadata: FC<{
   const [metadata, setMetadata] = useState<
     WorkspaceAgentMetadata[] | undefined
   >(undefined)
-  const styles = useStyles()
   const watchAgentMetadata = useContext(WatchAgentMetadataContext)
+  const styles = useStyles()
 
   useEffect(() => {
     if (storybookMetadata !== undefined) {
@@ -139,31 +142,46 @@ export const AgentMetadata: FC<{
 
   if (metadata === undefined) {
     return (
-      <Stack alignItems="baseline" direction="row" spacing={6}>
-        <div className={styles.metadata}>
-          <Skeleton width={40} height={12} variant="text" />
-          <Skeleton width={65} height={14} variant="text" />
-        </div>
-
-        <div className={styles.metadata}>
-          <Skeleton width={40} height={12} variant="text" />
-          <Skeleton width={65} height={14} variant="text" />
-        </div>
-
-        <div className={styles.metadata}>
-          <Skeleton width={40} height={12} variant="text" />
-          <Skeleton width={65} height={14} variant="text" />
-        </div>
-      </Stack>
+      <div className={styles.root}>
+        <AgentMetadataSkeleton />
+      </div>
     )
   }
 
   return <AgentMetadataView metadata={metadata} />
 }
 
+export const AgentMetadataSkeleton: FC = () => {
+  const styles = useStyles()
+
+  return (
+    <Stack alignItems="baseline" direction="row" spacing={6}>
+      <div className={styles.metadata}>
+        <Skeleton width={40} height={12} variant="text" />
+        <Skeleton width={65} height={14} variant="text" />
+      </div>
+
+      <div className={styles.metadata}>
+        <Skeleton width={40} height={12} variant="text" />
+        <Skeleton width={65} height={14} variant="text" />
+      </div>
+
+      <div className={styles.metadata}>
+        <Skeleton width={40} height={12} variant="text" />
+        <Skeleton width={65} height={14} variant="text" />
+      </div>
+    </Stack>
+  )
+}
+
 // These are more or less copied from
 // site/src/components/Resources/ResourceCard.tsx
 const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2.5, 4),
+    borderTop: `1px solid ${theme.palette.divider}`,
+    background: theme.palette.background.paper,
+  },
   metadata: {
     fontSize: 12,
     lineHeight: "normal",

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -19,7 +19,6 @@ import {
   useRef,
   useState,
 } from "react"
-import { useTranslation } from "react-i18next"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism"
 import AutoSizer from "react-virtualized-auto-sizer"
@@ -41,8 +40,8 @@ import { Stack } from "../Stack/Stack"
 import { TerminalLink } from "../TerminalLink/TerminalLink"
 import { AgentLatency } from "./AgentLatency"
 import { AgentMetadata } from "./AgentMetadata"
-import { AgentStatus } from "./AgentStatus"
 import { AgentVersion } from "./AgentVersion"
+import { AgentStatus } from "./AgentStatus"
 
 export interface AgentRowProps {
   agent: WorkspaceAgent
@@ -72,7 +71,6 @@ export const AgentRow: FC<AgentRowProps> = ({
   sshPrefix,
 }) => {
   const styles = useStyles()
-  const { t } = useTranslation("agent")
   const [logsMachine, sendLogsEvent] = useMachine(workspaceAgentLogsMachine, {
     context: { agentID: agent.id },
     services: process.env.STORYBOOK
@@ -89,7 +87,11 @@ export const AgentRow: FC<AgentRowProps> = ({
   const theme = useTheme()
   const startupScriptAnchorRef = useRef<HTMLButtonElement>(null)
   const [startupScriptOpen, setStartupScriptOpen] = useState(false)
-
+  const hasAppsToDisplay = !hideVSCodeDesktopButton || agent.apps.length > 0
+  const shouldDisplayApps =
+    showApps &&
+    ((agent.status === "connected" && hasAppsToDisplay) ||
+      agent.status === "connecting")
   const hasStartupFeatures =
     Boolean(agent.startup_logs_length) ||
     Boolean(logsMachine.context.startupLogs?.length)
@@ -173,6 +175,7 @@ export const AgentRow: FC<AgentRowProps> = ({
       className={combineClasses([
         styles.agentRow,
         styles[`agentRow-${agent.status}`],
+        styles[`agentRow-lifecycle-${agent.lifecycle_state}`],
       ])}
     >
       <Stack
@@ -183,18 +186,14 @@ export const AgentRow: FC<AgentRowProps> = ({
       >
         <div className={styles.agentNameAndStatus}>
           <Stack alignItems="center" direction="row" spacing={3}>
+            <AgentStatus agent={agent} />
             <div className={styles.agentName}>{agent.name}</div>
             <Stack
               direction="row"
               spacing={2}
               alignItems="baseline"
               className={styles.agentDescription}
             >
-              {agent.status === "timeout" && (
-                <div className={styles.agentErrorMessage}>
-                  {t("unableToConnect")}
-                </div>
-              )}
               {agent.status === "connected" && (
                 <>
                   <span className={styles.agentOS}>
@@ -262,14 +261,9 @@ export const AgentRow: FC<AgentRowProps> = ({
         )}
       </Stack>
 
-      <div className={styles.agentMetadata}>
-        <AgentMetadata
-          storybookMetadata={storybookAgentMetadata}
-          agent={agent}
-        />
-      </div>
+      <AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
 
-      {showApps && (
+      {shouldDisplayApps && (
         <div className={styles.apps}>
           {agent.status === "connected" && (
             <>
@@ -419,22 +413,60 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.background.paperLight,
     fontSize: 16,
     borderLeft: `2px solid ${theme.palette.text.secondary}`,
+
+    "&:not(:first-child)": {
+      borderTop: `2px solid ${theme.palette.divider}`,
+    },
   },
 
   "agentRow-connected": {
-    borderColor: theme.palette.success.light,
+    borderLeftColor: theme.palette.success.light,
   },
 
   "agentRow-disconnected": {
-    borderColor: theme.palette.text.secondary,
+    borderLeftColor: theme.palette.text.secondary,
   },
 
   "agentRow-connecting": {
-    borderColor: theme.palette.info.light,
+    borderLeftColor: theme.palette.info.light,
   },
 
   "agentRow-timeout": {
-    borderColor: theme.palette.warning.light,
+    borderLeftColor: theme.palette.warning.light,
+  },
+
+  "agentRow-lifecycle-created": {},
+
+  "agentRow-lifecycle-starting": {
+    borderLeftColor: theme.palette.info.light,
+  },
+
+  "agentRow-lifecycle-ready": {
+    borderLeftColor: theme.palette.success.light,
+  },
+
+  "agentRow-lifecycle-start_timeout": {
+    borderLeftColor: theme.palette.warning.light,
+  },
+
+  "agentRow-lifecycle-start_error": {
+    borderLeftColor: theme.palette.error.light,
+  },
+
+  "agentRow-lifecycle-shutting_down": {
+    borderLeftColor: theme.palette.info.light,
+  },
+
+  "agentRow-lifecycle-shutdown_timeout": {
+    borderLeftColor: theme.palette.warning.light,
+  },
+
+  "agentRow-lifecycle-shutdown_error": {
+    borderLeftColor: theme.palette.error.light,
+  },
+
+  "agentRow-lifecycle-off": {
+    borderLeftColor: theme.palette.text.secondary,
   },
 
   agentInfo: {
@@ -564,10 +596,4 @@ const useStyles = makeStyles((theme) => ({
   agentOS: {
     textTransform: "capitalize",
   },
-
-  agentMetadata: {
-    padding: theme.spacing(2.5, 4),
-    borderTop: `1px solid ${theme.palette.divider}`,
-    background: theme.palette.background.paper,
-  },
 }))
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
@@ -422,15 +422,15 @@ const useStyles = makeStyles((theme) => ({
 
   timeoutWarning: {
     color: theme.palette.warning.light,
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
+    width: theme.spacing(2),
+    height: theme.spacing(2),
     position: "relative",
   },
 
   errorWarning: {
     color: theme.palette.error.main,
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
+    width: theme.spacing(2),
+    height: theme.spacing(2),
     position: "relative",
   },
 }))
diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx
@@ -16,7 +16,7 @@ export const AgentVersion: FC<{
   const { outdated } = getDisplayVersionStatus(agent.version, serverVersion)
 
   if (!outdated) {
-    return <span>{agent.version}</span>
+    return <span>Updated</span>
   }
 
   return (
@@ -29,7 +29,7 @@ export const AgentVersion: FC<{
         onMouseLeave={() => setIsOpen(false)}
         className={styles.trigger}
       >
-        Agent Outdated
+        Outdated
       </span>
       <AgentOutdatedTooltip
         id={id}