You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mi...@apache.org on 2016/06/24 04:27:33 UTC
zeppelin git commit: [ZEPPELIN-1002] Move configuration menus under
dropdown
Repository: zeppelin
Updated Branches:
refs/heads/master 4efb39f45 -> 33fb93f81
[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 <mi...@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
Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/33fb93f8
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/33fb93f8
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/33fb93f8
Branch: refs/heads/master
Commit: 33fb93f810c1accb000ba25a56544fe5719c7211
Parents: 4efb39f
Author: Mina Lee <mi...@apache.org>
Authored: Thu Jun 23 09:29:47 2016 -0700
Committer: Mina Lee <mi...@apache.org>
Committed: Thu Jun 23 21:27:25 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/33fb93f8/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/33fb93f8/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/33fb93f8/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/33fb93f8/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/33fb93f8/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/33fb93f8/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/33fb93f8/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/33fb93f8/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>