Auto-refresh exercise list when builds complete

Add a build-status API endpoint and poll it from the exercise list
page. When a building exercise changes status, reload the page
preserving scroll position.

Author: Nils Bars

webapp/ref/templates/exercise_view_all.html

@@ -39,7 +39,7 @@ <h4 class="card-header">
                         <td>{{ e.short_name }}</td>
                         <td>{{ e.version }}</td>
                         <td>{{ e.max_grading_points }}</td>
-                        <td>{{ e.build_job_status.value }}</td>
+                        <td data-exercise-id="{{ e.id }}" data-build-status="{{ e.build_job_status.value }}">{{ e.build_job_status.value }}</td>
                         <td>
                             {{ e.active_instances|length }} <br> {{ e.submission_heads()|length }} ({{ e.submissions()|length }})
                         </td>
@@ -83,6 +83,45 @@ <h4 class="card-header">
     </div>
 {% endfor %}
 
+<script>
+(function() {
+    var cells = document.querySelectorAll('td[data-build-status]');
+    var initial = {};
+    var hasBuilding = false;
+    cells.forEach(function(td) {
+        var id = td.getAttribute('data-exercise-id');
+        var status = td.getAttribute('data-build-status');
+        initial[id] = status;
+        if (status === 'BUILDING') hasBuilding = true;
+    });
+
+    // Restore scroll position after reload (defer until page is fully laid out)
+    var savedScroll = sessionStorage.getItem('exerciseListScroll');
+    if (savedScroll !== null) {
+        sessionStorage.removeItem('exerciseListScroll');
+        var scrollY = parseInt(savedScroll);
+        window.addEventListener('load', function() {
+            window.scrollTo(0, scrollY);
+        });
+    }
+
+    if (!hasBuilding) return;
+
+    setInterval(function() {
+        axios.get('/api/build-status').then(function(response) {
+            var statuses = response.data;
+            for (var id in initial) {
+                if (statuses[id] && statuses[id] !== initial[id]) {
+                    sessionStorage.setItem('exerciseListScroll', window.scrollY);
+                    location.reload();
+                    return;
+                }
+            }
+        });
+    }, 3000);
+})();
+</script>
+
 {% if importable|length %}
 <div class="card mb-5">
     <h4 class="card-header">

webapp/ref/view/api.py

@@ -591,7 +591,6 @@ def api_getkeys():
         keys.append(s.pub_key)
 
     resp = {"keys": keys}
-    log.info(f"Returning {len(keys)} public-keys in total.")
     return ok_response(resp)
 
 
@@ -905,6 +904,14 @@ def api_instance_info():
     return ok_response(ret)
 
 
+@refbp.route("/api/build-status")
+@admin_required
+def api_build_status():
+    exercises = Exercise.query.all()
+    statuses = {str(e.id): e.build_job_status.value for e in exercises}
+    return jsonify(statuses)
+
+
 # @refbp.route('/api/instance/diff', methods=('GET', 'POST'))
 # @limiter.limit('6 per minute')
 # def api_instance_diff():