zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ahyoung...@apache.org
Subject zeppelin git commit: [ZEPELIN-2209] Add pagination to Helium menu
Date Fri, 31 Mar 2017 01:53:37 GMT
Repository: zeppelin
Updated Branches:
  refs/heads/master 4a466d060 -> 8d18703e3


[ZEPELIN-2209] Add pagination to Helium menu

### What is this PR for?
Like I did in #2126, added pagination to Helium menu in Zeppelin.
10 pkgs will be shown per 1 page.

### What type of PR is it?
Improvement

### What is the Jira issue?
[ZEPPELIN-2209](https://issues.apache.org/jira/browse/ZEPPELIN-2209)

### How should this be tested?
1. Replace temporarily [ZeppelinConfiguration.java#L46](https://github.com/apache/zeppelin/blob/master/zeppelin-zengine/src/main/java/org/apache/zeppelin/conf/ZeppelinConfiguration.java#L46)
with [this url](https://raw.githubusercontent.com/AhyoungRyu/spark-notebook-example/master/helium.json)

2. Build \w below command and restart Zeppelin server
```
 $ mvn clean package -DskipTests -pl 'zeppelin-zengine, zeppelin-server, zeppelin-interpreter'
```

3. Start web dev server under `ZEPPELIN_HOME/zeppelin-web` and browse `localhost:9000`
```
$ yarn run dev
```

4. Go to Helium menu -> Click `INTERPRETER` btn
(Currently the other types of pkg are registered in online registry less than 10. That's why
I request to change online registry URI in step 1)
5. Check the pagination works well or not

### Screenshots (if appropriate)
![record](https://cloud.githubusercontent.com/assets/10060731/24182469/58ec965e-0f05-11e7-8cf9-eca7d36c0106.gif)

### Questions:
* Does the licenses files need update? no
* Is there breaking changes for older versions? no
* Does this needs documentation? no

Author: AhyoungRyu <fbdkdud93@hanmail.net>

Closes #2174 from AhyoungRyu/add/paginationToHeliumMenu and squashes the following commits:

ceab2c5 [AhyoungRyu] hide arrows when current page is on first & last
7150e7c [AhyoungRyu] Resolve confilct manually
5b7958f [AhyoungRyu] Fix pkg orderBy published
5a7674a [AhyoungRyu] Add pagination to Helium menu


Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/8d18703e
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/8d18703e
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/8d18703e

Branch: refs/heads/master
Commit: 8d18703e3b76b2c8d2d0cf6efab7644940849e7e
Parents: 4a466d0
Author: AhyoungRyu <fbdkdud93@hanmail.net>
Authored: Thu Mar 30 00:14:28 2017 +0900
Committer: ahyoungryu <ahyoungryu@apache.org>
Committed: Fri Mar 31 10:53:29 2017 +0900

----------------------------------------------------------------------
 .../src/app/helium/helium.controller.js         |  62 ++++--
 zeppelin-web/src/app/helium/helium.css          |  24 ++
 zeppelin-web/src/app/helium/helium.html         | 222 ++++++++++---------
 3 files changed, 184 insertions(+), 124 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/8d18703e/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 0565ec1..615f811 100644
--- a/zeppelin-web/src/app/helium/helium.controller.js
+++ b/zeppelin-web/src/app/helium/helium.controller.js
@@ -37,9 +37,15 @@ export default function HeliumCtrl($scope, $rootScope, $sce,
     // get all package info and set config
     heliumService.getAllPackageInfoAndDefaultPackages()
       .then(({ pkgSearchResults, defaultPackages }) => {
+        // pagination
+        $scope.itemsPerPage = 10;
+        $scope.currentPage = 1;
+        $scope.maxSize = 5;
+        
         $scope.pkgSearchResults = pkgSearchResults;
         $scope.defaultPackages = defaultPackages;
-        classifyPkgType($scope.defaultPackages)
+        classifyPkgType($scope.defaultPackages);
+        
         return heliumService.getAllPackageConfigs()
       })
       .then(defaultPackageConfigs => {
@@ -52,38 +58,58 @@ export default function HeliumCtrl($scope, $rootScope, $sce,
         $scope.bundleOrder = visPackageOrder;
         $scope.bundleOrderChanged = false;
       });
-  }
+  };
+
+  var orderPackageByPubDate = function(a, b) {
+    if (!a.pkg.published) {
+      // Because local registry pkgs don't have 'published' field, put current time instead
to show them first
+      a.pkg.published = new Date().getTime()
+    }
 
-  var classifyPkgType = function(packageInfos) {
-    var vizTypePkg = {}
-    var spellTypePkg = {}
-    var intpTypePkg = {}
-    var appTypePkg = {}
+    return new Date(a.pkg.published).getTime() - new Date(b.pkg.published).getTime();
+  };
+
+  var classifyPkgType = function(packageInfo) {
+    var allTypesOfPkg = {};
+    var vizTypePkg = [];
+    var spellTypePkg = [];
+    var intpTypePkg = [];
+    var appTypePkg = [];
 
-    for (var name in packageInfos) {
-      var pkgs = packageInfos[name]
-      var pkgType = pkgs.pkg.type
+    var packageInfoArr = Object.keys(packageInfo).map(key => packageInfo[key])
+    packageInfoArr = packageInfoArr.sort(orderPackageByPubDate).reverse();
+
+    for (var name in packageInfoArr) {
+      var pkgs = packageInfoArr[name];
+      var pkgType = pkgs.pkg.type;
 
       switch (pkgType) {
         case HeliumType.VISUALIZATION:
-          vizTypePkg[name] = pkgs;
+          vizTypePkg.push(pkgs);
           break;
         case HeliumType.SPELL:
-          spellTypePkg[name] = pkgs;
+          spellTypePkg.push(pkgs);
           break;
         case HeliumType.INTERPRETER:
-          intpTypePkg[name] = pkgs;
+          intpTypePkg.push(pkgs);
           break;
         case HeliumType.APPLICATION:
-          appTypePkg[name] = pkgs;
+          appTypePkg.push(pkgs);
           break;
       }
     }
 
-    $scope.vizTypePkg = vizTypePkg
-    $scope.spellTypePkg = spellTypePkg
-    $scope.appTypePkg = appTypePkg
-    $scope.intpTypePkg = intpTypePkg
+    var pkgsArr = [
+      vizTypePkg,
+      spellTypePkg,
+      intpTypePkg,
+      appTypePkg
+    ]
+    for (var idx in _.keys(HeliumType)) {
+      allTypesOfPkg[_.keys(HeliumType)[idx]] = pkgsArr[idx];
+    }
+  
+    $scope.allTypesOfPkg = allTypesOfPkg;
   };
 
   $scope.bundleOrderListeners = {

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/8d18703e/zeppelin-web/src/app/helium/helium.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/helium/helium.css b/zeppelin-web/src/app/helium/helium.css
index 2e64df3..f44258c 100644
--- a/zeppelin-web/src/app/helium/helium.css
+++ b/zeppelin-web/src/app/helium/helium.css
@@ -201,3 +201,27 @@
 .heliumConfigValueText {
   vertical-align: top;
 }
+
+
+/* hide arrows when current page is on first & last */
+.hide-first-boundaries.pagination > .disabled > a,
+.hide-first-boundaries.pagination > li:first-child > a,
+.hide-first-boundaries.pagination > li:first-child > span {
+  display: none;
+}
+
+.hide-first-boundaries.pagination > .active > a {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.hide-last-boundaries.pagination > .disabled > a,
+.hide-last-boundaries.pagination > li:last-child > a,
+.hide-last-boundaries.pagination > li:last-child > span {
+  display: none;
+}
+
+.hide-last-boundaries.pagination > .active > a {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/8d18703e/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 8c2fe92..b960fe8 100644
--- a/zeppelin-web/src/app/helium/helium.html
+++ b/zeppelin-web/src/app/helium/helium.html
@@ -76,120 +76,130 @@ limitations under the License.
       <em>Currently there is no available package to be listed</em>
     </div>
   </div>
-  <div class="row heliumPackageList"
-       ng-repeat="pkgSearchResult in defaultPackages | toArray:false | orderBy: 'pkg.published':true"
-       ng-show="$parent.pkgListByType === pkgSearchResult.pkg.type">
-    <div class="col-md-12">
-      <div class="heliumPackageHead">
-        <div class="heliumPackageIcon"
-             ng-if="pkgSearchResult.pkg.type !== 'INTERPRETER'"
-             ng-bind-html=pkgSearchResult.pkg.icon></div>
-        <div class="heliumPackageIcon"
-             ng-if="pkgSearchResult.pkg.type === 'INTERPRETER'"
-             ng-bind-html=intpDefaultIcon></div>
-        <div class="heliumPackageName">
-          <span ng-if="hasNpmLink(pkgSearchResult)">
-            <a target="_blank" href="https://www.npmjs.com/package/{{pkgSearchResult.pkg.name}}">{{pkgSearchResult.pkg.name}}</a>
-          </span>
-          <span ng-if="!hasNpmLink(pkgSearchResult) && !hasMavenLink(pkgSearchResult)"
ng-class="{'heliumLocalPackage': isLocalPackage(pkgSearchResult)}">
-            {{pkgSearchResult.pkg.name}}
+  <div ng-repeat="(types, defaultPackages) in allTypesOfPkg">
+    <div class="row heliumPackageList"
+         ng-repeat="pkgSearchResult in defaultPackages.slice(((currentPage-1)*itemsPerPage),
((currentPage)*itemsPerPage))"
+         ng-show="$parent.pkgListByType === pkgSearchResult.pkg.type">
+      <div class="col-md-12">
+        <div class="heliumPackageHead">
+          <div class="heliumPackageIcon"
+               ng-if="pkgSearchResult.pkg.type !== 'INTERPRETER'"
+               ng-bind-html=pkgSearchResult.pkg.icon></div>
+          <div class="heliumPackageIcon"
+               ng-if="pkgSearchResult.pkg.type === 'INTERPRETER'"
+               ng-bind-html=intpDefaultIcon></div>
+          <div class="heliumPackageName">
+            <span ng-if="hasNpmLink(pkgSearchResult)">
+              <a target="_blank" href="https://www.npmjs.com/package/{{pkgSearchResult.pkg.name}}">{{pkgSearchResult.pkg.name}}</a>
+            </span>
+            <span ng-if="!hasNpmLink(pkgSearchResult) && !hasMavenLink(pkgSearchResult)"
ng-class="{'heliumLocalPackage': isLocalPackage(pkgSearchResult)}">
+              {{pkgSearchResult.pkg.name}}
+            </span>
+            <span ng-if="hasMavenLink(pkgSearchResult)">
+              <a target="_blank"
+                 href="http://search.maven.org/#search%7Cga%7C1%7Ca%3A%22{{pkgSearchResult.pkg.artifact.split('@')[0]}}%22%20AND%20v%3A%22{{pkgSearchResult.pkg.artifact.split('@')[1]}}%22">
+                 {{pkgSearchResult.pkg.name}}
+              </a>
+            </span>
+            <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, 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, pkgSearchResult.pkg.artifact)"
+               ng-if="pkgSearchResult.pkg.type !== 'INTERPRETER'"
+               class="btn btn-info btn-xs"
+               style="float:right">Disable</div>
+          <div ng-show="configExists(pkgSearchResult)"
+               ng-click="toggleConfigButton(pkgSearchResult)"
+               ng-class="getConfigButtonClass(pkgSearchResult)"
+               class="btn btn-default btn-xs spellConfigButton"
+               style="float:right; margin-right:5px;">Config</div>
+        </div>
+        <div ng-class="{heliumPackageDisabledArtifact: !pkgSearchResult.enabled, heliumPackageEnabledArtifact:
pkgSearchResult.enabled}">
+          {{pkgSearchResult.pkg.artifact}}
+          <span ng-show="pkgSearchResults[pkgSearchResult.pkg.name].length > 0"
+                ng-click="toggleVersions(pkgSearchResult.pkg.name)">
+            versions
           </span>
-          <span ng-if="hasMavenLink(pkgSearchResult)">
+        </div>
+        <ul class="heliumPackageVersions"
+            ng-show="showVersions[pkgSearchResult.pkg.name]">
+          <li class="heliumPackageDisabledArtifact"
+              ng-repeat="pkgSearchResult in pkgSearchResults[pkgSearchResult.pkg.name]">
+            {{pkgSearchResult.pkg.artifact}} -
+            <span ng-click="enable(pkgSearchResult.pkg.name, pkgSearchResult.pkg.artifact,
pkgSearchResult.pkg.type, pkgSearchResult.pkg.groupId)"
+                  ng-if="pkgSearchResult.pkg.type !== 'INTERPRETER'"
+                  style="margin-left:3px;cursor:pointer;text-decoration: underline;color:#3071a9">
+              enable
+            </span>
             <a target="_blank"
+               ng-if="pkgSearchResult.pkg.type === 'INTERPRETER'"
+               style="margin-left:3px;cursor:pointer;text-decoration: underline;color:#3071a9"
                href="http://search.maven.org/#search%7Cga%7C1%7Ca%3A%22{{pkgSearchResult.pkg.artifact.split('@')[0]}}%22%20AND%20v%3A%22{{pkgSearchResult.pkg.artifact.split('@')[1]}}%22">
-               {{pkgSearchResult.pkg.name}}
+              see more
             </a>
-          </span>
-          <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, 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, pkgSearchResult.pkg.artifact)"
-             ng-if="pkgSearchResult.pkg.type !== 'INTERPRETER'"
-             class="btn btn-info btn-xs"
-             style="float:right">Disable</div>
-        <div ng-show="configExists(pkgSearchResult)"
-             ng-click="toggleConfigButton(pkgSearchResult)"
-             ng-class="getConfigButtonClass(pkgSearchResult)"
-             class="btn btn-default btn-xs spellConfigButton"
-             style="float:right; margin-right:5px;">Config</div>
-      </div>
-      <div ng-class="{heliumPackageDisabledArtifact: !pkgSearchResult.enabled, heliumPackageEnabledArtifact:
pkgSearchResult.enabled}">
-        {{pkgSearchResult.pkg.artifact}}
-        <span ng-show="pkgSearchResults[pkgSearchResult.pkg.name].length > 0"
-              ng-click="toggleVersions(pkgSearchResult.pkg.name)">
-          versions
-        </span>
-      </div>
-      <ul class="heliumPackageVersions"
-          ng-show="showVersions[pkgSearchResult.pkg.name]">
-        <li class="heliumPackageDisabledArtifact"
-            ng-repeat="pkgSearchResult in pkgSearchResults[pkgSearchResult.pkg.name]">
-          {{pkgSearchResult.pkg.artifact}} -
-          <span ng-click="enable(pkgSearchResult.pkg.name, pkgSearchResult.pkg.artifact,
pkgSearchResult.pkg.type, pkgSearchResult.pkg.groupId)"
-                ng-if="pkgSearchResult.pkg.type !== 'INTERPRETER'"
-                style="margin-left:3px;cursor:pointer;text-decoration: underline;color:#3071a9">
-            enable
-          </span>
-          <a target="_blank"
-             ng-if="pkgSearchResult.pkg.type === 'INTERPRETER'"
-             style="margin-left:3px;cursor:pointer;text-decoration: underline;color:#3071a9"
-             href="http://search.maven.org/#search%7Cga%7C1%7Ca%3A%22{{pkgSearchResult.pkg.artifact.split('@')[0]}}%22%20AND%20v%3A%22{{pkgSearchResult.pkg.artifact.split('@')[1]}}%22">
-            see more
-          </a>
-        </li>
-      </ul>
-      <div class="heliumPackageDescription" ng-bind-html="getDescriptionText(pkgSearchResult)"
/>
-      <div ng-if="pkgSearchResult.pkg.type === 'SPELL' && pkgSearchResult.pkg.spell"
-           class="spellInfo">
-        <div>
-          <span class="spellInfoDesc">MAGIC</span>
-          <span class="spellInfoValue">{{pkgSearchResult.pkg.spell.magic}} </span>
-        </div>
-        <div>
-          <span class="spellInfoDesc">USAGE</span>
-          <pre class="spellUsage">{{pkgSearchResult.pkg.spell.usage}} </pre>
+          </li>
+        </ul>
+        <div class="heliumPackageDescription" ng-bind-html="getDescriptionText(pkgSearchResult)"
/>
+        <div ng-if="pkgSearchResult.pkg.type === 'SPELL' && pkgSearchResult.pkg.spell"
+             class="spellInfo">
+          <div>
+            <span class="spellInfoDesc">MAGIC</span>
+            <span class="spellInfoValue">{{pkgSearchResult.pkg.spell.magic}} </span>
+          </div>
+          <div>
+            <span class="spellInfoDesc">USAGE</span>
+            <pre class="spellUsage">{{pkgSearchResult.pkg.spell.usage}} </pre>
+          </div>
         </div>
-      </div>
 
-      <!--start: config-->
-      <div class="heliumConfig" ng-if="configOpened(pkgSearchResult)">
-        <h5>Configuration</h5>
-        <table class="heliumConfigTable table table-striped">
-          <tr>
-            <th>Name</th>
-            <th>Type</th>
-            <th>Description</th>
-            <th>Value</th>
-          </tr>
-          <tr>
-          </tr>
-          <tr data-ng-repeat="cfg in defaultPackageConfigs[pkgSearchResult.pkg.name]">
-            <td style="vertical-align: middle;">{{cfg.name}}</td>
-            <td style="vertical-align: middle;">{{cfg.type}}</td>
-            <td style="vertical-align: middle;">{{cfg.description}}</td>
-            <td>
-              <div class="input-group">
-                <input type="text" class="form-control" style="border-radius: 5px;"
-                       data-ng-model="cfg.value" placeholder="{{cfg.defaultValue}}" />
-              </div>
-            </td>
-          </tr>
-        </table>
+        <!--start: config-->
+        <div class="heliumConfig" ng-if="configOpened(pkgSearchResult)">
+          <h5>Configuration</h5>
+          <table class="heliumConfigTable table table-striped">
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Description</th>
+              <th>Value</th>
+            </tr>
+            <tr>
+            </tr>
+            <tr data-ng-repeat="cfg in defaultPackageConfigs[pkgSearchResult.pkg.name]">
+              <td style="vertical-align: middle;">{{cfg.name}}</td>
+              <td style="vertical-align: middle;">{{cfg.type}}</td>
+              <td style="vertical-align: middle;">{{cfg.description}}</td>
+              <td>
+                <div class="input-group">
+                  <input type="text" class="form-control" style="border-radius: 5px;"
+                         data-ng-model="cfg.value" placeholder="{{cfg.defaultValue}}" />
+                </div>
+              </td>
+            </tr>
+          </table>
 
-        <div>
-          <button class="btn btn-primary"
-                  ng-click="saveConfig(pkgSearchResult)">Save</button>
-          <button class="btn btn-default"
-                  ng-click="toggleConfigButton(pkgSearchResult)">Close</button>
+          <div>
+            <button class="btn btn-primary"
+                    ng-click="saveConfig(pkgSearchResult)">Save</button>
+            <button class="btn btn-default"
+                    ng-click="toggleConfigButton(pkgSearchResult)">Close</button>
+          </div>
         </div>
-      </div>
-      <!--end: config-->
+        <!--end: config-->
 
+      </div>
+    </div>
+    <div class="text-center" style="margin-top: 20px;" ng-if="getPackageSize(defaultPackages,
pkgListByType) !== 0">
+      <pagination boundary-links="true" total-items="defaultPackages.length"
+                  ng-model="$parent.currentPage" class="pagination-sm"
+                  ng-show="$parent.pkgListByType === types"
+                  max-size="maxSize"
+                  items-per-page="itemsPerPage"
+                  ng-class="{'hide-first-boundaries': $parent.currentPage == 1, 'hide-last-boundaries':
$parent.currentPage >= defaultPackages.length/itemsPerPage}"
+                  previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;"
last-text="&raquo;"></pagination>
     </div>
-
   </div>
-</div>
+</div>
\ No newline at end of file


Mime
View raw message