You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by ah...@apache.org on 2017/03/17 04:28:36 UTC
zeppelin git commit: [gh-pages][ZEPPELIN-2209,
2110] Show 'INTERPRETER' type & Add pagination
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 <fb...@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 <fb...@hanmail.net>
Authored: Tue Mar 14 16:02:40 2017 +0900
Committer: ahyoungryu <ah...@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>