zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mina...@apache.org
Subject zeppelin git commit: [ZEPPELIN-1002] Move configuration menus under dropdown
Date Fri, 24 Jun 2016 04:27:48 GMT
Repository: zeppelin
Updated Branches:
  refs/heads/branch-0.6 1aeb01091 -> db6901cd5


[ZEPPELIN-1002] Move configuration menus under dropdown

## What is this PR for?
- Move configuration menus under dropdown menu
- Change dropdown menu style
- Change `Login` button style

### What type of PR is it?
Improvement

### Todos
- [x] Fix selenium test

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

### Screenshots (if appropriate)
#### As anonymous
Before
<img width="1280" alt="screen shot 2016-06-14 at 9 43 35 pm" src="https://cloud.githubusercontent.com/assets/8503346/16068223/19a73576-3279-11e6-81bd-04b4277ccc50.png">

After
<img width="1280" alt="screen shot 2016-06-16 at 10 15 21 am" src="https://cloud.githubusercontent.com/assets/8503346/16126059/57461b94-33ab-11e6-937e-b6195839c8fa.png">

#### With shiro authc
Before
<img width="1280" alt="screen shot 2016-06-16 at 10 18 45 am" src="https://cloud.githubusercontent.com/assets/8503346/16126145/c6a2f49e-33ab-11e6-83a8-3ee4bb62be56.png">
<img width="1280" alt="screen shot 2016-06-16 at 10 21 52 am" src="https://cloud.githubusercontent.com/assets/8503346/16126253/2d90387e-33ac-11e6-9fa4-93aac98c6a76.png">

After
<img width="1280" alt="screen shot 2016-06-16 at 10 17 46 am" src="https://cloud.githubusercontent.com/assets/8503346/16126120/ac8c5866-33ab-11e6-8e43-47a69b0587ef.png">
<img width="1280" alt="screen shot 2016-06-20 at 11 30 04 am" src="https://cloud.githubusercontent.com/assets/8503346/16205804/6afd3474-36da-11e6-8b2e-bd2b22a5c7c9.png">

<img width="1280" alt="screen shot 2016-06-16 at 10 20 15 am" src="https://cloud.githubusercontent.com/assets/8503346/16126258/34bec64c-33ac-11e6-8392-c16c3380bac0.png">

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

Author: Mina Lee <minalee@apache.org>

Closes #1013 from minahlee/ZEPPELIN-1002 and squashes the following commits:

b26511e [Mina Lee] Show connected status as tooltip Merge two dropdown menu to one Show anonymous
as username when shiro set to anonymous mode
49b39c3 [Mina Lee] Update selenium test
5f90ca4 [Mina Lee] Take care of truncate user name with css
dcdf368 [Mina Lee] Change <button> to <span> of notebook action icons
92646c8 [Mina Lee] Update integration test
ba23c71 [Mina Lee] Remove fullUsername from dropdown menu and remove username truncate function
from javascript
b557a07 [Mina Lee] Fix integration test after adding separate setting menu button
dd857e5 [Mina Lee] Add separate setting menu
4d1ce83 [Mina Lee] Fix integration test caused by interprter menu location change
e9bc490 [Mina Lee] Move interpreter, credential, configuration to dropdown menu

(cherry picked from commit 33fb93f810c1accb000ba25a56544fe5719c7211)
Signed-off-by: Mina Lee <minalee@apache.org>


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

Branch: refs/heads/branch-0.6
Commit: db6901cd572cb21332bd272b0590146192539d1c
Parents: 1aeb010
Author: Mina Lee <minalee@apache.org>
Authored: Thu Jun 23 09:29:47 2016 -0700
Committer: Mina Lee <minalee@apache.org>
Committed: Thu Jun 23 21:27:38 2016 -0700

----------------------------------------------------------------------
 .../org/apache/zeppelin/WebDriverManager.java   |  3 +-
 .../zeppelin/integration/AuthenticationIT.java  |  4 +-
 .../apache/zeppelin/integration/ZeppelinIT.java |  5 +-
 zeppelin-web/src/app/home/home.css              | 37 +++++++---
 .../src/app/notebook/notebook-actionBar.html    | 24 +++----
 zeppelin-web/src/app/notebook/notebook.css      |  7 ++
 .../src/components/navbar/navbar.controller.js  | 25 -------
 zeppelin-web/src/components/navbar/navbar.html  | 73 ++++++++------------
 8 files changed, 81 insertions(+), 97 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/db6901cd/zeppelin-server/src/test/java/org/apache/zeppelin/WebDriverManager.java
----------------------------------------------------------------------
diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/WebDriverManager.java b/zeppelin-server/src/test/java/org/apache/zeppelin/WebDriverManager.java
index 49d6f1e..2d12c31 100644
--- a/zeppelin-server/src/test/java/org/apache/zeppelin/WebDriverManager.java
+++ b/zeppelin-server/src/test/java/org/apache/zeppelin/WebDriverManager.java
@@ -125,8 +125,7 @@ public class WebDriverManager {
         (new WebDriverWait(driver, 5)).until(new ExpectedCondition<Boolean>() {
           @Override
           public Boolean apply(WebDriver d) {
-            return d.findElement(By.xpath(
-                "//div[contains(@class, 'navbar-collapse')]//li//a[contains(.,'Connected')]"))
+            return d.findElement(By.xpath("//i[@tooltip='WebSocket Connected']"))
                 .isDisplayed();
           }
         });

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/db6901cd/zeppelin-server/src/test/java/org/apache/zeppelin/integration/AuthenticationIT.java
----------------------------------------------------------------------
diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/AuthenticationIT.java
b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/AuthenticationIT.java
index 3b1088e..dd11a54 100644
--- a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/AuthenticationIT.java
+++ b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/AuthenticationIT.java
@@ -158,8 +158,8 @@ public class AuthenticationIT extends AbstractZeppelinIT {
 
       String noteId = driver.getCurrentUrl().substring(driver.getCurrentUrl().lastIndexOf("/")
+ 1);
 
-      pollingWait(By.xpath("//button[@tooltip='Note permissions']"),
-          MAX_BROWSER_TIMEOUT_SEC).sendKeys(Keys.ENTER);
+      pollingWait(By.xpath("//span[@tooltip='Note permissions']"),
+          MAX_BROWSER_TIMEOUT_SEC).click();
       pollingWait(By.xpath("//input[@ng-model='permissions.owners']"), MAX_BROWSER_TIMEOUT_SEC)
           .sendKeys("finance");
       pollingWait(By.xpath("//input[@ng-model='permissions.readers']"), MAX_BROWSER_TIMEOUT_SEC)

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/db6901cd/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java
----------------------------------------------------------------------
diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java
b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java
index b3bb99f..c3d3566 100644
--- a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java
+++ b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java
@@ -196,7 +196,9 @@ public class ZeppelinIT extends AbstractZeppelinIT {
     }
     try {
       // navigate to interpreter page
-      WebElement interpreterLink = driver.findElement(By.xpath("//a[contains(.,'Interpreter')]"));
+      WebElement settingButton = driver.findElement(By.xpath("//button[@class='nav-btn dropdown-toggle
ng-scope']"));
+      settingButton.click();
+      WebElement interpreterLink = driver.findElement(By.xpath("//a[@href='#/interpreter']"));
       interpreterLink.click();
 
       // add new dependency to spark interpreter
@@ -235,6 +237,7 @@ public class ZeppelinIT extends AbstractZeppelinIT {
       sleep(1000, false);
 
       // reset dependency
+      settingButton.click();
       interpreterLink.click();
       driver.findElement(By.xpath("//div[@id='spark']//button[contains(.,'edit')]")).sendKeys(Keys.ENTER);
       WebElement testDepRemoveBtn = pollingWait(By.xpath("//tr[descendant::text()[contains(.,'"
+

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/db6901cd/zeppelin-web/src/app/home/home.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
index 02b4d04..75f2521 100644
--- a/zeppelin-web/src/app/home/home.css
+++ b/zeppelin-web/src/app/home/home.css
@@ -242,10 +242,6 @@ a.navbar-brand:hover {
     background: #080808;
   }
 
-  .server-status {
-    float: right;
-  }
-
   .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
     background: #3071A9;
   }
@@ -272,20 +268,43 @@ a.navbar-brand:hover {
   }
 }
 
-i.server-status {
-  font-size: 12px;
-  top: -2px;
-  position: relative;
+.nav-component {
+  margin-top: 8px;
+}
+
+.nav-btn {
+  color: #fff;
+  background-color: transparent;
+  border-color: transparent;
+  font-size: 14px;
+}
+
+.nav-login-btn,
+.nav-login-btn:hover,
+.nav-login-btn:focus {
+  color: #fff;
+  background-color: #428bca;
+  border-color: #357ebd;
+}
+
+.username {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+  display: inline-block;
 }
 
 .server-connected {
+  padding-top: 12px;
   color: #00CC00;
+  font-size: 12px !important;
 }
 
 .server-disconnected {
+  padding-top: 12px;
   color: rgba(240, 48, 0, 1);
   font-size: 12px !important;
-  font-weight: bold !important;
 }
 
 .box {

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/db6901cd/zeppelin-web/src/app/notebook/notebook-actionBar.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/notebook-actionBar.html b/zeppelin-web/src/app/notebook/notebook-actionBar.html
index 0466c31..16cb71a 100644
--- a/zeppelin-web/src/app/notebook/notebook-actionBar.html
+++ b/zeppelin-web/src/app/notebook/notebook-actionBar.html
@@ -153,26 +153,24 @@ limitations under the License.
     </span>
 
     <div class="pull-right" style="margin-top:15px; margin-right:15px; font-size:15px;">
-      <span>
-        <button type="button"
-            class="btn btn-default btn-xs"
+      <span class="setting-btn"
+            type="button"
             data-toggle="modal"
             data-target="#shortcutModal"
             tooltip-placement="bottom" tooltip="List of shortcut">
-          <i class="fa fa-keyboard-o"></i>
-        </button>
-        <button type="button"
-            class="btn btn-default btn-xs"
+        <i class="fa fa-keyboard-o"></i>
+      </span>
+      <span class="setting-btn"
+            type="button"
             ng-click="toggleSetting()"
             tooltip-placement="bottom" tooltip="Interpreter binding">
-          <i class="fa fa-cog" ng-style="{color: showSetting ? '#3071A9' : 'black' }"></i>
-        </button>
-        <button type="button"
-            class="btn btn-default btn-xs"
+        <i class="fa fa-cog" ng-style="{color: showSetting ? '#3071A9' : 'black' }"></i>
+      </span>
+      <span class="setting-btn"
+            type="button"
             ng-click="togglePermissions()"
             tooltip-placement="bottom" tooltip="Note permissions">
-          <i class="fa fa-lock" ng-style="{color: showPermissions ? '#3071A9' : 'black'
}"></i>
-        </button>
+        <i class="fa fa-lock" ng-style="{color: showPermissions ? '#3071A9' : 'black'
}"></i>
       </span>
 
       <span class="btn-group">

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/db6901cd/zeppelin-web/src/app/notebook/notebook.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 6c9a190..c86eb9d 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -223,6 +223,13 @@
   padding-left: 5px;
 }
 
+.setting-btn {
+  position: relative;
+  top: 2px;
+  margin-right: 4px;
+  cursor: pointer;
+}
+
 .cron-preset-container {
   padding: 10px 20px 0 20px;
   font-weight: normal;

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/db6901cd/zeppelin-web/src/components/navbar/navbar.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/navbar/navbar.controller.js b/zeppelin-web/src/components/navbar/navbar.controller.js
index e2f40c8..cb1d91c 100644
--- a/zeppelin-web/src/components/navbar/navbar.controller.js
+++ b/zeppelin-web/src/components/navbar/navbar.controller.js
@@ -63,7 +63,6 @@ angular.module('zeppelinWebApp')
     }, 500);
   };
 
-
   var vm = this;
   vm.notes = notebookListDataFactory;
   vm.connected = websocketMsgSrv.isConnected();
@@ -71,13 +70,6 @@ angular.module('zeppelinWebApp')
   vm.arrayOrderingSrv = arrayOrderingSrv;
   $scope.searchForm = searchService;
 
-  if ($rootScope.ticket) {
-    $rootScope.fullUsername = $rootScope.ticket.principal;
-    $rootScope.truncatedUsername = $rootScope.ticket.principal;
-  }
-
-  var MAX_USERNAME_LENGTH=16;
-
   angular.element('#notebook-list').perfectScrollbar({suppressScrollX: true});
 
   $scope.$on('setNoteMenu', function(event, notes) {
@@ -88,22 +80,7 @@ angular.module('zeppelinWebApp')
     vm.connected = param;
   });
 
-  $scope.checkUsername = function () {
-    if ($rootScope.ticket) {
-      if ($rootScope.ticket.principal.length <= MAX_USERNAME_LENGTH) {
-        $rootScope.truncatedUsername = $rootScope.ticket.principal;
-      }
-      else {
-        $rootScope.truncatedUsername = $rootScope.ticket.principal.substr(0, MAX_USERNAME_LENGTH)
+ '..';
-      }
-    }
-    if (_.isEmpty($rootScope.truncatedUsername)) {
-      $rootScope.truncatedUsername = 'Connected';
-    }
-  };
-
   $scope.$on('loginSuccess', function(event, param) {
-    $scope.checkUsername();
     loadNotes();
   });
 
@@ -146,7 +123,6 @@ angular.module('zeppelinWebApp')
   };
 
   function getZeppelinVersion() {
-    console.log('version');
     $http.get(baseUrlSrv.getRestApiBase() + '/version').success(
       function(data, status, headers, config) {
         $rootScope.zeppelinVersion = data.body;
@@ -161,6 +137,5 @@ angular.module('zeppelinWebApp')
 
   getZeppelinVersion();
   vm.loadNotes();
-  $scope.checkUsername();
 
 });

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/db6901cd/zeppelin-web/src/components/navbar/navbar.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
index 5e7de3b..9ba2cb1 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -44,24 +44,15 @@ limitations under the License.
             <li class="divider"></li>
             <div id="notebook-list" class="scrollbar-container">
               <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
-              <li ng-repeat="note in navbar.notes.root.children |notebookFilter:query
track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'"></li>
+              <li ng-repeat="note in navbar.notes.root.children |notebookFilter:query
track by $index"
+                  ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'"></li>
             </div>
           </ul>
         </li>
-        <li>
-          <a href="#/interpreter">Interpreter</a>
-        </li>
-        <li>
-          <a href="#/credential">Credential</a>
-        </li>
-        <li>
-          <a href="#/configuration">Configuration</a>
-        </li>
       </ul>
 
-
       <ul class="nav navbar-nav navbar-right" style="margin-right:5px;">
-        <li ng-if="ticket" style="margin-top:10px;">
+        <li class="nav-component" ng-if="ticket">
         <!--TODO(bzz): move to Typeahead https://angular-ui.github.io/bootstrap  -->
 
           <form role="search" data-ng-model="searchForm"
@@ -89,43 +80,35 @@ limitations under the License.
               </span>
             </div>
           </form>
+        <li class="nav-component">
+          <i ng-if="navbar.connected" class="fa fa-circle server-connected"
+             tooltip="WebSocket Connected" tooltip-placement="bottom"></i>
+          <i ng-if="!navbar.connected" class="fa fa-circle server-disconnected"
+             tooltip="WebSocket Disconnected" tooltip-placement="bottom"></i>
         </li>
-        <li class="dropdown " dropdown="">
-          <a class="dropdown-toggle" type="button" data-toggle="dropdown" href="#"
-             ng-show="navbar.connected" ng-if="ticket.principal == 'anonymous' ">
-            <i class="fa fa-circle server-status"
-               ng-class="{'server-connected':navbar.connected, 'server-disconnected':!navbar.connected}"></i>
-            Connected
-            <span class="caret"></span>
-          </a>
-          <a class="dropdown-toggle" type="button" data-toggle="dropdown" href="#"
-             ng-show="navbar.connected" ng-if="ticket.principal != 'anonymous' "
-             tooltip-placement="bottom" tooltip="{{fullUsername}}">
-            <i class="fa fa-circle server-status"
-               ng-class="{'server-connected':navbar.connected, 'server-disconnected':!navbar.connected}"></i>
-            {{truncatedUsername}}
-            <span class="caret"></span></a>
-          <a class="dropdown-toggle" type="button" data-toggle="dropdown" href="#"
-             ng-show="!navbar.connected">
-            <i class="fa fa-circle server-status"
-               ng-class="{'server-connected':navbar.connected, 'server-disconnected':!navbar.connected}"></i>
-            Disconnected
-            <span class="caret"></span></a>
-
-          <ul class="dropdown-menu">
-            <li><a href="" data-toggle="modal" data-target="#aboutModal">
-              <i style="font-size: 15px;" class="fa fa-info"></i> About</a></li>
-            <li ng-show="ticket.principal && ticket.principal!='anonymous'" style="left:
5px;">
-              <a ng-click="logout()">Logout</a>
-            </li>
-          </ul>
+        <li>
+          <div class="dropdown">
+            <button ng-if="ticket" class="nav-btn dropdown-toggle" type="button" data-toggle="dropdown"
style="margin:11px 5px 0 0;">
+              <span class="username">{{ticket.principal}}</span>
+              <span class="caret" style="margin-bottom: 8px"></span>
+            </button>
+            <span ng-if="!ticket" style="margin: 5px;"></span>
+            <ul class="dropdown-menu">
+              <li><a href="" data-toggle="modal" data-target="#aboutModal">About
Zeppelin</a>
+              <li role="separator" style="margin: 5px 0;" class="divider"></li>
+              <li><a href="#/interpreter">Interpreter</a></li>
+              <li><a href="#/credential">Credential</a></li>
+              <li><a href="#/configuration">Configuration</a></li>
+              <li ng-if="ticket.principal && ticket.principal !== 'anonymous'"
role="separator" style="margin: 5px 0;" class="divider"></li>
+              <li ng-if="ticket.principal && ticket.principal !== 'anonymous'"><a
ng-click="logout()">Logout</a></li>
+            </ul>
+          </div>
         </li>
-        <li ng-if="!ticket">
-          <button class="btn btn-default" data-toggle="modal" data-target="#loginModal"
-                  ng-click="showLoginWindow()" style="margin-top: 8px">Login
+        <li class="nav-component" ng-if="!ticket">
+          <button class="btn nav-login-btn" data-toggle="modal" data-target="#loginModal"
+                  ng-click="showLoginWindow()">Login
           </button>
         </li>
-
       </ul>
     </div>
   </div>


Mime
View raw message