Skip to content

[ZEPPELIN-1002] Move configuration menus under dropdown #1013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
minahlee wants to merge 10 commits into from
Closed

[ZEPPELIN-1002] Move configuration menus under dropdown #1013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e9bc490
Move interpreter, credential, configuration to dropdown menu
minahlee Jun 15, 2016
4d1ce83
Fix integration test caused by interprter menu location change
minahlee Jun 15, 2016
dd857e5
Add separate setting menu
minahlee Jun 16, 2016
b557a07
Fix integration test after adding separate setting menu button
minahlee Jun 16, 2016
ba23c71
Remove fullUsername from dropdown menu and remove username truncate f…
minahlee Jun 17, 2016
92646c8
Update integration test
minahlee Jun 21, 2016
dcdf368
Change <button> to <span> of notebook action icons
minahlee Jun 22, 2016
5f90ca4
Take care of truncate user name with css
minahlee Jun 22, 2016
49b39c3
Update selenium test
minahlee Jun 22, 2016
b26511e
Show connected status as tooltip
minahlee Jun 23, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions zeppelin-server/src/test/java/org/apache/zeppelin/WebDriverManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,7 @@ public static WebDriver getWebDriver() {
(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();
}
});
Expand Down
4 changes: 2 additions & 2 deletions zeppelin-server/src/test/java/org/apache/zeppelin/integration/AuthenticationIT.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,8 +158,8 @@ public void testGroupPermission() throws Exception {

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)
Expand Down
5 changes: 4 additions & 1 deletion zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,9 @@ public void testSparkInterpreterDependencyLoading() throws Exception {
}
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
Expand Down Expand Up @@ -235,6 +237,7 @@ public void testSparkInterpreterDependencyLoading() throws Exception {
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(.,'" +
Expand Down
37 changes: 28 additions & 9 deletions zeppelin-web/src/app/home/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,10 +242,6 @@ a.navbar-brand:hover {
background: #080808;
}

.server-status {
float: right;
}

.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
background: #3071A9;
}
Expand All @@ -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 {
Expand Down
24 changes: 11 additions & 13 deletions zeppelin-web/src/app/notebook/notebook-actionBar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,26 +153,24 @@ <h3>
</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">
Expand Down
7 changes: 7 additions & 0 deletions zeppelin-web/src/app/notebook/notebook.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
25 changes: 0 additions & 25 deletions zeppelin-web/src/components/navbar/navbar.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,21 +63,13 @@ angular.module('zeppelinWebApp')
}, 500);
};


var vm = this;
vm.notes = notebookListDataFactory;
vm.connected = websocketMsgSrv.isConnected();
vm.websocketMsgSrv = websocketMsgSrv;
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) {
Expand All @@ -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();
});

Expand Down Expand Up @@ -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;
Expand All @@ -161,6 +137,5 @@ angular.module('zeppelinWebApp')

getZeppelinVersion();
vm.loadNotes();
$scope.checkUsername();

});
73 changes: 28 additions & 45 deletions zeppelin-web/src/components/navbar/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,24 +44,15 @@
<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"
Expand Down Expand Up @@ -89,43 +80,35 @@
</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>
Expand Down