Jun 7, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 3, 2024
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
        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
    "@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",
    "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

  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
 import type { UseQueryOptions, QueryKey } from "react-query";
 import type { MetadataState, MetadataValue } from "hooks/useEmbeddedMetadata";

 constdisabledFetchOptions = {
 exportconstdisabledRefetchOptions = {
  cacheTime: Infinity,
  staleTime: Infinity,
  refetchOnMount: false,

    // 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
  WorkspacesRequest,
  WorkspacesResponse,
 } from "api/typesGenerated";
 import { disabledRefetchOptions } from "./util";
 import { workspaceBuildsKey } from "./workspaceBuilds";

 export const workspaceByOwnerAndNameKey = (owner: string, name: string) => [
    },
  };
 };

 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
 };

 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
 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,
  },
 );

 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.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand All		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import type { UseQueryOptions, QueryKey } from "react-query";
		import type { MetadataState, MetadataValue } from "hooks/useEmbeddedMetadata";

		constdisabledFetchOptions = {
		exportconstdisabledRefetchOptions = {
		cacheTime: Infinity,
		staleTime: Infinity,
		refetchOnMount: false,
Expand DownExpand Up		@@ -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<
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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) => [
Expand DownExpand Up		@@ -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,
		};
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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,
Expand DownExpand Up		@@ -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.
Expand Down