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/02/04 12:39:42 UTC
zeppelin git commit: [gh-pages][ZEPPELIN-1973] List all available
Helium packages under zeppelin.apache.org
Repository: zeppelin
Updated Branches:
refs/heads/gh-pages f20c98d40 -> 23affbe98
[gh-pages][ZEPPELIN-1973] List all available Helium packages under zeppelin.apache.org
### What is this PR for?
After #1842 merged, anyone can create his/her own `VISUALIZATION` pkg as described in [Writing a new Visualization](https://zeppelin.apache.org/docs/0.7.0-SNAPSHOT/development/writingzeppelinvisualization.html) and can publish it to npm registry. The below img describes "the current Helium package mechanism(black outline) + proposing from me to list all Helium pkgs published in npm registry(red one) in Zeppelin official website". So what I did to do this was the red-outlined factors.
<img width="1266" alt="screen shot 2017-01-24 at 4 44 42 pm" src="https://cloud.githubusercontent.com/assets/10060731/22238412/85ce0ee2-e254-11e6-9fe0-e5089789e61f.png">
> `helium.js` is located in here: [https://s3.amazonaws.com/helium-package/helium.js](https://s3.amazonaws.com/helium-package/helium.js) and it's updated automatically by CloudWatch every 1 hour.
**Possible future work**
Currently to enable/disable the helium VIZ pkg via Helium GUI menu in Zeppelin, user needs to place Helium info json files under `ZEPPELIN_HOME/helium/` manually. But from now, we can substitute this not user friendly way by using `helium.js`. (already opened #1936 by Leemoonsoo )
**Any issues?**
But as I mentioned in [ZEPPELIN-1973](https://issues.apache.org/jira/browse/ZEPPELIN-1973), since I used AWS services (Lambda, S3 and CloudWatch), I needed an account. So for continous management, I'm willing to share the information that need to run/packaging/deploy Lambda function with Zeppelin PMCs if you Zeppelin community thinks I need to do it.
### What type of PR is it?
Improvement | Feature
### Todos
* [x] - make result filtered by type (`VISUALIZATION` & `SPELL` introduced by #1940 )
* [x] - Adjust navbar when screen width is small
### What is the Jira issue?
[ZEPPELIN-1973](https://issues.apache.org/jira/browse/ZEPPELIN-1973)
### How should this be tested?
Build `gh-pages` branch as described in [here](https://github.com/apache/zeppelin/tree/gh-pages#build-website). Or just see the below gif sreenshot img :)
### Screenshots (if appropriate)
### Questions:
* Does the licenses files need update? no
* Is there breaking changes for older versions? no
* Does this needs documentation? no
Author: AhyoungRyu <fb...@hanmail.net>
Closes #1935 from AhyoungRyu/gh-page/ZEPPELIN-1973 and squashes the following commits:
694c402 [AhyoungRyu] Update with better wording
4e1ac88 [AhyoungRyu] Make packages listed lately published date first
1c27d42 [AhyoungRyu] Remove useless console printing
f9a9500 [AhyoungRyu] Notice that SPELL is only available from 0.8
4c7f7dc [AhyoungRyu] Fix navbar downflow problem
61fabf2 [AhyoungRyu] Add radio button
ddaf359 [AhyoungRyu] Get SPELL type from heliumPkgRegistry
0c79db5 [AhyoungRyu] Add radio button to be able to select each type
129a916 [AhyoungRyu] Styling
45c0e7d [AhyoungRyu] Add new page: Helium Packages
a5f0926 [AhyoungRyu] Add 'Helium' menu to main navbar
b1d7ffd [AhyoungRyu] Import js files: icons, angular, helium package list info
Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/23affbe9
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/23affbe9
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/23affbe9
Branch: refs/heads/gh-pages
Commit: 23affbe98687f019a7c7425122915287a459b596
Parents: f20c98d
Author: AhyoungRyu <fb...@hanmail.net>
Authored: Thu Feb 2 22:31:29 2017 +0900
Committer: ahyoungryu <ah...@apache.org>
Committed: Sat Feb 4 21:39:32 2017 +0900
----------------------------------------------------------------------
_includes/themes/zeppelin/_navigation.html | 1 +
_includes/themes/zeppelin/default.html | 5 +
assets/themes/zeppelin/css/style.css | 189 +++++++++++++++++++-
assets/themes/zeppelin/js/helium.controller.js | 42 +++++
helium_packages.md | 126 +++++++++++++
5 files changed, 361 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/23affbe9/_includes/themes/zeppelin/_navigation.html
----------------------------------------------------------------------
diff --git a/_includes/themes/zeppelin/_navigation.html b/_includes/themes/zeppelin/_navigation.html
index a65ff62..e5bb965 100644
--- a/_includes/themes/zeppelin/_navigation.html
+++ b/_includes/themes/zeppelin/_navigation.html
@@ -44,6 +44,7 @@
</ul>
</li>
+ <li><a href="/helium_packages.html">Helium</a></li>
<li><a href="https://github.com/apache/incubator-zeppelin">GitHub</a></li>
<!-- Apache -->
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/23affbe9/_includes/themes/zeppelin/default.html
----------------------------------------------------------------------
diff --git a/_includes/themes/zeppelin/default.html b/_includes/themes/zeppelin/default.html
index 2d8402b..d986977 100644
--- a/_includes/themes/zeppelin/default.html
+++ b/_includes/themes/zeppelin/default.html
@@ -15,6 +15,8 @@
<![endif]-->
<!-- Le styles -->
+ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="{{ ASSET_PATH }}/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="{{ ASSET_PATH }}/css/style.css?body=1" rel="stylesheet" type="text/css">
<link href="{{ ASSET_PATH }}/css/syntax.css" rel="stylesheet" type="text/css" media="screen" />
@@ -28,9 +30,12 @@
<!-- Js -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <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="{{ 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/helium.controller.js"></script>
<!-- atom & rss feed -->
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/23affbe9/assets/themes/zeppelin/css/style.css
----------------------------------------------------------------------
diff --git a/assets/themes/zeppelin/css/style.css b/assets/themes/zeppelin/css/style.css
index ebabef2..8f97e8a 100644
--- a/assets/themes/zeppelin/css/style.css
+++ b/assets/themes/zeppelin/css/style.css
@@ -238,7 +238,7 @@ body {
/* Custom container */
.content {
word-wrap: break-word;
- max-width: 1024px;
+ max-width: 860px;
padding: 2rem 2rem;
margin: 0 auto;
}
@@ -519,6 +519,150 @@ a.anchor {
a.anchorjs-link:hover { text-decoration: none; }
+/* Helium Package list style */
+.heliumPackageContainer p {
+ font-family: "Helvetica Neue";
+ font-weight: 900;
+ padding: 12px 0;
+ text-transform: uppercase;
+}
+
+.heliumPackageList {
+ min-height: 25px;
+ margin-bottom: 15px;
+ border-bottom: 2px solid #EFEFEF;
+ padding-bottom: 13px;
+}
+
+.heliumPackageList .heliumPackageHead {
+ font-family: "Helvetica Neue";
+ height: 30px;
+}
+
+.heliumPackageList .heliumPackageName {
+ font-size: 20px;
+ font-weight: 900;
+ color: #3071a9;
+ margin-top: 0;
+}
+
+.heliumPackageList .heliumPackageName span {
+ font-size: 10px;
+ color: #aaa;
+}
+
+.heliumPackageList .heliumPackageAuthor {
+ font-size: 12px;
+ color: #aaa;
+ margin-top: 4px;
+}
+
+.heliumPackageList .heliumPackageIcon {
+ float: left;
+ font-size: 17px;
+ width: 26px;
+ height: 22px;
+ padding: 5px 2px 0px 2px;
+}
+
+.heliumPackageList .heliumPackageDescription {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+.heliumPackageList .heliumPackageLatestVersion {
+ color: #aaa;
+ font-style: italic;
+}
+
+.helium-radio {
+ position: absolute;
+ display: none;
+}
+
+.helium-radio[disabled] {
+ cursor: not-allowed;
+}
+
+.helium-radio + label {
+ position: relative;
+ display: block;
+ padding-left: 36px;
+ cursor: pointer;
+ vertical-align: middle;
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 26px;
+}
+.helium-radio + label:hover:before {
+ animation-duration: 0.4s;
+ animation-fill-mode: both;
+ animation-name: hover-color;
+}
+.helium-radio + label:before {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ display: inline-block;
+ width: 19px;
+ height: 19px;
+ content: '';
+ border: 1px solid #c0c0c0;
+}
+.helium-radio + label:after {
+ position: absolute;
+ display: none;
+ content: '';
+}
+
+.helium-radio[disabled] + label {
+ cursor: not-allowed;
+ color: #e4e4e4;
+}
+.helium-radio[disabled] + label:hover, .helium-radio[disabled] + label:before, .helium-radio[disabled] + label:after {
+ cursor: not-allowed;
+}
+.helium-radio[disabled] + label:hover:before {
+ border: 1px solid #e4e4e4;
+ animation-name: none;
+}
+.helium-radio[disabled] + label:before {
+ border-color: #e4e4e4;
+}
+
+.helium-radio:checked + label:before {
+ animation-name: none;
+}
+
+.helium-radio:checked + label:after {
+ display: block;
+}
+
+.helium-radio + label:before {
+ border-radius: 50%;
+}
+
+.helium-radio + label:after {
+ top: 11px;
+ left: 11px;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: #3e97eb;
+}
+
+.helium-radio:checked + label:before {
+ border: 1px solid #3e97eb;
+}
+
+.helium-radio:checked[disabled] + label:before {
+ border: 1px solid #c9e2f9;
+}
+
+.helium-radio:checked[disabled] + label:after {
+ background: #c9e2f9;
+}
+
/* Custom, iPhone Retina */
@media only screen and (max-width: 480px) {
.jumbotron h1 {
@@ -538,11 +682,52 @@ a.anchorjs-link:hover { text-decoration: none; }
@media only screen
and (min-width: 768px)
-and (max-width: 1024px) {
+and (max-width: 996px) {
.navbar-brand small {
display: none;
}
+ .navbar-collapse.collapse {
+ padding-right: 0;
+ }
+ .navbar-header {
+ float: none;
+ }
+ .navbar-toggle {
+ display: block;
+ }
+ .navbar-fixed-top {
+ top: 0;
+ border-width: 0 0 1px;
+ }
+ .navbar-collapse {
+ border-top: 1px solid transparent;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+ }
+ .navbar-collapse.collapse {
+ display: none!important;
+ }
+ .navbar-nav {
+ float: none!important;
+ margin-top: 7.5px;
+ }
+ .navbar-nav>li {
+ float: none;
+ }
+ .navbar-nav>li>a {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+ .collapse.in{
+ display:block !important;
+ }
+}
+@media only screen
+and (min-width: 768px)
+and (max-width: 1024px) {
+ .navbar-brand small {
+ display: none;
+ }
.navbar-collapse.collapse {
padding-right: 0;
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/23affbe9/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
new file mode 100644
index 0000000..1a96d40
--- /dev/null
+++ b/assets/themes/zeppelin/js/helium.controller.js
@@ -0,0 +1,42 @@
+angular.module("app", []).controller("HeliumPkgCtrl", function($scope, $window, $sce) {
+ $scope.HeliumPkgs = zeppelinHeliumPackages
+ $scope.npmWebLink = 'https://www.npmjs.com/package'
+ $scope.latestPkgInfo = {}
+
+ var pkgsInfo = $scope.HeliumPkgs
+ var latestPkgInfo = []
+
+ 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.numberOfPkgs = latestPkgInfo.length
+
+ $scope.showPkgsBasedOnType = function () {
+ var vizTypePkgs = []
+ var spellTypePkgs = []
+ for (var idx in latestPkgInfo) {
+ if (latestPkgInfo[idx].type == "VISUALIZATION") {
+ vizTypePkgs.push(latestPkgInfo[idx])
+ } else {
+ spellTypePkgs.push(latestPkgInfo[idx])
+ }
+ }
+
+ $scope.vizTypePkgs = vizTypePkgs
+ $scope.spellTypePkgs = spellTypePkgs
+ }
+
+ $scope.showPkgsBasedOnType()
+});
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/23affbe9/helium_packages.md
----------------------------------------------------------------------
diff --git a/helium_packages.md b/helium_packages.md
new file mode 100644
index 0000000..991b51c
--- /dev/null
+++ b/helium_packages.md
@@ -0,0 +1,126 @@
+---
+layout: page
+title: "Helium Visualization Packages"
+description: "A list of VISUALIZATION type of Helium packages published in npm registry: https://www.npmjs.com/"
+group:
+---
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+{% include JB/setup %}
+
+# 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 packge](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.
+<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>
+ </label>
+ </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>
+ <div class="row heliumPackageList"
+ ng-repeat="pkg in spellTypePkgs | orderBy: 'name'"
+ ng-show="content == 'spell'">
+ <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>
+ <div class="row heliumPackageList"
+ ng-repeat="pkg in vizTypePkgs | orderBy: 'name'"
+ ng-show="content == 'viz'">
+ <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>
+ </div>
+ </div>
+</div>