Merge pull request #4560 from edx/zub/story/updatestudioimportstatusui

show upload progress on import course view

cms/djangoapps/contentstore/views/tests/test_import_export.py

@@ -93,7 +93,7 @@ class ImportTestCase(CourseTestCase):
             )
         )
 
-        self.assertEquals(json.loads(resp_status.content)["ImportStatus"], 2)
+        self.assertEquals(json.loads(resp_status.content)["ImportStatus"], -2)
 
     def test_with_coursexml(self):
         """

cms/static/js/views/import.js

@@ -50,8 +50,22 @@ define(
         var getStatus = function (url, timeout, stage) {
             var currentStage = stage || 0;
             if (CourseImport.stopGetStatus) { return ;}
-            updateStage(currentStage);
-            if (currentStage == 3 ) { return ;}
+
+            if (currentStage === 4) {
+                // Succeeded
+                CourseImport.displayFinishedImport();
+                $('.view-import .choose-file-button').html(gettext("Choose new file")).show();
+            } else if (currentStage < 0) {
+                // Failed
+                var errMsg = gettext("Error importing course");
+                var failedStage = Math.abs(currentStage);
+                CourseImport.stageError(failedStage, errMsg);
+                $('.view-import .choose-file-button').html(gettext("Choose new file")).show();
+            } else {
+                // In progress
+                updateStage(currentStage);
+            }
+
             var time = timeout || 1000;
             $.getJSON(url,
                 function (data) {
@@ -109,18 +123,58 @@ define(
             },
 
             /**
+             * Make Import feedback status list visible.
+             */
+            displayFeedbackList: function (){
+                this.stopGetStatus = false;
+                $('div.wrapper-status').removeClass('is-hidden');
+                $('.status-info').show();
+            },
+
+            /**
+             * Start upload feedback. Makes status list visible and starts
+             * showing upload progress.
+             */
+            startUploadFeedback: function (){
+                this.displayFeedbackList();
+                updateStage(0);
+            },
+
+            /**
+             * Show last import status from server and start sending requests to the server for status updates.
+             */
+            getAndStartUploadFeedback: function (url, fileName){
+                var self = this;
+                $.getJSON(url,
+                    function (data) {
+                        if (data.ImportStatus != 0) {
+                            $('.file-name').html(fileName);
+                            $('.file-name-block').show();
+                            self.displayFeedbackList();
+                            if (data.ImportStatus === 4){
+                                self.displayFinishedImport();
+                            } else {
+                                $('.view-import .choose-file-button').hide();
+                                var time = 1000;
+                                setTimeout(function () {
+                                    getStatus(url, time, data.ImportStatus);
+                                }, time);
+                            }
+                        }
+                    }
+                );
+            },
+
+            /**
              * Entry point for server feedback. Makes status list visible and starts
              * sending requests to the server for status updates.
              * @param {string} url The url to send Ajax GET requests for updates.
              */
             startServerFeedback: function (url){
                 this.stopGetStatus = false;
-                $('div.wrapper-status').removeClass('is-hidden');
-                $('.status-info').show();
-                getStatus(url, 500, 0);
+                getStatus(url, 1000, 0);
             },
 
-
             /**
              * Give error message at the list element that corresponds to the stage
              * where the error occurred.
@@ -128,6 +182,7 @@ define(
              * @param {string} msg Error message to display.
              */
             stageError: function (stageNo, msg) {
+                this.stopGetStatus = true;
                 var all = $('ol.status-progress').children();
                 // Make all stages up to, and including, the error stage 'complete'.
                 var prevList = all.slice(0, stageNo + 1);
@@ -140,8 +195,10 @@ define(
                 });
                 var message = msg || gettext("There was an error with the upload");
                 var elem = $('ol.status-progress').children().eq(stageNo);
-                elem.removeClass('is-started').addClass('has-error');
-                elem.find('p.copy').hide().after("<p class='copy error'>" + message + "</p>");
+                if (!elem.hasClass('has-error')) {
+                    elem.removeClass('is-started').addClass('has-error');
+                    elem.find('p.copy').hide().after("<p class='copy error'>" + message + "</p>");
+                }
             }
 
         };

cms/templates/import.html

@@ -63,6 +63,9 @@
 
               <div class="status-detail">
                 <h3 class="title">${_("Uploading")}</h3>
+                <div class="progress-bar">
+                  <div class="progress-fill"></div>
+                </div>
                 <p class="copy">${_("Transferring your file to our servers")}</p>
               </div>
             </li>
@@ -147,7 +150,7 @@
 <%block name="jsextra">
 <script>
 require(
-        ["js/views/import", "jquery", "gettext", "jquery.fileupload"],
+        ["js/views/import", "jquery", "gettext", "jquery.fileupload", "jquery.cookie"],
         function(CourseImport, $, gettext) {
 
 var file;
@@ -170,6 +173,12 @@ var defaults = [
     "${_("There was an error while importing the new course to our database.")}\n"
 ];
 
+// Display the status of last file upload on page load
+var lastfileupload = $.cookie('lastfileupload');
+if (lastfileupload){
+    CourseImport.getAndStartUploadFeedback(feedbackUrl.replace('fillerName', lastfileupload), lastfileupload);
+}
+
 $('#fileupload').fileupload({
 
     dataType: 'json',
@@ -185,20 +194,22 @@ $('#fileupload').fileupload({
         file = data.files[0];
         if (file.name.match(/tar\.gz$/)) {
             submitBtn.click(function(e){
+                $.cookie('lastfileupload', file.name);
                 e.preventDefault();
                 submitBtn.hide();
+                CourseImport.startUploadFeedback();
                 data.submit().complete(function(result, textStatus, xhr) {
-                    CourseImport.stopGetStatus = true;
                     window.onbeforeunload = null;
                     if (xhr.status != 200) {
-                        if (!result.responseText) {
-                            alert(gettext("Your browser has timed out, but the server is still processing your import. Please wait 5 minutes and verify that the new content has appeared."));
+                        try{
+                            var serverMsg = $.parseJSON(result.responseText);
+                        } catch (e) {
                             return;
                         }
                         var serverMsg = $.parseJSON(result.responseText);
                         var errMsg = serverMsg.hasOwnProperty("ErrMsg") ?  serverMsg.ErrMsg : "" ;
                         if (serverMsg.hasOwnProperty("Stage")) {
-                            var stage = serverMsg.Stage;
+                            var stage = Math.abs(serverMsg.Stage);
                             CourseImport.stageError(stage, defaults[stage] + errMsg);
                         }
                         else {
@@ -207,6 +218,7 @@ $('#fileupload').fileupload({
                         chooseBtn.html("${_("Choose new file")}").show();
                         bar.hide();
                     }
+                    CourseImport.stopGetStatus = true;
                     chooseBtn.html("${_("Choose new file")}").show();
                     bar.hide();
                 });
@@ -230,11 +242,15 @@ $('#fileupload').fileupload({
         }
         if (percentInt >= doneAt) {
             bar.hide();
-            CourseImport.startServerFeedback(feedbackUrl.replace("fillerName", file.name));
+            // Start feedback with delay so that current stage of import properly updates in session
+            setTimeout(
+                function() { CourseImport.startServerFeedback(feedbackUrl.replace('fillerName', file.name)) },
+                3000
+            );
         } else {
             bar.show();
             fill.width(percentVal);
-            percent.html(percentVal);
+            fill.html(percentVal);
         }
     },
     done: function(e, data){