add matches count

zeppelin-web/src/app/notebook/notebook-actionBar.html

@@ -173,11 +173,15 @@ limitations under the License.
         <li>
           <div class="input-group input-group-sm search-group">
             <span class="input-group-addon">Find</span>
-            <input type="text" class="form-control"
-                   ng-class="{'no-match': !search.occurrencesExists && search.searchText !== ''}"
+            <input type="text" class="form-control" id="findInput"
+                   ng-class="{'no-match': !hasMatches() && search.searchText !== ''}"
                    ng-change="markAllOccurrencesAndHighlightFirst()"
-                   ng-click="markAllOccurrences()"
+                   ng-click="markAllOccurrencesAndHighlightFirst()" ng-keypress="onPressOnFindInput($event)"
                    ng-model="search.searchText"  ng-trim="false"/>
+            <span class="input-group-addon after-input" ng-show="search.searchText !== ''"
+                  ng-class="{'no-match': !hasMatches() && search.searchText !== ''}">
+              {{search.currentOccurrence}} of {{search.occurrencesCount}}
+            </span>
             <div class="input-group-btn">
               <button class="btn btn-default" ng-click="prevOccurrence()">
                 <i class="fa fa-angle-left" aria-hidden="true"></i>

zeppelin-web/src/app/notebook/notebook.controller.js

@@ -68,7 +68,9 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     needHighlightFirst: false,
     occurrencesHidden: false,
     replaceText: '',
-    needToSendNextOccurrenceAfterReplace: false
+    needToSendNextOccurrenceAfterReplace: false,
+    occurrencesCount: 0,
+    currentOccurrence: 0
   }
   let currentSearchParagraph = 0
 
@@ -734,16 +736,16 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     angular.element('.permissionsForm select').find('option:not([is-select2="false"])').remove()
   }
 
+  $scope.hasMatches = function() {
+    return $scope.search.occurrencesCount > 0
+  }
+
   const markAllOccurrences = function() {
-    $scope.search.occurrencesExists = false
+    $scope.search.occurrencesCount = 0
     $scope.search.occurrencesHidden = false
     currentSearchParagraph = 0
     $scope.$broadcast('markAllOccurrences', $scope.search.searchText)
-  }
-
-  $scope.markAllOccurrences = function() {
-    $scope.search.needHighlightFirst = false
-    markAllOccurrences()
+    $scope.search.currentOccurrence = $scope.search.occurrencesCount > 0 ? 1 : 0
   }
 
   $scope.markAllOccurrencesAndHighlightFirst = function() {
@@ -751,10 +753,24 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     markAllOccurrences()
   }
 
+  const increaseCurrentOccurence = function() {
+    ++$scope.search.currentOccurrence
+    if ($scope.search.currentOccurrence > $scope.search.occurrencesCount) {
+      $scope.search.currentOccurrence = 1
+    }
+  }
+
+  const decreaseCurrentOccurence = function() {
+    --$scope.search.currentOccurrence
+    if ($scope.search.currentOccurrence === 0) {
+      $scope.search.currentOccurrence = $scope.search.occurrencesCount
+    }
+  }
+
   const sendNextOccurrenceMessage = function() {
-    if (!$scope.search.occurrencesExists) {
+    if ($scope.search.occurrencesCount === 0) {
       markAllOccurrences()
-      if (!$scope.search.occurrencesExists) {
+      if ($scope.search.occurrencesCount === 0) {
         return
       }
     }
@@ -765,9 +781,9 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
   }
 
   const sendPrevOccurrenceMessage = function() {
-    if (!$scope.search.occurrencesExists) {
+    if ($scope.search.occurrencesCount === 0) {
       markAllOccurrences()
-      if (!$scope.search.occurrencesExists) {
+      if ($scope.search.occurrencesCount === 0) {
         return
       }
     }
@@ -792,18 +808,17 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     }
   }
 
-  $scope.$on('occurrencesExists', function(event) {
-    if ($scope.search.occurrencesExists) {
-      return
-    }
-    $scope.search.occurrencesExists = true
+  $scope.$on('occurrencesExists', function(event, count) {
+    $scope.search.occurrencesCount += count
     if ($scope.search.needHighlightFirst) {
       sendNextOccurrenceMessage()
+      $scope.search.needHighlightFirst = false
     }
   })
 
   $scope.nextOccurrence = function() {
     sendNextOccurrenceMessage()
+    increaseCurrentOccurence()
   }
 
   $scope.$on('noNextOccurrence', function(event) {
@@ -813,6 +828,7 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
 
   $scope.prevOccurrence = function() {
     sendPrevOccurrenceMessage()
+    decreaseCurrentOccurence()
   }
 
   $scope.$on('noPrevOccurrence', function(event) {
@@ -826,9 +842,9 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
   })
 
   $scope.replace = function() {
-    if (!$scope.search.occurrencesExists) {
+    if ($scope.search.occurrencesCount === 0) {
       $scope.markAllOccurrencesAndHighlightFirst()
-      if (!$scope.search.occurrencesExists) {
+      if ($scope.search.occurrencesCount === 0) {
         return
       }
     }
@@ -839,31 +855,50 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     $scope.$broadcast('replaceCurrent', $scope.search.searchText, $scope.search.replaceText)
     if ($scope.search.needToSendNextOccurrenceAfterReplace) {
       sendNextOccurrenceMessage()
+      $scope.search.needToSendNextOccurrenceAfterReplace = false
     }
   }
 
+  $scope.$on('occurrencesCountChanged', function(event, cnt) {
+    $scope.search.occurrencesCount += cnt
+    if ($scope.search.occurrencesCount === 0) {
+      $scope.search.currentOccurrence = 0
+    } else {
+      $scope.search.currentOccurrence += cnt + 1
+      if ($scope.search.currentOccurrence > $scope.search.occurrencesCount) {
+        $scope.search.currentOccurrence = 1
+      }
+    }
+  })
+
   $scope.replaceAll = function() {
-    if (!$scope.search.occurrencesExists) {
+    if ($scope.search.occurrencesCount === 0) {
       return
     }
     if ($scope.search.occurrencesHidden) {
-      $scope.markAllOccurrences()
+      $scope.markAllOccurrencesAndHighlightFirst()
     }
     $scope.$broadcast('replaceAll', $scope.search.searchText, $scope.search.replaceText)
-    $scope.$broadcast('markAllOccurrences', $scope.search.searchText)
+    $scope.markAllOccurrencesAndHighlightFirst()
   }
 
   $scope.$on('noNextOccurrenceAfterReplace', function() {
-    $scope.search.occurrencesExists = false
+    $scope.search.occurrencesCount = 0
     $scope.search.needHighlightFirst = false
     $scope.search.needToSendNextOccurrenceAfterReplace = false
     $scope.$broadcast('checkOccurrences')
     increaseCurrentSearchParagraph()
-    if ($scope.search.occurrencesExists) {
+    if ($scope.search.occurrencesCount > 0) {
       $scope.search.needToSendNextOccurrenceAfterReplace = true
     }
   })
 
+  $scope.onPressOnFindInput = function(event) {
+    if (event.keyCode === 13) {
+      $scope.nextOccurrence()
+    }
+  }
+
   $scope.restartInterpreter = function(interpreter) {
     const thisConfirm = BootstrapDialog.confirm({
       closable: false,

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

@@ -357,3 +357,55 @@
 .search-dropdown li {
   margin: 0;
 }
+
+.search-group input.no-match {
+  border-left: 1px solid red !important;
+  border-top: 1px solid red !important;
+  border-bottom: 1px solid red !important;
+}
+
+.search-group .after-input.no-match {
+  border-right: 1px solid red !important;
+  border-top: 1px solid red !important;
+  border-bottom: 1px solid red !important;
+}
+
+.search-group .input-group-addon {
+  min-width: 64px;
+}
+
+.search-group input,
+.search-group .input-group-addon,
+.search-group .input-group-btn .btn {
+  border-radius: 0;
+}
+
+.search-dropdown {
+  border-radius: 0;
+  padding: 0;
+}
+
+.search-dropdown li {
+  margin: 0;
+}
+
+.search-group input:focus {
+  box-shadow: none;
+  border-color: #ccc;
+}
+
+.search-group input {
+  box-shadow: none;
+}
+
+.input-group-addon.after-input {
+  background: #fff;
+  color: #999;
+  border-left: none;
+  padding-left: 0;
+}
+
+#findInput {
+  border-right: none;
+  padding-right: 5px;
+}

zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js

@@ -1601,7 +1601,7 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca
   $scope.$on('markAllOccurrences', function(event, text) {
     markAllOccurrences(text)
     if (searchRanges.length > 0) {
-      $scope.$emit('occurrencesExists')
+      $scope.$emit('occurrencesExists', searchRanges.length)
     }
   })
 
@@ -1649,11 +1649,14 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca
     if (currentRange.id === -1) {
       return
     }
-    let numberFromEnd = searchRanges.length - currentRange.id - 1
+    let indexFromEnd = searchRanges.length - currentRange.id - 1
+    let prevId = currentRange.id
     $scope.editor.session.removeMarker(currentRange.markerId)
     $scope.editor.session.replace(searchRanges[currentRange.id].range, to)
     markAllOccurrences(from)
-    currentRange.id = searchRanges.length - numberFromEnd
+    let currentIndex = searchRanges.length - indexFromEnd
+    $scope.$emit('occurrencesCountChanged', currentIndex - prevId - 1)
+    currentRange.id = currentIndex
     if (currentRange.id === searchRanges.length) {
       currentRange.id = -1
       $scope.$emit('noNextOccurrenceAfterReplace')
@@ -1670,7 +1673,7 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca
 
   $scope.$on('checkOccurrences', function() {
     if (searchRanges.length > 0) {
-      $scope.$emit('occurrencesExists')
+      $scope.$emit('occurrencesExists', searchRanges.length)
     }
   })
 }