coder · ethanndickson · Jul 2, 2025 · Jul 2, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1802,6 +1802,14 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getConnectionLogs = async (
+		options: TypesGen.ConnectionLogsRequest,
+	): Promise<TypesGen.ConnectionLogResponse> => {
+		const url = getURLWithSearchParams("/api/v2/connectionlog", options);
+		const response = await this.axios.get(url);
+		return response.data;
+	};
+
 	getTemplateDAUs = async (
 		templateId: string,
 	): Promise<TypesGen.DAUsResponse> => {

diff --git a/site/src/api/queries/connectionlog.ts b/site/src/api/queries/connectionlog.ts
@@ -0,0 +1,24 @@
+import { API } from "api/api";
+import type { ConnectionLogResponse } from "api/typesGenerated";
+import { useFilterParamsKey } from "components/Filter/Filter";
+import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+
+export function paginatedConnectionLogs(
+	searchParams: URLSearchParams,
+): UsePaginatedQueryOptions<ConnectionLogResponse, string> {
+	return {
+		searchParams,
+		queryPayload: () => searchParams.get(useFilterParamsKey) ?? "",
+		queryKey: ({ payload, pageNumber }) => {
+			return ["connectionLogs", payload, pageNumber] as const;
+		},
+		queryFn: ({ payload, limit, offset }) => {
+			return API.getConnectionLogs({
+				offset,
+				limit,
+				q: payload,
+			});
+		},
+		prefetch: false,
+	};
+}
diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
@@ -82,14 +82,15 @@ export type UserFilterMenu = ReturnType<typeof useUserFilterMenu>;
 
 interface UserMenuProps {
 	menu: UserFilterMenu;
+	placeholder?: string;
 	width?: number;
 }
 
-export const UserMenu: FC<UserMenuProps> = ({ menu, width }) => {
+export const UserMenu: FC<UserMenuProps> = ({ menu, width, placeholder }) => {
 	return (
 		<SelectFilter
 			label="Select user"
-			placeholder="All users"
+			placeholder={placeholder ?? "All users"}
 			emptyText="No users found"
 			options={menu.searchOptions}
 			onSelect={menu.selectOption}

diff --git a/site/src/components/StatusPill/StatusPill.tsx b/site/src/components/StatusPill/StatusPill.tsx
@@ -0,0 +1,43 @@
+import { Pill } from "components/Pill/Pill";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
+import type { FC } from "react";
+import { httpStatusColor } from "utils/http";
+
+interface StatusPillProps {
+	code: number;
+	isHttpCode: boolean;
+	label?: string;
+}
+
+export const StatusPill: FC<StatusPillProps> = ({
+	code,
+	isHttpCode,
+	label,
+}) => {
+	const pill = (
+		<Pill
+			className="text-[10px] h-5 px-2.5 font-semibold"
+			type={
+				isHttpCode ? httpStatusColor(code) : code === 0 ? "success" : "error"
+			}
+		>
+			{code.toString()}
+		</Pill>
+	);
+	if (!label) {
+		return pill;
+	}
+	return (
+		<TooltipProvider>
+			<Tooltip delayDuration={150}>
+				<TooltipTrigger asChild>{pill}</TooltipTrigger>
+				<TooltipContent>{label}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
+};
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -16,19 +16,22 @@ interface DeploymentDropdownProps {
 	canViewDeployment: boolean;
 	canViewOrganizations: boolean;
 	canViewAuditLog: boolean;
+	canViewConnectionLog: boolean;
 	canViewHealth: boolean;
 }
 
 export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 	canViewDeployment,
 	canViewOrganizations,
 	canViewAuditLog,
+	canViewConnectionLog,
 	canViewHealth,
 }) => {
 	const theme = useTheme();
 
 	if (
 		!canViewAuditLog &&
+		!canViewConnectionLog &&
 		!canViewOrganizations &&
 		!canViewDeployment &&
 		!canViewHealth
@@ -59,6 +62,7 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 					canViewDeployment={canViewDeployment}
 					canViewOrganizations={canViewOrganizations}
 					canViewAuditLog={canViewAuditLog}
+					canViewConnectionLog={canViewConnectionLog}
 					canViewHealth={canViewHealth}
 				/>
 			</PopoverContent>
@@ -71,6 +75,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 	canViewOrganizations,
 	canViewAuditLog,
 	canViewHealth,
+	canViewConnectionLog,
 }) => {
 	const popover = usePopover();
 
@@ -108,6 +113,16 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 					Audit Logs
 				</MenuItem>
 			)}
+			{canViewConnectionLog && (
+				<MenuItem
+					component={NavLink}
+					to="/connectionlog"
+					css={styles.menuItem}
+					onClick={onPopoverClose}
+				>
+					Connection Logs
+				</MenuItem>
+			)}
 			{canViewHealth && (
 				<MenuItem
 					component={NavLink}

diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -37,6 +37,7 @@ type MobileMenuPermissions = {
 	canViewDeployment: boolean;
 	canViewOrganizations: boolean;
 	canViewAuditLog: boolean;
+	canViewConnectionLog: boolean;
 	canViewHealth: boolean;
 };
 
@@ -192,6 +193,7 @@ const AdminSettingsSub: FC<MobileMenuPermissions> = ({
 	canViewDeployment,
 	canViewOrganizations,
 	canViewAuditLog,
+	canViewConnectionLog,
 	canViewHealth,
 }) => {
 	const [open, setOpen] = useState(false);
@@ -237,6 +239,14 @@ const AdminSettingsSub: FC<MobileMenuPermissions> = ({
 						<Link to="/audit">Audit logs</Link>
 					</DropdownMenuItem>
 				)}
+				{canViewConnectionLog && (
+					<DropdownMenuItem
+						asChild
+						className={cn(itemStyles.default, itemStyles.sub)}
+					>
+						<Link to="/connectionlog">Connection logs</Link>
+					</DropdownMenuItem>
+				)}
 				{canViewHealth && (
 					<DropdownMenuItem
 						asChild

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -22,6 +22,8 @@ export const Navbar: FC = () => {
 	const canViewHealth = permissions.viewDebugInfo;
 	const canViewAuditLog =
 		featureVisibility.audit_log && permissions.viewAnyAuditLog;
+	const canViewConnectionLog =
+		featureVisibility.connection_log && permissions.viewAnyConnectionLog;
 
 	return (
 		<NavbarView
@@ -34,6 +36,7 @@ export const Navbar: FC = () => {
 			canViewOrganizations={canViewOrganizations}
 			canViewHealth={canViewHealth}
 			canViewAuditLog={canViewAuditLog}
+			canViewConnectionLog={canViewConnectionLog}
 			proxyContextValue={proxyContextValue}
 		/>
 	);

diff --git a/site/src/modules/dashboard/Navbar/NavbarView.test.tsx b/site/src/modules/dashboard/Navbar/NavbarView.test.tsx
@@ -33,6 +33,7 @@ describe("NavbarView", () => {
 				canViewOrganizations
 				canViewHealth
 				canViewAuditLog
+				canViewConnectionLog
 			/>,
 		);
 		const workspacesLink =
@@ -50,6 +51,7 @@ describe("NavbarView", () => {
 				canViewOrganizations
 				canViewHealth
 				canViewAuditLog
+				canViewConnectionLog
 			/>,
 		);
 		const templatesLink =
@@ -67,6 +69,7 @@ describe("NavbarView", () => {
 				canViewOrganizations
 				canViewHealth
 				canViewAuditLog
+				canViewConnectionLog
 			/>,
 		);
 		const deploymentMenu = await screen.findByText("Admin settings");
@@ -85,6 +88,7 @@ describe("NavbarView", () => {
 				canViewOrganizations
 				canViewHealth
 				canViewAuditLog
+				canViewConnectionLog
 			/>,
 		);
 		const deploymentMenu = await screen.findByText("Admin settings");

diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -24,6 +24,7 @@ interface NavbarViewProps {
 	canViewDeployment: boolean;
 	canViewOrganizations: boolean;
 	canViewAuditLog: boolean;
+	canViewConnectionLog: boolean;
 	canViewHealth: boolean;
 	proxyContextValue?: ProxyContextValue;
 }
@@ -44,6 +45,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	canViewOrganizations,
 	canViewHealth,
 	canViewAuditLog,
+	canViewConnectionLog,
 	proxyContextValue,
 }) => {
 	const webPush = useWebpushNotifications();
@@ -73,6 +75,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 						canViewOrganizations={canViewOrganizations}
 						canViewDeployment={canViewDeployment}
 						canViewHealth={canViewHealth}
+						canViewConnectionLog={canViewConnectionLog}
 					/>
 				</div>
 
@@ -124,6 +127,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 						supportLinks={supportLinks}
 						onSignOut={onSignOut}
 						canViewAuditLog={canViewAuditLog}
+						canViewConnectionLog={canViewConnectionLog}
 						canViewOrganizations={canViewOrganizations}
 						canViewDeployment={canViewDeployment}
 						canViewHealth={canViewHealth}

diff --git a/site/src/modules/permissions/index.ts b/site/src/modules/permissions/index.ts
@@ -156,6 +156,13 @@ export const permissionChecks = {
 		},
 		action: "read",
 	},
+	viewAnyConnectionLog: {
+		object: {
+			resource_type: "connection_log",
+			any_org: true,
+		},
+		action: "read",
+	},
 	viewDebugInfo: {
 		object: {
 			resource_type: "debug_info",

diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -82,10 +82,17 @@ export const useActionFilterMenu = ({
 	value,
 	onChange,
 }: Pick<UseFilterMenuOptions, "value" | "onChange">) => {
-	const actionOptions: SelectFilterOption[] = AuditActions.map((action) => ({
-		value: action,
-		label: capitalize(action),
-	}));
+	const actionOptions: SelectFilterOption[] = AuditActions
+		// TODO(ethanndickson): Logs with these action types are no longer produced.
+		// Until we remove them from the database and API, we shouldn't suggest them
+		// in the filter dropdown.
+		.filter(
+			(action) => !["connect", "disconnect", "open", "close"].includes(action),
+		)
+		.map((action) => ({
+			value: action,
+			label: capitalize(action),
+		}));
 	return useFilterMenu({
 		onChange,
 		value,

diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -6,14 +6,13 @@ import Tooltip from "@mui/material/Tooltip";
 import type { AuditLog } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { StatusPill } from "components/StatusPill/StatusPill";
 import { TimelineEntry } from "components/Timeline/TimelineEntry";
 import { InfoIcon } from "lucide-react";
 import { NetworkIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import type { ThemeRole } from "theme/roles";
 import userAgentParser from "ua-parser-js";
 import { AuditLogDescription } from "./AuditLogDescription/AuditLogDescription";
 import { AuditLogDiff } from "./AuditLogDiff/AuditLogDiff";
@@ -22,21 +21,6 @@ import {
 	determineIdPSyncMappingDiff,
 } from "./AuditLogDiff/auditUtils";
 
-const httpStatusColor = (httpStatus: number): ThemeRole => {
-	// Treat server errors (500) as errors
-	if (httpStatus >= 500) {
-		return "error";
-	}
-
-	// Treat client errors (400) as warnings
-	if (httpStatus >= 400) {
-		return "warning";
-	}
-
-	// OK (200) and redirects (300) are successful
-	return "success";
-};
-
 interface AuditLogRowProps {
 	auditLog: AuditLog;
 	// Useful for Storybook
@@ -139,7 +123,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 								</Stack>
 
 								<Stack direction="row" alignItems="center">
-									<StatusPill code={auditLog.status_code} />
+									<StatusPill isHttpCode={true} code={auditLog.status_code} />
 
 									{/* With multi-org, there is not enough space so show
                       everything in a tooltip. */}
@@ -243,19 +227,6 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 	);
 };
 
-function StatusPill({ code }: { code: number }) {
-	const isHttp = code >= 100;
-
-	return (
-		<Pill
-			css={styles.statusCodePill}
-			type={isHttp ? httpStatusColor(code) : code === 0 ? "success" : "error"}
-		>
-			{code.toString()}
-		</Pill>
-	);
-}
-
 const styles = {
 	auditLogCell: {
 		padding: "0 !important",
@@ -311,14 +282,6 @@ const styles = {
 		width: "100%",
 	},
 
-	statusCodePill: {
-		fontSize: 10,
-		height: 20,
-		paddingLeft: 10,
-		paddingRight: 10,
-		fontWeight: 600,
-	},
-
 	deletedLabel: (theme) => ({
 		...(theme.typography.caption as CSSObject),
 		color: theme.palette.text.secondary,