Update Web UI tables

- Condense table styling - Default table size to 50 - Make all columns sortable - Rename service portalIP to clusterIP - Allow default descending table ordering
nikhiljindal · Jul 2, 2015 · 288c1df · 288c1df
1 parent ef41ceb
commit 288c1df
Show file tree

Hide file tree

Showing 18 changed files with 541 additions and 593 deletions.
diff --git a/pkg/ui/data/dashboard/datafile.go b/pkg/ui/data/dashboard/datafile.go
diff --git a/www/app/assets/css/app.css b/www/app/assets/css/app.css
diff --git a/www/app/assets/js/app.js b/www/app/assets/js/app.js
@@ -1289,8 +1289,8 @@ app.controller('ListEventsCtrl', [
     $scope.serverView = false;
 
     $scope.headers = [
-      {name: 'First Seen', field: 'firstSeen'},
       {name: 'Last Seen', field: 'lastSeen'},
+      {name: 'First Seen', field: 'firstSeen'},
       {name: 'Count', field: 'count'},
       {name: 'Name', field: 'name'},
       {name: 'Kind', field: 'kind'},
@@ -1301,8 +1301,8 @@ app.controller('ListEventsCtrl', [
     ];
 
 
-    $scope.sortable = ['firstSeen', 'lastSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source'];
-    $scope.count = 10;
+    $scope.sortable = ['lastSeen', 'firstSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source', 'message'];
+    $scope.count = 50;
     function handleError(data, status, headers, config) {
       console.log("Error (" + status + "): " + data);
       $scope.loading = false;
@@ -1346,6 +1346,11 @@ app.controller('ListEventsCtrl', [
 
         });
 
+        $scope.content = _.sortBy($scope.content, function(e){
+          return e.lastSeen;
+        }).reverse();
+
+
       }).error($scope.handleError);
     }
 
@@ -1380,9 +1385,9 @@ app.controller('ListMinionsCtrl', [
       status: 'grey',
       ip: 'grey'
     };
-    $scope.sortable = ['name', 'status', 'ip'];
+    $scope.sortable = ['name', 'status', 'addresses'];
     $scope.thumbs = 'thumb';
-    $scope.count = 10;
+    $scope.count = 50;
 
     $scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); };
 
@@ -1463,8 +1468,8 @@ app.controller('ListPodsCtrl', [
       labels: 'grey',
       status: 'grey'
     };
-    $scope.sortable = ['pod', 'ip', 'status'];
-    $scope.count = 10;
+    $scope.sortable = ['pod', 'ip', 'status','containers','images','host','labels'];
+    $scope.count = 50;
 
     $scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); };
 
@@ -1504,24 +1509,16 @@ app.controller('ListPodsCtrl', [
           }
 
           if (pod.metadata.labels) {
-            Object.keys(pod.metadata.labels)
-                .forEach(function(key) {
-                  if (key == 'name') {
-                    _labels += ', ' + pod.metadata.labels[key];
-                  }
-                  if (key == 'uses') {
-                    _uses += ', ' + pod.metadata.labels[key];
-                  }
-                });
-            }
+            _labels = _.map(pod.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
+          }
 
           $scope.content.push({
             pod: pod.metadata.name,
             ip: pod.status.podIP,
             containers: _fixComma(_containers),
             images: _fixComma(_images),
-            host: pod.spec.host,
-            labels: _fixComma(_labels) + ':' + _fixComma(_uses),
+            host: pod.spec.nodeName,
+            labels: _labels,
             status: pod.status.phase
           });
 
@@ -1593,9 +1590,9 @@ app.controller('ListReplicationControllersCtrl', [
       selector: 'grey',
       replicas: 'grey'
     };
-    $scope.sortable = ['controller', 'containers', 'images'];
+    $scope.sortable = ['controller', 'containers', 'images', 'selector', 'replicas'];
     $scope.thumbs = 'thumb';
-    $scope.count = 10;
+    $scope.count = 50;
 
     $scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); };
 
@@ -1686,8 +1683,8 @@ app.controller('ListServicesCtrl', [
       port: 'grey',
       labels: 'grey'
     };
-    $scope.sortable = ['name', 'ip', 'port'];
-    $scope.count = 10;
+    $scope.sortable = ['name', 'ip', 'port', 'labels', 'selector'];
+    $scope.count = 50;
 
     $scope.go = function(data) { $location.path('/dashboard/services/' + data.name); };
 
@@ -1727,7 +1724,7 @@ app.controller('ListServicesCtrl', [
             var _labels = '';
 
             if (service.metadata.labels) {
-              _labels = _.map(service.metadata.labels, function(v, k) { return k + '=' + v }).join(', ');
+              _labels = _.map(service.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
             }
 
             var _selectors = '';
@@ -1750,7 +1747,7 @@ app.controller('ListServicesCtrl', [
 
             $scope.content.push({
               name: service.metadata.name,
-              ip: service.spec.portalIP,
+              ip: service.spec.clusterIP,
               port: _ports,
               selector: _selectors,
               labels: _labels
@@ -2280,7 +2277,6 @@ app.controller('ServiceCtrl', [
                        $location.path(newValue);
                      }
                    });
-
                    $scope.subpages = [
                      {
                        category: 'dashboard',
@@ -2325,6 +2321,7 @@ app.controller('ServiceCtrl', [
             customClass: '=customClass',
             thumbs: '=',
             count: '=',
+            reverse: '=',
             doSelect: '&onSelect'
           },
           transclude: true,
@@ -2343,7 +2340,11 @@ app.controller('ServiceCtrl', [
               $scope.content = orderBy($scope.content, predicate, reverse);
               $scope.predicate = predicate;
             };
-            $scope.order($scope.sortable[0], false);
+            var reverse = false;
+            if($scope.reverse)
+              reverse = $scope.reverse;
+
+            $scope.order($scope.sortable[0], reverse);
             $scope.getNumber = function(num) { return new Array(num); };
             $scope.goToPage = function(page) { $scope.currentPage = page; };
             $scope.showMore = function() { return angular.isDefined($scope.moreClick);}

diff --git a/www/app/components/dashboard/views/listEvents.html b/www/app/components/dashboard/views/listEvents.html
@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListEventsCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" reverse="true"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>
diff --git a/www/app/components/dashboard/views/pod.html b/www/app/components/dashboard/views/pod.html
@@ -18,7 +18,7 @@
           <tr>
             <td class="name">Status</td>
             <td class="value">
-              {{pod.status.phase}} on <a ng-href="#/dashboard/groups/host/selector/host={{pod.spec.host}}">{{pod.spec.host}}</a>
+              {{pod.status.phase}} on <a ng-href="#/dashboard/groups/host/selector/host={{pod.spec.nodeName}}">{{pod.spec.nodeName}}</a>
             </td>
           </tr>
 
@@ -32,7 +32,7 @@
           <tr>
             <td class="name">Host Networking</td>
             <td class="value">
-              {{pod.spec.host}}/{{pod.status.hostIP}}
+              {{pod.spec.nodeName}}/{{pod.status.hostIP}}
             </td>
           </tr>
 

diff --git a/www/app/components/dashboard/views/service.html b/www/app/components/dashboard/views/service.html
@@ -44,7 +44,7 @@
           <tr>
             <td class="name">IP</td>
             <td class="value">
-              {{service.spec.portalIP}}
+              {{service.spec.clusterIP}}
             </td>
           </tr>
 

diff --git a/www/app/views/partials/md-table.tmpl.html b/www/app/views/partials/md-table.tmpl.html
@@ -2,7 +2,7 @@
     <thead>
         <tr class="md-table-headers-row">
             <th class="md-table-header" ng-repeat="h in headers">
-                <a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span><span  class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span></a>
+                <a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span><span  class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span></a>
                 <span ng-if="!handleSort(h.field)">{{h.name}}</span>
             </th>
             <th class="md-table-header" ng-show="showMore()"></th>

diff --git a/www/master/components/dashboard/js/modules/controllers/listEventsController.js b/www/master/components/dashboard/js/modules/controllers/listEventsController.js
@@ -19,8 +19,8 @@ app.controller('ListEventsCtrl', [
     $scope.serverView = false;
 
     $scope.headers = [
-      {name: 'First Seen', field: 'firstSeen'},
       {name: 'Last Seen', field: 'lastSeen'},
+      {name: 'First Seen', field: 'firstSeen'},
       {name: 'Count', field: 'count'},
       {name: 'Name', field: 'name'},
       {name: 'Kind', field: 'kind'},
@@ -31,8 +31,8 @@ app.controller('ListEventsCtrl', [
     ];
 
 
-    $scope.sortable = ['firstSeen', 'lastSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source'];
-    $scope.count = 10;
+    $scope.sortable = ['lastSeen', 'firstSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source', 'message'];
+    $scope.count = 50;
     function handleError(data, status, headers, config) {
       console.log("Error (" + status + "): " + data);
       $scope.loading = false;
@@ -76,6 +76,11 @@ app.controller('ListEventsCtrl', [
 
         });
 
+        $scope.content = _.sortBy($scope.content, function(e){
+          return e.lastSeen;
+        }).reverse();
+
+
       }).error($scope.handleError);
     }
 

diff --git a/www/master/components/dashboard/js/modules/controllers/listMinionsController.js b/www/master/components/dashboard/js/modules/controllers/listMinionsController.js
@@ -24,9 +24,9 @@ app.controller('ListMinionsCtrl', [
       status: 'grey',
       ip: 'grey'
     };
-    $scope.sortable = ['name', 'status', 'ip'];
+    $scope.sortable = ['name', 'status', 'addresses'];
     $scope.thumbs = 'thumb';
-    $scope.count = 10;
+    $scope.count = 50;
 
     $scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); };
 

diff --git a/www/master/components/dashboard/js/modules/controllers/listPodsController.js b/www/master/components/dashboard/js/modules/controllers/listPodsController.js
@@ -34,8 +34,8 @@ app.controller('ListPodsCtrl', [
       labels: 'grey',
       status: 'grey'
     };
-    $scope.sortable = ['pod', 'ip', 'status'];
-    $scope.count = 10;
+    $scope.sortable = ['pod', 'ip', 'status','containers','images','host','labels'];
+    $scope.count = 50;
 
     $scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); };
 
@@ -75,24 +75,16 @@ app.controller('ListPodsCtrl', [
           }
 
           if (pod.metadata.labels) {
-            Object.keys(pod.metadata.labels)
-                .forEach(function(key) {
-                  if (key == 'name') {
-                    _labels += ', ' + pod.metadata.labels[key];
-                  }
-                  if (key == 'uses') {
-                    _uses += ', ' + pod.metadata.labels[key];
-                  }
-                });
-            }
+            _labels = _.map(pod.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
+          }
 
           $scope.content.push({
             pod: pod.metadata.name,
             ip: pod.status.podIP,
             containers: _fixComma(_containers),
             images: _fixComma(_images),
-            host: pod.spec.host,
-            labels: _fixComma(_labels) + ':' + _fixComma(_uses),
+            host: pod.spec.nodeName,
+            labels: _labels,
             status: pod.status.phase
           });
 

diff --git a/...aster/components/dashboard/js/modules/controllers/listReplicationControllersController.js b/...aster/components/dashboard/js/modules/controllers/listReplicationControllersController.js
@@ -32,9 +32,9 @@ app.controller('ListReplicationControllersCtrl', [
       selector: 'grey',
       replicas: 'grey'
     };
-    $scope.sortable = ['controller', 'containers', 'images'];
+    $scope.sortable = ['controller', 'containers', 'images', 'selector', 'replicas'];
     $scope.thumbs = 'thumb';
-    $scope.count = 10;
+    $scope.count = 50;
 
     $scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); };
 

diff --git a/www/master/components/dashboard/js/modules/controllers/listServicesController.js b/www/master/components/dashboard/js/modules/controllers/listServicesController.js
@@ -29,8 +29,8 @@ app.controller('ListServicesCtrl', [
       port: 'grey',
       labels: 'grey'
     };
-    $scope.sortable = ['name', 'ip', 'port'];
-    $scope.count = 10;
+    $scope.sortable = ['name', 'ip', 'port', 'labels', 'selector'];
+    $scope.count = 50;
 
     $scope.go = function(data) { $location.path('/dashboard/services/' + data.name); };
 
@@ -70,7 +70,7 @@ app.controller('ListServicesCtrl', [
             var _labels = '';
 
             if (service.metadata.labels) {
-              _labels = _.map(service.metadata.labels, function(v, k) { return k + '=' + v }).join(', ');
+              _labels = _.map(service.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
             }
 
             var _selectors = '';
@@ -93,7 +93,7 @@ app.controller('ListServicesCtrl', [
 
             $scope.content.push({
               name: service.metadata.name,
-              ip: service.spec.portalIP,
+              ip: service.spec.clusterIP,
               port: _ports,
               selector: _selectors,
               labels: _labels

diff --git a/www/master/components/dashboard/js/modules/directives/dashboard.js b/www/master/components/dashboard/js/modules/directives/dashboard.js
@@ -24,7 +24,6 @@
                        $location.path(newValue);
                      }
                    });
-
                    $scope.subpages = [
                      {
                        category: 'dashboard',
@@ -69,6 +68,7 @@
             customClass: '=customClass',
             thumbs: '=',
             count: '=',
+            reverse: '=',
             doSelect: '&onSelect'
           },
           transclude: true,
@@ -87,7 +87,11 @@
               $scope.content = orderBy($scope.content, predicate, reverse);
               $scope.predicate = predicate;
             };
-            $scope.order($scope.sortable[0], false);
+            var reverse = false;
+            if($scope.reverse)
+              reverse = $scope.reverse;
+
+            $scope.order($scope.sortable[0], reverse);
             $scope.getNumber = function(num) { return new Array(num); };
             $scope.goToPage = function(page) { $scope.currentPage = page; };
             $scope.showMore = function() { return angular.isDefined($scope.moreClick);}

diff --git a/www/master/components/dashboard/views/listEvents.html b/www/master/components/dashboard/views/listEvents.html
@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListEventsCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" reverse="true"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>
diff --git a/www/master/components/dashboard/views/pod.html b/www/master/components/dashboard/views/pod.html
@@ -18,7 +18,7 @@
           <tr>
             <td class="name">Status</td>
             <td class="value">
-              {{pod.status.phase}} on <a ng-href="#/dashboard/groups/host/selector/host={{pod.spec.host}}">{{pod.spec.host}}</a>
+              {{pod.status.phase}} on <a ng-href="#/dashboard/groups/host/selector/host={{pod.spec.nodeName}}">{{pod.spec.nodeName}}</a>
             </td>
           </tr>
 
@@ -32,7 +32,7 @@
           <tr>
             <td class="name">Host Networking</td>
             <td class="value">
-              {{pod.spec.host}}/{{pod.status.hostIP}}
+              {{pod.spec.nodeName}}/{{pod.status.hostIP}}
             </td>
           </tr>
 

diff --git a/www/master/components/dashboard/views/service.html b/www/master/components/dashboard/views/service.html
@@ -44,7 +44,7 @@
           <tr>
             <td class="name">IP</td>
             <td class="value">
-              {{service.spec.portalIP}}
+              {{service.spec.clusterIP}}
             </td>
           </tr>
 

diff --git a/www/master/less/app/base.less b/www/master/less/app/base.less
@@ -63,7 +63,7 @@ a {
 .md-table-content {
   font-size: 0.8em;
   padding: 16px 16px 16px 0;
-  height: 72px;
+  // height: 72px;
 }
 
 .md-table-td-more {