Table styling tweaks

src/kibana/components/agg_response/tabify/_response_writer.js

@@ -40,7 +40,7 @@ define(function (require) {
       if (group) {
         table.aggConfig = agg;
         table.key = key;
-        table.title = agg.makeLabel() + ': ' + key;
+        table.title = agg.makeLabel() + ': ' + table.fieldFormat(key);
       }
 
       var parent = this.splitStack[0];

src/kibana/components/agg_response/tabify/_table_group.js

@@ -1,5 +1,7 @@
 define(function (require) {
   return function TableGroupProvider() {
+    var _ = require('lodash');
+
     /**
      * Simple object that wraps multiple tables. It contains information about the aggConfig
      * and bucket that created this group and a list of the tables within it.
@@ -11,6 +13,15 @@ define(function (require) {
       this.tables = [];
     }
 
+    TableGroup.prototype.field = function () {
+      return this.aggConfig && this.aggConfig.params && this.aggConfig.params.field;
+    };
+
+    TableGroup.prototype.fieldFormat = function () {
+      var field = this.field();
+      return field ? field.format.convert : _.identity;
+    };
+
     return TableGroup;
   };
 });

src/kibana/directives/paginate.js

@@ -127,12 +127,7 @@ define(function (require) {
     // this directive is automatically added by paginate if not found within it's $el
     return {
       restrict: 'E',
-      template: require('text!partials/paginate_controls.html'),
-      link: function ($scope, $el) {
-        $scope.$watch('page.count > 1', function (show) {
-          $el.toggle(show);
-        });
-      }
+      template: require('text!partials/paginate_controls.html')
     };
   });
 

src/kibana/partials/paginate_controls.html

@@ -1,30 +1,37 @@
-<ul class="pagination pagination-sm">
-  <li ng-class="{disabled: page.first}">
-    <a ng-click="paginate.goToPage(page.prev)">«</a>
-  </li>
+<div class="pagination-other-pages">
+  <ul class="pagination-other-pages-list pagination-sm" ng-if="page.count > 1">
+    <li ng-class="{disabled: page.first}">
+      <a ng-click="paginate.goToPage(page.prev)">«</a>
+    </li>
 
-  <li ng-if="!otherPages.containsFirst">
-    <a ng-click="paginate.goToPage(1)">1...</a>
-  </li>
+    <li ng-if="!otherPages.containsFirst">
+      <a ng-click="paginate.goToPage(1)">1...</a>
+    </li>
 
-  <li
-    ng-repeat="other in otherPages"
-    ng-class="{ active: other.number === page.number }">
-    <a ng-click="paginate.goToPage(other)">{{other.number}}</a>
-  </li>
+    <li
+      ng-repeat="other in otherPages"
+      ng-class="{ active: other.number === page.number }">
+      <a ng-click="paginate.goToPage(other)">{{other.number}}</a>
+    </li>
 
-  <li ng-if="!otherPages.containsLast">
-    <a ng-click="paginate.goToPage(page.count)">...{{page.count}}</a>
-  </li>
+    <li ng-if="!otherPages.containsLast">
+      <a ng-click="paginate.goToPage(page.count)">...{{page.count}}</a>
+    </li>
 
-  <li ng-class="{disabled: page.last}">
-    <a ng-click="paginate.goToPage(page.next)">»</a>
-  </li>
-</ul>
+    <li ng-class="{disabled: page.last}">
+      <a ng-click="paginate.goToPage(page.next)">»</a>
+    </li>
+  </ul>
+</div>
 
 <form class="form-inline pagination-size">
   <div class="form-group">
     <label>Page Size</label>
-    <input type="number" ng-model="paginate.perPage">
+    <select ng-model="paginate.perPage">
+      <option>10</option>
+      <option>25</option>
+      <option>100</option>
+      <option value="0">All</option>
+    </select>
   </div>
 </form>

src/kibana/plugins/table_vis/table_vis.less

@@ -1,5 +1,7 @@
 .TableVis {
-  min-width: 55%;
-  max-width: 100%;
-  margin: 20px auto;
-}
+  width: 100%;
+
+  kbn-agg-table-group > .table > tbody > tr > td {
+    border-top: 0px;
+  }
+}

src/kibana/styles/_pagination.less

@@ -8,16 +8,20 @@ paginate {
     padding: 5px 5px 10px;
     text-align: center;
 
-    .pagination {
+    .pagination-other-pages {
       .flex(1, 0, auto);
       .display(flex);
       .justify-content(center);
 
-      // override some bootstrap styles
-      margin: 0 auto;
-
-      > li {
+      &-list {
         .flex(0, 0, auto);
+        .display(flex);
+        margin: 0;
+        list-style: none;
+
+        > li {
+          .flex(0, 0, auto);
+        }
       }
     }