add support for Kibana 6.0

fbaligand · Jan 21, 2018 · ada3410 · ada3410
1 parent fd3092d
commit ada3410
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "enhanced-table",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "This visualization plugin is like a Data Table, but with enhanced features like computed columns and filter bar",
   "main": "index.js",
   "kibana": {
-    "version": "5.5.0"
+    "version": "6.0.0"
   },
   "scripts": {
     "lint": "eslint",

diff --git a/public/enhanced-table-vis-controller.js b/public/enhanced-table-vis-controller.js
@@ -1,14 +1,21 @@
-import { AggResponseTabifyProvider } from 'ui/agg_response/tabify/tabify';
-import { RegistryFieldFormatsProvider } from 'ui/registry/field_formats';
 import { uiModules } from 'ui/modules';
 import _ from 'lodash';
+
+import { AggResponseTabifyProvider } from 'ui/agg_response/tabify/tabify';
+import { RegistryFieldFormatsProvider } from 'ui/registry/field_formats';
 import { VisAggConfigProvider } from 'ui/vis/agg_config';
 import AggConfigResult from 'ui/vis/agg_config_result';
+
+// third-party dependencies
 import { Parser } from 'expr-eval';
 import handlebars from 'handlebars/dist/handlebars';
 
+// get the kibana/enhanced-table module, and make sure that it requires the "kibana" module if it didn't already
 const module = uiModules.get('kibana/enhanced-table', ['kibana']);
-module.controller('EnhancedTableVisController', function ($scope, $element, Private) {
+
+// 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('EnhancedTableVisController', function ($scope, Private) {
 
   const tabifyAggResponse = Private(AggResponseTabifyProvider);
   const AggConfig = Private(VisAggConfigProvider);
@@ -218,15 +225,16 @@ module.controller('EnhancedTableVisController', function ($scope, $element, Priv
       }
 
       // process filter bar
-      if (params.showFilterBar && $scope.showFilterInput() && $scope.activeFilter !== '') {
+      if ($scope.vis.filterInput === undefined) {
+        $scope.vis.filterInput = $scope.activeFilter;
+      }
+      if (params.showFilterBar && $scope.showFilterInput() && $scope.activeFilter !== undefined && $scope.activeFilter !== '') {
         tableGroups.tables = filterTableRows(tableGroups.tables, $scope.activeFilter, params.filterCaseSensitive);
       }
 
       // check if there are rows to display
       hasSomeRows = tableGroups.tables.some(function haveRows(table) {
-        if (table.tables) {
-          return table.tables.some(haveRows);
-        }
+        if (table.tables) return table.tables.some(haveRows);
         return table.rows.length > 0;
       });
 
@@ -237,7 +245,7 @@ module.controller('EnhancedTableVisController', function ($scope, $element, Priv
         'hide-export-links': params.hideExportLinks
       };
 
-      $element.trigger('renderComplete');
+      $scope.renderComplete();
     }
 
     $scope.hasSomeRows = hasSomeRows;

diff --git a/public/enhanced-table-vis-params.html b/public/enhanced-table-vis-params.html
@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="kuiSideBarSection">
 
   <div class="kuiSideBarSectionTitle">
     <div class="kuiSideBarSectionTitle__text">
@@ -178,8 +178,8 @@
   </div>
 
   <div class="form-group">
-    <label>Per Page</label>
-    <input type="number" ng-model="vis.params.perPage" class="form-control">
+    <label for="datatableVisualizationPerPage">Per Page</label>
+    <input type="number" ng-model="vis.params.perPage" class="form-control" id="datatableVisualizationPerPage">
   </div>
 
   <div class="checkbox">
@@ -218,11 +218,11 @@
   </div>
 
   <div>
-    <label>Total function</label>
+    <label for="datatableVisualizationTotalFunction">Total function</label>
     <select ng-disabled="!vis.params.showTotal"
             class="form-control"
             ng-model="vis.params.totalFunc"
-            ng-options="x for x in totalAggregations">
+            ng-options="x for x in totalAggregations" id="datatableVisualizationTotalFunction">
     </select>
   </div>
 

diff --git a/public/enhanced-table-vis-params.js b/public/enhanced-table-vis-params.js
@@ -1,13 +1,18 @@
 import { uiModules } from 'ui/modules';
 import enhancedTableVisParamsTemplate from 'plugins/enhanced-table/enhanced-table-vis-params.html';
+import _ from 'lodash';
 
-uiModules.get('kibana/enhanced-table', ['kibana'])
+uiModules.get('kibana/enhanced-table')
 .directive('enhancedTableVisParams', function () {
   return {
     restrict: 'E',
     template: enhancedTableVisParamsTemplate,
     link: function ($scope) {
       $scope.totalAggregations = ['sum', 'avg', 'min', 'max', 'count'];
+
+      if ($scope.vis.params.perPage === undefined) {
+    	_.extend($scope.vis.params, $scope.vis.type.params.defaults);
+      }
 
       $scope.$watchMulti([
         'vis.params.showPartialRows',

diff --git a/public/enhanced-table-vis.js b/public/enhanced-table-vis.js
@@ -1,32 +1,43 @@
 import 'plugins/enhanced-table/enhanced-table-vis.less';
 import 'plugins/enhanced-table/enhanced-table-vis-controller';
 import 'plugins/enhanced-table/enhanced-table-vis-params';
+import 'ui/agg_table';
+import 'ui/agg_table/agg_table_group';
+import { VisFactoryProvider } from 'ui/vis/vis_factory';
+import { CATEGORY } from 'ui/vis/vis_category';
+import { VisSchemasProvider } from 'ui/vis/editors/default/schemas';
+import tableVisTemplate from 'plugins/enhanced-table/enhanced-table-vis.html';
+import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
+import image from './images/icon-table.svg';
+// we need to load the css ourselves
 
-import { VisVisTypeProvider } from 'ui/vis/vis_type';
-import { TemplateVisTypeProvider } from 'ui/template_vis_type/template_vis_type';
-import { VisSchemasProvider } from 'ui/vis/schemas';
-
-import visTemplate from 'plugins/enhanced-table/enhanced-table-vis.html';
-import paramsTemplate from 'plugins/enhanced-table/enhanced-table-vis-params.html';
+// we also need to load the controller and used by the template
 
-import image from './images/icon-table.svg';
+// our params are a bit complex so we will manage them with a directive
 
-import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
+// require the directives that we use as well
 
+// register the provider with the visTypes registry
 VisTypesRegistryProvider.register(EnhancedTableVisProvider);
 
+// define the TableVisType
 function EnhancedTableVisProvider(Private) {
-  const VisType = Private(VisVisTypeProvider);
-  const TemplateVisType = Private(TemplateVisTypeProvider);
+  const VisFactory = Private(VisFactoryProvider);
   const Schemas = Private(VisSchemasProvider);
 
-  return new TemplateVisType({
+  // define the EnhancedTableVisProvider which is used in the template
+  // by angular's ng-controller directive
+
+  // return the visType object, which kibana will use to display and configure new
+  // Vis object of this type.
+  return VisFactory.createAngularVisualization({
+    type: 'table',
     name: 'enhanced-table',
     title: 'Enhanced Table',
     image,
     description: 'Same functionality than Data Table, but with enhanced features like computed columns and filter bar.',
-    category: VisType.CATEGORY.DATA,
-    template: visTemplate,
+    category: CATEGORY.DATA,
+    template: tableVisTemplate,
     params: {
       defaults: {
         perPage: 10,
@@ -45,34 +56,38 @@ function EnhancedTableVisProvider(Private) {
         filterBarHideable: false,
         filterBarWidth: '25%'
       },
-      editor: '<enhanced-table-vis-params></enhanced-table-vis-params>'
     },
-    implementsRenderComplete: true,
+    editorConfig: {
+      optionsTemplate: '<enhanced-table-vis-params></enhanced-table-vis-params>',
+      schemas: new Schemas([
+        {
+          group: 'metrics',
+          name: 'metric',
+          title: 'Metric',
+          aggFilter: ['!geo_centroid','!geo_bounds'],
+          min: 1,
+          defaults: [
+            { type: 'count', schema: 'metric' }
+          ]
+        },
+        {
+          group: 'buckets',
+          name: 'bucket',
+          title: 'Split Rows',
+          aggFilter: ['!filter']
+        },
+        {
+          group: 'buckets',
+          name: 'split',
+          title: 'Split Table',
+          aggFilter: ['!filter']
+        }
+      ])
+    },
+    responseHandler: 'none',
     hierarchicalData: function (vis) {
       return Boolean(vis.params.showPartialRows || vis.params.showMeticsAtAllLevels);
-    },
-    schemas: new Schemas([
-      {
-        group: 'metrics',
-        name: 'metric',
-        title: 'Metric',
-        aggFilter: '!geo_centroid',
-        min: 1,
-        defaults: [
-          { type: 'count', schema: 'metric' }
-        ]
-      },
-      {
-        group: 'buckets',
-        name: 'bucket',
-        title: 'Split Rows'
-      },
-      {
-        group: 'buckets',
-        name: 'split',
-        title: 'Split Table'
-      }
-    ])
+    }
   });
 }
 

diff --git a/public/enhanced-table-vis.less b/public/enhanced-table-vis.less
@@ -1,3 +1,37 @@
+
+// GENERIC DATA TABLE //
+
+.table-vis {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 100%;
+}
+
+.table-vis-error {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 0 100%;
+  text-align: center;
+}
+
+.table-vis-container {
+  kbn-agg-table-group > .table > tbody > tr > td {
+    border-top: 0px;
+  }
+
+  .pagination-other-pages {
+    justify-content: flex-end;
+  }
+
+  .pagination-size {
+    display: none;
+  }
+}
+
+
+// ENHANCED DATA TABLE //
+
 .computed-columns-options-container {
   margin-bottom: 20px;
 }