Merge pull request #3 from VisualDNA/topic-consumers-gui

Adding new subpage "topic consumers"

src/main/resources/offsetapp/scripts/app.js

@@ -29,43 +29,61 @@ var app = angular.module('offsetapp',
                                                          .when("/topicdetail/:group", {
                                                               templateUrl: "views/topic-detail.html",
                                                               controller: "TopicDetailCtrl"
+                                                          })
+                                                         .when("/topic/:group/consumers", {
+                                                              templateUrl: "views/topic-consumers.html",
+                                                              controller: "TopicConsumersCtrl"
                                                          });;
                                                  });
 
 angular.module("offsetapp.services", ["ngResource"])
 	.factory("offsetinfo", ["$resource", "$http", function($resource, $http) {
-		function groupPartitions(cb) {
+		function processConsumer(cb) {
 			return function(data) {
-				var groups = _(data.offsets).groupBy(function(p) {
-					var t = p.timestamp;
-					if(!t) t = 0;
-					return p.group+p.topic+t.toString();
-				});
-				groups = groups.values().map(function(partitions) {
-					return {
-						group: partitions[0].group,
-						topic: partitions[0].topic,
-						partitions: partitions,
-						logSize: _(partitions).pluck("logSize").reduce(function(sum, num) {
-							return sum + num;
-						}),
-						offset: _(partitions).pluck("offset").reduce(function(sum, num) {
-							return sum + num;
-						}),
-						timestamp: partitions[0].timestamp
-					};
-				}).value();
-				data.offsets = groups;
+				data.offsets = groupPartitions(data.offsets);
+				cb(data);
+			}
+		}
+
+		function processMultipleConsumers(cb) {
+			return function(data) {
+				_(data.consumers).forEach(function(consumer) {consumer.offsets = groupPartitions(consumer.offsets);});
 				cb(data);
 			};
 		}
 
+		function groupPartitions(data) {
+			var groups = _(data).groupBy(function(p) {
+				var t = p.timestamp;
+				if(!t) t = 0;
+				return p.group+p.topic+t.toString();
+			});
+			groups = groups.values().map(function(partitions) {
+				return {
+					group: partitions[0].group,
+					topic: partitions[0].topic,
+					partitions: partitions,
+					logSize: _(partitions).pluck("logSize").reduce(function(sum, num) {
+						return sum + num;
+					}),
+					offset: _(partitions).pluck("offset").reduce(function(sum, num) {
+						return sum + num;
+					}),
+					timestamp: partitions[0].timestamp
+				};
+			}).value();
+			return groups;
+		}
+
 		return {
 			getGroup: function(group, cb) {
-				return $resource("./group/:group").get({group:group}, groupPartitions(cb));
+				return $resource("./group/:group").get({group:group}, processConsumer(cb));
 			},
 			topicDetail: function(group, cb) {
-            	return $resource("./topicdetails/:group").get({group:group}, groupPartitions(cb));
+            	return $resource("./topicdetails/:group").get({group:group}, processConsumer(cb));
+            },
+			topicConsumers: function(group, cb) {
+            	return $resource("./topic/:group/consumer").get({group:group}, processMultipleConsumers(cb));
             },
             loadClusterViz: function(group, cb) {
                 cb(loadViz("#dataviz-container", "./clusterlist"))
@@ -76,7 +94,7 @@ angular.module("offsetapp.services", ["ngResource"])
 			listGroup: function() {return $http.get("./group");},
 			listTopics: function() {return $http.get("./topiclist");},
 			getTopic: function(group, topic, cb) {
-				return $resource("./group/:group/:topic").get({group:group, topic: topic}, groupPartitions(cb));
+				return $resource("./group/:group/:topic").get({group:group, topic: topic}, processConsumer(cb));
 			}
 		};
 	}]);

src/main/resources/offsetapp/scripts/controllers.js

@@ -35,6 +35,16 @@ angular.module('offsetapp.controllers',["offsetapp.services"])
 
     								  $scope.group = $routeParams.group;
     							  }])
+  .controller("TopicConsumersCtrl", ["$scope", "$interval", "$routeParams", "offsetinfo",
+                    function($scope, $interval, $routeParams, offsetinfo) {
+                      offsetinfo.topicConsumers($routeParams.group, function(d) {
+                        $scope.info = d;
+                        $scope.loading=false;
+                      });
+                      $scope.loading=true;
+
+                      $scope.group = $routeParams.group;
+                    }])
     .controller("ClusterVizCtrl", ["$scope", "$interval", "$routeParams", "offsetinfo",
        							  function($scope, $interval, $routeParams, offsetinfo) {
                                      $scope.loading = true;

src/main/resources/offsetapp/views/group.html

@@ -7,68 +7,5 @@ <h1>Details for the consumer group </strong>{{group}}</strong></h1>
   <li class="active">{{group}}</li>
 </ol>
 
-<div class="alert alert-info" ng-show="loading">
-  Loading ...
-</div>
-
-<div ng-hide="loading">
-  <h2>Brokers</h2>
-
-  <table class="table">
-	<thead>
-      <tr>
-		<th>id</th>
-		<th>host</th>
-		<th>port</th>
-      </tr>
-	</thead>
-	<tbody>
-      <tr ng-repeat="b in info.brokers">
-		<td>{{b.id}}</td>
-		<td>{{b.host}}</td>
-		<td>{{b.port}}</td>
-      </tr>
-	</tbody>
-  </table>
-
-  <hr/>
-
-  <h2>Consumer Offsets</h2>
-
-  <table class="table">
-	<thead>
-      <tr>
-		<th>Topic</th>
-		<th>Partition</th>
-		<th>Offset</th>
-		<th>logSize</th>
-		<th>Lag</th>
-		<th>Owner</th>
-		<th>Created</th>
-		<th>Last Seen</th>
-      </tr>
-	</thead>
-	<tbody ng-repeat="c in info.offsets">
-	  <tr class="topic-row">
-		<td><a href="#/group/{{c.group}}/{{c.topic}}">{{c.topic}}</a></td>
-		<td></td>
-		<td>{{c.offset}}</td>
-		<td>{{c.logSize}}</td>
-		<td>{{c.logSize - c.offset}}</td>
-		<td></td>
-		<td></td>
-		<td></td>
-	  </tr>
-	  <tr class="partition-row" ng-repeat="p in c.partitions">
-		<td></td>
-		<td>{{p.partition}}</td>
-		<td>{{p.offset}}</td>
-		<td>{{p.logSize}}</td>
-		<td>{{p.logSize - p.offset}}</td>
-		<td>{{p.owner}}</td>
-		<td><moment timestamp="{{p.creation}}"></moment></td>
-		<td><moment timestamp="{{p.modified}}"></moment></td>
-	  </tr>
-	</tbody>
-  </table>
-</div>
+<div ng-include="'views/includes/group.inc.html'">
+</div>

src/main/resources/offsetapp/views/includes/group.inc.html

@@ -0,0 +1,65 @@
+<div class="alert alert-info" ng-show="loading">
+  Loading ...
+</div>
+
+<div ng-hide="loading">
+  <h2>Brokers</h2>
+
+  <table class="table">
+	<thead>
+      <tr>
+		<th>id</th>
+		<th>host</th>
+		<th>port</th>
+      </tr>
+	</thead>
+	<tbody>
+      <tr ng-repeat="b in info.brokers">
+		<td>{{b.id}}</td>
+		<td>{{b.host}}</td>
+		<td>{{b.port}}</td>
+      </tr>
+	</tbody>
+  </table>
+
+  <hr/>
+
+  <h2>Consumer Offsets</h2>
+
+  <table class="table">
+	<thead>
+      <tr>
+		<th>Topic</th>
+		<th>Partition</th>
+		<th>Offset</th>
+		<th>logSize</th>
+		<th>Lag</th>
+		<th>Owner</th>
+		<th>Created</th>
+		<th>Last Seen</th>
+      </tr>
+	</thead>
+	<tbody ng-repeat="c in info.offsets">
+	  <tr class="topic-row">
+		<td><a href="#/group/{{c.group}}/{{c.topic}}">{{c.topic}}</a></td>
+		<td></td>
+		<td>{{c.offset}}</td>
+		<td>{{c.logSize}}</td>
+		<td>{{c.logSize - c.offset}}</td>
+		<td></td>
+		<td></td>
+		<td></td>
+	  </tr>
+	  <tr class="partition-row" ng-repeat="p in c.partitions">
+		<td></td>
+		<td>{{p.partition}}</td>
+		<td>{{p.offset}}</td>
+		<td>{{p.logSize}}</td>
+		<td>{{p.logSize - p.offset}}</td>
+		<td>{{p.owner}}</td>
+		<td><moment timestamp="{{p.creation}}"></moment></td>
+		<td><moment timestamp="{{p.modified}}"></moment></td>
+	  </tr>
+	</tbody>
+  </table>
+</div>

src/main/resources/offsetapp/views/topic-consumers.html

@@ -0,0 +1,46 @@
+<div class="page-header">
+  <h1>Details for the topic </strong>{{group}}</strong></h1>
+</div>
+
+<ol class="breadcrumb">
+  <li><a href="#/">Topic Details</a></li>
+  <li class="active">{{group}}</li>
+</ol>
+
+<div class="alert alert-info" ng-show="loading">
+  Loading ...
+</div>
+
+<div ng-hide="loading">
+  <h2>Active Consumers</h2>
+
+  <table class="table">
+	<thead>
+      <tr>
+		<th>name</th>
+
+      </tr>
+	</thead>
+	<tbody>
+      <tr ng-repeat="b in info.consumers">
+
+          <td ng-if="b.name == 'Unable to find Active Consumers'">
+              {{b.name}}
+          </td>
+          <td ng-if="b.name != 'Unable to find Active Consumers'">
+              <a href="./#/group/{{b.name}}/{{group}}">{{b.name}}</a>
+          </td>
+
+      </tr>
+	</tbody>
+  </table>
+
+  <h2>Consumer details</h2>
+
+  <div ng-repeat="info in info.consumers">
+    <div ng-include="'views/includes/group.inc.html'"></div>
+  </div>
+
+  <hr/>
+
+</div>

src/main/resources/offsetapp/views/topic-detail.html

@@ -35,6 +35,7 @@ <h2>Active Consumers</h2>
 	</tbody>
   </table>
 
+  <a class="btn btn-default" href="#/topic/{{group}}/consumers" role="button">More details...</a>
   <hr/>
 
 </div>

src/main/scala/com/quantifind/kafka/offsetapp/OffsetGetterWeb.scala

@@ -158,7 +158,7 @@ object OffsetGetterWeb extends UnfilteredWebApp[OWArgs] with Logging {
         JsonContent ~> ResponseString(write(getClusterViz(args)))
       case GET(Path(Seg("topicdetails" :: topic :: Nil))) =>
         JsonContent ~> ResponseString(write(getTopicDetail(topic, args)))
-      case GET(Path(Seg("topic" :: topic :: "consumers" :: Nil))) =>
+      case GET(Path(Seg("topic" :: topic :: "consumer" :: Nil))) =>
         JsonContent ~> ResponseString(write(getTopicAndConsumersDetail(topic, args)))
       case GET(Path(Seg("activetopics" :: Nil))) =>
         JsonContent ~> ResponseString(write(getActiveTopics(args)))