Update Web UI Explore

Hide blank label dropdowns
Escape characters in group descriptions and label selectors
Update label selectors

www/master/components/dashboard/js/modules/controllers/groupController.js

@@ -38,7 +38,7 @@ app.controller('GroupCtrl', [
     $scope.clearSelector = function(grouping) { $location.path("/dashboard/groups/" + grouping + "/selector/"); };
 
     $scope.changeGroupBy = function() {
-      var grouping = $scope.selectedGroupBy;
+      var grouping = encodeURIComponent($scope.selectedGroupBy);
 
       var s = _.clone($location.search());
       if ($scope.routeParams.grouping != grouping)
@@ -63,14 +63,16 @@ app.controller('GroupCtrl', [
       $scope.groupBy = parts;
       $scope.loading = true;
       $scope.selector = selector;
+      $scope.selectorName = decodeURIComponent(selector);
       var args = [];
       var type = "";
+      var selectedHost = "";
       if (selector && selector.length > 0) {
         $scope.selectorPieces = selector.split(",");
         var labels = [];
         var fields = [];
         for (var i = 0; i < $scope.selectorPieces.length; i++) {
-          var piece = $scope.selectorPieces[i];
+          var piece = decodeURIComponent($scope.selectorPieces[i]);
           if (piece[0] == '$') {
             fields.push(piece.slice(2));
           } else {
@@ -79,13 +81,21 @@ app.controller('GroupCtrl', [
               if (labelParts.length > 1) {
                 type = labelParts[1];
               }
-            } else {
+            }
+            else if (piece.indexOf("host=") === 0){
+              var labelParts = piece.split("=");
+              if (labelParts.length > 1) {
+                selectedHost = labelParts[1];
+              }
+            }
+            else {
               labels.push(piece);
             }
           }
         }
+
         if (labels.length > 0) {
-          args.push("labels=" + encodeURI(labels.join(",")));
+          args.push("labelSelector=" + encodeURI(labels.join(",")));
         }
         if (fields.length > 0) {
           args.push("fields=" + encodeURI(fields.join(",")));
@@ -94,6 +104,9 @@ app.controller('GroupCtrl', [
       var query = "?" + args.join("&");
       var list = [];
       var count = type.length > 0 ? 1 : 3;
+
+      $scope.selectedGroupByName = decodeURIComponent($routeParams.grouping)
+
       var barrier = $scope.createBarrier(count, function() {
         $scope.groups = $scope.groupData(list, 0);
         $scope.loading = false;
@@ -105,8 +118,9 @@ app.controller('GroupCtrl', [
         k8sApi.getPods(query).success(function(data) {
           $scope.addLabel("type", "pod", data.items);
           for (var i = 0; data.items && i < data.items.length; ++i) {
-            data.items[i].metadata.labels.host = data.items[i].spec.host;
-            list.push(data.items[i]);
+            data.items[i].metadata.labels.host = data.items[i].spec.nodeName;
+            if(selectedHost.length == 0 || selectedHost == data.items[i].metadata.labels.host)
+              list.push(data.items[i]);
           }
           barrier();
         }).error($scope.handleError);
@@ -137,7 +151,7 @@ app.controller('GroupCtrl', [
       }
       for (var i = 0; i < items.length; i++) {
         if (!items[i].metadata.labels) {
-          items[i].metadata.labels = [];
+          items[i].metadata.labels = {};
         }
         items[i].metadata.labels[key] = value;
       }
@@ -149,7 +163,7 @@ app.controller('GroupCtrl', [
         "kind": "grouping"
       };
       for (var i = 0; i < items.length; i++) {
-        key = items[i].metadata.labels[$scope.groupBy[index]];
+        key = items[i].metadata.labels[decodeURIComponent($scope.groupBy[index])];
         if (!key) {
           key = "";
         }

www/master/components/dashboard/less/dashboard/groups.less

@@ -104,7 +104,7 @@
     padding-top: 10px;
   }
   .selectFilter {
-    padding-top: 10px;
+    padding-top: 7px;
     margin-right: 30px;
 
     .md-select-label {

www/master/components/dashboard/views/groups.html

@@ -6,14 +6,14 @@
       <div class="header" layout="row">
           <div class="">Group by: </div>
 
-          <md-select placeholder="{{routeParams.grouping}}" class="select-group-by" ng-model="selectedGroupBy" ng-change="changeGroupBy()">
+          <md-select placeholder="{{selectedGroupByName}}" class="select-group-by" ng-model="selectedGroupBy" ng-change="changeGroupBy()">
               <md-option ng-value="g.value" ng-repeat="g in groupByOptions">{{g.name}}</md-option>
           </md-select>
 
           <div ng-if="selector" layout="row" class="selector-area">
             <div class="filter-label">Filter:</div>
 
-            <div class="filter-text">{{selector}}</div>
+            <div class="filter-text">{{selectorName}}</div>
             <div class="filter-area" ng-if="selector && selector.length > 0">
 
               <button ng-click="clearSelector(routeParams.grouping)" class="md-button cancel-button">
@@ -27,6 +27,7 @@
           </div>
 
       </div>
+
       <div class="group-item" ng-repeat="(groupName,group) in groups.items" ng-include="'components/dashboard/views/partials/groupBox.html'"></div>
     </md-content>
   </div>

www/master/components/dashboard/views/partials/groupBox.html

@@ -3,7 +3,7 @@
     <div class="server-overview" layout="column">
       <!-- subheader -->
       <div class="group-heading" layout="row">
-        <div class="label">{{routeParams.grouping | ucfirst}}: <span class="bold">{{ (groupName) || "blank"  }}</span></div>
+        <div class="label">{{selectedGroupByName | ucfirst}}: <span class="bold">{{ (groupName) || "blank"  }}</span></div>
       </div>
       <!-- render group data -->
       <div ng-include="'components/dashboard/views/partials/groupItem.html'"></div>

www/master/components/dashboard/views/partials/groupItem.html

@@ -24,12 +24,17 @@
                   <div ng-switch-default>{{item.metadata.name}}</div>
                 </div>
               </div>
-              <md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)" class="selectFilter">
-                <md-optgroup label="FILTER">
-                  <md-option ng-value="'{{key}}={{value}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option>
-                  </md-option-group>
-                </md-optgroup>
-              </md-select>
+
+              <div class="selectFilter">
+                <md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)">
+                  <md-optgroup label="FILTER">
+                    <md-option ng-value="'{{key | uriComponentEncode}}={{value | uriComponentEncode}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option>
+                    </md-option-group>
+                  </md-optgroup>
+                </md-select>
+              </div>
+
+
               <!-- This is the official button design, but requires a custom dialog. Fix up after the demo. -->
               <!-- <md-button ng-click="" class="filter-button" style="padding:0">
                 <md-icon md-svg-src="components/dashboard/img/icons/ic_arrow_drop_down_18px.svg" class="filter-icon" aria-label="" alt="Filter"></md-icon>