Added roster activity date range.

* Updated section note colors to be accessible
* Do not parse engagement date range

analytics_dashboard/static/apps/learners/common/models/course-metadata.js

@@ -83,18 +83,24 @@ define(function (require) {
         },
 
         parse: function (response) {
-            var parsedEngagementRanges = _.mapObject(response.engagement_ranges, function (metricRanges) {
-                return _.mapObject(metricRanges, function (range) {
-                    // range is either null or a two-element array
-                    if (_.isNull(range)) {
-                        return null;
-                    }
-                    return [
-                        _.isNull(range[0]) ? -Infinity : range[0],
-                        _.isNull(range[1]) ? Infinity : range[1]
-                    ];
-                });
+            var parsedEngagementRanges = _.mapObject(response.engagement_ranges, function (metricRanges, key) {
+                // do not parse the date_range field (it's not a metric range)
+                if (key === 'date_range') {
+                    return metricRanges;
+                } else {
+                    return _.mapObject(metricRanges, function (range) {
+                        // range is either null or a two-element array
+                        if (_.isNull(range)) {
+                            return null;
+                        }
+                        return [
+                            _.isNull(range[0]) ? -Infinity : range[0],
+                            _.isNull(range[1]) ? Infinity : range[1]
+                        ];
+                    });
+                }
             });
+
             return _.extend(response, { engagement_ranges: parsedEngagementRanges });
         },
 

analytics_dashboard/static/apps/learners/common/models/spec/course-metadata-spec.js

@@ -78,6 +78,19 @@ define(function (require) {
             expect(courseMetadata.get('engagement_ranges').problems_attempted.above_average).toEqual(null);
         });
 
+        it('does not parse engagement date range', function () {
+            var courseMetadata = new CourseMetadataModel({
+                engagement_ranges: {
+                    date_range: {
+                        start: '2015-12-03',
+                        end: '2016-06-01'
+                    }
+                }
+            }, {parse: true});
+            expect(courseMetadata.get('engagement_ranges').date_range.start).toEqual('2015-12-03');
+            expect(courseMetadata.get('engagement_ranges').date_range.end).toEqual('2016-06-01');
+        });
+
         describe('inMetricRange', function () {
             it('returns true when value is in range', function () {
                 var courseMetadata = new CourseMetadataModel();

analytics_dashboard/static/apps/learners/roster/templates/roster.underscore

 <div class="row">
-    <div class="col-md-12">
+    <div class="col-md-8">
         <div class="learners-active-filters"></div>
     </div>
+    <div class="col-md-4">
+        <div class="activity-date-range small"></div>
+    </div>
 </div>
 <div class="row">
     <div class="col-md-4 col-md-push-8">

analytics_dashboard/static/apps/learners/roster/views/activity-date-range.js

+define(function (require) {
+    'use strict';
+
+    var _ = require('underscore'),
+        Marionette = require('marionette'),
+
+        Utils = require('utils/utils');
+
+    return Marionette.ItemView.extend({
+
+        template: _.template(gettext('Activity between <%- startDate %> - <%- endDate %>')),
+
+        templateHelpers: function() {
+            var dateRange = this.model.get('engagement_ranges').date_range,
+                // Translators: 'n/a' means 'not available'
+                naText = gettext('n/a');
+
+            return {
+                startDate: _(dateRange).has('start') ? Utils.formatDate(dateRange.start) : naText,
+                endDate: _(dateRange).has('end') ? Utils.formatDate(dateRange.end) : naText,
+            };
+        },
+    });
+
+});

analytics_dashboard/static/apps/learners/roster/views/roster.js

@@ -11,6 +11,7 @@ define(function (require) {
     var _ = require('underscore'),
         Marionette = require('marionette'),
 
+        ActiveDateRangeView = require('learners/roster/views/activity-date-range'),
         ActiveFiltersView = require('learners/roster/views/active-filters'),
         LearnerResultsView = require('learners/roster/views/results'),
         LearnerUtils = require('learners/common/utils'),
@@ -35,6 +36,7 @@ define(function (require) {
 
         regions: {
             activeFilters: '.learners-active-filters',
+            activityDateRange: '.activity-date-range',
             controls: '.learners-table-controls',
             results: '.learners-results'
         },
@@ -57,6 +59,9 @@ define(function (require) {
             this.showChildView('activeFilters', new ActiveFiltersView({
                 collection: this.options.collection
             }));
+            this.showChildView('activityDateRange', new ActiveDateRangeView({
+                model: this.options.courseMetadata
+            }));
             this.showChildView('controls', new RosterControlsView({
                 collection: this.options.collection,
                 courseMetadata: this.options.courseMetadata,

analytics_dashboard/static/apps/learners/roster/views/spec/roster-spec.js

@@ -760,6 +760,29 @@ define(function (require) {
 
         });
 
+        describe('activity date range', function () {
+            it('renders dates', function () {
+                var rosterView = getRosterView({
+                    courseMetadata: {
+                        engagement_ranges: {
+                            date_range: {
+                                start: '2016-01-12',
+                                end: '2016-03-30'
+                            }
+                        }
+                    }
+                });
+                rosterView.$('.activity-date-range')
+                    .toContainText('Activity between January 12, 2016 - March 30, 2016');
+            });
+
+            it('renders n/a when no date range available', function () {
+                var rosterView = getRosterView();
+                rosterView.$('.activity-date-range').toContainText('Activity between n/a - n/a');
+            });
+
+        });
+
         describe('active filters', function () {
             var expectActiveFilters,
                 expectNoActiveFilters;

analytics_dashboard/static/sass/_base.scss

@@ -158,6 +158,10 @@ hr.has-emphasis {
     }
   }
 
+  .section-heading-note {
+    color: $edx-gray-d2;
+  }
+
   // CASE: larger than small screen breakpoint
   @media (min-width: $screen-sm-min) {
 
@@ -177,10 +181,8 @@ hr.has-emphasis {
         margin-top: $font-size-base;
       }
 
-      .section-heading-note {
-        color: $edx-gray;
-      }
     }
+
   }
 
   .section-nav {

analytics_dashboard/static/sass/_developer.scss

@@ -832,6 +832,20 @@ table.dataTable thead th.sorting_desc:after {
     }
 
   }
+
+  .activity-date-range {
+    color: $edx-gray-d2;
+
+    // padding keeps the element from shifting when active filters are selected
+    padding-top: $padding-large-vertical * 1.5;
+    padding-bottom: $padding-large-vertical * 1.5;
+
+    @media (min-width: $screen-sm-min) {
+      float: right;
+    }
+
+  }
+
 }
 
 // styles for the learner details summary