Improve loading indicators and view when check doesn't exist

- The loading animation now works properly when multiple requests are run in parallel (previously, the loading indicator would go away even though load is still ongoing)
- The checks page no longer displays "We've got no checks" text while the checks are loading (which takes a while if you have a lot of them)
- The check page no longer shows a blank form when the check doesn't exist
- Fixed minor CSS mistakes with the footer and column count not adding up to 12

seyren-web/src/main/webapp/html/check.html

@@ -1,4 +1,10 @@
-    <div class="row" ng-show="graphsEnabled()">
+    <div class="row" ng-show="!checkExists">
+        <div class="col-lg-12">
+            <h1>Not Found</h1>
+            <p>Check was not found. Maybe it has been deleted?</p>
+        </div>
+    </div>
+    <div class="row" ng-show="checkExists && graphsEnabled()">
         <div class="col-lg-12">
             <div class="col-lg-3 graph" ng-repeat="graph in graphs">
                 <div class="thumbnail">
@@ -10,10 +16,10 @@ <h6 style="margin: 0px 0;"><strong>{{ graph.description }}</strong></h6>
             </div>
         </div>
     </div>
-    <div class="row">
+    <div class="row" ng-show="checkExists && check != null">
         <div class="col-lg-6">
             <div class="row">
-                <div class="col-lg-7">
+                <div class="col-lg-12">
                     <h2><strong>Details</strong> <small>[<a class="" data-keyboard="true" data-toggle="modal" data-show="true" href="" ng-click="editCheck(check)">edit</a>]</small></h2>
                 </div>
             </div>
@@ -103,14 +109,14 @@ <h2><strong>Details</strong> <small>[<a class="" data-keyboard="true" data-toggl
                 <div class="col-lg-8">
                     <h2><strong>Subscriptions</strong></h2>
                 </div>
-                <div class="col-lg-2">
+                <div class="col-lg-4">
                     <p></p><p><button id="editSubscaddriptionButton" class="btn btn-success" data-keyboard="true" data-toggle="modal" data-show="true" href="#editSubscriptionModal" ng-click="editSubscription(check, 'new')"><i class="glyphicon glyphicon-volume-up glyphicon-white"></i>&nbsp;Add subscription</button></p>
                 </div>
             </div>
             <div class="row">
                 <div class="col-lg-12">
                     <div ng-hide="check.subscriptions">This check has no subscriptions</div>
-                    <table class="table table-bordered table-striped table-hover" ng-show="check.subscriptions" style="cursor: pointer;">
+                    <table class="table table-bordered table-striped table-hover" ng-show="check.subscriptions">
                         <thead>
                             <tr>
                                 <th>Target</th>
@@ -162,7 +168,7 @@ <h2><strong>Subscriptions</strong></h2>
             </div>
         </div>
     </div>
-    <div class="row">
+    <div class="row" ng-show="checkExists && check != null">
         <div class="col-lg-12">
         <h2>
             <strong>Alerts</strong> <small>( {{alerts.start}} of {{alerts.total}} )</small>
@@ -224,7 +230,7 @@ <h2>
         </table>
         </div>
     </div>
-    <div class="row">
+    <div class="row" ng-show="checkExists && check != null">
         <div class="col-lg-12">
             <div class="pull-right">
                 <button class="btn btn-danger btn-sm" data-keyboard="true" data-toggle="modal" data-show="true" id="deleteCheckButton" href="#confirmCheckDeleteModal">Delete check</button>

seyren-web/src/main/webapp/html/checks.html

@@ -27,7 +27,7 @@ <h1><strong>Checks</strong></h1>
                 </tr>
             </thead>
             <tbody>
-                <tr ng-repeat="check in checks.values  | filter:filter | orderBy:[predicate,'-name']:reverse" ng-click="selectCheck(check.id)" style="cursor: pointer;">
+                <tr ng-repeat="check in checks.values | filter:filter | orderBy:[predicate,'-name']:reverse" ng-click="selectCheck(check.id)" style="cursor: pointer;">
                     <td title="{{ check.target }}">
                         <a href='#/checks/{{ check.id }}'>{{ check.name }}</a>
                     </td>
@@ -44,7 +44,8 @@ <h1><strong>Checks</strong></h1>
                 </tr>
             </tbody>
         </table>
-        <p ng-hide="checks.values.length > 0">We've got no checks. Why not create one?</p>
+        <p ng-show="checks == null">Loading Checks...</p>
+        <p ng-show="checks != null && checks.values.length == 0">We've got no checks. Why not create one?</p>
     </div>
 
 </div>

seyren-web/src/main/webapp/index.html

@@ -36,7 +36,7 @@
         <div ng-view></div>
     </div>
     <footer class="footer">
-        <div class="col-lg-12">
+        <div class="container">
             <p><a href="https://github.com/scobal/seyren" target="_blank">Seyren</a>, an alerting dashboard for Graphite</p>
         </div>
     </footer>

seyren-web/src/main/webapp/js/check-controller.js

@@ -10,6 +10,9 @@
         $scope.alertStartIndex = 0;
         $scope.alertItemsPerPage = 10;
 
+        // Assume that it exists, for now.
+        $scope.checkExists = true;
+
         configResults.$promise.then(function(data) {
             $scope.config = data;
 
@@ -46,8 +49,12 @@
                 $scope.check = data;
                 $scope.check.descriptionHtml = $sce.trustAsHtml(linkify.normal($scope.check.description));
                 $scope.check.lastLoadTime = new Date().getTime();
-            }, function (err) {
-                console.log('Loading check failed');
+                $scope.checkExists = true;
+            }, function (httpResponse) {
+                console.log('Loading check failed. Status: ' + httpResponse.status);
+                if (httpResponse.status === 404) {
+                    $scope.checkExists = false;
+                }
             });
         };
 

seyren-web/src/main/webapp/js/services.js

@@ -2,10 +2,15 @@
 (function () {
     'use strict';
 
+    var outstandingRequests = 0;
+
     angular.module('seyrenApp.services', ['ngResource']).
         config(function ($httpProvider) {
+            outstandingRequests = 0;
+
             $httpProvider.responseInterceptors.push('spinnerHttpInterceptor');
             var spinnerFunction = function (data, headersGetter) {
+                outstandingRequests += 1;
                 $('#spinnerG').show();
                 $('#banner').hide();
                 return data;
@@ -15,12 +20,18 @@
         factory('spinnerHttpInterceptor', function ($q, $window) {
             return function (promise) {
                 return promise.then(function (response) {
-                    $('#spinnerG').hide();
+                    outstandingRequests -= 1;
+                    if (outstandingRequests <= 0) {
+                        $('#spinnerG').hide();
+                    }
                     $('#banner').hide();
                     return response;
 
                 }, function (response) {
-                    $('#spinnerG').hide();
+                    outstandingRequests -= 1;
+                    if (outstandingRequests <= 0) {
+                        $('#spinnerG').hide();
+                    }
                     $('#banner').show();
                     return $q.reject(response);
                 });