Repository: zeppelin Updated Branches: refs/heads/gh-pages 97ac8e5b1 -> 57ac6ebfc
[gh-pages][ZEPPELIN-2209, 2110] Show 'INTERPRETER' type & Add pagination ### What is this PR for? After #2037 merged, we can see `INTERPRETER` type in Helium menu. So for the consistency, it'll be better we can show`INTERPRETER` type in https://zeppelin.apache.org/helium_packages.html. So what I did in this PR is - enabled to see `INTERPRETER` type - added a pagination ### What type of PR is it? Improvement ### Todos * [x] - update overview sentences (current overview sentences are only for npm package related description. But`INTERPRETER` type pkgs come from mvn central not npm registry. So need to update accordingly) ### What is the Jira issue? * [ZEPPELIN-2110](https://issues.apache.org/jira/browse/ZEPPELIN-2110) : List community & 3rd party interpreter registered at Maven central repo in Helium menu * [ZEPPELIN-2209](https://issues.apache.org/jira/browse/ZEPPELIN-2209) : Add pagination ### How should this be tested? 1. To see `INTERPRETER` type pkg, replace [helium online registry uri](https://github.com/apache/zeppelin/blob/gh-pages/_includes/themes/zeppelin/default.html#L34) with `<script src="https://rawgit.com/AhyoungRyu/spark-notebook-example/master/helium-fake.js";></script>` 2. Run the website(`gh-pages`) locally as described in [here](https://github.com/apache/zeppelin/tree/gh-pages#run-website) ### Screenshots (if appropriate)  ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? yes need to update overview sentences as I said in TODO Author: AhyoungRyu <fbdkdu...@hanmail.net> Closes #2126 from AhyoungRyu/add/interpreterTypePkg and squashes the following commits: 1ee2a2a [AhyoungRyu] Update overview sentences e303f48 [AhyoungRyu] Remove unused pagination funcs 096dd36 [AhyoungRyu] Add pagination & show 'INTERPRETER' type a2e646e [AhyoungRyu] Add ui-bootstrap cdn uri to default.html Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/57ac6ebf Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/57ac6ebf Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/57ac6ebf Branch: refs/heads/gh-pages Commit: 57ac6ebfc0b9e6c1d93c664d943f1637aeabb67f Parents: 97ac8e5 Author: AhyoungRyu <fbdkdu...@hanmail.net> Authored: Tue Mar 14 16:02:40 2017 +0900 Committer: ahyoungryu <ahyoung...@apache.org> Committed: Fri Mar 17 13:28:29 2017 +0900 ---------------------------------------------------------------------- _includes/themes/zeppelin/default.html | 2 +- .../themes/zeppelin/img/maven_default_icon.png | Bin 0 -> 4248 bytes assets/themes/zeppelin/js/helium.controller.js | 91 +++++++++++----- helium_packages.md | 105 +++++++++++-------- 4 files changed, 127 insertions(+), 71 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/57ac6ebf/_includes/themes/zeppelin/default.html ---------------------------------------------------------------------- diff --git a/_includes/themes/zeppelin/default.html b/_includes/themes/zeppelin/default.html index b6cf9a2..59a0c66 100644 --- a/_includes/themes/zeppelin/default.html +++ b/_includes/themes/zeppelin/default.html @@ -33,13 +33,13 @@ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js";></script> <script src="https://s3.amazonaws.com/helium-package/helium.js";></script> <script src="https://s3.amazonaws.com/apache-zeppelin/post/medium.js";></script> + <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js";></script> <script src="{{ ASSET_PATH }}/bootstrap/js/bootstrap.min.js"></script> <script src="{{ ASSET_PATH }}/js/docs.js"></script> <script src="{{ ASSET_PATH }}/js/anchor.min.js"></script> <script src="{{ ASSET_PATH }}/js/moment.min.js"></script> <script src="{{ ASSET_PATH }}/js/helium.controller.js"></script> <script src="{{ ASSET_PATH }}/js/medium.controller.js"></script> - <!-- atom & rss feed --> <link href="{{ BASE_PATH }}{{ site.JB.atom_path }}" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed"> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/57ac6ebf/assets/themes/zeppelin/img/maven_default_icon.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/maven_default_icon.png b/assets/themes/zeppelin/img/maven_default_icon.png new file mode 100644 index 0000000..56b3894 Binary files /dev/null and b/assets/themes/zeppelin/img/maven_default_icon.png differ http://git-wip-us.apache.org/repos/asf/zeppelin/blob/57ac6ebf/assets/themes/zeppelin/js/helium.controller.js ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/js/helium.controller.js b/assets/themes/zeppelin/js/helium.controller.js index 1a96d40..d26d27e 100644 --- a/assets/themes/zeppelin/js/helium.controller.js +++ b/assets/themes/zeppelin/js/helium.controller.js @@ -1,42 +1,85 @@ -angular.module("app", []).controller("HeliumPkgCtrl", function($scope, $window, $sce) { +angular.module("app", ['ui.bootstrap']) + .controller("HeliumPkgCtrl", function($rootScope, $scope, $window, $sce) { + $rootScope.keys = Object.keys $scope.HeliumPkgs = zeppelinHeliumPackages $scope.npmWebLink = 'https://www.npmjs.com/package' + $scope.intpDefaultIcon = $sce.trustAsHtml('<img src="assets/themes/zeppelin/img/maven_default_icon.png" style="width: 12px"/>'); $scope.latestPkgInfo = {} + $scope.allTypePkgs = {} - var pkgsInfo = $scope.HeliumPkgs - var latestPkgInfo = [] + const HeliumType = [ + 'VISUALIZATION', + 'SPELL', + 'INTERPRETER', + ] - for (var idx in pkgsInfo) { - var eachPkgInfo = pkgsInfo[idx] - for (var key in eachPkgInfo) { - // key: pkg's name - var latestPkg = eachPkgInfo[key] - for (var ver in latestPkg){ - if (ver == "latest") { - latestPkgInfo.push(latestPkg[ver]) - latestPkg[ver].icon = $sce.trustAsHtml(latestPkg[ver].icon) + $scope.allPackageTypes = HeliumType + $scope.pkgListByType = 'ALL' + var init = function () { + createLatestPkgInfo() + classifyPkgByType($scope.latestPkgInfo) + + // pagination + $scope.itemsPerPage = 10 + $scope.currentPage = 1 + $scope.maxSize = 5 + } + + var createLatestPkgInfo = function() { + var latestPkgInfo = [] + var pkgsInfo = $scope.HeliumPkgs + + for (var idx in pkgsInfo) { + var eachPkgInfo = pkgsInfo[idx] + for (var key in eachPkgInfo) { + // key: pkg's name + var latestPkg = eachPkgInfo[key] + for (var ver in latestPkg){ + if (ver == "latest") { + latestPkgInfo.push(latestPkg[ver]) + latestPkg[ver].icon = $sce.trustAsHtml(latestPkg[ver].icon) + + } } } } + + $scope.latestPkgInfo = latestPkgInfo + $scope.numberOfAllPkgs = latestPkgInfo.length } - $scope.latestPkgInfo = latestPkgInfo - $scope.numberOfPkgs = latestPkgInfo.length - - $scope.showPkgsBasedOnType = function () { + + var classifyPkgByType = function(latestPkgInfo) { var vizTypePkgs = [] var spellTypePkgs = [] + var interpreterTypePkgs = [] + var allTypePkgs = {} + for (var idx in latestPkgInfo) { - if (latestPkgInfo[idx].type == "VISUALIZATION") { - vizTypePkgs.push(latestPkgInfo[idx]) - } else { - spellTypePkgs.push(latestPkgInfo[idx]) + switch (latestPkgInfo[idx].type) { + case "VISUALIZATION": + vizTypePkgs.push(latestPkgInfo[idx]) + break + case "SPELL": + spellTypePkgs.push(latestPkgInfo[idx]) + break + case "INTERPRETER": + interpreterTypePkgs.push(latestPkgInfo[idx]) + break } } - $scope.vizTypePkgs = vizTypePkgs - $scope.spellTypePkgs = spellTypePkgs + var tmpArr = [ + vizTypePkgs, + spellTypePkgs, + interpreterTypePkgs, + ] + for (var key in HeliumType) { + allTypePkgs[HeliumType[key]] = tmpArr[key] + } + + $scope.allTypePkgs = allTypePkgs } - $scope.showPkgsBasedOnType() -}); \ No newline at end of file + init() +}); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/57ac6ebf/helium_packages.md ---------------------------------------------------------------------- diff --git a/helium_packages.md b/helium_packages.md index edb3b7c..6ccb23f 100644 --- a/helium_packages.md +++ b/helium_packages.md @@ -22,60 +22,53 @@ limitations under the License. # Helium Packages From Zeppelin-0.7, you can load/unload a pluggable Apache Zeppelin package on runtime through [Helium framework](https://issues.apache.org/jira/browse/ZEPPELIN-533) in Zeppelin. -Since it's a [npm package](https://docs.npmjs.com/getting-started/what-is-npm), surely can be published to [npm registry](https://docs.npmjs.com/misc/registry). -Here are the lists of Helium packages registered in the registry. -If you need more information about how you can use the below packages in Zeppelin, see [How it works](https://zeppelin.apache.org/docs/latest/development/writingzeppelinvisualization.html#how-it-works). -Or you can also create your own package as described in [Write new Visualization](https://zeppelin.apache.org/docs/latest/development/writingzeppelinvisualization.html#write-new-visualization) section. +Here are the lists of Helium packages registered in the [NPM Registry](https://docs.npmjs.com/misc/registry) and [Maven Central Repository](http://central.sonatype.org/). +If you need more information about how you can use the below packages in Zeppelin, see [What is Apache Zeppelin Visualization](https://zeppelin.apache.org/docs/latest/development/writingzeppelinvisualization.html) +and [What is Apache Zeppelin Spell](https://zeppelin.apache.org/docs/snapshot/development/writingzeppelinspell.html). <br /> <div ng-app="app"> <div ng-controller="HeliumPkgCtrl"> <div class="box width-full heliumPackageContainer"> <p>List by</p> - <form ng-init="content='all'"> - <input class="helium-radio" id="all" type="radio" name="content" ng-model="content" value="all"><label for="all">Lately published</label> - <input class="helium-radio" id="viz" type="radio" name="content" ng-model="content" value="viz"><label for="viz">Type: Visualization</label> - <input class="helium-radio" id="spell" type="radio" name="content" ng-model="content" value="spell"> - <label for="spell">Type: Spell - <span style="color: gray; font-style: italic; font-size: 11px;">only available in development version(0.8.0-SNAPSHOT)</span> + <form> + <div> + <input class="helium-radio" id="'ALL'" type="radio" + ng-model="pkgListByType" ng-value="'ALL'" ng-click="pkgListByType = 'ALL'"> + <label for="'ALL'">Lately published</label> + </div> + <div ng-repeat="pkgTypes in allPackageTypes"> + <input class="helium-radio" id="{% raw %}{{pkgTypes}}{% endraw %}" type="radio" + ng-model="$parent.pkgListByType" ng-value="pkgTypes" ng-click="$parent.pkgListByType = pkgTypes"> + <label for="{% raw %}{{pkgTypes}}{% endraw %}">Type: {% raw %}{{pkgTypes}}{% endraw %} + <span ng-if="pkgTypes === 'SPELL'" + style="color: gray; font-style: italic; font-size: 11px;"> + only available in development version(0.8.0-SNAPSHOT) + </span> </label> + </div> </form> <br /> - <p ng-show="content == 'all'">{% raw %}{{latestPkgInfo.length}}{% endraw %} package(s) registered</p> - <p ng-show="content == 'spell'">{% raw %}{{spellTypePkgs.length}}{% endraw %} package(s) registered</p> - <p ng-show="content == 'viz'">{% raw %}{{vizTypePkgs.length}}{% endraw %} package(s) registered</p> - <div class="row heliumPackageList" - ng-repeat="pkg in latestPkgInfo | orderBy: ['published', 'type']:true" - ng-show="content == 'all'"> - <div class="col-md-12"> - <div class="heliumPackageHead"> - <div class="heliumPackageIcon" - ng-bind-html="pkg.icon"></div> - <div class="heliumPackageName"> - <a ng-href="{% raw %}{{npmWebLink}}/{{pkg.name}}{% endraw %}" - target="_blank"> - {% raw %}{{pkg.name}}{% endraw %} - </a> - <span>{% raw %}{{pkg.type}}{% endraw %}</span> - </div> - </div> - <div class="heliumPackageAuthor"> - by {% raw %}{{pkg.author}}{% endraw %} - </div> - <div class="heliumPackageDescription"> - {% raw %}{{pkg.description}}{% endraw %} - </div> - <div class="heliumPackageLatestVersion"> - v {% raw %}{{pkg.artifact.split('@')[1]}}{% endraw %} - </div> - </div> + <div> + <p ng-if="pkgListByType === 'ALL'"> + {% raw %}{{latestPkgInfo.length}}{% endraw %} package(s) registered + </p> </div> - <div class="row heliumPackageList" - ng-repeat="pkg in spellTypePkgs | orderBy: 'name'" - ng-show="content == 'spell'"> + <div ng-repeat="(types, pkgs) in allTypePkgs"> + <p ng-show="$parent.pkgListByType === types""> + {% raw %}{{pkgs.length}}{% endraw %} package(s) registered + </p> + </div> + <div ng-if="pkgListByType === 'ALL'"> + <div class="row heliumPackageList" + ng-repeat="pkg in latestPkgInfo.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | orderBy: ['published']:true"> <div class="col-md-12"> <div class="heliumPackageHead"> <div class="heliumPackageIcon" + ng-if="pkg.type !== 'INTERPRETER'" ng-bind-html="pkg.icon"></div> + <div class="heliumPackageIcon" + ng-if="pkg.type === 'INTERPRETER'" + ng-bind-html="intpDefaultIcon"></div> <div class="heliumPackageName"> <a ng-href="{% raw %}{{npmWebLink}}/{{pkg.name}}{% endraw %}" target="_blank"> @@ -84,7 +77,8 @@ Or you can also create your own package as described in [Write new Visualization <span>{% raw %}{{pkg.type}}{% endraw %}</span> </div> </div> - <div class="heliumPackageAuthor"> + <div class="heliumPackageAuthor" + ng-if="pkg.type !== 'INTERPRETER'"> by {% raw %}{{pkg.author}}{% endraw %} </div> <div class="heliumPackageDescription"> @@ -95,13 +89,24 @@ Or you can also create your own package as described in [Write new Visualization </div> </div> </div> - <div class="row heliumPackageList" - ng-repeat="pkg in vizTypePkgs | orderBy: 'name'" - ng-show="content == 'viz'"> + <div class="text-center" style="margin-top: 24px;"> + <ul uib-pagination boundary-links="true" total-items="numberOfAllPkgs" + ng-model="currentPage" class="pagination-sm" + previous-text="‹" next-text="›" first-text="«" last-text="»"></ul> + </div> + </div> + <div ng-if="pkgListByType !== 'ALL'" ng-repeat="(types, pkgs) in allTypePkgs"> + <div class="row heliumPackageList" + ng-repeat="pkg in pkgs.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | orderBy: ['published']:true" + ng-show="$parent.pkgListByType === types"> <div class="col-md-12"> <div class="heliumPackageHead"> <div class="heliumPackageIcon" + ng-if="pkg.type !== 'INTERPRETER'" ng-bind-html="pkg.icon"></div> + <div class="heliumPackageIcon" + ng-if="pkg.type === 'INTERPRETER'" + ng-bind-html="intpDefaultIcon"></div> <div class="heliumPackageName"> <a ng-href="{% raw %}{{npmWebLink}}/{{pkg.name}}{% endraw %}" target="_blank"> @@ -110,7 +115,8 @@ Or you can also create your own package as described in [Write new Visualization <span>{% raw %}{{pkg.type}}{% endraw %}</span> </div> </div> - <div class="heliumPackageAuthor"> + <div class="heliumPackageAuthor" + ng-if="pkg.type !== 'INTERPRETER'"> by {% raw %}{{pkg.author}}{% endraw %} </div> <div class="heliumPackageDescription"> @@ -121,6 +127,13 @@ Or you can also create your own package as described in [Write new Visualization </div> </div> </div> + <div class="text-center" style="margin-top: 24px;"> + <ul uib-pagination boundary-links="true" total-items="pkgs.length" + ng-model="currentPage" class="pagination-sm" + ng-show="$parent.pkgListByType === types" + previous-text="‹" next-text="›" first-text="«" last-text="»"></ul> + </div> + </div> </div> </div> </div>
