Using split events

Author: johnsimons

src/Pulse.Host/app/js/controllers.js

@@ -3,34 +3,59 @@
 /* Controllers */
 
 angular.module('sc.controllers', [])
-    .controller('heartbeatsStats', ['$scope', 'streamService', 'serviceControlService', function ($scope, streamService, serviceControlService) {
+    .controller('heartbeatsStats', ['$scope', 'streamService', 'serviceControlService', function($scope, streamService, serviceControlService) {
 
-        $scope.model = {active_endpoints: '?', number_of_failing_endpoints: '?'};
-        
-        serviceControlService.getHeartbeatStats().then(function (stat) {
+        $scope.model = { active_endpoints: 0, failing_endpoints: 0 };
+
+        serviceControlService.getHeartbeatStats().then(function(stat) {
             $scope.model.active_endpoints = stat.active_endpoints;
-            $scope.model.number_of_failing_endpoints = stat.number_of_failing_endpoints;
+            $scope.model.failing_endpoints = stat.failing_endpoints;
+        });
+
+        streamService.subscribe($scope, 'HeartbeatGracePeriodElapsed', function(_) {
+            $scope.model.failing_endpoints++;
+            ;
         });
 
-        streamService.subscribe($scope, 'HeartbeatSummaryChanged', function (message) {
-            $scope.model.active_endpoints = message.active_endpoints;
-            $scope.model.number_of_failing_endpoints = message.number_of_failing_endpoints;
+        streamService.subscribe($scope, 'HeartbeatReceived', function(_) {
+            $scope.model.active_endpoints++;
         });
+
+    }])
+    .controller('heartbeats', ['$scope', 'serviceControlService', 'streamService', function($scope, serviceControlService, streamService) {
+
+        $scope.model = [];
 
-  }])
-  .controller('heartbeats', ['$scope', 'serviceControlService', 'streamService', function ($scope, serviceControlService, streamService) {
+        serviceControlService.getHeartbeatsList().then(function(heartbeats) {
+            $scope.model = heartbeats;
+        });
+
+        streamService.subscribe($scope, 'HeartbeatGracePeriodElapsed', function (message) {
+            processMessage(message, false);
+        });
+
+        streamService.subscribe($scope, 'HeartbeatReceived', function(message) {
+            processMessage(message, true);
+        });
 
-      $scope.model = [];
+        function processMessage(message, active) {
+            var idx = findHeartbeat(message.endpoint, message.machine);
 
-      function refresh() {
-          serviceControlService.getHeartbeatsList().then(function(heartbeats) {
-              $scope.model = heartbeats;
-          });
-      }
+            if (idx == -1) {
+                $scope.model.push(angular.extend({ active: active }, message));
+            } else {
+                $scope.model[idx].active = active;
+                $scope.model[idx].last_sent_at = message.last_sent_at;
+            }
+        }
 
-      refresh();
+        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;
+                }
+            }
 
-      streamService.subscribe($scope, 'HeartbeatSummaryChanged', function (_) {
-          refresh();
-      });
-  }]);
+            return -1;
+        };
+    }]);

src/Pulse.Host/app/partials/heartbeats.html

@@ -1,9 +1,9 @@
 <h2>Heartbeats List</h2>
 <div class="row" ng-controller="heartbeats">
     <div class="col-6 col-sm-6 col-lg-4" ng-repeat="heartbeat in model">
-        <div style="margin: 5px;" ng-class="{'alert-success': heartbeat.failing == false, 'alert-danger': heartbeat.failing == true}">
-            <h2>{{heartbeat.endpoint}}</h2>
-            <p>Last Updated: <span moment="{{heartbeat.last_heartbeat_sent_at}}"></span></p>
+        <div style="margin: 5px;" ng-class="{'alert-success': heartbeat.active, 'alert-danger': heartbeat.active == false}">
+            <h4>{{heartbeat.endpoint}}@{{heartbeat.machine}}</h4>
+            <p>Last Updated: <span moment="{{heartbeat.last_sent_at}}"></span></p>
         </div>
     </div>
 </div>

src/Pulse.Host/app/partials/heartbeatsStats.html

@@ -1,5 +1,5 @@
 <h2>Heartbeats indicators</h2>
 <div class="well" ng-controller="heartbeatsStats" >
     <a href="#/heartbeats" class="btn btn-success btn-lg">{{model.active_endpoints}} active endpoints</a>
-    <a href="#/heartbeats" class="btn btn-danger btn-lg">{{model.number_of_failing_endpoints}} failing endpoints</a>
+    <a href="#/heartbeats" class="btn btn-danger btn-lg">{{model.failing_endpoints}} failing endpoints</a>
 </div>