Repository: incubator-zeppelin Updated Branches: refs/heads/master c7b6eb6fb -> d481b56c5
[ZEPPELIN-672] Add feature to export tables using Datatables ### What is this PR for? It is an extension of #6 #714 It allows user to export data in a paragraph to a TSV/CSV file. ### What type of PR is it? Feature ### Todos * [x] - Improves the current Table features like Search, Fixed Headers, Sorting ### Is there a relevant Jira issue? [ZEPPELIN-672](https://issues.apache.org/jira/browse/ZEPPELIN-672) ### How should this be tested? 1. Create a paragraph with data in %table view 2. Click on TSV/CSV button to export CSV/TSV file ### Screenshots (if appropriate)  ### Questions: * Does the licenses files need update? Need to have MIT license for Datatables. * Is there breaking changes for older versions? No * Does this needs documentation? No Author: ankur_jain <[email protected]> Author: Ankur Jain <[email protected]> Author: Damien CORNEAU <[email protected]> Closes #761 from ankurmitujjain/master and squashes the following commits: 4ddcc0f [Ankur Jain] Updated testcases for @corneadoug pull request e6470aa [Ankur Jain] Merge pull request #1 from corneadoug/clean/dataframe dd8901b [Damien CORNEAU] last fixes 5aca081 [Damien CORNEAU] Last Modifications 9c4412f [Damien CORNEAU] Remove buttons 2561630 [Ankur Jain] Updated for indent c9b675d [Ankur Jain] Updated for indent 38ee3c3 [Ankur Jain] Updated for indent b23cab4 [Ankur Jain] Updated for indent 09c87a0 [Ankur Jain] Updated for indent e4b3abb [ankur_jain] Removed R.md accidentally added d3aadc6 [ankur_jain] Updated testcase 210b7a6 [ankur_jain] Updates latest code of controller 80bd58c [ankur_jain] Merge branch 'upstream/master' 0ee76b1 [ankur_jain] Update 3 files 0c5f623 [ankur_jain] Revert "Merge branch 'upstream/master'" adb66a3 [ankur_jain] Merge branch 'upstream/master' 6363e97 [ankur_jain] Merge branch 'master' of https://github.com/ankurmitujjain/incubator-zeppelin 0c94cab [ankur_jain] Merge branch 'master' of https://github.com/ankurmitujjain/incubator-zeppelin d23202e [ankur_jain] Merge remote-tracking branch 'refs/remotes/origin/master' into apache/master 415c1f5 [ankur_jain] Merge branch 'apache/master' 7901f5e [ankur_jain] Merge branch 'refs/heads/master' into apache/master 6e6587b [ankur_jain] Updating codebase as per @prabhjyotsingh comments aea8446 [ankur_jain] Merge branch 'apache/master' df1620c [ankur_jain] Updated testcase as resultant paragraph have text of buttons and search box. 00b36e5 [ankur_jain] Reverted line 117 and 2122 as per previous code 9351a0d [ankur_jain] Committed for Datatables #6 Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/d481b56c Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/d481b56c Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/d481b56c Branch: refs/heads/master Commit: d481b56c50d421d513d27adf0f72e516a40be944 Parents: c7b6eb6 Author: ankur_jain <[email protected]> Authored: Mon Apr 18 11:12:01 2016 +0530 Committer: Damien CORNEAU <[email protected]> Committed: Sat Apr 30 18:05:33 2016 +0900 ---------------------------------------------------------------------- zeppelin-web/Gruntfile.js | 5 +++ zeppelin-web/bower.json | 4 +- .../notebook/paragraph/paragraph-results.html | 1 + .../notebook/paragraph/paragraph.controller.js | 47 +++++++++++++------- .../src/app/notebook/paragraph/paragraph.css | 15 +++++++ zeppelin-web/src/index.html | 10 +++++ 6 files changed, 65 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/d481b56c/zeppelin-web/Gruntfile.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/Gruntfile.js b/zeppelin-web/Gruntfile.js index ce62d8b..71bdf15 100644 --- a/zeppelin-web/Gruntfile.js +++ b/zeppelin-web/Gruntfile.js @@ -356,6 +356,11 @@ module.exports = function (grunt) { src: ['app/**/*.html', 'components/**/*.html'] }, { expand: true, + cwd: 'bower_components/datatables/media/images', + src: '{,*/}*.{png,jpg,jpeg,gif}', + dest: '<%= yeoman.dist %>/images' + }, { + expand: true, cwd: '.tmp/images', dest: '<%= yeoman.dist %>/images', src: ['generated/*'] http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/d481b56c/zeppelin-web/bower.json ---------------------------------------------------------------------- diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json index b5ec64e..b877303 100644 --- a/zeppelin-web/bower.json +++ b/zeppelin-web/bower.json @@ -30,7 +30,9 @@ "ngtoast": "~2.0.0", "ng-focus-if": "~1.0.2", "bootstrap3-dialog": "bootstrap-dialog#~1.34.7", - "floatThead": "~1.3.2" + "floatThead": "~1.3.2", + "datatables.net-bs": "~1.10.11", + "datatables.net-buttons-bs": "~1.1.2" }, "devDependencies": { "angular-mocks": "1.5.0" http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/d481b56c/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html index 77d7451..612fdbd 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html @@ -13,6 +13,7 @@ limitations under the License. --> <div id="p{{paragraph.id}}_resize" + style='padding-bottom: 5px;' resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{getResultType()}}"}' resizable on-resize="resizeParagraph(width, height);"> <div ng-include src="'app/notebook/paragraph/paragraph-graph.html'"></div> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/d481b56c/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index c71e096..0de6584 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -1265,40 +1265,55 @@ angular.module('zeppelinWebApp') return '&#'+i.charCodeAt(0)+';'; }); } - html += ' <td>'+formatTableContent(v)+'</td>'; + html += ' <td>'+formatTableContent(v)+'</td>'; } html += ' </tr>'; } html += ' </tbody>'; html += '</table>'; - angular.element('#p' + $scope.paragraph.id + '_table').html(html); + var tableDomEl = angular.element('#p' + $scope.paragraph.id + '_table'); + tableDomEl.html(html); + var oTable = tableDomEl.children(1).DataTable({ + paging: false, + info: false, + autoWidth: false, + lengthChange: false, + searching: false, + dom: '<>' + }); + if ($scope.paragraph.result.msgTable.length > 10000) { - angular.element('#p' + $scope.paragraph.id + '_table').css('overflow', 'scroll'); - // set table height - var height = $scope.paragraph.config.graph.height; - angular.element('#p' + $scope.paragraph.id + '_table').css('height', height); + tableDomEl.css({ + 'overflow': 'scroll', + 'height': $scope.paragraph.config.graph.height + }); } else { + var dataTable = angular.element('#p' + $scope.paragraph.id + '_table .table'); dataTable.floatThead({ - scrollContainer: function (dataTable) { - return angular.element('#p' + $scope.paragraph.id + '_table'); + scrollContainer: function(dataTable) { + return tableDomEl; } }); - angular.element('#p' + $scope.paragraph.id + '_table .table').on('remove', function () { - angular.element('#p' + $scope.paragraph.id + '_table .table').floatThead('destroy'); + + dataTable.on('remove', function () { + dataTable.floatThead('destroy'); + }); + + tableDomEl.css({ + 'position': 'relative', + 'height': '100%' }); + tableDomEl.perfectScrollbar('destroy') + .perfectScrollbar({minScrollbarLength: 20}); - angular.element('#p' + $scope.paragraph.id + '_table').css('position', 'relative'); - angular.element('#p' + $scope.paragraph.id + '_table').css('height', '100%'); - angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('destroy'); - angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar(); angular.element('.ps-scrollbar-y-rail').css('z-index', '1002'); // set table height var psHeight = $scope.paragraph.config.graph.height; - angular.element('#p' + $scope.paragraph.id + '_table').css('height', psHeight); - angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('update'); + tableDomEl.css('height', psHeight); + tableDomEl.perfectScrollbar('update'); } }; http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/d481b56c/zeppelin-web/src/app/notebook/paragraph/paragraph.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css index b4873cf..60f3d7f 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css @@ -52,6 +52,21 @@ width: 100%; } +table.dataTable { + margin-top: 0px !important; + margin-bottom: 6px !important; +} + +table.dataTable.table-condensed > thead > tr > th { + padding-right: 28px; +} + +table.dataTable.table-condensed .sorting:after, +table.dataTable.table-condensed .sorting_asc:after, +table.dataTable.table-condensed .sorting_desc:after { + right: 12px; +} + .graphContainer { position: relative; margin-bottom: 5px; http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/d481b56c/zeppelin-web/src/index.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html index f5be3ea..207320e 100644 --- a/zeppelin-web/src/index.html +++ b/zeppelin-web/src/index.html @@ -44,6 +44,8 @@ limitations under the License. <link rel="stylesheet" href="bower_components/highlightjs/styles/github.css" /> <link rel="stylesheet" href="bower_components/ngtoast/dist/ngToast.css" /> <link rel="stylesheet" href="bower_components/bootstrap3-dialog/dist/css/bootstrap-dialog.min.css" /> + <link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.css" /> + <link rel="stylesheet" href="bower_components/datatables.net-buttons-bs/css/buttons.bootstrap.css" /> <!-- endbower --> <link rel="stylesheet" href="bower_components/jquery-ui/themes/base/all.css" /> <!-- endbuild --> @@ -132,6 +134,14 @@ limitations under the License. <script src="bower_components/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js"></script> <script src="bower_components/floatThead/dist/jquery.floatThead.js"></script> <script src="bower_components/floatThead/dist/jquery.floatThead.min.js"></script> + <script src="bower_components/datatables.net/js/jquery.dataTables.js"></script> + <script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.js"></script> + <script src="bower_components/datatables.net-buttons/js/dataTables.buttons.js"></script> + <script src="bower_components/datatables.net-buttons/js/buttons.colVis.js"></script> + <script src="bower_components/datatables.net-buttons/js/buttons.flash.js"></script> + <script src="bower_components/datatables.net-buttons/js/buttons.html5.js"></script> + <script src="bower_components/datatables.net-buttons/js/buttons.print.js"></script> + <script src="bower_components/datatables.net-buttons-bs/js/buttons.bootstrap.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,src}) scripts/scripts.js -->
