feat(dashboard): Notate leader in machine list

mod/dashboard/app/scripts/controllers/stats.js

@@ -23,10 +23,22 @@ angular.module('etcdStats', ['ngRoute', 'etcd'])
   function readStats() {
     EtcdV1.getStat('leader').get().success(function(data) {
       $scope.leaderStats = data;
-      $scope.followers = [];
+      $scope.leaderName = data.leader;
+      $scope.machines = [];
+      //hardcode leader stats
+      $scope.machines.push({
+        latency: {
+          average: 0,
+          current: 0,
+          minimum: 0,
+          maximum: 0,
+          standardDeviation: 0
+        },
+        name: data.leader
+      });
       $.each(data.followers, function(index, value) {
         value.name = index;
-        $scope.followers.push(value);
+        $scope.machines.push(value);
       });
       drawGraph();
     });
@@ -46,7 +58,7 @@ angular.module('etcdStats', ['ngRoute', 'etcd'])
         chart({
           el: $scope.graphContainer,
           data: {
-            'stats': $scope.followers
+            'stats': $scope.machines
           }
         }).width(width).height(height).update();
       });

mod/dashboard/app/styles/etcd-widgets.css

@@ -624,6 +624,12 @@ body {
 			background-color: #00DB24;
 		}
 
+	.etcd-container.etcd-stats .etcd-list .etcd-machine-type {
+		color: #999;
+		padding-left: 3px;
+		font-size: 13px;
+	}
+
 	.etcd-container.etcd-stats .etcd-list .etcd-latency-value {
 		display: inline-block;
 	}

mod/dashboard/app/views/stats.html

@@ -20,23 +20,26 @@
             </div>
         </div>
         <div class="etcd-graph">
-            <h2>Follower Latency</h2>
+            <h2>Machine Latency</h2>
             <div class="etcd-graph-container" id="latency">
             </div>
         </div>
         <div class="etcd-list">
-            <h2>Follower List</h2>
+            <h2>Machine List</h2>
             <table cellpadding="0" cellspacing="0">
             <thead>
                 <td class="etcd-name-header">Machine Name</td>
                 <td class="etcd-latency">Latency</td>
             </thead>
             <tbody>
-                <tr ng-repeat="follower in followers">
-                    <td>{{follower.name}}</td>
+                <tr ng-repeat="machine in machines">
+                    <td ng-switch on="{true:'leader', false: 'follower'}[leaderName == machine.name]">
+                        <div ng-switch-when="leader">{{machine.name}}<span class="etcd-machine-type">(leader)</span></div>
+                        <div ng-switch-default>{{machine.name}}</div>
+                    </td>
                     <td>
-                        <div class="etcd-square ng-class: {'etcd-square-green': follower.latency.current < 2, 'etcd-square-orange': follower.latency.current < 5, 'etcd-square-red': follower.latency.current >= 10}"></div>
-                        <div class="etcd-latency-value">{{follower.latency.current | number:1 }} ms</div>
+                        <div class="etcd-square ng-class: {'etcd-square-green': machine.latency.current < 2, 'etcd-square-orange': machine.latency.current < 5, 'etcd-square-red': machine.latency.current >= 10}"></div>
+                        <div class="etcd-latency-value">{{machine.latency.current | number:1 }} ms</div>
                     </td>
                 </tr>
             </tbody>