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 <[email protected]> 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 <[email protected]> Authored: Thu Feb 2 22:31:29 2017 +0900 Committer: ahyoungryu <[email protected]> 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>
![https://cloud.githubusercontent.com/assets/10060731/22238412/85ce0ee2-e254-11e6-9fe0-e5089789e61f.png"](https://cloud.githubusercontent.com/assets/10060731/22238412/85ce0ee2-e254-11e6-9fe0-e5089789e61f.png"){kind=link}
