feat: support agent metadata terminals

ammario · ammario · commit 06594d91ad28 · 2023-08-17T22:50:07.000Z
diff --git a/examples/templates/jfrog/docker/main.tf b/examples/templates/jfrog/docker/main.tf
@@ -109,6 +109,14 @@ resource "coder_agent" "main" {
     JFROG_IDE_ACCESS_TOKEN : "${artifactory_scoped_token.me.access_token}"
     JFROG_IDE_STORE_CONNECTION : "true"
   }
+
+  metadata {
+    key = "cpu"
+    display_name = "CPU"
+    script = "coder stat cpu"
+    timeout = 1
+    interval = 1
+  }
 }
 
 resource "coder_app" "code-server" {
diff --git a/site/src/components/Resources/AgentMetadata.stories.tsx b/site/src/components/Resources/AgentMetadata.stories.tsx
@@ -103,5 +103,16 @@ Example.args = {
         key: "big",
       },
     },
+    {
+      result: {
+        ...resultDefaults,
+        value: "blah blah",
+      },
+      description: {
+        ...descriptionDefaults,
+        display_name: "terminal:hello world",
+        key: "term",
+      },
+    },
   ],
 }
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -1,11 +1,13 @@
 import makeStyles from "@mui/styles/makeStyles"
 import { watchAgentMetadata } from "api/api"
+import Popover from "@mui/material/Popover"
 import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
 import dayjs from "dayjs"
 import {
   createContext,
   FC,
+  Ref,
   useContext,
   useEffect,
   useRef,
@@ -21,6 +23,42 @@ type ItemStatus = "stale" | "valid" | "loading"
 
 export const WatchAgentMetadataContext = createContext(watchAgentMetadata)
 
+const MetadataTerminalPopover: FC<{
+  id: string
+  body: string
+}> = ({ id, body }) => {
+  const styles = useStyles()
+
+  const ref = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <div
+        className={styles.inlineCommand}
+        ref={ref}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+      >
+        View Terminal
+      </div>
+
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={ref.current}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        classes={{ paper: styles.popover }}
+      >
+        <Box p={1}>{body}</Box>
+      </Popover>
+    </>
+  )
+}
+
 const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   const styles = useStyles()
 
@@ -31,6 +69,13 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
     throw new Error("Metadata item description is undefined")
   }
 
+  const terminalPrefix = "terminal:"
+  const isTerminal = item.description.display_name.startsWith(terminalPrefix)
+
+  const displayName = isTerminal
+    ? item.description.display_name.slice(terminalPrefix.length)
+    : item.description.display_name
+
   const staleThreshold = Math.max(
     item.description.interval + item.description.timeout * 2,
     5,
@@ -87,10 +132,15 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
 
   return (
     <div className={styles.metadata}>
-      <div className={styles.metadataLabel}>
-        {item.description.display_name}
-      </div>
-      <Box>{value}</Box>
+      <div className={styles.metadataLabel}>{displayName}</div>
+      {isTerminal ? (
+        <MetadataTerminalPopover
+          id={`metadata-terminal-${item.description.key}`}
+          body={item.description.script}
+        />
+      ) : (
+        <Box>{value}</Box>
+      )}
     </div>
   )
 }
@@ -104,6 +154,7 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
   if (metadata.length === 0) {
     return <></>
   }
+
   return (
     <div className={styles.root}>
       <Stack alignItems="baseline" direction="row" spacing={6}>
@@ -227,6 +278,13 @@ const useStyles = makeStyles((theme) => ({
     scrollPadding: theme.spacing(0, 4),
   },
 
+  popover: {
+    padding: 0,
+    width: theme.spacing(38),
+    color: theme.palette.text.secondary,
+    marginTop: theme.spacing(0.5),
+  },
+
   metadata: {
     fontSize: 12,
     lineHeight: "normal",

Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,14 @@ resource "coder_agent" "main" {`
`109`	`109`	`JFROG_IDE_ACCESS_TOKEN : "${artifactory_scoped_token.me.access_token}"`
`110`	`110`	`JFROG_IDE_STORE_CONNECTION : "true"`
`111`	`111`	`}`
	`112`	`+`
	`113`	`+ metadata {`
	`114`	`+ key = "cpu"`
	`115`	`+ display_name = "CPU"`
	`116`	`+ script = "coder stat cpu"`
	`117`	`+ timeout = 1`
	`118`	`+ interval = 1`
	`119`	`+ }`
`112`	`120`	`}`
`113`	`121`
`114`	`122`	`resource "coder_app" "code-server" {`