coder · BrunoQuaresma · Jun 7, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 3, 2024
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -922,7 +922,7 @@ jobs:
         uses: actions/dependency-review-action@v4.3.2
         with:
           allow-licenses: Apache-2.0, BSD-2-Clause, BSD-3-Clause, CC0-1.0, ISC, MIT, MIT-0, MPL-2.0
-          allow-dependencies-licenses: "pkg:golang/github.com/coder/wgtunnel@0.1.13-0.20240522110300-ade90dfb2da0"
+          allow-dependencies-licenses: "pkg:golang/github.com/coder/wgtunnel@0.1.13-0.20240522110300-ade90dfb2da0, pkg:npm/pako@1.0.11"
           license-check: true
           vulnerability-check: false
       - name: "Report"

diff --git a/site/package.json b/site/package.json
@@ -45,6 +45,7 @@
     "@mui/system": "5.14.0",
     "@mui/utils": "5.14.11",
     "@tanstack/react-query-devtools": "4.35.3",
+    "@types/file-saver": "2.0.7",
     "ansi-to-html": "0.7.2",
     "axios": "1.6.0",
     "canvas": "2.11.0",
@@ -58,8 +59,10 @@
     "date-fns": "2.30.0",
     "dayjs": "1.11.4",
     "emoji-mart": "5.4.0",
+    "file-saver": "2.0.5",
     "formik": "2.4.1",
     "front-matter": "4.0.2",
+    "jszip": "3.10.1",
     "lodash": "4.17.21",
     "monaco-editor": "0.44.0",
     "pretty-bytes": "6.1.0",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1142,10 +1142,9 @@ class ApiMethods {
 
   getWorkspaceBuildLogs = async (
     buildId: string,
-    before: Date,
   ): Promise<TypesGen.ProvisionerJobLog[]> => {
     const response = await this.axios.get<TypesGen.ProvisionerJobLog[]>(
-      `/api/v2/workspacebuilds/${buildId}/logs?before=${before.getTime()}`,
+      `/api/v2/workspacebuilds/${buildId}/logs`,
     );
 
     return response.data;

diff --git a/site/src/api/queries/util.ts b/site/src/api/queries/util.ts
@@ -1,7 +1,7 @@
 import type { UseQueryOptions, QueryKey } from "react-query";
 import type { MetadataState, MetadataValue } from "hooks/useEmbeddedMetadata";
 
-const disabledFetchOptions = {
+export const disabledRefetchOptions = {
   cacheTime: Infinity,
   staleTime: Infinity,
   refetchOnMount: false,
@@ -62,7 +62,7 @@ export function cachedQuery<
 
     // Make sure the disabled options are always serialized last, so that no
     // one using this function can accidentally override the values
-    ...(metadata.available ? disabledFetchOptions : {}),
+    ...(metadata.available ? disabledRefetchOptions : {}),
   };
 
   return newOptions as FormattedQueryOptionsResult<

diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -14,6 +14,7 @@ import type {
   WorkspacesRequest,
   WorkspacesResponse,
 } from "api/typesGenerated";
+import { disabledRefetchOptions } from "./util";
 import { workspaceBuildsKey } from "./workspaceBuilds";
 
 export const workspaceByOwnerAndNameKey = (owner: string, name: string) => [
@@ -283,3 +284,32 @@ export const toggleFavorite = (
     },
   };
 };
+
+export const buildLogsKey = (workspaceId: string) => [
+  "workspaces",
+  workspaceId,
+  "logs",
+];
+
+export const buildLogs = (workspace: Workspace) => {
+  return {
+    queryKey: buildLogsKey(workspace.id),
+    queryFn: () => API.getWorkspaceBuildLogs(workspace.latest_build.id),
+  };
+};
+
+export const agentLogsKey = (workspaceId: string, agentId: string) => [
+  "workspaces",
+  workspaceId,
+  "agents",
+  agentId,
+  "logs",
+];
+
+export const agentLogs = (workspaceId: string, agentId: string) => {
+  return {
+    queryKey: agentLogsKey(workspaceId, agentId),
+    queryFn: () => API.getWorkspaceAgentLogs(agentId),
+    ...disabledRefetchOptions,
+  };
+};
diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
@@ -26,11 +26,11 @@ export const DropdownArrow: FC<ArrowProps> = ({
 };
 
 const styles = {
-  base: (theme) => ({
-    color: theme.palette.primary.contrastText,
+  base: {
+    color: "currentcolor",
     width: 16,
     height: 16,
-  }),
+  },
 
   withMargin: {
     marginLeft: 8,

diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
@@ -1,14 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
-import {
-  type ComponentProps,
-  forwardRef,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { type ComponentProps, forwardRef, useMemo } from "react";
 import { FixedSizeList as List } from "react-window";
-import { watchWorkspaceAgentLogs } from "api/api";
 import type { WorkspaceAgentLogSource } from "api/typesGenerated";
 import {
   AGENT_LOG_LINE_HEIGHT,
@@ -179,64 +172,6 @@ export const AgentLogs = forwardRef<List, AgentLogsProps>(
   },
 );
 
-export const useAgentLogs = (
-  agentId: string,
-  options?: { enabled?: boolean; initialData?: LineWithID[] },
-) => {
-  const initialData = options?.initialData;
-  const enabled = options?.enabled === undefined ? true : options.enabled;
-  const [logs, setLogs] = useState<LineWithID[] | undefined>(initialData);
-
-  useEffect(() => {
-    if (!enabled) {
-      setLogs([]);
-      return;
-    }
-
-    const socket = watchWorkspaceAgentLogs(agentId, {
-      // Get all logs
-      after: 0,
-      onMessage: (logs) => {
-        // Prevent new logs getting added when a connection is not open
-        if (socket.readyState !== WebSocket.OPEN) {
-          return;
-        }
-
-        setLogs((previousLogs) => {
-          const newLogs: LineWithID[] = logs.map((log) => ({
-            id: log.id,
-            level: log.level || "info",
-            output: log.output,
-            time: log.created_at,
-            sourceId: log.source_id,
-          }));
-
-          if (!previousLogs) {
-            return newLogs;
-          }
-
-          return [...previousLogs, ...newLogs];
-        });
-      },
-      onError: (error) => {
-        // For some reason Firefox and Safari throw an error when a websocket
-        // connection is close in the middle of a message and because of that we
-        // can't safely show to the users an error message since most of the
-        // time they are just internal stuff. This does not happen to Chrome at
-        // all and I tried to find better way to "soft close" a WS connection on
-        // those browsers without success.
-        console.error(error);
-      },
-    });
-
-    return () => {
-      socket.close();
-    };
-  }, [agentId, enabled]);
-
-  return logs;
-};
-
 // These colors were picked at random. Feel free
 // to add more, adjust, or change! Users will not
 // depend on these colors.