Merge pull request #546 from edx/ajpal/bundle

Bundle the app

analytics_dashboard/courses/templates/courses/learners.html

@@ -2,6 +2,7 @@
 
 {% load dashboard_extras %}
 {% load i18n %}
+{% load staticfiles %}
 {% load rjs %}
 
 {% comment %}
@@ -16,40 +17,15 @@ View of individual learners within a course.
     <link rel="stylesheet" href="/static/bower_components/nprogress/nprogress.css" type="text/css">
 {% endblock stylesheets %}
 
-{% block uncompressed_javascript %}
+{% block javascript %}
     {{ block.super }}
-    {% if not show_error %}
-        <script>
-         require(['jquery', 'load/init-page', 'learners/app/app'], function ($, page, LearnersApp) {
-             var app = new LearnersApp({
-                 courseId: '{{ course_id }}',
-                 containerSelector: '.learners-app-container',
-                 learnerListJson: {{ learner_list_json | escape_json }},
-                 learnerListUrl: '{{ learner_list_url }}',
-                 courseLearnerMetadataJson: {{ course_learner_metadata_json | escape_json }},
-                 courseLearnerMetadataUrl: '{{ course_learner_metadata_url }}',
-                 learnerEngagementTimelineUrl: '{{ learner_engagement_timeline_url }}'
-             });
-
-             $(function () {
-                 app.start();
-             });
-         });
-        </script>
-    {% endif %}
-{% endblock uncompressed_javascript %}
+    <script src="{% static_rjs 'apps/learners/app/learners-main.js' %}"></script>
+{% endblock javascript %}
 
 {% block child_content %}
     <section class="view-section">
-        {% if show_error %}
-            <div class="section-heading bordered">
-                <h4 class="section-title">{% trans "Learners" %}</h4>
-            </div>
-            {% show_table_error %}
-        {% else %}
-            <div class="learners-app-container container-fluid">
-                {% include "loading.html" %}
-            </div>
-        {% endif %}
+        <div class="learners-app-container container-fluid">
+            {% include "loading.html" %}
+        </div>
     </section>
 {% endblock %}

analytics_dashboard/courses/tests/test_views/test_learners.py

@@ -41,7 +41,7 @@ class LearnersViewTests(ViewTestMixin, TestCase):
         self.addCleanup(httpretty.reset)
 
     def _get(self):
-        return self.client.get(self.path(course_id=DEMO_COURSE_ID), follow=True)
+        return self.client.get(self.path(course_id=DEMO_COURSE_ID))
 
     def _assert_context(self, response, expected_context_subset):
         default_expected_context_subset = {
@@ -50,9 +50,10 @@ class LearnersViewTests(ViewTestMixin, TestCase):
                 course_id=DEMO_COURSE_ID
             ),
         }
+        self.assertDictContainsSubset(dict(expected_context_subset.items()), response.context)
         self.assertDictContainsSubset(
-            dict(default_expected_context_subset.items() + expected_context_subset.items()),
-            response.context
+            dict(default_expected_context_subset.items()),
+            response.context['js_data']['course']
         )
 
     def get_mock_data(self, *args, **kwargs):
@@ -65,8 +66,7 @@ class LearnersViewTests(ViewTestMixin, TestCase):
         response = self._get()
         self._assert_context(response, {
             'learner_list_json': learners_payload,
-            'course_learner_metadata_json': course_metadata_payload,
-            'show_error': False
+            'course_learner_metadata_json': course_metadata_payload
         })
         self.assertNotContains(response, self.TABLE_ERROR_TEXT)
 
@@ -86,11 +86,9 @@ class LearnersViewTests(ViewTestMixin, TestCase):
             with LogCapture(level=logging.ERROR) as lc:
                 response = self._get()
                 self._assert_context(response, {
-                    'learner_list_json': {},
-                    'course_learner_metadata_json': {},
-                    'show_error': True,
+                    'learner_list_json': 'Failed to reach the Learner List endpoint',
+                    'course_learner_metadata_json': 'Failed to reach the Course Learner Metadata endpoint'
                 })
-                self.assertContains(response, self.TABLE_ERROR_TEXT, 1)
                 lc.check(
                     ('courses.views.learners', 'ERROR', 'Failed to reach the Learner List endpoint'),
                     ('courses.views.learners', 'ERROR', 'Failed to reach the Course Learner Metadata endpoint')

analytics_dashboard/courses/views/learners.py

@@ -19,8 +19,7 @@ class LearnersView(CourseTemplateWithNavView):
 
     def get_context_data(self, **kwargs):
         context = super(LearnersView, self).get_context_data(**kwargs)
-        context.update({
-            'page_data': self.get_page_data(context),
+        context['js_data']['course'].update({
             'learner_list_url': reverse('learner_analytics_api:v0:LearnerList'),
             'course_learner_metadata_url': reverse(
                 'learner_analytics_api:v0:CourseMetadata',
@@ -54,9 +53,11 @@ class LearnersView(CourseTemplateWithNavView):
             except (Timeout, ConnectionError, ValueError):
                 # ValueError may be thrown by the call to .json()
                 logger.exception(error_message)
-                context[data_name] = {}
+                context[data_name] = error_message
+            context['js_data']['course'].update({
+                data_name: context[data_name]
+            })
 
-        # Only show roster if data is avilable for it; otherwise, an error will be displayed.
-        context['show_error'] = False if context['learner_list_json'] else True
+        context['page_data'] = self.get_page_data(context)
 
         return context

analytics_dashboard/static/apps/learners/app/app.js

@@ -5,6 +5,7 @@ define(function(require) {
         Backbone = require('backbone'),
         Marionette = require('marionette'),
         NProgress = require('nprogress'),
+        _ = require('underscore'),
 
         initModels = require('load/init-page'),
 
@@ -73,6 +74,7 @@ define(function(require) {
                     courseId: this.options.courseId,
                     learnerCollection: learnerCollection,
                     courseMetadata: courseMetadata,
+                    hasData: _.isObject(this.options.learnerListJson),
                     pageModel: pageModel,
                     rootView: rootView,
                     learnerEngagementTimelineUrl: this.options.learnerEngagementTimelineUrl,

analytics_dashboard/static/apps/learners/app/controller.js

@@ -56,6 +56,7 @@ define(function(require) {
             var rosterView = new LearnerRosterView({
                     collection: this.options.learnerCollection,
                     courseMetadata: this.options.courseMetadata,
+                    hasData: this.options.hasData,
                     trackingModel: this.options.trackingModel
                 }),
                 loadingView = new LoadingView({

analytics_dashboard/static/apps/learners/app/learners-main.js

+require(['vendor/domReady!', 'jquery', 'load/init-page', 'apps/learners/app/app'], function(doc, $, page, LearnersApp) {
+    'use strict';
+    var modelData = page.models.courseModel,
+        app = new LearnersApp({
+            courseId: modelData.get('courseId'),
+            containerSelector: '.learners-app-container',
+            learnerListJson: modelData.get('learner_list_json'),
+            learnerListUrl: modelData.get('learner_list_url'),
+            courseLearnerMetadataJson: modelData.get('course_learner_metadata_json'),
+            courseLearnerMetadataUrl: modelData.get('course_learner_metadata_url'),
+            learnerEngagementTimelineUrl: modelData.get('learner_engagement_timeline_url')
+        });
+
+    app.start();
+});

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

@@ -26,7 +26,7 @@ define(function(require) {
             this.onLearnerCollectionUpdated(this.options.collection);
         },
         onLearnerCollectionUpdated: function(collection) {
-            if (collection.length) {
+            if (collection.length && this.options.hasData) {
                 // Don't re-render the learner table view if one already exists.
                 if (!(this.getRegion('main').currentView instanceof LearnerTableView)) {
                     this.showChildView('main', new LearnerTableView({

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

@@ -70,6 +70,7 @@ define(function(require) {
             this.showChildView('results', new LearnerResultsView({
                 collection: this.options.collection,
                 courseMetadata: this.options.courseMetadata,
+                hasData: this.options.hasData,
                 trackingModel: this.options.trackingModel
             }));
         },

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

@@ -63,6 +63,7 @@ define(function(require) {
                 courseMetadata: defaultOptions.courseMetadataModel ||
                     new CourseMetadataModel(defaultOptions.courseMetadata, {parse: true}),
                 el: '.' + fixtureClass,
+                hasData: true,
                 trackingModel: new TrackingModel()
             }).render();
             rosterView.onBeforeShow();

build.js

@@ -69,7 +69,7 @@
             exclude: ['js/common']
         },
         {
-            name: 'apps/learners/app/app',
+            name: 'apps/learners/app/learners-main',
             exclude: ['js/common']
         },
         {