Repository: zeppelin Updated Branches: refs/heads/branch-0.6 0b532cda3 -> 47f28a086
[ZEPPELIN-997] Export data to csv ### What is this PR for? Add csv download from front-end leveraging #714 ### What type of PR is it? Improvement ### What is the Jira issue? [ZEPPELIN-997](https://issues.apache.org/jira/browse/ZEPPELIN-997) ### Screenshots (if appropriate) **Before** <img width="347" alt="screen shot 2016-06-13 at 4 55 02 pm" src="https://cloud.githubusercontent.com/assets/8503346/16027024/acb80824-3187-11e6-8535-090b06e4807e.png"> **After** <img width="354" alt="screen shot 2016-06-14 at 12 42 01 am" src="https://cloud.githubusercontent.com/assets/8503346/16034849/dd6f48c4-31c8-11e6-92b8-809b3f27d429.png"> <img width="357" alt="screen shot 2016-06-14 at 12 41 49 am" src="https://cloud.githubusercontent.com/assets/8503346/16034844/da6cef46-31c8-11e6-8ef2-d11c460eaa02.png"> ### Questions: * Does the licenses files need update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Author: Mina Lee <[email protected]> Closes #1008 from minahlee/ZEPPELIN-997 and squashes the following commits: dabb603 [Mina Lee] Add tooltip and change style for dropdown button e48c303 [Mina Lee] Fix integration test after adding csv download button 5437c4f [Mina Lee] Use split button dropdowns for downloading data 2ad6f47 [Mina Lee] Export data to csv (cherry picked from commit 048e432a615d091b734cddc8a8a81ed2fa5c1f78) Signed-off-by: Mina Lee <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/47f28a08 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/47f28a08 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/47f28a08 Branch: refs/heads/branch-0.6 Commit: 47f28a086d4c4846508ba4a4a0caf4c22cb91533 Parents: 0b532cd Author: Mina Lee <[email protected]> Authored: Tue Jun 14 00:39:57 2016 -0700 Committer: Mina Lee <[email protected]> Committed: Fri Jun 24 23:20:26 2016 -0700 ---------------------------------------------------------------------- .../zeppelin/integration/SparkParagraphIT.java | 6 +++--- .../paragraph/paragraph-chart-selector.html | 19 +++++++++++++---- .../notebook/paragraph/paragraph.controller.js | 22 +++++++++++++------- .../src/app/notebook/paragraph/paragraph.css | 12 ++++++----- 4 files changed, 39 insertions(+), 20 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/47f28a08/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java ---------------------------------------------------------------------- diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java index 1eadd0e..81c7190 100644 --- a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java +++ b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java @@ -165,10 +165,10 @@ public class SparkParagraphIT extends AbstractZeppelinIT { } WebElement paragraph1Result = driver.findElement(By.xpath( - getParagraphXPath(1) + "//div[@class=\"tableDisplay\"]")); + getParagraphXPath(1) + "//div[@class=\"tableDisplay\"]//table")); collector.checkThat("Paragraph from SparkParagraphIT of testSqlSpark result: ", - paragraph1Result.getText().toString(), CoreMatchers.equalTo("age\njob\nmarital\neducation\nbalance\n30" + - " unemployed married primary 1,787\nage\njob\nmarital\neducation\nbalance")); + paragraph1Result.getText().toString(), CoreMatchers.equalTo("age\njob\nmarital\neducation\nbalance\n" + + "30 unemployed married primary 1,787")); } catch (Exception e) { handleException("Exception in SparkParagraphIT while testSqlSpark", e); } http://git-wip-us.apache.org/repos/asf/zeppelin/blob/47f28a08/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html index 26ffe5c..76135b1 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html @@ -41,11 +41,22 @@ limitations under the License. ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i> </button> </div> - <span> - <button type="button" class="btn btn-default btn-sm" style="margin-left:10px" - tooltip="Download Data as TSV" tooltip-placement="bottom" - ng-click="exportToTSV()"><i class="fa fa-download"></i> + <span class="btn-group"> + <button type="button" class="btn btn-default btn-sm" + style="margin-left:10px" + ng-click="exportToDSV(',')" + tooltip="Download Data as CSV" tooltip-placement="bottom"> + <i class="fa fa-download"></i> + </button> + <button type="button" class="btn btn-default btn-sm dropdown-toggle caretBtn" + data-toggle="dropdown"> + <span class="caret" style="margin: 0px;"></span> + <span class="sr-only">Toggle Dropdown</span> </button> + <ul class="dropdown-menu" role="menu" style="min-width: 70px;"> + <li ng-click="exportToDSV(',')"><a>CSV</a></li> + <li ng-click="exportToDSV('\t')"><a>TSV</a></li> + </ul> </span> <span ng-if="getGraphMode()!='table'" style="margin-left:5px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;"> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/47f28a08/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 e260c8b..591705a 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -2139,21 +2139,27 @@ angular.module('zeppelinWebApp') $scope.keepScrollDown = false; }; - $scope.exportToTSV = function () { + $scope.exportToDSV = function (delimiter) { var data = $scope.paragraph.result; - var tsv = ''; + var dsv = ''; for (var titleIndex in $scope.paragraph.result.columnNames) { - tsv += $scope.paragraph.result.columnNames[titleIndex].name + '\t'; + dsv += $scope.paragraph.result.columnNames[titleIndex].name + delimiter; } - tsv = tsv.substring(0, tsv.length - 1) + '\n'; + dsv = dsv.substring(0, dsv.length - 1) + '\n'; for (var r in $scope.paragraph.result.msgTable) { var row = $scope.paragraph.result.msgTable[r]; - var tsvRow = ''; + var dsvRow = ''; for (var index in row) { - tsvRow += row[index].value + '\t'; + dsvRow += row[index].value + delimiter; } - tsv += tsvRow.substring(0, tsvRow.length - 1) + '\n'; + dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n'; } - SaveAsService.SaveAs(tsv, 'data', 'tsv'); + var extension = ''; + if (delimiter === '\t') { + extension = 'tsv'; + } else if (delimiter === ',') { + extension = 'csv'; + } + SaveAsService.SaveAs(dsv, 'data', extension); }; }); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/47f28a08/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 b46d0d9..cea3ebd 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css @@ -466,10 +466,6 @@ table.dataTable.table-condensed .sorting_desc:after { font-weight: 500; } -.dropdown-menu > li:first-child > a:hover { - background-color: transparent; -} - table.table-striped { border-top: 1px solid #ddd; margin-top: 20px; @@ -481,10 +477,16 @@ table.table-striped { cursor: pointer; } - .scroll-paragraph-up { bottom: 5px; cursor: pointer; position: absolute; right: 15px; } + +/* DSV download toggle button */ +.caretBtn { + padding-right: 4px !important; + padding-left: 4px !important; + width: 20px; +}
