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 <[email protected]> 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 <[email protected]> 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 <[email protected]> Authored: Thu Jun 23 09:29:47 2016 -0700 Committer: Mina Lee <[email protected]> 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>
![https://cloud.githubusercontent.com/assets/8503346/16068223/19a73576-3279-11e6-81bd-04b4277ccc50.png"](https://cloud.githubusercontent.com/assets/8503346/16068223/19a73576-3279-11e6-81bd-04b4277ccc50.png"){kind=link}
![https://cloud.githubusercontent.com/assets/8503346/16126059/57461b94-33ab-11e6-937e-b6195839c8fa.png"](https://cloud.githubusercontent.com/assets/8503346/16126059/57461b94-33ab-11e6-937e-b6195839c8fa.png"){kind=link}
![https://cloud.githubusercontent.com/assets/8503346/16126145/c6a2f49e-33ab-11e6-83a8-3ee4bb62be56.png"](https://cloud.githubusercontent.com/assets/8503346/16126145/c6a2f49e-33ab-11e6-83a8-3ee4bb62be56.png"){kind=link}
![https://cloud.githubusercontent.com/assets/8503346/16126253/2d90387e-33ac-11e6-9fa4-93aac98c6a76.png"](https://cloud.githubusercontent.com/assets/8503346/16126253/2d90387e-33ac-11e6-9fa4-93aac98c6a76.png"){kind=link}
![https://cloud.githubusercontent.com/assets/8503346/16126120/ac8c5866-33ab-11e6-8e43-47a69b0587ef.png"](https://cloud.githubusercontent.com/assets/8503346/16126120/ac8c5866-33ab-11e6-8e43-47a69b0587ef.png"){kind=link}
![https://cloud.githubusercontent.com/assets/8503346/16205804/6afd3474-36da-11e6-8b2e-bd2b22a5c7c9.png"](https://cloud.githubusercontent.com/assets/8503346/16205804/6afd3474-36da-11e6-8b2e-bd2b22a5c7c9.png"){kind=link}
![https://cloud.githubusercontent.com/assets/8503346/16126258/34bec64c-33ac-11e6-8392-c16c3380bac0.png"](https://cloud.githubusercontent.com/assets/8503346/16126258/34bec64c-33ac-11e6-8392-c16c3380bac0.png"){kind=link}