tooltip

ethanndickson · ethanndickson · commit 5db1b7381079 · 2025-07-02T10:04:29.000Z
diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogHelpTooltip.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogHelpTooltip.tsx
@@ -0,0 +1,36 @@
+import {
+	HelpTooltip,
+	HelpTooltipContent,
+	HelpTooltipLink,
+	HelpTooltipLinksGroup,
+	HelpTooltipText,
+	HelpTooltipTitle,
+	HelpTooltipTrigger,
+} from "components/HelpTooltip/HelpTooltip";
+import type { FC } from "react";
+import { docs } from "utils/docs";
+
+const Language = {
+	title: "Why are some events missing?",
+	body: "The connection log is a best-effort log of workspace access. Some events are reported by workspace agents, and receipt of these events by the server is not guaranteed.",
+	docs: "Connection log documentation",
+};
+
+export const ConnectionLogHelpTooltip: FC = () => {
+	return (
+		<HelpTooltip>
+			<HelpTooltipTrigger />
+
+			<HelpTooltipContent>
+				<HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
+				<HelpTooltipText>{Language.body}</HelpTooltipText>
+				<HelpTooltipLinksGroup>
+					{/* TODO(ethanndickson): Add docs */}
+					<HelpTooltipLink href={docs("/admin/security/connection-logs")}>
+						{Language.docs}
+					</HelpTooltipLink>
+				</HelpTooltipLinksGroup>
+			</HelpTooltipContent>
+		</HelpTooltip>
+	);
+};
diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx
@@ -22,6 +22,7 @@ import { TableLoader } from "components/TableLoader/TableLoader";
 import { Timeline } from "components/Timeline/Timeline";
 import type { ComponentProps, FC } from "react";
 import { ConnectionLogFilter } from "./ConnectionLogFilter";
+import { ConnectionLogHelpTooltip } from "./ConnectionLogHelpTooltip";
 import { ConnectionLogRow } from "./ConnectionLogRow/ConnectionLogRow";
 
 const Language = {
@@ -59,6 +60,7 @@ export const ConnectionLogPageView: FC<ConnectionLogPageViewProps> = ({
 				<PageHeaderTitle>
 					<Stack direction="row" spacing={1} alignItems="center">
 						<span>{Language.title}</span>
+						<ConnectionLogHelpTooltip />
 					</Stack>
 				</PageHeaderTitle>
 				<PageHeaderSubtitle>{Language.subtitle}</PageHeaderSubtitle>
