From ada3410e63521c3c69a6f3cc7b53e531abe3fc87 Mon Sep 17 00:00:00 2001 From: fbaligand Date: Sun, 21 Jan 2018 19:15:09 +0100 Subject: [PATCH] add support for Kibana 6.0 --- package.json | 4 +- public/enhanced-table-vis-controller.js | 24 ++++--- public/enhanced-table-vis-params.html | 10 +-- public/enhanced-table-vis-params.js | 7 +- public/enhanced-table-vis.js | 91 ++++++++++++++----------- public/enhanced-table-vis.less | 34 +++++++++ 6 files changed, 116 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 2c6aa74a..f0d4f6df 100644 --- 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 index 33c519ec..e2e54dc3 100644 --- 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 index 07844672..2b9831f4 100644 --- a/public/enhanced-table-vis-params.html +++ b/public/enhanced-table-vis-params.html @@ -1,4 +1,4 @@ -
+
@@ -178,8 +178,8 @@
- - + +
@@ -218,11 +218,11 @@
- +
diff --git a/public/enhanced-table-vis-params.js b/public/enhanced-table-vis-params.js index 11e64034..28e09fa0 100644 --- 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 index 6222b416..efefe538 100644 --- 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: '' }, - implementsRenderComplete: true, + editorConfig: { + optionsTemplate: '', + 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 index c33d0cc0..f4af45a5 100644 --- 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; }