Standards instrumentation

apps/src/templates/MultiCheckboxSelector.jsx

@@ -79,7 +79,7 @@ class MultiCheckboxSelector extends Component {
       } else {
         selectedItems = _.concat(this.props.selected, item);
       }
-      this.props.onChange(selectedItems);
+      this.props.onChange(selectedItems, item);
     } else {
       const index = this.props.selected.indexOf(item);
       if (index >= 0) {

apps/src/templates/sectionProgress/SectionProgressToggle.jsx

@@ -17,7 +17,7 @@ const styles = {
 };
 
 /**
- * A toggle that provides a way to switch between detail and summary views of
+ * A toggle that provides a way to switch between detail, summary, and standards views of
  * the progress a section of students have made in a course. Teacher view.
  */
 class SectionProgressToggle extends React.Component {

apps/src/templates/sectionProgress/standards/CreateStandardsReportStep1.jsx

@@ -30,7 +30,9 @@ class CreateStandardsReportStep1 extends Component {
           {i18n.createStandardsReportStep1() + ' '}
           {i18n.completedUnpluggedLessons()}
         </h3>
-        {this.props.unpluggedLessons.length > 0 && <LessonStatusList />}
+        {this.props.unpluggedLessons.length > 0 && (
+          <LessonStatusList dialog={'CreateStandardsReportDialog'} />
+        )}
         {this.props.unpluggedLessons.length === 0 && (
           <p style={styles.noUnplugged}>
             {i18n.standardsReportNoUnpluggedLessons()}

apps/src/templates/sectionProgress/standards/LessonStatusDialog.jsx

@@ -32,7 +32,7 @@ export default class LessonStatusDialog extends Component {
         <h2>{i18n.updateUnpluggedLessonProgress()}</h2>
         <p>{i18n.updateUnpluggedLessonProgressSubHeading()}</p>
         <h3>{i18n.completedUnpluggedLessons()}</h3>
-        <LessonStatusList />
+        <LessonStatusList dialog={'LessonStatusDialog'} />
         <p>{i18n.pluggedLessonsNote()}</p>
         <DialogFooter rightAlign>
           <Button

apps/src/templates/sectionProgress/standards/LessonStatusDialog.story.jsx

@@ -5,14 +5,16 @@ import {createStore, combineReducers} from 'redux';
 import {Provider} from 'react-redux';
 import sectionStandardsProgress from './sectionStandardsProgressRedux';
 import sectionProgress from '@cdo/apps/templates/sectionProgress/sectionProgressRedux';
+import sectionData from '@cdo/apps/redux/sectionDataRedux';
 import scriptSelection from '@cdo/apps/redux/scriptSelectionRedux';
 
 export default storybook => {
   const store = createStore(
     combineReducers({
       sectionStandardsProgress,
       sectionProgress,
-      scriptSelection
+      scriptSelection,
+      sectionData
     })
   );
 

apps/src/templates/sectionProgress/standards/LessonStatusList.jsx

@@ -7,6 +7,7 @@ import {
   getUnpluggedLessonsForScript,
   setSelectedLessons
 } from './sectionStandardsProgressRedux';
+import firehoseClient from '../../../lib/util/firehose';
 
 const styles = {
   lessonListItem: {
@@ -17,16 +18,43 @@ const styles = {
 
 class LessonStatusList extends Component {
   static propTypes = {
+    dialog: PropTypes.string,
+    // redux
     unpluggedLessonList: PropTypes.array,
     setSelectedLessons: PropTypes.func.isRequired,
-    selectedLessons: PropTypes.array.isRequired
+    selectedLessons: PropTypes.array.isRequired,
+    sectionId: PropTypes.number,
+    scriptId: PropTypes.number
   };
 
-  handleChange = selectedLessons => {
+  handleChange = (selectedLessons, changedLesson) => {
+    firehoseClient.putRecord(
+      {
+        study: 'teacher_dashboard_actions',
+        study_group: 'standards',
+        event: 'update_unplugged_lesson_list',
+        data_json: JSON.stringify({
+          section_id: this.props.sectionId,
+          script_id: this.props.scriptId,
+          changed_lesson_id: changedLesson.id,
+          lesson_selected: !changedLesson.completed,
+          dialog: this.props.dialog
+        })
+      },
+      {includeUserId: true}
+    );
     this.props.setSelectedLessons(selectedLessons);
   };
 
   render() {
+    // Add the scriptId and sectionId so that we can use them to log metrics
+    this.props.unpluggedLessonList.forEach(lesson =>
+      Object.assign(lesson, {
+        sectionId: this.props.sectionId,
+        scriptId: this.props.scriptId
+      })
+    );
+
     return (
       <MultiCheckboxSelector
         noHeader={true}
@@ -42,16 +70,38 @@ class LessonStatusList extends Component {
   }
 }
 
+const handleLessonLinkClick = function(lesson) {
+  firehoseClient.putRecord(
+    {
+      study: 'teacher_dashboard_actions',
+      study_group: 'standards',
+      event: 'click_unplugged_lesson_link',
+      data_json: JSON.stringify({
+        link: lesson.url,
+        section_id: lesson.sectionId,
+        script_id: lesson.scriptId
+      })
+    },
+    {includeUserId: true}
+  );
+};
+
 const ComplexLessonComponent = function({lesson}) {
   return (
     <div style={styles.lessonListItem}>
       <div>
         <ProgressBoxForLessonNumber
           completed={lesson.completed}
           lessonNumber={lesson.number}
+          linkToLessonPlan={lesson.url}
         />
       </div>
-      <a style={{paddingLeft: 10}} href={lesson.url} target={'_blank'}>
+      <a
+        style={{paddingLeft: 10}}
+        href={lesson.url}
+        target={'_blank'}
+        onClick={() => handleLessonLinkClick(lesson)}
+      >
         {lesson.name}
       </a>
     </div>
@@ -64,15 +114,19 @@ ComplexLessonComponent.propTypes = {
     number: PropTypes.number,
     url: PropTypes.string,
     completed: PropTypes.bool
-  })
+  }),
+  sectionId: PropTypes.number,
+  scriptId: PropTypes.number
 };
 
 export const UnconnectedLessonStatusList = LessonStatusList;
 
 export default connect(
   state => ({
     unpluggedLessonList: getUnpluggedLessonsForScript(state),
-    selectedLessons: state.sectionStandardsProgress.selectedLessons
+    selectedLessons: state.sectionStandardsProgress.selectedLessons,
+    sectionId: state.sectionData.section.id,
+    scriptId: state.scriptSelection.scriptId
   }),
   dispatch => ({
     setSelectedLessons(selected) {

apps/src/templates/sectionProgress/standards/LessonStatusList.story.jsx

@@ -7,13 +7,15 @@ import {Provider} from 'react-redux';
 import sectionStandardsProgress from './sectionStandardsProgressRedux';
 import sectionProgress from '@cdo/apps/templates/sectionProgress/sectionProgressRedux';
 import scriptSelection from '@cdo/apps/redux/scriptSelectionRedux';
+import sectionData from '@cdo/apps/redux/sectionDataRedux';
 
 export default storybook => {
   const store = createStore(
     combineReducers({
       sectionProgress,
       sectionStandardsProgress,
-      scriptSelection
+      scriptSelection,
+      sectionData
     })
   );
 

apps/src/templates/sectionProgress/standards/ProgressBoxForLessonNumber.jsx

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import ProgressBox from '../ProgressBox';
+import firehoseClient from '../../../lib/util/firehose';
+import {connect} from 'react-redux';
 
 const styles = {
   lessonBox: {
@@ -9,28 +11,67 @@ const styles = {
   }
 };
 
-export default class ProgressBoxForLessonNumber extends Component {
+class ProgressBoxForLessonNumber extends Component {
   static propTypes = {
     completed: PropTypes.bool,
     lessonNumber: PropTypes.number,
     tooltipId: PropTypes.string,
-    linkToLessonPlan: PropTypes.string
+    linkToLessonPlan: PropTypes.string,
+    sectionId: PropTypes.number,
+    scriptId: PropTypes.number
+  };
+
+  handleClick = () => {
+    firehoseClient.putRecord(
+      {
+        study: 'teacher_dashboard_actions',
+        study_group: 'standards',
+        event: 'click_lesson_progress_box',
+        data_json: JSON.stringify({
+          link: this.props.linkToLessonPlan,
+          section_id: this.props.sectionId,
+          script_id: this.props.scriptId,
+          in_report: window.location.pathname.includes('standards_report')
+        })
+      },
+      {includeUserId: true}
+    );
   };
 
   render() {
     const {completed, lessonNumber, tooltipId, linkToLessonPlan} = this.props;
-
-    return (
-      <a href={linkToLessonPlan} target="_blank" data-for={tooltipId} data-tip>
-        <ProgressBox
-          style={styles.lessonBox}
-          started={completed}
-          incomplete={completed ? 0 : 20}
-          imperfect={0}
-          perfect={completed ? 20 : 0}
-          lessonNumber={lessonNumber}
-        />
-      </a>
+    const progressBox = (
+      <ProgressBox
+        style={styles.lessonBox}
+        started={completed}
+        incomplete={completed ? 0 : 20}
+        imperfect={0}
+        perfect={completed ? 20 : 0}
+        lessonNumber={lessonNumber}
+      />
     );
+
+    if (linkToLessonPlan) {
+      return (
+        <a
+          href={linkToLessonPlan}
+          target="_blank"
+          data-for={tooltipId}
+          data-tip
+          onClick={this.handleClick}
+        >
+          {progressBox}
+        </a>
+      );
+    } else {
+      return progressBox;
+    }
   }
 }
+
+export const UnconnectedProgressBoxForLessonNumber = ProgressBoxForLessonNumber;
+
+export default connect(state => ({
+  sectionId: state.sectionData.section.id,
+  scriptId: state.scriptSelection.scriptId
+}))(ProgressBoxForLessonNumber);

apps/src/templates/sectionProgress/standards/StandardsViewHeaderButtons.jsx

@@ -12,6 +12,7 @@ import {
   fetchStudentLevelScores
 } from './sectionStandardsProgressRedux';
 import {teacherDashboardUrl} from '@cdo/apps/templates/teacherDashboard/urlHelpers';
+import firehoseClient from '../../../lib/util/firehose';
 import {TeacherScores} from './standardsConstants';
 
 const styles = {
@@ -39,11 +40,24 @@ class StandardsViewHeaderButtons extends Component {
   state = {
     isLessonStatusDialogOpen: false,
     isCreateReportDialogOpen: false,
-    comment: ''
+    comment: '',
+    commentUpdated: false
   };
 
   openLessonStatusDialog = () => {
     this.setState({isLessonStatusDialogOpen: true});
+    firehoseClient.putRecord(
+      {
+        study: 'teacher_dashboard_actions',
+        study_group: 'standards',
+        event: 'click_update_unplugged_lessons',
+        data_json: JSON.stringify({
+          section_id: this.props.sectionId,
+          script_id: this.props.scriptId
+        })
+      },
+      {includeUserId: true}
+    );
   };
 
   closeLessonStatusDialog = () => {
@@ -52,6 +66,18 @@ class StandardsViewHeaderButtons extends Component {
 
   openCreateReportDialog = () => {
     this.setState({isCreateReportDialogOpen: true});
+    firehoseClient.putRecord(
+      {
+        study: 'teacher_dashboard_actions',
+        study_group: 'standards',
+        event: 'open_generate_report_dialog',
+        data_json: JSON.stringify({
+          section_id: this.props.sectionId,
+          script_id: this.props.scriptId
+        })
+      },
+      {includeUserId: true}
+    );
   };
 
   closeCreateReportDialog = () => {
@@ -71,10 +97,25 @@ class StandardsViewHeaderButtons extends Component {
       teacherComment: this.state.comment,
       scriptId: this.props.scriptId
     };
+    firehoseClient.putRecord(
+      {
+        study: 'teacher_dashboard_actions',
+        study_group: 'standards',
+        event: 'generate_report',
+        data_json: JSON.stringify({
+          section_id: this.props.sectionId,
+          script_id: this.props.scriptId,
+          added_or_changed_comment: this.state.commentUpdated
+        })
+      },
+      {includeUserId: true}
+    );
+    this.setState({commentUpdated: false});
   };
 
   onCommentChange = value => {
     this.setState({comment: value}, () => {
+      this.setState({commentUpdated: true});
       this.props.setTeacherCommentForReport(this.state.comment);
     });
   };