add support for web terminal

f0ssel · f0ssel · commit 61648cbca907 · 2024-06-23T01:09:46.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -24,6 +24,7 @@ import type dayjs from "dayjs";
 import userAgentParser from "ua-parser-js";
 import { delay } from "../utils/delay";
 import * as TypesGen from "./typesGenerated";
+import { PostWorkspaceUsageRequest } from "./typesGenerated";
 
 const getMissingParameters = (
   oldBuildParameters: TypesGen.WorkspaceBuildParameter[],
@@ -1879,6 +1880,15 @@ class ApiMethods {
       throw error;
     }
   };
+
+  postWorkspaceUsage = async (workspaceID: string, options: PostWorkspaceUsageRequest) => {
+    const response = await this.axios.post(
+      `/api/v2/workspaces/${workspaceID}/usage`,
+      options,
+    );
+
+    return response.data;
+  };
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,
diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -8,6 +8,7 @@ import { type DeleteWorkspaceOptions, API } from "api/api";
 import type {
   CreateWorkspaceRequest,
   ProvisionerLogLevel,
+  UsageAppName,
   Workspace,
   WorkspaceBuild,
   WorkspaceBuildParameter,
@@ -16,6 +17,7 @@ import type {
 } from "api/typesGenerated";
 import { disabledRefetchOptions } from "./util";
 import { workspaceBuildsKey } from "./workspaceBuilds";
+import { Terminal } from "xterm";
 
 export const workspaceByOwnerAndNameKey = (owner: string, name: string) => [
   "workspace",
@@ -313,3 +315,35 @@ export const agentLogs = (workspaceId: string, agentId: string) => {
     ...disabledRefetchOptions,
   };
 };
+
+// workspace usage options
+export interface WorkspaceUsageOptions {
+  usageApp: UsageAppName;
+  terminal: Terminal | undefined;
+  workspaceId: string | undefined;
+  agentId: string | undefined;
+}
+
+export const workspaceUsage = (options: WorkspaceUsageOptions) => {
+  return {
+    queryKey: [
+      "workspaces", options.workspaceId, 
+      "agents", options.agentId, 
+      "usage", options.usageApp, 
+    ],
+    enabled: options.terminal !== undefined && options.workspaceId !== undefined && options.agentId !== undefined,
+    queryFn: () => {
+      if (options.terminal === undefined || options.workspaceId === undefined || options.agentId === undefined) {
+        return Promise.reject();
+      }
+
+      return API.postWorkspaceUsage(options.workspaceId, {
+        agent_id: options.agentId,
+        app_name: options.usageApp,
+      })
+    },
+    // ...disabledRefetchOptions,
+    refetchInterval: 60000,
+    refetchIntervalInBackground: true,
+  };
+}
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -12,7 +12,7 @@ import { Unicode11Addon } from "xterm-addon-unicode11";
 import { WebLinksAddon } from "xterm-addon-web-links";
 import { WebglAddon } from "xterm-addon-webgl";
 import { deploymentConfig } from "api/queries/deployment";
-import { workspaceByOwnerAndName } from "api/queries/workspaces";
+import { workspaceByOwnerAndName, workspaceUsage } from "api/queries/workspaces";
 import { useProxy } from "contexts/ProxyContext";
 import { ThemeOverride } from "contexts/ThemeProvider";
 import themes from "theme";
@@ -67,6 +67,16 @@ const TerminalPage: FC = () => {
   const config = useQuery(deploymentConfig());
   const renderer = config.data?.config.web_terminal_renderer;
 
+  // Periodically report workspace usage.
+  useQuery(
+    workspaceUsage({
+      usageApp: "reconnecting-pty",
+      terminal,
+      workspaceId: workspace.data?.id,
+      agentId: workspaceAgent?.id,
+    })
+  );
+
   // handleWebLink handles opening of URLs in the terminal!
   const handleWebLink = useCallback(
     (uri: string) => {
