[ZEPPELIN-869] Search notebook to handle empty result.

zeppelin-web/src/app/search/result-list.controller.js

@@ -18,6 +18,8 @@ angular
   .module('zeppelinWebApp')
   .controller('SearchResultCtrl', function($scope, $routeParams, searchService) {
 
+  $scope.isResult = true ;
+  $scope.searchTerm = $routeParams.searchTerm;
   var results = searchService.search({'q': $routeParams.searchTerm}).query();
 
   results.$promise.then(function(result) {
@@ -34,6 +36,17 @@ angular
 
       return note;
     });
+    if ($scope.notes.length === 0) {
+      $scope.isResult = false;
+    } else {
+      $scope.isResult = true;
+    }
+
+  $scope.$on('$routeChangeStart', function (event, next, current) {
+      if (next.originalPath !== '/search/:searchTerm') {
+        searchService.searchTerm = '';
+      }
+    });
   });
 
   $scope.page = 0;

zeppelin-web/src/app/search/result-list.html

@@ -11,8 +11,8 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<div ng-controller="SearchResultCtrl" class="searchResults">
-  <div class="row">
+<div class="searchResults">
+    <div ng-if="isResult" class="row">
     <div class="col-sm-8" style="margin: 0 auto; float: none">
       <ul class="search-results">
         <li class="panel panel-default" ng-repeat="note in notes">
@@ -37,6 +37,10 @@ <h4>
           </div>
           </div>
        </li>
+      </ul>
     </div>
   </div>
+  <div ng-if="!isResult" class="search-no-result-found">
+      <span class="glyphicon glyphicon-search"></span> We couldn’t find any notebook matching <b>'{{searchTerm}}' </b>
+  </div>
 </div>

zeppelin-web/src/app/search/search.css

@@ -40,3 +40,12 @@
 .search-results .ace_invalid {
   background: none !important;
 }
+
+.search-no-result-found {
+  border: 1px solid;
+  margin: 150px 150px;
+  padding: 15px 10px 15px 0px;
+  color: #00529B;
+  text-align: center;
+  background-color: #f4f6f8;
+}

zeppelin-web/src/components/navbar/navbar.controller.js

@@ -53,7 +53,8 @@ angular.module('zeppelinWebApp')
   };
 })
 .controller('NavCtrl', function($scope, $rootScope, $http, $routeParams,
-    $location, notebookListDataFactory, baseUrlSrv, websocketMsgSrv, arrayOrderingSrv) {
+    $location, notebookListDataFactory, baseUrlSrv, websocketMsgSrv, arrayOrderingSrv, searchService) {
+
   /** Current list of notes (ids) */
 
   $scope.showLoginWindow = function() {
@@ -62,11 +63,14 @@ 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;

zeppelin-web/src/components/navbar/navbar.html

@@ -63,15 +63,17 @@
       <ul class="nav navbar-nav navbar-right" style="margin-right:5px;">
         <li ng-if="ticket" style="margin-top:10px;">
         <!--TODO(bzz): move to Typeahead https://angular-ui.github.io/bootstrap  -->
-          <form role="search"
+
+          <form role="search" data-ng-model="searchForm"
             style="display: inline-block; margin: 0px"
              class="navbar-form"
-             ng-submit="search(searchTerm)">
+             ng-submit="search(searchForm.searchTerm)">
             <div class="input-group">
               <input
                 type="text"
                 style="min-width:300px;"
-                ng-model="searchTerm"
+                ng-model="searchForm.searchTerm"
+                id="searchTermId"
                 ng-disabled="!navbar.connected"
                 class="form-control"
                 placeholder="Search your Notebooks"
@@ -80,7 +82,7 @@
                 <button
                   type="submit"
                   class="btn btn-default"
-                  ng-disabled="!navbar.connected"
+                  ng-disabled="!navbar.connected || !searchForm.searchTerm"
                 >
                   <i class="glyphicon glyphicon-search"></i>
                 </button>

zeppelin-web/src/components/searchService/search.service.js

@@ -16,6 +16,7 @@
 angular.module('zeppelinWebApp').service('searchService', function($resource, baseUrlSrv) {
 
   this.search = function(term) {
+    this.searchTerm = term.q;
      console.log('Searching for: %o', term.q);
     if (!term.q) { //TODO(bzz): empty string check
       return;
@@ -26,4 +27,6 @@ angular.module('zeppelinWebApp').service('searchService', function($resource, ba
     });
   };
 
+  this.searchTerm = '';
+
 });