[table_vis] general clean up and comments

src/kibana/plugins/table_vis/index.js

@@ -1,34 +1,5 @@
 define(function (require) {
-  function TableVisProvider(Private) {
-    var TemplateVisType = Private(require('plugins/vis_types/template/template_vis_type'));
-    var Schemas = Private(require('plugins/vis_types/_schemas'));
-
-    require('plugins/table_vis/table_vis');
-
-    return new TemplateVisType({
-      name: 'table',
-      title: 'Data Table',
-      icon: 'fa-table',
-      template: require('text!plugins/table_vis/table_vis.html'),
-      schemas: new Schemas([
-        {
-          group: 'metrics',
-          name: 'metric',
-          title: 'Metric'
-        },
-        {
-          group: 'buckets',
-          name: 'bucket',
-          title: 'Split Column'
-        },
-        {
-          group: 'buckets',
-          name: 'split',
-          title: 'Split Table'
-        }
-      ])
-    });
-  }
-
-  require('registry/vis_types').register(TableVisProvider);
+  require('registry/vis_types').register(function TableVisPrivateMoudleLoader(Private) {
+    return Private(require('plugins/table_vis/table_vis'));
+  });
 });

src/kibana/plugins/table_vis/styles/table_vis.less

@@ -1,4 +0,0 @@
-.TableVis {
-  overflow: auto;
-  width: 100%;
-}

src/kibana/plugins/table_vis/table_vis.html

@@ -1,3 +1,3 @@
-<div ng-controller="TableVisController" class="TableVis">
-  <pre>{{ tableData | json }}</pre>
+<div ng-controller="KbnTableVisController" class="TableVis">
+  <kbn-agg-table table="table"></kbn-agg-table>
 </div>

src/kibana/plugins/table_vis/table_vis.js

@@ -1,19 +1,41 @@
 define(function (require) {
-  require('css!plugins/table_vis/styles/table_vis.css');
+  // we need to load the css ourselved
+  require('css!plugins/table_vis/table_vis.css');
+  // we also need to load the controller used by the template
+  require('plugins/table_vis/table_vis_controller');
 
-  require('modules')
-  .get('kibana/table_vis', ['kibana'])
-  .controller('TableVisController', function ($scope, Private) {
-    var tabifyAggResponse = Private(require('components/agg_response/tabify/tabify_agg_response'));
+  // define the TableVisType
+  return function TableVisTypeProvider(Private) {
+    var TemplateVisType = Private(require('plugins/vis_types/template/template_vis_type'));
+    var Schemas = Private(require('plugins/vis_types/_schemas'));
 
-    $scope.$watch('esResponse', function (resp, oldResp) {
-      if (!resp) {
-        $scope.tableData = null;
-        return;
-      }
+    // define the TableVisController which is used in the template
+    // by angular's ng-controller directive
 
-      $scope.tableData = tabifyAggResponse($scope.vis, $scope.esResponse);
+    // return the visType object, which kibana will use to display and configure new
+    // Vis object of this type.
+    return new TemplateVisType({
+      name: 'table',
+      title: 'Data Table',
+      icon: 'fa-table',
+      template: require('text!plugins/table_vis/table_vis.html'),
+      schemas: new Schemas([
+        {
+          group: 'metrics',
+          name: 'metric',
+          title: 'Metric'
+        },
+        {
+          group: 'buckets',
+          name: 'bucket',
+          title: 'Split Rows'
+        },
+        {
+          group: 'buckets',
+          name: 'split',
+          title: 'Split Table'
+        }
+      ])
     });
-  });
-
+  };
 });

src/kibana/plugins/table_vis/table_vis.less

@@ -0,0 +1,5 @@
+.TableVis {
+  min-width: 55%;
+  max-width: 100%;
+  margin: 20px auto;
+}

src/kibana/plugins/table_vis/table_vis_controller.js

@@ -0,0 +1,17 @@
+define(function (require) {
+  // get the kibana/table_vis module, and make sure that it requires the "kibana" module if it
+  // didn't already
+  var module = require('modules').get('kibana/table_vis', ['kibana']);
+
+  // add a controller to tha module, which will transform the esResponse into a
+  // tabular format that we can pass to the table directive
+  module.controller('KbnTableVisController', function ($scope, Private) {
+    var tabifyAggResponse = Private(require('components/agg_response/tabify/tabify_agg_response'));
+
+    $scope.$watch('esResponse', function (resp, oldResp) {
+      if (!resp) $scope.table = null;
+      else $scope.table = tabifyAggResponse($scope.vis, resp);
+    });
+  });
+
+});