feat: instrument notebooks (#18576)

ui/src/cloud/utils/reporting.ts

@@ -18,7 +18,7 @@ const REPORT_DECAY = 500 // number of miliseconds to wait after last event befor
 const REPORT_MAX_WAIT = 5000 // max number of miliseconds to wait between sends
 const REPORT_MAX_LENGTH = 300 // max number of events to queue before sending
 
-const toNano = (ms: number) => ms * 1000000
+export const toNano = (ms: number) => ms * 1000000
 
 export const updateReportingContext = (key: string, value: string) => {
   reportingTags = {...reportingTags, [key]: value}

ui/src/notebooks/components/AddButtons.tsx

@@ -8,7 +8,7 @@ import {Button, ComponentColor} from '@influxdata/clockface'
 import {NotebookContext} from 'src/notebooks/context/notebook'
 import {PIPE_DEFINITIONS} from 'src/notebooks'
 
-// Utils
+import {event} from 'src/notebooks/shared/event'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const AddButtons: FC = () => {
@@ -39,6 +39,11 @@ const AddButtons: FC = () => {
             if (typeof data === 'function') {
               data = data()
             }
+
+            event('Notebook Add Button Clicked', {
+              type: def.type,
+            })
+
             addPipe({
               ...data,
               type,

ui/src/notebooks/components/header/AutoRefreshDropdown.tsx

@@ -4,13 +4,20 @@ import {TimeContextProps} from 'src/notebooks/components/header/Buttons'
 import {TimeBlock} from 'src/notebooks/context/time'
 import {AutoRefreshStatus} from 'src/types'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 const AutoRefreshDropdown: FC<TimeContextProps> = ({context, update}) => {
   const {refresh} = context
 
   const updateRefresh = (interval: number) => {
     const status =
       interval === 0 ? AutoRefreshStatus.Paused : AutoRefreshStatus.Active
 
+    event('Auto Refresh Updated', {
+      interval: '' + interval,
+    })
+
     update({
       refresh: {
         status,

ui/src/notebooks/components/header/Submit.tsx

@@ -7,6 +7,9 @@ import {NotebookContext, PipeMeta} from 'src/notebooks/context/notebook'
 import {TimeContext} from 'src/notebooks/context/time'
 import {IconFont} from '@influxdata/clockface'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 // Types
 import {RemoteDataState} from 'src/types'
 
@@ -25,6 +28,8 @@ export const Submit: FC = () => {
   }, [!!time && time.range])
 
   const submit = () => {
+    event('Notebook Submit Button Clicked')
+
     setLoading(RemoteDataState.Loading)
     Promise.all(
       pipes
@@ -81,9 +86,13 @@ export const Submit: FC = () => {
         })
     )
       .then(() => {
+        event('Notebook Submit Resolved')
+
         setLoading(RemoteDataState.Done)
       })
       .catch(e => {
+        event('Notebook Submit Resolved')
+
         // NOTE: this shouldn't fire, but lets wrap it for completeness
         setLoading(RemoteDataState.Error)
         throw e

ui/src/notebooks/components/header/TimeRangeDropdown.tsx

@@ -3,10 +3,19 @@ import {default as StatelessTimeRangeDropdown} from 'src/shared/components/TimeR
 import {TimeContextProps} from 'src/notebooks/components/header/Buttons'
 import {TimeBlock} from 'src/notebooks/context/time'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 const TimeRangeDropdown: FC<TimeContextProps> = ({context, update}) => {
   const {range} = context
 
   const updateRange = range => {
+    event('Time Range Updated', {
+      type: range.type,
+      upper: range.upper as string,
+      lower: range.lower,
+    })
+
     update({
       range,
     } as TimeBlock)

ui/src/notebooks/components/header/TimeZoneDropdown.tsx

@@ -3,14 +3,24 @@ import React, {FC, useContext} from 'react'
 import {AppSettingContext} from 'src/notebooks/context/app'
 
 import {TimeZoneDropdown as StatelessTimeZoneDropdown} from 'src/shared/components/TimeZoneDropdown'
+import {TimeZone} from 'src/types'
+
+// Utils
+import {event} from 'src/notebooks/shared/event'
 
 const TimeZoneDropdown: FC = React.memo(() => {
   const {timeZone, onSetTimeZone} = useContext(AppSettingContext)
 
+  const setTimeZone = (tz: TimeZone) => {
+    event('Time Zone Changed', {timeZone: tz as string})
+
+    onSetTimeZone(tz)
+  }
+
   return (
     <StatelessTimeZoneDropdown
       timeZone={timeZone}
-      onSetTimeZone={onSetTimeZone}
+      onSetTimeZone={setTimeZone}
     />
   )
 })

ui/src/notebooks/components/minimap/MiniMapToggle.tsx

@@ -8,6 +8,9 @@ import {SlideToggle, InputLabel} from '@influxdata/clockface'
 // Actions
 import {setNotebookMiniMapState} from 'src/shared/actions/app'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 // Types
 import {AppState, NotebookMiniMapState} from 'src/types'
 
@@ -28,6 +31,8 @@ const MiniMapToggle: FC<Props> = ({
   const active = notebookMiniMapState === 'expanded'
 
   const handleChange = (): void => {
+    event('Toggled Mini Map', {state: active ? 'collapsed' : 'expanded'})
+
     if (active) {
       handleSetNotebookMiniMapState('collapsed')
     } else {

ui/src/notebooks/components/panel/MovePanelButton.tsx

@@ -4,6 +4,9 @@ import React, {FC, MouseEvent} from 'react'
 // Components
 import {SquareButton, IconFont, ComponentStatus} from '@influxdata/clockface'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 interface Props {
   onClick?: () => void
   direction: 'up' | 'down'
@@ -15,6 +18,10 @@ const MovePanelUpButton: FC<Props> = ({onClick, direction}) => {
 
   const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {
     if (onClick) {
+      event('Notebook Panel Moved', {
+        direction,
+      })
+
       e.stopPropagation()
       onClick()
     }

ui/src/notebooks/components/panel/PanelVisibilityToggle.tsx

@@ -5,6 +5,9 @@ import React, {FC, useContext} from 'react'
 import {SquareButton, IconFont} from '@influxdata/clockface'
 import {NotebookContext, PipeMeta} from 'src/notebooks/context/notebook'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 export interface Props {
   index: number
 }
@@ -16,6 +19,10 @@ const PanelVisibilityToggle: FC<Props> = ({index}) => {
   const title = meta[index].visible ? 'Collapse cell' : 'Expand cell'
 
   const handleClick = (): void => {
+    event('Panel Visibility Toggled', {
+      state: !meta[index].visible ? 'true' : 'false',
+    })
+
     updateMeta(index, {
       visible: !meta[index].visible,
     } as PipeMeta)

ui/src/notebooks/components/panel/RemovePanelButton.tsx

@@ -4,6 +4,9 @@ import React, {FC} from 'react'
 // Components
 import {SquareButton, IconFont} from '@influxdata/clockface'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 interface Props {
   onRemove?: () => void
 }
@@ -14,6 +17,8 @@ const RemoveButton: FC<Props> = ({onRemove}) => {
   }
 
   const handleClick = (): void => {
+    event('Notebook Panel Removed')
+
     onRemove()
   }
 

ui/src/notebooks/pipes/Query/Results.tsx

@@ -12,6 +12,9 @@ import ResultsPagination from 'src/notebooks/pipes/Query/ResultsPagination'
 // Types
 import {PipeData} from 'src/notebooks/index'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 interface Props {
   data: PipeData
   results: BothResults
@@ -33,6 +36,8 @@ const Results: FC<Props> = ({results, onUpdate, data}) => {
   const nextDisabled = startRow + pageSize >= rows.length
 
   const prev = () => {
+    event('Query Pagination Previous Button Clicked')
+
     const index = startRow - pageSize
     if (index <= 0) {
       setStartRow(0)
@@ -42,6 +47,8 @@ const Results: FC<Props> = ({results, onUpdate, data}) => {
   }
 
   const next = () => {
+    event('Query Pagination Next Button Clicked')
+
     const index = startRow + pageSize
     const max = rows.length - pageSize
     if (index >= max) {

ui/src/notebooks/pipes/Visualization/DashboardList.tsx

@@ -34,6 +34,7 @@ import {
 } from '@influxdata/clockface'
 import {Notification, NotificationStyle} from 'src/types'
 import {getOrg} from 'src/organizations/selectors'
+import {event} from 'src/notebooks/shared/event'
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -144,7 +145,10 @@ const DashboardList: FC<Props> = ({
   const saveStatus = selectedDashboard
     ? ComponentStatus.Default
     : ComponentStatus.Disabled
+
   const save = () => {
+    event('Save Visulization to Dashboard')
+
     const view = {
       name: 'From Flow', // TODO: move meta.name to pipe.name so that we can route the name through
       properties: {
@@ -168,6 +172,11 @@ const DashboardList: FC<Props> = ({
 
     onClose()
   }
+  const cancel = () => {
+    event('Save Visulization to Dashboard Canceled')
+
+    onClose()
+  }
 
   return (
     <div className="notebook-visualization--dashboard-list">
@@ -186,7 +195,7 @@ const DashboardList: FC<Props> = ({
       >
         <SquareButton
           icon={IconFont.Remove}
-          onClick={onClose}
+          onClick={cancel}
           titleText="Cancel"
         />
         <SquareButton

ui/src/notebooks/pipes/Visualization/ExportVisualizationButton.tsx

@@ -12,6 +12,9 @@ import {
   PopoverPosition,
 } from '@influxdata/clockface'
 
+// Utils
+import {event} from 'src/notebooks/shared/event'
+
 interface Props {
   disabled: boolean
   children: (onHide: () => void) => JSX.Element
@@ -23,10 +26,12 @@ const ExportVisualizationButton: FC<Props> = ({disabled, children}) => {
   const status = disabled ? ComponentStatus.Disabled : ComponentStatus.Default
 
   const handleShow = (): void => {
+    event('Export Notebook Button Clicked')
     setIsExporting(true)
   }
 
   const handleHide = (): void => {
+    event('Export Notebook Canceled')
     setIsExporting(false)
   }
 

ui/src/notebooks/pipes/Visualization/view.tsx

@@ -12,6 +12,7 @@ import Resizer from 'src/notebooks/shared/Resizer'
 import {checkResultsLength} from 'src/shared/utils/vis'
 import {createView} from 'src/views/helpers'
 import ExportVisualizationButton from 'src/notebooks/pipes/Visualization/ExportVisualizationButton'
+import {event} from 'src/notebooks/shared/event'
 
 // Types
 import {PipeProp, PipeData} from 'src/notebooks'
@@ -101,6 +102,10 @@ const Visualization: FC<PipeProp> = ({
   const {timeZone} = useContext(AppSettingContext)
 
   const updateType = (type: ViewType) => {
+    event('Notebook Visualization Type Changed', {
+      type: type as string,
+    })
+
     updateVisualizationType(type, results.parsed, onUpdate)
   }
 

ui/src/notebooks/shared/event.ts

@@ -0,0 +1,30 @@
+import {reportEvent, toNano} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+interface KeyValue {
+  [key: string]: string
+}
+
+export const event = (title: string, meta: KeyValue = {}): void => {
+  const time = toNano(Date.now())
+
+  if (isFlagEnabled('streamEvents')) {
+    /* eslint-disable no-console */
+    console.log(`Event:  [ ${title} ]`)
+    if (Object.keys(meta).length) {
+      console.log(
+        Object.entries(meta)
+          .map(([k, v]) => `        ${k}: ${v}`)
+          .join('\n')
+      )
+    }
+    /* eslint-enable no-console */
+  }
+
+  reportEvent({
+    timestamp: time,
+    measurement: title,
+    fields: {},
+    tags: {...meta},
+  })
+}

ui/src/shared/components/TimeZoneDropdown.tsx

@@ -18,7 +18,7 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  onSetTimeZone: typeof setTimeZone
+  onSetTimeZone: typeof setTimeZone | ((timeZone: TimeZone) => void)
 }
 
 type Props = StateProps & DispatchProps

ui/src/shared/selectors/flags.ts

@@ -12,6 +12,7 @@ export const OSS_FLAGS = {
   matchingNotificationRules: false,
   notebooks: false,
   telegrafEditor: false,
+  streamEvents: false,
   'notebook-panel--spotify': false,
 }
 
@@ -26,6 +27,8 @@ export const CLOUD_FLAGS = {
   matchingNotificationRules: false,
   notebooks: false,
   telegrafEditor: false,
+  streamEvents: false,
+  'notebook-panel--spotify': false,
 }
 
 export const activeFlags = (state: AppState): FlagMap => {