Log video hint clicks to firehose

apps/src/StudioApp.js

@@ -2922,6 +2922,7 @@ StudioApp.prototype.setPageConstants = function (config, appSpecificConstants) {
     inputOutputTable: config.level.inputOutputTable,
     is13Plus: config.is13Plus,
     isSignedIn: config.isSignedIn,
+    userId: config.userId,
     textToSpeechEnabled: config.textToSpeechEnabled,
     isK1: config.level.isK1,
     appType: config.app,

apps/src/code-studio/progress.js

@@ -90,7 +90,8 @@ progress.renderStageProgress = function (scriptData, stageData, progressData,
     name,
     stages: [stageData],
     disablePostMilestone,
-    age_13_required
+    age_13_required,
+    id: stageData.script_id,
   }, currentLevelId, false, saveAnswersBeforeNavigation);
 
   store.dispatch(mergeProgress(_.mapValues(progressData.levels,

apps/src/lib/util/firehose.js

@@ -2,6 +2,7 @@
 
 import AWS from 'aws-sdk';
 import {createUuid, trySetLocalStorage, tryGetLocalStorage} from '@cdo/apps/utils';
+import {getStore} from '@cdo/apps/redux';
 
 /**
  * A barebones client for posting data to an AWS Firehose stream.
@@ -142,14 +143,30 @@ class FirehoseClient {
   /**
    * Merge various key-value pairs into data.
    * @param {hash} data The data to add the key-value pairs to.
+   * @option {boolean} includeUserId Include userId in records, if signed in
    * @return {hash} The data, including the newly added key-value pairs.
    */
-  addCommonValues(data) {
+  addCommonValues(data, includeUserId) {
     data['created_at'] = new Date().toISOString();
     data['environment'] = this.getEnvironment();
     data['uuid'] = this.getAnalyticsUuid();
     data['device'] = JSON.stringify(this.getDeviceInfo());
 
+    const state = getStore().getState();
+    if (state) {
+      if (includeUserId) {
+        const constants = state.pageConstants;
+        if (constants) {
+          data['user_id'] = constants.userId;
+        }
+      }
+      const progress = state.progress;
+      if (progress) {
+        data['script_id'] = progress.scriptId;
+        data['level_id'] = parseInt(progress.currentLevelId);
+      }
+    }
+
     return data;
   }
 
@@ -159,10 +176,12 @@ class FirehoseClient {
    * @param {hash} data The data to push.
    * @param {hash} options Additional (optional) options.
    *   (default {alwaysPut: false})
-   * @option options [String] alwaysPut Forces the record to be sent.
+   * @option options [boolean] alwaysPut Forces the record to be sent.
+   * @option options [boolean] includeUserId Include userId in records, if signed in
+   * @option options [function(err, data)] callback Invoked upon completion with error or data
    */
-  putRecord(deliveryStreamName, data, options = {alwaysPut: false, callback: null}) {
-    data = this.addCommonValues(data);
+  putRecord(deliveryStreamName, data, options = {alwaysPut: false, includeUserId: false, callback: null}) {
+    data = this.addCommonValues(data, options.includeUserId);
     if (!this.shouldPutRecord(options['alwaysPut'])) {
       console.groupCollapsed("Skipped sending record to " + deliveryStreamName);
       console.log(data);
@@ -194,10 +213,11 @@ class FirehoseClient {
    * @param {array[hash]} data The data to push.
    * @param {hash} options Additional (optional) options.
    *   (default {alwaysPut: false})
-   * @option options [String] alwaysPut Forces the record to be sent.
+   * @option options [boolean] alwaysPut Forces the record to be sent.
+   * @option options [boolean] includeUserId Include userId in records, if signed in
    */
-  putRecordBatch(deliveryStreamName, data, options = {alwaysPut: false}) {
-    data.map(function (record) { return this.AddCommonValues(record); });
+  putRecordBatch(deliveryStreamName, data, options = {alwaysPut: false, includeUserId: false}) {
+    data.map(function (record) { return this.AddCommonValues(record, options.includeUserId); });
 
     if (!this.shouldPutRecord(options['alwaysPut'])) {
       console.groupCollapsed("Skipped sending record batch to " + deliveryStreamName);

apps/src/redux/pageConstants.js

@@ -53,6 +53,7 @@ var ALLOWED_KEYS = new Set([
   'nonResponsiveVisualizationColumnWidth',
   'is13Plus',
   'isSignedIn',
+  'userId',
   'isK1',
   'textToSpeechEnabled',
   'documentationUrl',

apps/src/templates/VideoThumbnail.jsx

@@ -1,5 +1,5 @@
 import {showVideoDialog} from "@cdo/apps/code-studio/videos";
-import React, {PropTypes, Component} from 'react';
+import React, {Component, PropTypes} from 'react';
 import {videoDataShape} from './types';
 import firehoseClient from '@cdo/apps/lib/util/firehose';
 
@@ -24,6 +24,7 @@ export default class VideoThumbnail extends Component {
   static propTypes = {
     logText: PropTypes.string,
     video: videoDataShape,
+    onClick: PropTypes.func,
   };
 
   render() {
@@ -32,6 +33,7 @@ export default class VideoThumbnail extends Component {
       <a
         style={styles.videoLink}
         onClick={() => {
+          this.props.onClick && this.props.onClick();
           showVideoDialog({
             src: video.src,
             name: video.name,

apps/src/templates/instructions/InlineHint.jsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import Radium from 'radium';
 import ReadOnlyBlockSpace from '../ReadOnlyBlockSpace';
 import ChatBubble from './ChatBubble';
+import firehoseClient from '@cdo/apps/lib/util/firehose';
 import { connect } from 'react-redux';
 import { convertXmlToBlockly } from './utils';
 import VideoThumbnail from '../VideoThumbnail';
@@ -18,7 +19,7 @@ const InlineHint = React.createClass({
     video: videoDataShape,
     ttsUrl: PropTypes.string,
     ttsMessage: PropTypes.string,
-    isBlockly: PropTypes.bool
+    isBlockly: PropTypes.bool,
   },
 
   componentDidMount() {
@@ -27,14 +28,31 @@ const InlineHint = React.createClass({
     }
   },
 
+  onVideoClick() {
+    firehoseClient.putRecord(
+      'analysis-events',
+      {
+        study: 'hint-videos',
+        event: 'click',
+        data_string: this.props.video.key,
+      },
+      { includeUserId: true }
+    );
+  },
+
   render() {
     return (
       <ChatBubble borderColor={this.props.borderColor} ttsUrl={this.props.ttsUrl} ttsMessage={this.props.ttsMessage}>
         <div
           dangerouslySetInnerHTML={{ __html: this.props.content }}
         />
         {this.props.block && <ReadOnlyBlockSpace block={this.props.block} />}
-        {this.props.video && <VideoThumbnail video={this.props.video} />}
+        {this.props.video &&
+          <VideoThumbnail
+            onClick={this.onVideoClick}
+            video={this.props.video}
+          />
+        }
       </ChatBubble>
     );
   }
@@ -43,5 +61,5 @@ const InlineHint = React.createClass({
 
 export const StatelessInlineHint = Radium(InlineHint);
 export default connect(state => ({
-  isBlockly: state.pageConstants.isBlockly
+  isBlockly: state.pageConstants.isBlockly,
 }))(Radium(InlineHint));

dashboard/app/helpers/levels_helper.rb

@@ -132,6 +132,8 @@ def app_options
     # Always pass user age limit
     view_options(is_13_plus: current_user && !current_user.under_13?)
 
+    view_options(user_id: current_user.id) if current_user
+
     view_options(server_level_id: @level.id)
     if @script_level
       view_options(

dashboard/app/helpers/view_options_helper.rb

@@ -28,6 +28,7 @@ module ViewOptionsHelper
     :level_position,
     :public_caching,
     :is_13_plus,
+    :user_id,
     :has_contained_levels,
     :next_level_url,
     :responsive_content