Repository: zeppelin Updated Branches: refs/heads/master 5d9083ed3 -> 3ac44b11e
[ZEPPELIN-2267] Improve Helium Enable / Disable Dialogs ### What is this PR for? Improved Helium Enable / Disable Dialogs to - include more detailed info for enable dialog - include more concise info for disable dialog - use dialog title as well just instead of message - link to doc if `type === SPELL || type === VISUALIZATION` - parse `description` and `license` as HTML I attached screenshots for comparison. ### What type of PR is it? [Improvement] ### Todos NONE ### What is the Jira issue? [ZEPPELIN-2267](https://issues.apache.org/jira/browse/ZEPPELIN-2267) ### How should this be tested? 1. Test with local, online helium packages. 2. In case of local package modify description and license text to test HTML parsing like ``` "description": "The Ultimate Line Chart for Apache Zeppelin using <a href src=\"https://www.amcharts.com\";>amcharts</a>", "license": "<a href=\"https://www.amcharts.com/licenses/javascript-charts-free-license\";>Amcharts License</a>" ``` ### Screenshots (if appropriate) #### Before: enable dialog <img width="631" alt="enable_local" src="https://cloud.githubusercontent.com/assets/4968473/23984205/a45babf6-0a5b-11e7-934d-83d6ed31c5eb.png";> #### After: enable dialog <img width="631" alt="after_enable_local" src="https://cloud.githubusercontent.com/assets/4968473/23984234/c98335ca-0a5b-11e7-9b72-810fda629635.png";> #### Before: disable dialog <img width="632" alt="disable_local" src="https://cloud.githubusercontent.com/assets/4968473/23984232/c65ed642-0a5b-11e7-8f67-a4ce2c5378f8.png";> #### After: disable dialog <img width="647" alt="after_disable" src="https://cloud.githubusercontent.com/assets/4968473/23984226/bb0fcfd0-0a5b-11e7-9afb-2326c2f6b778.png";> ### Questions: * Does the licenses files need update? - NO * Is there breaking changes for older versions? - NO * Does this needs documentation? - NO Author: 1ambda <1am...@gmail.com> Closes #2144 from 1ambda/ZEPPELIN-2267/improve-helium-dialog and squashes the following commits: 053abbe [1ambda] fix: Link current version doc bc0ba52 [1ambda] fix: lint errors 7bb9614 [1ambda] feat: Improve helium disable dialog cf9ee42 [1ambda] feat: Improve heloium enable dialog Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/3ac44b11 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/3ac44b11 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/3ac44b11 Branch: refs/heads/master Commit: 3ac44b11e0d5f499d8f44936c96bfa70e231c24e Parents: 5d9083e Author: 1ambda <1am...@gmail.com> Authored: Wed Mar 22 21:13:23 2017 +0900 Committer: ahyoungryu <ahyoung...@apache.org> Committed: Fri Mar 24 13:33:13 2017 +0900 ---------------------------------------------------------------------- .../src/app/helium/helium.controller.js | 60 +++++++++++++------- zeppelin-web/src/app/helium/helium.html | 4 +- 2 files changed, 41 insertions(+), 23 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/3ac44b11/zeppelin-web/src/app/helium/helium.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/helium/helium.controller.js b/zeppelin-web/src/app/helium/helium.controller.js index 1130075..0565ec1 100644 --- a/zeppelin-web/src/app/helium/helium.controller.js +++ b/zeppelin-web/src/app/helium/helium.controller.js @@ -149,37 +149,55 @@ export default function HeliumCtrl($scope, $rootScope, $sce, return license; } - $scope.enable = function(name, artifact, type, groupId) { + const getHeliumTypeText = function(type) { + if (type === HeliumType.VISUALIZATION) { + return `<a target="_blank" href="https://zeppelin.apache.org/docs/${$rootScope.zeppelinVersion}/development/writingzeppelinvisualization.html";>${type}</a>`; // eslint-disable-line max-len + } else if (type === HeliumType.SPELL) { + return `<a target="_blank" href="https://zeppelin.apache.org/docs/${$rootScope.zeppelinVersion}/development/writingzeppelinspell.html";>${type}</a>`; // eslint-disable-line max-len + } else { + return type; + } + } + + $scope.enable = function(name, artifact, type, groupId, description) { var license = getLicense(name, artifact); var mavenArtifactInfoToHTML = groupId +':'+ artifact.split('@')[0] + ':' + artifact.split('@')[1]; var zeppelinVersion = $rootScope.zeppelinVersion; var url = 'https://zeppelin.apache.org/docs/' + zeppelinVersion + '/manual/interpreterinstallation.html'; - + var confirm = '' - if (type === 'INTERPRETER') { - confirm = BootstrapDialog.show({ - title: '', - message: '<p>Below command will download maven artifact ' + - '<code style="font-size: 11.5px; background-color: #f5f5f5; color: #0a0a0a">' + + if (type === HeliumType.INTERPRETER) { + confirm = BootstrapDialog.show({ + title: '', + message: '<p>Below command will download maven artifact ' + + '<code style="font-size: 11.5px; background-color: #f5f5f5; color: #0a0a0a">' + mavenArtifactInfoToHTML + '</code>' + - ' and all of its transitive dependencies into interpreter/interpreter-name directory.<p>' + - '<div class="highlight"><pre><code class="text language-text" data-lang="text" style="font-size: 11.5px">' + - './bin/install-interpreter.sh --name "interpreter-name" --artifact ' + + ' and all of its transitive dependencies into interpreter/interpreter-name directory.<p>' + + '<div class="highlight"><pre><code class="text language-text" data-lang="text" style="font-size: 11.5px">' + + './bin/install-interpreter.sh --name "interpreter-name" --artifact ' + mavenArtifactInfoToHTML +' </code></pre>' + - '<p>After restart Zeppelin, create interpreter setting and bind it with your note. ' + - 'For more detailed information, see <a target="_blank" href=' + + '<p>After restart Zeppelin, create interpreter setting and bind it with your note. ' + + 'For more detailed information, see <a target="_blank" href=' + url + '>Interpreter Installation.</a></p>' - }); + }); } else { confirm = BootstrapDialog.confirm({ closable: false, closeByBackdrop: false, closeByKeyboard: false, - title: '', - message: 'Do you want to enable ' + name + '?' + - '<div style="color:gray">' + artifact + '</div>' + - '<div style="border-top: 1px solid #efefef; margin-top: 10px; padding-top: 5px;">License</div>' + - '<div style="color:gray">' + license + '</div>', + title: '<div style="font-weight: 300;">Do you want to enable Helium Package?</div>', + message: + '<div style="font-size: 14px; margin-top: 5px;">Artifact</div>' + + `<div style="color:gray">${artifact}</div>` + + '<hr style="margin-top: 10px; margin-bottom: 10px;" />' + + '<div style="font-size: 14px; margin-bottom: 2px;">Type</div>' + + `<div style="color:gray">${getHeliumTypeText(type)}</div>` + + '<hr style="margin-top: 10px; margin-bottom: 10px;" />' + + '<div style="font-size: 14px;">Description</div>' + + `<div style="color:gray">${description}</div>` + + '<hr style="margin-top: 10px; margin-bottom: 10px;" />' + + '<div style="font-size: 14px;">License</div>' + + `<div style="color:gray">${license}</div>`, callback: function (result) { if (result) { confirm.$modalFooter.find('button').addClass('disabled'); @@ -203,13 +221,13 @@ export default function HeliumCtrl($scope, $rootScope, $sce, } }; - $scope.disable = function(name) { + $scope.disable = function(name, artifact) { var confirm = BootstrapDialog.confirm({ closable: false, closeByBackdrop: false, closeByKeyboard: false, - title: '', - message: 'Do you want to disable ' + name + '?', + title: '<div style="font-weight: 300;">Do you want to disable Helium Package?</div>', + message: artifact, callback: function(result) { if (result) { confirm.$modalFooter.find('button').addClass('disabled'); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/3ac44b11/zeppelin-web/src/app/helium/helium.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/helium/helium.html b/zeppelin-web/src/app/helium/helium.html index 2310a92..aae3728 100644 --- a/zeppelin-web/src/app/helium/helium.html +++ b/zeppelin-web/src/app/helium/helium.html @@ -96,11 +96,11 @@ limitations under the License. <span class="heliumType">{{pkgSearchResult.pkg.type}}</span> </div> <div ng-show="!pkgSearchResult.enabled" - ng-click="enable(pkgSearchResult.pkg.name, pkgSearchResult.pkg.artifact, pkgSearchResult.pkg.type, pkgSearchResult.pkg.groupId)" + ng-click="enable(pkgSearchResult.pkg.name, pkgSearchResult.pkg.artifact, pkgSearchResult.pkg.type, pkgSearchResult.pkg.groupId, pkgSearchResult.pkg.description)" class="btn btn-success btn-xs" style="float:right">Enable</div> <div ng-show="pkgSearchResult.enabled" - ng-click="disable(pkgSearchResult.pkg.name)" + ng-click="disable(pkgSearchResult.pkg.name, pkgSearchResult.pkg.artifact)" ng-if="pkgSearchResult.pkg.type !== 'INTERPRETER'" class="btn btn-info btn-xs" style="float:right">Disable</div>
![https://cloud.githubusercontent.com/assets/4968473/23984205/a45babf6-0a5b-11e7-934d-83d6ed31c5eb.png"](https://cloud.githubusercontent.com/assets/4968473/23984205/a45babf6-0a5b-11e7-934d-83d6ed31c5eb.png"){kind=link}
![https://cloud.githubusercontent.com/assets/4968473/23984234/c98335ca-0a5b-11e7-9b72-810fda629635.png"](https://cloud.githubusercontent.com/assets/4968473/23984234/c98335ca-0a5b-11e7-9b72-810fda629635.png"){kind=link}
![https://cloud.githubusercontent.com/assets/4968473/23984232/c65ed642-0a5b-11e7-8f67-a4ce2c5378f8.png"](https://cloud.githubusercontent.com/assets/4968473/23984232/c65ed642-0a5b-11e7-8f67-a4ce2c5378f8.png"){kind=link}
![https://cloud.githubusercontent.com/assets/4968473/23984226/bb0fcfd0-0a5b-11e7-9afb-2326c2f6b778.png"](https://cloud.githubusercontent.com/assets/4968473/23984226/bb0fcfd0-0a5b-11e7-9afb-2326c2f6b778.png"){kind=link}