zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From cornead...@apache.org
Subject incubator-zeppelin git commit: [ZEPPELIN-672] Add feature to export tables using Datatables
Date Sat, 30 Apr 2016 09:05:45 GMT
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)
![image](https://cloud.githubusercontent.com/assets/1140475/13525760/4913bd8e-e229-11e5-9cd5-480c8b583d5b.png)

### 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 <ankur.jain@yash.com>
Author: Ankur Jain <ankurmitujjain@gmail.com>
Author: Damien CORNEAU <corneadoug@gmail.com>

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 <ankur.jain@yash.com>
Authored: Mon Apr 18 11:12:01 2016 +0530
Committer: Damien CORNEAU <corneadoug@gmail.com>
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 -->


Mime
View raw message