Add an error message when server reboots

front/src/js/controllers/queueCtrl.js

@@ -1,6 +1,6 @@
 var queueCtrl = angular.module('queueCtrl', ['runsFactory']);
 
-queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs', function($scope, $routeParams, $location, Runs) {
+queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs', 'API', function($scope, $routeParams, $location, Runs, API) {
     $scope.runId = $routeParams.runId;
 
     var numberOfTries = 0;
@@ -9,6 +9,8 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs'
         Runs.get({runId: $scope.runId}, function(data) {
             $scope.url = data.params.url;
             $scope.status = data.status;
+            $scope.notFound = false;
+            $scope.connectionLost = false;
 
             if (data.status.statusCode === 'running' || data.status.statusCode === 'awaiting') {
                 numberOfTries ++;
@@ -21,6 +23,16 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs'
             } else {
                 // Handled by the view
             }
+        }, function(response) {
+            if (response.status === 404) {
+                $scope.notFound = true;
+                $scope.connectionLost = false;
+            } else if (response.status === 0) {
+                // Connection lost, retry in 10 seconds
+                setTimeout(getRunStatus, 10000);
+                $scope.connectionLost = true;
+                $scope.notFound = false;
+            }
         });
     }
     

front/src/views/queue.html

@@ -1,24 +1,36 @@
-<p>Tested url: &nbsp; <a href="{{url}}" target="_blank" class="testedUrl">{{url}}</a></p>
+<p ng-if="url">Tested url: &nbsp; <a href="{{url}}" target="_blank" class="testedUrl">{{url}}</a></p>
 
-<div ng-if="status.statusCode == 'failed'">
-    <div class="status">Test failed</div>
-    <p class="statusSubMessage">{{status.error}}</p>
-    
-    <a class="linkButton" href="https://github.com/gmetais/YellowLabTools/issues" target="_blank">Report the issue on GitHub</a>
-    <a class="linkButton" href="/">New test</a>
-</div>
-<div ng-if="status.statusCode == 'awaiting'">
-    <div class="status">
-        <ng-pluralize count="status.position" when="{'one': 'Waiting behind 1 other test', 'other': 'Waiting behind {} other tests'}">
-        </ng-pluralize>
+<div ng-if="!notFound && !connectionLost">
+    <div ng-if="status.statusCode == 'failed'">
+        <div class="status">Test failed</div>
+        <p class="statusSubMessage">{{status.error}}</p>
+        
+        <a class="linkButton" href="https://github.com/gmetais/YellowLabTools/issues" target="_blank">Report the issue on GitHub</a>
+        <a class="linkButton" href="/">New test</a>
+    </div>
+    <div ng-if="status.statusCode == 'awaiting'">
+        <div class="status">
+            <ng-pluralize count="status.position" when="{'one': 'Waiting behind 1 other test', 'other': 'Waiting behind {} other tests'}">
+            </ng-pluralize>
+        </div>
+        <p class="statusSubMessage">(auto-refresh activated)</p>
+    </div>
+    <div ng-if="status.statusCode == 'running'">
+        <div class="status">Test is running...</div>
+        <p class="statusSubMessage">(auto-refresh activated)</p>
+    </div>
+    <div ng-if="status.statusCode == 'complete'">
+        <div class="status">Test complete</div>
+        <p class="statusSubMessage">Opening results...</p>
     </div>
-    <p class="statusSubMessage">(auto-refresh activated)</p>
 </div>
-<div ng-if="status.statusCode == 'running'">
-    <div class="status">Test is running...</div>
-    <p class="statusSubMessage">(auto-refresh activated)</p>
+<div ng-if="notFound == true">
+    <div class="status">Error 404 (test not found)</div>
+    <p class="statusSubMessage">The server probably rebooted. We are very sorry about that, please try to launch the test again.</p>
+    
+    <a class="linkButton" href="/">New test</a>
 </div>
-<div ng-if="status.statusCode == 'complete'">
-    <div class="status">Test complete</div>
-    <p class="statusSubMessage">Opening results...</p>
+<div ng-if="connectionLost == true">
+    <div class="status">Connection lost with server</div>
+    <p class="statusSubMessage">Check your wifi cable, or maybe YellowLab.tools is rebooting.</p>
 </div>