Failed messages screen notifies user of new messages, fixes #48

johnsimons · johnsimons · commit cb2e5e37f77e · 2013-11-20T13:43:00.000+11:00
Added option to remove heartbeats associated with endpoint.
diff --git a/src/ServicePulse.Host/ServicePulse.Host.csproj b/src/ServicePulse.Host/ServicePulse.Host.csproj
@@ -106,6 +106,7 @@
     <Content Include="app\img\icons-small.png" />
     <Content Include="app\img\ie7-forbidden-logo.jpg" />
     <Content Include="app\img\i_16_radio.png" />
+    <Content Include="app\img\loader_spinner.gif" />
     <Content Include="app\img\logo.png" />
     <Content Include="app\img\logo20.png" />
     <Content Include="app\img\progress.gif" />
diff --git a/src/ServicePulse.Host/app/css/app.css b/src/ServicePulse.Host/app/css/app.css
@@ -70,4 +70,22 @@
         width: 96.489362%;
         *width: 96.489362%;
     }
+}
+
+.newMessages {
+    padding-top: 15px;
+    background-color: #f7f7f9;
+    border: 1px solid #e1e1e8;
+    cursor: pointer;
+}
+
+.newMessages:hover {
+    background-color: #DBDBDB;
+}
+
+.loading {
+    background-image: url('/img/loader_spinner.gif');
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 65px;
 }
diff --git a/src/ServicePulse.Host/app/img/loader_spinner.gif b/src/ServicePulse.Host/app/img/loader_spinner.gif
diff --git a/src/ServicePulse.Host/app/js/alerts/alerts.tpl.html b/src/ServicePulse.Host/app/js/alerts/alerts.tpl.html
@@ -15,6 +15,6 @@ <h2><i class="fa-icon-info-sign"></i><span class="break"></span>Latest events</h
             </div>
         </div>
         <div class="alert alert-success" ng-show='!loadingData && model.length == 0'>No events!</div>
-        <div class="alert alert-info" ng-show='loadingData'><strong>Loading data ...</strong></div>
+        <div class="loading" ng-show='loadingData'></div>
     </div>
 </div>
diff --git a/src/ServicePulse.Host/app/js/custom_checks/customChecks.tpl.html b/src/ServicePulse.Host/app/js/custom_checks/customChecks.tpl.html
@@ -27,7 +27,7 @@ <h2><i class="fa-icon-check"></i><span class="break"></span>Showing {{model.tota
                     </div>
                 </div>
                 <div class="alert alert-success" ng-show='!loadingData && model.total == 0'>No failed custom checks</div>
-                <div class="alert alert-info" ng-show='loadingData'><strong>Loading data ...</strong></div>
+                <div class="loading" ng-show='loadingData'></div>
             </div>
             </div>
     </div>
diff --git a/src/ServicePulse.Host/app/js/endpoints/endpoints.js b/src/ServicePulse.Host/app/js/endpoints/endpoints.js
@@ -4,50 +4,29 @@ angular.module('endpoints', [])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.when('/endpoints', { templateUrl: 'js/endpoints/endpoints.tpl.html', controller: 'EndpointsCtrl' });
     }])
-    .controller('EndpointsCtrl', ['$scope', 'serviceControlService', 'streamService', function ($scope, serviceControlService, streamService) {
+    .controller('EndpointsCtrl', ['$scope', 'serviceControlService', '$timeout', function ($scope, serviceControlService, $timeout) {
 
         $scope.model = [];
 
-        serviceControlService.getHeartbeatsList().then(function (heartbeats) {
-            $scope.model = heartbeats;
-        });
-
-        streamService.subscribe($scope, 'EndpointFailedToHeartbeat', function (message) {
-            processMessage(message, false, message.last_received_at);
-        });
-
-        streamService.subscribe($scope, 'EndpointHeartbeatRestored', function (message) {
-            processMessage(message, true, message.restored_at);
-        });
-
-        streamService.subscribe($scope, 'HeartbeatingEndpointDetected', function (message) {
-            processMessage(message, true, message.detected_at);
-        });
+        var timeoutId;
 
+        $scope.removeEndpoint = function(id) {
+            serviceControlService.deleteEndpoint(id);
+        };
+        
         $scope.$on('$destroy', function () {
-            streamService.unsubscribe($scope, 'EndpointFailedToHeartbeat');
-            streamService.unsubscribe($scope, 'HeartbeatingEndpointDetected');
-            streamService.unsubscribe($scope, 'EndpointHeartbeatRestored');
+            $timeout.cancel(timeoutId);
         });
 
-        function processMessage(message, active, lastUpdatedAt) {
-            var idx = findHeartbeat(message.endpoint, message.machine);
-
-            if (idx == -1) {
-                $scope.model.push(angular.extend({ active: active, last_sent_at: lastUpdatedAt }, message));
-            } else {
-                $scope.model[idx].active = active;
-                $scope.model[idx].last_sent_at = lastUpdatedAt;
-            }
+        function updateUI() {
+            serviceControlService.getHeartbeatsList().then(function(heartbeats) {
+                $scope.model = heartbeats;
+            });
         }
 
-        function findHeartbeat(endpoint, machine) {
-            for (var i = 0; i < $scope.model.length; i++) {
-                if ($scope.model[i].endpoint === endpoint && $scope.model[i].machine === machine) {
-                    return i;
-                }
-            }
-
-            return -1;
-        };
+        timeoutId = $timeout(function () {
+            updateUI();
+        }, 5000);
+        
+        updateUI();
     }]);
diff --git a/src/ServicePulse.Host/app/js/endpoints/endpoints.tpl.html b/src/ServicePulse.Host/app/js/endpoints/endpoints.tpl.html
@@ -14,6 +14,7 @@
         <div style="margin: 5px;" ng-class="{'alert-success': endpoint.reported_status != 'dead', 'alert-danger': endpoint.reported_status == 'dead'}">
             <h4>{{endpoint.originating_endpoint.name}}@{{endpoint.originating_endpoint.machine}}</h4>
             <p>Latest heartbeat received: <sp-moment date="{{endpoint.last_report_at}}" /></p>
+            <button class="btn btn-danger" ng-click="removeEndpoint(endpoint.id)">Remove</button>
         </div>
     </div>
 </div>
diff --git a/src/ServicePulse.Host/app/js/failed_messages/failedMessages.js b/src/ServicePulse.Host/app/js/failed_messages/failedMessages.js
@@ -6,23 +6,36 @@ angular.module('failedMessages', [])
     }])
     .controller('FailedMessagesCtrl', ['$scope', 'serviceControlService', 'streamService', '$routeParams', function ($scope, serviceControlService, streamService, $routeParams) {
 
-        $scope.model = { total: 0, failedMessages: [], failedMessagesStats: [], selectedIds:[] };
+        $scope.model = { total: 0, failedMessages: [], failedMessagesStats: [], selectedIds:[], newMessages: 0 };
         $scope.loadingData = false;
         $scope.disableLoadingData = false;
         
         var page = 1;
+
+        function init() {
+            page = 1;
+            $scope.model.failedMessages = [];
+            $scope.model.selectedIds = [];
+            $scope.disableLoadingData = false;
+        }
         
-        function load(sortKey, page) {
-            serviceControlService.getFailedMessages(sortKey, page).then(function (response) {
+        function load() {
+            if ($scope.loadingData) {
+                return;
+            }
 
-                $scope.loadingData = false;
-                
+            $scope.loadingData = true;
+            
+            serviceControlService.getFailedMessages($routeParams.sort, page).then(function (response) {
                 $scope.model.failedMessages = $scope.model.failedMessages.concat(response.data);
                 $scope.model.total = response.total;
-                
+
                 if ($scope.model.failedMessages.length >= $scope.model.total) {
                     $scope.disableLoadingData = true;
                 }
+                
+                $scope.loadingData = false;
+                page++;
             });
             
             serviceControlService.getFailedMessageStats().then(function (failedMessagesStats) {
@@ -31,12 +44,8 @@ angular.module('failedMessages', [])
         };
 
         $scope.loadMoreResults = function () {
-            if ($scope.loadingData) {
-                return;
-            }
             
-            $scope.loadingData = true;
-            load($routeParams.sort, page++); 
+            load(); 
         };
         
         $scope.toggleRowSelect = function (row) {
@@ -54,6 +63,12 @@ angular.module('failedMessages', [])
             }
         };
         
+        $scope.refreshResults = function () {
+            init();
+            load();
+            $scope.model.newMessages = 0;
+        };
+        
         $scope.retryAll = function() {
             serviceControlService.retryAllFailedMessages();
         };
@@ -71,8 +86,8 @@ angular.module('failedMessages', [])
             }
         };
 
-        streamService.subscribe($scope, 'MessageFailed', function() {
-            $scope.model.total++;
+        streamService.subscribe($scope, 'MessageFailed', function () {
+            $scope.model.newMessages++;
         });
         
         $scope.$on('$destroy', function () {
diff --git a/src/ServicePulse.Host/app/js/failed_messages/failedMessages.tpl.html b/src/ServicePulse.Host/app/js/failed_messages/failedMessages.tpl.html
@@ -47,12 +47,12 @@ <h3>Message Types</h3>
 <div class="row-fluid">
     <div class="box span12">
         <div class="box-header" data-original-title>
-            <h2><i class="fa-icon-envelope"></i><span class="break"></span>Showing {{model.failedMessages.length}} message(s)</h2>
+            <h2><i class="fa-icon-envelope"></i><span class="break"></span>Showing {{model.failedMessages.length}} message(s) <i ng-show="!disableLoadingData">(scroll down to load more)</i></h2>
         </div>
         <div class="box-content">
             <div class="btn-toolbar">
                 <button class="btn" ng-click="retrySelected()" ng-disabled="model.selectedIds.length == 0"><i class="icon-repeat"></i> Retry {{model.selectedIds.length}} selected</button>
-                <button class="btn" ng-click="retryAll()" ng-disabled="model.total == 0"><i class="icon-asterisk"></i> Retry all messages)</button>
+                <button class="btn" ng-click="retryAll()" ng-disabled="model.total == 0"><i class="icon-asterisk"></i> Retry all messages</button>
                 <div class="btn-group pull-right">
                     <a class="btn btn-link dropdown-toggle"
                        data-toggle="dropdown"
@@ -66,6 +66,8 @@ <h2><i class="fa-icon-envelope"></i><span class="break"></span>Showing {{model.f
                     </ul>
                 </div>
             </div>
+            <div class="newMessages" ng-show="model.newMessages > 1" ng-click="refreshResults()"><p class="text-center">{{model.newMessages}} new messages</p></div>
+            <div class="newMessages" ng-show="model.newMessages == 1" ng-click="refreshResults()"><p class="text-center">{{model.newMessages}} new message</p></div>
             <div infinite-scroll="loadMoreResults()" infinite-scroll-distance="0" infinite-scroll-disabled="disableLoadingData">
                 <div class="scRow" ng-repeat="row in model.failedMessages">
                     <div class="row-fluid scSelectableRow" ng-class="{rowSelected: row.selected == true}" ng-click="toggleRowSelect(row)" style="cursor: pointer;">
@@ -78,14 +80,14 @@ <h2><i class="fa-icon-envelope"></i><span class="break"></span>Showing {{model.f
                                 <div class="span2 text-right"><sp-moment date="{{row.time_sent}}" /></div>
                             </div>
                             <div class="row-fluid">
-                                <div class="span8"><code>{{row.failure_details.exception.message}}</code></div>
+                                <div class="span8"><pre>{{row.failure_details.exception.message}}</pre></div>
                                 <div class="span4 text-right" title="In: {{row.receiving_endpoint.name}} on {{row.receiving_endpoint.machine}}">in {{row.receiving_endpoint.name}} on {{row.receiving_endpoint.machine}}</div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="alert alert-success" ng-show='!loadingData && model.total == 0'>No failed messages</div>
-                <div class="alert alert-info" ng-show='loadingData'><strong>Loading data ...</strong></div>
+                <div class="loading" ng-show='loadingData'></div>
             </div>
          </div>
      </div>
diff --git a/src/ServicePulse.Host/app/js/services/serviceControlService.js b/src/ServicePulse.Host/app/js/services/serviceControlService.js
@@ -77,6 +77,16 @@ angular.module('services.serviceControlService', [])
             });
         };
         
+        this.deleteEndpoint = function (id) {
+            $http.delete(scConfig.service_control_url + '/heartbeats/' + id)
+                .success(function () {
+                    notifications.pushForCurrentRoute('Endpoint deleted', 'info');
+                })
+                .error(function () {
+                    notifications.pushForCurrentRoute('Endpoint deletion failed', 'error');
+                });
+        };
+        
         this.getEndpoints = function() {
             return $http.get(scConfig.service_control_url + '/endpoints').then(function (response) {
                 return response.data;
