Adding number formatting using angularjs number filter

src/ServicePulse.Host/app/js/directives/ui.particular.failedMessageTabs.tpl.html

@@ -1,9 +1,9 @@
 <div class="row">
     <div class="col-sm-12">
         <div class="tabs">
-            <h5 ng-class="{ active: isActive('/failedGroups') }"><a href="#/failedGroups">Failed message groups ({{counters.group}})</a></h5>
-            <h5 ng-class="{ active: isActive('/failedMessages') }"><a ng-click="viewExceptionGroup()">All failed messages ({{counters.message}})</a></h5>
-            <h5 ng-class="{ active: isActive('/archived') }"><a href="#/archived">Archived messages ({{counters.archived}})</a></h5>
+            <h5 ng-class="{ active: isActive('/failedGroups') }"><a href="#/failedGroups">Failed message groups ({{counters.group | number}})</a></h5>
+            <h5 ng-class="{ active: isActive('/failedMessages') }"><a ng-click="viewExceptionGroup()">All failed messages ({{counters.message | number}})</a></h5>
+            <h5 ng-class="{ active: isActive('/archived') }"><a href="#/archived">Archived messages ({{counters.archived | number}})</a></h5>
         </div>
     </div>
 </div>

src/ServicePulse.Host/app/js/views/archive/view.html

@@ -11,7 +11,7 @@ <h1>Failed Messages</h1>
         <div class="row" ng-show="!vm.loadingData">
             <div class="col-sm-12">
                 <div class="btn-toolbar">
-                    <button type="button" class="btn btn-default" confirm-message="Are you sure you want to un-archive all selected archived messages?" confirm-click="vm.unarchiveSelected()" ng-disabled="vm.selectedIds.length == 0"><i class="fa fa-undo"></i> Unarchive {{vm.selectedIds.length}} selected</button>
+                    <button type="button" class="btn btn-default" confirm-message="Are you sure you want to un-archive all selected archived messages?" confirm-click="vm.unarchiveSelected()" ng-disabled="vm.selectedIds.length == 0"><i class="fa fa-undo"></i> Unarchive {{vm.selectedIds.length | number}} selected</button>
 
                     <div class="btn-group">
                         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

src/ServicePulse.Host/app/js/views/dashboard/dashboard.html

@@ -20,7 +20,7 @@ <h5>system status</h5>
                         <div class="col-sm-4">
                             <a class="summary-item" ng-class="{  'summary-danger' : failedheartbeats > 0 , 'summary-info' : failedheartbeats === 0 || !failedheartbeats  }" href="#/endpoints">
                                 <i class="fa fa-heart fa-3x"></i>
-                                <span ng-show="failedheartbeats > 0" class="badge badge-important">{{failedheartbeats}}</span>
+                                <span ng-show="failedheartbeats > 0" class="badge badge-important">{{failedheartbeats | number}}</span>
                                 <h4>
                                     Heartbeats
 
@@ -31,7 +31,7 @@ <h4>
                         <div class="col-sm-4">
                             <a class="summary-item" ng-class="{  'summary-danger'  : failedmessages > 0 , 'summary-info' : failedmessages === 0 || !failedmessages }" href="#/failedGroups">
                                 <i class="fa fa-envelope fa-3x "></i>
-                                <span ng-show="failedmessages > 0" class="badge badge-important">{{failedmessages}}</span>
+                                <span ng-show="failedmessages > 0" class="badge badge-important">{{failedmessages | number}}</span>
                                 <h4>
                                     Failed Messages
 
@@ -41,7 +41,7 @@ <h4>
                         <div class="col-sm-4">
                             <a class="summary-item" ng-class="{  'summary-danger'  : failedcustomchecks > 0, 'summary-info' : failedcustomchecks === 0 || !failedcustomchecks }" href="#/customChecks">
                                 <i class="fa fa-check  fa-3x "></i>
-                                <span ng-show="failedcustomchecks > 0" class="badge badge-important">{{failedcustomchecks}}</span>
+                                <span ng-show="failedcustomchecks > 0" class="badge badge-important">{{failedcustomchecks | number}}</span>
                                 <h4>
                                     Custom Checks
 

src/ServicePulse.Host/app/js/views/endpoints/endpoints.html

@@ -10,8 +10,8 @@ <h1>Endpoint Overview</h1>
 
 
     <div class="tabs">
-        <h5 ng-class="{active: isActiveEndpoints != true}"><a ng-click="isActiveEndpoints = false">Inactive Endpoints ({{model.inactive.length}})</a></h5>
-        <h5 ng-class="{active: isActiveEndpoints == true}"><a ng-click="isActiveEndpoints = true">Active Endpoints ({{model.active.length}})</a></h5>
+        <h5 ng-class="{active: isActiveEndpoints != true}"><a ng-click="isActiveEndpoints = false">Inactive Endpoints ({{model.inactive.length | number}})</a></h5>
+        <h5 ng-class="{active: isActiveEndpoints == true}"><a ng-click="isActiveEndpoints = true">Active Endpoints ({{model.active.length | number}})</a></h5>
     </div>
 
     <section ng-show="isActiveEndpoints" name="active_endpoints">

src/ServicePulse.Host/app/js/views/failed_groups/view.html

@@ -43,7 +43,7 @@ <h1>Failed Messages</h1>
                                     <div class="col-sm-12" ng-click="vm.viewExceptionGroup(group)">
                                         <p class="lead break"> {{group.title}}</p>
                                         <p class="metadata">
-                                            <span class="metadata"><i class="fa fa-envelope"></i> {{group.count}} message<span ng-show="group.count >1">s</span></span>
+                                            <span class="metadata"><i class="fa fa-envelope"></i> {{group.count | number}} message<span ng-show="group.count >1">s</span></span>
 
                                             <span class="metadata"><i class="fa fa-clock-o"></i> Last failed: <sp-moment date="{{group.last}}"></sp-moment></span>
 

src/ServicePulse.Host/app/js/views/failed_messages/view.html

@@ -13,9 +13,9 @@ <h1>Failed Messages</h1>
         <div class="row" ng-show="vm.selectedExceptionGroup.id && vm.failedMessages.length > 0">
             <div class="col-sm-12">
                 <div><span class="fake-link">&#9664;</span> <a href="#/failedGroups">FAILED MESSAGE GROUPS</a></div>
-                <div ng-show="!vm.selectedExceptionGroup.id" class="active">All failed messages ({{vm.failedMessages.length}} / {{vm.selectedExceptionGroup.count}})</div>
+                <div ng-show="!vm.selectedExceptionGroup.id" class="active">All failed messages ({{vm.failedMessages.length}} / {{vm.selectedExceptionGroup.count}} | number)</div>
                 <div ng-show="vm.selectedExceptionGroup.id" class="active break group-title">{{vm.selectedExceptionGroup.title}}</div>
-                <div class="active group-title group-message-count">{{vm.selectedExceptionGroup.count}} messages in group</div>
+                <div class="active group-title group-message-count">{{vm.selectedExceptionGroup.count | number}} messages in group</div>
             </div>
         </div>
 
@@ -26,8 +26,8 @@ <h1>Failed Messages</h1>
         <div class="row" ng-show="vm.failedMessages.length > 0">
             <div class="col-sm-12">
                 <div class="btn-toolbar">
-                    <button type="button" class="btn btn-default" ng-click="vm.retrySelected()" ng-disabled="vm.selectedIds.length == 0"><i class="fa fa-refresh"></i> Retry {{vm.selectedIds.length}} selected</button>
-                    <button type="button" class="btn btn-default" confirm-message="Are you sure you want to archive all selected failed messages? If you do they will not be available for Retry." confirm-click="vm.archiveSelected()" ng-disabled="vm.selectedIds.length == 0"><i class="fa fa-archive"></i> Archive {{vm.selectedIds.length}} selected</button>
+                    <button type="button" class="btn btn-default" ng-click="vm.retrySelected()" ng-disabled="vm.selectedIds.length == 0"><i class="fa fa-refresh"></i> Retry {{vm.selectedIds.length | number}} selected</button>
+                    <button type="button" class="btn btn-default" confirm-message="Are you sure you want to archive all selected failed messages? If you do they will not be available for Retry." confirm-click="vm.archiveSelected()" ng-disabled="vm.selectedIds.length == 0"><i class="fa fa-archive"></i> Archive {{vm.selectedIds.length | number}} selected</button>
                     <button type="button" class="btn btn-default" confirm-message="Retrying a whole group can take some time and put extra load on your system. Are you sure you want to retry all these messages?" confirm-click="vm.retryExceptionGroup(vm.selectedExceptionGroup)"><i class="fa fa-refresh"></i> Retry all</button>
                     <button type="button" class="btn btn-default" ng-show="vm.selectedExceptionGroup.id" confirm-message="Are you really sure you want to archive this group?" confirm-click="vm.archiveExceptionGroup(vm.selectedExceptionGroup)"><i class="fa fa-archive"></i> Archive all</button>
                     <div class="btn-group pull-right">

src/ServicePulse.Host/app/layout/navbar.html

@@ -27,21 +27,21 @@
                     <a href="#/endpoints">
                         <i class="fa fa-heart icon-white"></i>
                         <span class="navbar-label">Endpoints Overview</span>
-                        <span ng-show="failedheartbeats > 0" class="badge badge-important ">{{failedheartbeats}}</span>
+                        <span ng-show="failedheartbeats > 0" class="badge badge-important ">{{failedheartbeats | number}}</span>
                     </a>
                 </li>
                 <li ng-class="{ active: isActive('/failedGroups') || isActive('/failedMessages') }">
                     <a href="#/failedGroups">
                         <i class="fa fa-envelope icon-white"></i>
                         <span class="navbar-label">Failed Messages</span>
-                        <span ng-show="failedmessages > 0" class="badge badge-important ">{{failedmessages}}</span>
+                        <span ng-show="failedmessages > 0" class="badge badge-important ">{{failedmessages | number}}</span>
                     </a>
                 </li>
                 <li ng-class="{ active: isActive('/customChecks') }">
                     <a href="#/customChecks">
                         <i class="fa fa-check icon-white"></i>
                         <span class="navbar-label">Custom Checks</span>
-                        <span ng-show="failedcustomchecks > 0" class="badge badge-important ">{{failedcustomchecks}}</span>
+                        <span ng-show="failedcustomchecks > 0" class="badge badge-important ">{{failedcustomchecks | number}}</span>
                     </a>
                 </li>
                 <li ng-class="{ active: isActive('/configuration') }">