web: report log highlights to analytics (#3564)

web/src/HUD.test.tsx

@@ -10,8 +10,9 @@ import {
   oneResourceNoAlerts,
 } from "./testdata"
 import { createMemoryHistory } from "history"
-import { SocketState } from "./types"
+import { SnapshotHighlight, SocketState } from "./types"
 import ReactModal from "react-modal"
+import { Count, memoryIncr } from "./analytics"
 
 ReactModal.setAppElement(document.body)
 
@@ -26,17 +27,17 @@ declare global {
 }
 
 const fakeHistory = createMemoryHistory()
-const emptyHUD = () => {
+const emptyHUD = (counts: Array<Count> = []) => {
   return (
     <MemoryRouter initialEntries={["/"]}>
-      <HUD history={fakeHistory} />
+      <HUD history={fakeHistory} incr={memoryIncr(counts)} />
     </MemoryRouter>
   )
 }
 const HUDAtPath = (path: string) => {
   return (
     <MemoryRouter initialEntries={[path]}>
-      <HUD history={fakeHistory} />
+      <HUD history={fakeHistory} incr={memoryIncr([])} />
     </MemoryRouter>
   )
 }
@@ -158,7 +159,7 @@ it("renders number of errors in tabnav when no resource is selected", () => {
 it("renders the number of errors a resource has in tabnav when a resource is selected", () => {
   const root = mount(
     <MemoryRouter initialEntries={["/r/vigoda"]}>
-      <HUD history={fakeHistory} />
+      <HUD history={fakeHistory} incr={memoryIncr([])} />
     </MemoryRouter>
   )
   const hud = root.find(HUD)
@@ -340,3 +341,22 @@ it("renders logs to snapshot", async () => {
     ],
   })
 })
+
+it("reports highlights", async () => {
+  let counts: Array<Count> = []
+  const root = mount(emptyHUD(counts))
+  const hud = root.find(HUD).instance() as HUD
+
+  var highlight: SnapshotHighlight = {
+    beginningLogID: "",
+    endingLogID: "",
+    text: "",
+  }
+  // send a few to make sure it's debounced
+  hud.handleSetHighlight(highlight)
+  hud.handleSetHighlight(highlight)
+  hud.handleSetHighlight(highlight)
+  hud.flush()
+  let highlightCounts = counts.filter(c => c.name == "ui.web.highlight")
+  expect(highlightCounts.length).toEqual(1)
+})

web/src/HUD.tsx

@@ -13,7 +13,7 @@ import PathBuilder from "./PathBuilder"
 import { matchPath } from "react-router"
 import { Route, Switch, RouteComponentProps } from "react-router-dom"
 import { History, UnregisterCallback } from "history"
-import { incr, pathToTag } from "./analytics"
+import { counter, pathToTag } from "./analytics"
 import SecondaryNav from "./SecondaryNav"
 import SocketBar from "./SocketBar"
 import "./HUD.scss"
@@ -40,9 +40,11 @@ import HUDLayout from "./HUDLayout"
 import LogStore from "./LogStore"
 import { traceNav } from "./trace"
 import ErrorModal from "./ErrorModal"
+import { debounce, Cancelable } from "lodash"
 
 type HudProps = {
   history: History
+  incr: counter
 }
 
 // The Main HUD view, as specified in
@@ -53,11 +55,13 @@ class HUD extends Component<HudProps, HudState> {
   private controller: AppController
   private history: History
   private unlisten: UnregisterCallback
+  private incrHighlight: (() => void) & Cancelable
+  flush: () => void
 
   constructor(props: HudProps) {
     super(props)
 
-    incr("ui.web.init", { ua: window.navigator.userAgent })
+    props.incr("ui.web.init", { ua: window.navigator.userAgent })
 
     this.pathBuilder = new PathBuilder(
       window.location.host,
@@ -67,7 +71,7 @@ class HUD extends Component<HudProps, HudState> {
     this.history = props.history
     this.unlisten = this.history.listen((location, _) => {
       let tags = { type: pathToTag(location.pathname) }
-      incr("ui.web.navigation", tags)
+      props.incr("ui.web.navigation", tags)
 
       this.handleClearHighlight()
       let selection = document.getSelection()
@@ -105,6 +109,12 @@ class HUD extends Component<HudProps, HudState> {
     this.handleClearHighlight = this.handleClearHighlight.bind(this)
     this.handleSetHighlight = this.handleSetHighlight.bind(this)
     this.handleOpenModal = this.handleOpenModal.bind(this)
+
+    this.incrHighlight = debounce(
+      () => props.incr("ui.web.highlight", {}),
+      3000 /* ms */
+    )
+    this.flush = this.incrHighlight.flush
   }
 
   componentDidMount() {
@@ -221,6 +231,7 @@ class HUD extends Component<HudProps, HudState> {
   }
 
   handleSetHighlight(highlight: SnapshotHighlight) {
+    this.incrHighlight()
     this.setState({
       snapshotHighlight: highlight,
     })

web/src/analytics.ts

@@ -1,5 +1,7 @@
 type Tags = { [key: string]: string }
 
+export type counter = (name: string, tags: Tags) => void
+
 // Fire and forget all analytics events
 const incr = (name: string, tags: Tags = {}): void => {
   let url = `//${window.location.host}/api/analytics`
@@ -10,6 +12,17 @@ const incr = (name: string, tags: Tags = {}): void => {
   })
 }
 
+export type Count = {
+  name: string
+  tags: Tags
+}
+
+export function memoryIncr(counts: Array<Count>): counter {
+  return (name: string, tags: Tags) => {
+    counts.push({ name: name, tags: tags })
+  }
+}
+
 const pathToTag = (path: string): string => {
   if (path.indexOf("/") === 0) {
     path = path.substring(1) // chop off the leading /

web/src/index.tsx

@@ -5,13 +5,14 @@ import HUD from "./HUD"
 import { Router } from "react-router-dom"
 import { createBrowserHistory } from "history"
 import ReactModal from "react-modal"
+import { incr } from "./analytics"
 
 ReactModal.setAppElement(document.body)
 
 let history = createBrowserHistory()
 let app = (
   <Router history={history}>
-    <HUD history={history} />
+    <HUD history={history} incr={incr} />
   </Router>
 )
 let root = document.getElementById("root")