Update the ux.

examples/guestbook/redis-master-service.json

@@ -6,5 +6,8 @@
   "containerPort": 6379,
   "selector": {
     "name": "redis-master"
+  },
+  "labels": {
+    "name": "redis-master"
   }
 }

www/box.ng

@@ -18,11 +18,41 @@ limitations under the License.
   {{ groupName }}
 
 <div ng-if="group.kind != 'grouping'">
+  <div ng-if="!display || display=='box'">
   <div class="content k8s-item k8s-inline" ng-repeat="item in group">
     <div class="k8s-title-font k8s-font-regular">
-      <a href="#/pods/{{ item.id }}">{{ item.id }}</a>
+      <div ng-switch on='item.labels["type"]'>
+        <a ng-switch-when='pod' href="#/pods/{{ item.id }}">{{ item.id }}</a>
+	<a ng-switch-when='service' href="#/services/{{ item.id }}">{{ item.id }}</a>
+	<a ng-switch-when='replicationController' href="#/replicationControllers/{{ item.id }}">{{ item.id }}</a>
+	<span ng-switch-default>{{item.id}}</span>
+      </div>
     </div>
   </div>
+  </div>
+  <div ng-if="display=='list'">
+    <table style="width: 90%; padding: 10px">
+    <tr ng-repeat="item in group" ng-class-odd="'k8s-odd'" ng-class-even="'k8s-even'" valign="top">
+      <td class="k8s-cell">
+        <div ng-switch on='item.labels["type"]'>
+          <a ng-switch-when='pod' href="#/pods/{{ item.id }}">{{ item.id }}</a>
+	  <a ng-switch-when='service' href="#/services/{{ item.id }}">{{ item.id }}</a>
+	  <a ng-switch-when='replicationController' href="#/replicationControllers/{{ item.id }}">{{ item.id }}</a>
+	  <span ng-switch-default>{{item.id}}</span>
+      </div>
+      </td>
+      <td class="k8s-cell">
+        <div ng-repeat='(key, value) in item.labels'>
+	  <a href="#/groups/{{key}}/selector/{{controller.routeParams.selector}}">{{key}}</a> :
+	  <a href="#/groups/{{controller.routeParams.grouping}}/selector/{{key}}={{value}}">{{value}}</a> </span>
+      </td>
+    </tr>
+    </table>
+  </div>
+  <div>
+    <a ng-click="display='box'">box</a>
+    <a ng-click="display='list'">list</a>
+  </div>
 </div>
 <div ng-if="group.kind == 'grouping'">
   <div ng-repeat="(groupName,group) in group.items" ng-include="'box.ng'">

www/partials/groups.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <div class="content" style="width: 90%; margin-left: 5%" ng-if="selector && selector.length > 0">
-  <div class="k8s-inline">{{selector}}</div>
-  <div class="k8s-inline k8s-button" ng-click="controller.clearSelector()">X</div>
+  <div class="k8s-inline k8s-font-regular k8s-title-font">{{selector}}</div>
+  <div class="k8s-inline k8s-title-font k8s-button" ng-click="controller.clearSelector(controller.routeParams.grouping)">X</div>
 </div>
 <div ng-repeat="(groupName,group) in groups.items" ng-include="'box.ng'">

www/podcontroller.js

@@ -50,7 +50,6 @@ GroupController.prototype.handlePath = function(path) {
     var parts = path.split("/")
     // split leaves an empty string at the beginning.
     parts = parts.slice(1);
-    console.log(parts)
 
     if (parts.length == 0) {
 	return;
@@ -59,8 +58,8 @@ GroupController.prototype.handlePath = function(path) {
 };
 
 
-GroupController.prototype.clearSelector = function() {
-    window.location.hash = "/groups/" + this.groupBy.join("/") + "/selector";
+GroupController.prototype.clearSelector = function(grouping) {
+    window.location.hash = "/groups/" + grouping + "/selector/";
 };
 
 GroupController.prototype.createBarrier = function(count, callback) {
@@ -82,6 +81,7 @@ GroupController.prototype.handleGroups = function(parts, selector) {
     this.scope.loading = true;
     this.scope.selector = selector;
     var args = [];
+    var type = "";
     if (selector && selector.length > 0) {
 	this.scope.selectorPieces = selector.split(",");
 	var labels = [];
@@ -91,7 +91,14 @@ GroupController.prototype.handleGroups = function(parts, selector) {
 	    if (piece[0] == '$') {
 		fields.push(piece.slice(2));
 	    } else {
-		labels.push(piece);
+		if (piece.indexOf("type=") == 0) {
+		    var labelParts = piece.split("=");
+		    if (labelParts.length > 1) {
+			type = labelParts[1];
+		    }
+		} else {
+		    labels.push(piece);
+		}
 	    }
 	}
 	if (labels.length > 0) {
@@ -103,38 +110,45 @@ GroupController.prototype.handleGroups = function(parts, selector) {
     }
     var query = "?" + args.join("&");
     var list = [];
-    var barrier = this.createBarrier(3, angular.bind(this, function() {
+    var count = type.length > 0 ? 1 : 3;
+    var barrier = this.createBarrier(count, angular.bind(this, function() {
 	    this.scope.groups = this.groupData(list, 0);
 	    this.scope.loading = false;
 	    }));
-    this.http.get(apiBase + "pods" + query)
-    .success(angular.bind(this, function(data) {
-                this.addLabel("type", "pod", data.items);
-                for (var i = 0; data.items && i < data.items.length; ++i) {
-		    data.items[i].labels["host"] = data.items[i].currentState.host;
-		    list.push(data.items[i]);
-		}
-		barrier();
-	    }))
-    .error(angular.bind(this, this.handleError));
-    this.http.get(apiBase + "services" + query)
-    .success(angular.bind(this, function(data) {
-		this.addLabel("type", "service", data.items);
-		for (var i = 0; data.items && i < data.items.length; ++i) {
-		    list.push(data.items[i]);
-		}
-		barrier();
-	    }))
-    .error(angular.bind(this, this.handleError));
-    this.http.get(apiBase + "replicationControllers" + query)
-    .success(angular.bind(this, function(data) {
-		this.addLabel("type", "replicationController", data.items);
-		for (var i = 0; data.items && i < data.items.length; ++i) {
-		    list.push(data.items[i]);
-		}
-		barrier();
-	    }))
-    .error(angular.bind(this, this.handleError));
+    if (type == "" || type == "pod") {
+	this.http.get(apiBase + "pods" + query)
+	    .success(angular.bind(this, function(data) {
+			this.addLabel("type", "pod", data.items);
+			for (var i = 0; data.items && i < data.items.length; ++i) {
+			    data.items[i].labels["host"] = data.items[i].currentState.host;
+			    list.push(data.items[i]);
+			}
+			barrier();
+		    }))
+	    .error(angular.bind(this, this.handleError));
+    }
+    if (type == "" || type == "service") {
+	this.http.get(apiBase + "services" + query)
+	.success(angular.bind(this, function(data) {
+		    this.addLabel("type", "service", data.items);
+		    for (var i = 0; data.items && i < data.items.length; ++i) {
+			list.push(data.items[i]);
+		    }
+		    barrier();
+		}))
+	.error(angular.bind(this, this.handleError));
+    }
+    if (type == "" || type == "replicationController") {
+	this.http.get(apiBase + "replicationControllers" + query)
+	.success(angular.bind(this, function(data) {
+		    this.addLabel("type", "replicationController", data.items);
+		    for (var i = 0; data.items && i < data.items.length; ++i) {
+			list.push(data.items[i]);
+		    }
+		    barrier();
+		}))
+	.error(angular.bind(this, this.handleError));
+    }
 };
 
 GroupController.prototype.addLabel = function(key, value, items) {
@@ -200,7 +214,7 @@ k8sApp.controller('GroupCtrl', function ($scope, $http, $route, $routeParams) {
 k8sApp.config(['$routeProvider',
 		function($routeProvider) {
 			  $routeProvider.
-			      when('/groups/:grouping*?\/selector/:selector?', {
+			      when('/groups/:grouping*?\/selector/:selector*?', {
 				      templateUrl: 'partials/groups.html',
 					  controller: 'GroupCtrl'
 					  }).
@@ -209,6 +223,6 @@ k8sApp.config(['$routeProvider',
 					  controller: 'PodCtrl'
 					  }).
 			      otherwise({
-				      redirectTo: '/groups//selector'
+				      redirectTo: '/groups//selector/'
 					  });
-		  }]);
+		  }]);
\ No newline at end of file