Scaffolding for import progress reporting

cms/djangoapps/contentstore/views/import_export.py

@@ -240,6 +240,34 @@ def import_course(request, org, course, name):
             })
         })
 
+@ensure_csrf_cookie
+@login_required
+def get_import_status(request, course, filename):
+    """
+    Returns an integer corresponding to the status of a file import. These are:
+
+        0 : No status file found (import done or upload still in progress)
+        1 : Extracting file
+        2 : Validating.
+        3 : Importing to mongo
+
+        4 : Error reading file (e.g., converting contents to int)
+
+    """
+    data_root = path(settings.GITHUB_REPO_ROOT)
+    status_file = data_root / (course + filename + ".lock")
+    if not os.path.isfile(status_file):
+        return JsonResponse({"ImportStatus": 0 })
+
+    with open(status_file, "r") as f:
+        try:
+            status = int(f.read())
+        except ValueError:
+            status = 4
+        return JsonResponse({"ImportStatus": status})
+
+
+
 
 @ensure_csrf_cookie
 @login_required
@@ -319,7 +347,6 @@ def generate_export_course(request, org, course, name):
     response['Content-Length'] = os.path.getsize(export_file.name)
     return response
 
-
 @ensure_csrf_cookie
 @login_required
 def export_course(request, org, course, name):

cms/static/sass/views/_import.scss

@@ -1,5 +1,14 @@
 // studio - views - course import
 // ====================
+@-webkit-keyframes opacity {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}
+@-moz-keyframes opacity {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
 
 .view-import {
 
@@ -85,6 +94,8 @@
     }
   }
 
+
+
   .progress-bar {
     display: none;
     width: 350px;
@@ -109,3 +120,41 @@
     line-height: 48px;
   }
 }
+
+.not-started {
+  opacity: 0.4;
+}
+
+.not-started span {
+  display: none;
+}
+
+.done {
+  opacity: 0.7;
+}
+
+.done span {
+  display: none;
+}
+
+.in-progress span {
+  -webkit-animation-name: opacity;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-iteration-count: infinite;
+
+  -moz-animation-name: opacity;
+  -moz-animation-duration: 1s;
+  -moz-animation-iteration-count: infinite;
+}
+
+.in-progress span:nth-child(2) {
+  -webkit-animation-delay: 300ms;
+  -moz-animation-delay: 300ms;
+}
+
+.in-progress span:nth-child(3) {
+  -webkit-animation-delay: 600ms;
+  -moz-animation-delay: 600ms;
+}
+
+

cms/templates/import.html

@@ -35,7 +35,26 @@
         <input type="file" name="course-data" class="file-input" >
         <input type="submit" value="${_('Replace my course with the one above')}" class="submit-button" >
         <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
-        <p class="status-block">Unpacking...</p>
+        <div id="status-infos" class="status-infos">
+            <p class="status-info in-progress">
+            Unpacking
+            <span class="loading-dots">.</span>
+            <span class="loading-dots">.</span>
+            <span class="loading-dots">.</span>
+            </p>
+            <p class="status-info not-started">
+            Verifying
+            <span class="loading-dots">.</span>
+            <span class="loading-dots">.</span>
+            <span class="loading-dots">.</span>
+            </p>
+            <p class="status-info not-started">
+            Importing
+            <span class="loading-dots">.</span>
+            <span class="loading-dots">.</span>
+            <span class="loading-dots">.</span>
+            </p>
+        </div>
         <div class="progress-bar">
           <div class="progress-fill"></div>
           <div class="percent">0%</div>
@@ -57,6 +76,8 @@ var status = $('#status');
 var statusBlock = $('.status-block');
 var submitBtn = $('.submit-button');
 
+var allStats = $('#status-infos');
+
 
 $('#fileupload').fileupload({