feat: support agent metadata terminals

ammario · ammario · commit 38e6a2eaf3a0 · 2023-08-17T23:43:53.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
@@ -105,3 +105,21 @@ Example.args = {
     },
   ],
 }
+
+export const Terminal = Template.bind({})
+Terminal.args = {
+  metadata: [
+    {
+      result: {
+        ...resultDefaults,
+        value: "$ blah blah",
+      },
+      description: {
+        ...descriptionDefaults,
+        display_name: "terminal:hello world",
+        key: "term",
+        script: "echo hello world",
+      },
+    },
+  ],
+}
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,
@@ -16,11 +18,94 @@ import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { combineClasses } from "utils/combineClasses"
 import Tooltip from "@mui/material/Tooltip"
 import Box, { BoxProps } from "@mui/material/Box"
+import * as XTerm from "xterm"
+import { FitAddon } from "xterm-addon-fit"
+import { WebLinksAddon } from "xterm-addon-web-links"
+import { colors } from "theme/colors"
 
 type ItemStatus = "stale" | "valid" | "loading"
 
 export const WatchAgentMetadataContext = createContext(watchAgentMetadata)
 
+const MetadataTerminalPopover: FC<{
+  id: string
+  value: string
+}> = ({ id, value: value }) => {
+  const styles = useStyles()
+
+  const popRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+
+  const xtermRef = useRef<HTMLDivElement>(null)
+  const [terminal, setTerminal] = useState<XTerm.Terminal | null>(null)
+  const [fitAddon, setFitAddon] = useState<FitAddon | null>(null)
+
+  // Create the terminal.
+  // Largely taken from TerminalPage.
+  useEffect(() => {
+    if (!xtermRef.current) {
+      return
+    }
+    const terminal = new XTerm.Terminal({
+      allowTransparency: true,
+      disableStdin: true,
+      fontFamily: MONOSPACE_FONT_FAMILY,
+      fontSize: 16,
+      theme: {
+        background: colors.gray[16],
+      },
+    })
+
+    const fitAddon = new FitAddon()
+    setFitAddon(fitAddon)
+    setTerminal(terminal)
+    terminal.open(xtermRef.current)
+    terminal.write(value)
+    const listener = () => {
+      // This will trigger a resize event on the terminal.
+      fitAddon.fit()
+    }
+    window.addEventListener("resize", listener)
+    return () => {
+      window.removeEventListener("resize", listener)
+      terminal.dispose()
+    }
+  }, [xtermRef])
+
+  return (
+    <>
+      <div
+        className={styles.viewTerminal}
+        ref={popRef}
+        onMouseOver={() => {
+          setOpen(true)
+        }}
+      >
+        View Terminal
+      </div>
+
+      <Popover
+        id={id}
+        open={open}
+        onClose={() => setOpen(false)}
+        anchorEl={popRef.current}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <Box p={1}>
+          <div
+            className={styles.terminal}
+            ref={xtermRef}
+            data-testid="terminal"
+          />
+        </Box>
+      </Popover>
+    </>
+  )
+}
+
 const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   const styles = useStyles()
 
@@ -31,6 +116,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 +179,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}`}
+          value={item.result.value}
+        />
+      ) : (
+        <Box>{value}</Box>
+      )}
     </div>
   )
 }
@@ -104,6 +201,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 +325,53 @@ const useStyles = makeStyles((theme) => ({
     scrollPadding: theme.spacing(0, 4),
   },
 
+  viewTerminal: {
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    display: "inline-block",
+    textDecoration: "underline",
+    fontWeight: 600,
+    margin: 0,
+    fontSize: 14,
+    borderRadius: 4,
+    color: theme.palette.text.primary,
+  },
+
+  terminal: {
+    width: "100vw",
+    height: "30vh",
+    overflow: "hidden",
+    backgroundColor: theme.palette.background.paper,
+    flex: 1,
+    // These styles attempt to mimic the VS Code scrollbar.
+    "& .xterm": {
+      padding: 4,
+      width: "100vw",
+      height: "100vh",
+    },
+    "& .xterm-viewport": {
+      // This is required to force full-width on the terminal.
+      // Otherwise there's a small white bar to the right of the scrollbar.
+      width: "auto !important",
+    },
+    "& .xterm-viewport::-webkit-scrollbar": {
+      width: "10px",
+    },
+    "& .xterm-viewport::-webkit-scrollbar-track": {
+      backgroundColor: "inherit",
+    },
+    "& .xterm-viewport::-webkit-scrollbar-thumb": {
+      minHeight: 20,
+      backgroundColor: "rgba(255, 255, 255, 0.18)",
+    },
+  },
+
+  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" {`