[ZEPPELIN-2729] Paragraph numbering

### What is this PR for?
Added a button on the top toolbar of the notebook to toggle paragraph numbering. It adds a "Paragraph N" on the top-right of each paragraph, mainly useful when collaborating and guiding others to the right place.


### What type of PR is it?
Feature

### What is the Jira issue?
[ZEPPELIN-2729](https://issues.apache.org/jira/browse/ZEPPELIN-2729)

### Screenshots
[gfycat mp4 video](https://gfycat.com/LeafyAntiqueCrab)

### Questions:
* Does the licenses files need update? no
* Is there breaking changes for older versions? no
* Does this needs documentation? no


Closes #2782 from timovwb/paragraph-numbering.

Signed-off-by: Jongyoul Lee <jongyoul@gmail.com>

Author: timovwb

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

@@ -51,6 +51,14 @@ <h3>
               ng-disabled="revisionView">
         <i ng-class="tableToggled ? 'fa icon-notebook' : 'fa icon-book-open'"></i>
       </button>
+      <button type="button"
+              class="btn btn-default btn-xs"
+              ng-click="toggleAllNumbering()"
+              ng-hide="viewOnly"
+              tooltip-placement="bottom" uib-tooltip="Toggle paragraph numbering"
+              ng-disabled="revisionView">
+        <i class="fa fa-list-ol"></i>
+      </button>
       <button type="button"
               class="btn btn-default btn-xs"
               ng-click="clearAllParagraphOutput(note.id)"

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

@@ -464,6 +464,22 @@ function NotebookCtrl($scope, $route, $routeParams, $location, $rootScope,
     $scope.$broadcast('closeTable');
   };
 
+  $scope.toggleAllNumbering = function () {
+    if ($scope.note.config.numberingToggled) {
+      $scope.$broadcast('setNumbering', false)
+    } else {
+      $scope.$broadcast('setNumbering', true)
+    }
+    $scope.note.config.numberingToggled = !$scope.note.config.numberingToggled
+    $scope.setConfig()
+  }
+
+  $scope.updateParagraphNumbering = function () {
+    for (let i = 0; i < $scope.note.paragraphs.length; i++) {
+      $scope.note.paragraphs[i].number = i + 1
+    }
+  }
+
   /**
    * @returns {boolean} true if one more paragraphs are running. otherwise return false.
    */
@@ -608,13 +624,15 @@ function NotebookCtrl($scope, $route, $routeParams, $location, $rootScope,
       return;
     }
     addPara(paragraph, index);
+    $scope.updateParagraphNumbering();
   });
 
   $scope.$on('removeParagraph', function(event, paragraphId) {
     if ($scope.paragraphUrl || $scope.revisionView === true) {
       return;
     }
     removePara(paragraphId);
+    $scope.updateParagraphNumbering();
   });
 
   $scope.$on('moveParagraph', function(event, paragraphId, newIdx) {
@@ -625,6 +643,7 @@ function NotebookCtrl($scope, $route, $routeParams, $location, $rootScope,
     if (removedPara && removedPara.length === 1) {
       addPara(removedPara[0], newIdx);
     }
+    $scope.updateParagraphNumbering()
   });
 
   $scope.$on('updateNote', function(event, name, config, info) {

zeppelin-web/src/app/notebook/paragraph/paragraph-control.html

@@ -13,6 +13,10 @@
 -->
 
 <div id="{{paragraph.id}}_control" class="control" ng-show="!asIframe">
+  <span class="numbering"
+        ng-if="paragraph.config.numbering">
+    Paragraph<span ng-bind-html="paragraph.number"></span> |
+  </span>
   <span>
     <span ng-show="paragraph.runtimeInfos.jobUrl.values.length == 1">
       <a href="{{paragraph.runtimeInfos.jobUrl.values[0].jobUrl}}" target="_blank" rel="noopener noreferrer" style="text-decoration: none;"

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

@@ -155,6 +155,8 @@ function ParagraphCtrl($scope, $rootScope, $route, $window, $routeParams, $locat
     noteVarShareService.put($scope.paragraph.id + '_paragraphScope', paragraphScope);
 
     initializeDefault($scope.paragraph.config);
+
+    $scope.updateParagraphNumbering();
   };
 
   $scope.$on('noteRunningStatus', function(event, status) {
@@ -177,6 +179,10 @@ function ParagraphCtrl($scope, $rootScope, $route, $window, $routeParams, $locat
       config.enabled = true;
     }
 
+    if (config.numbering === undefined) {
+      config.numbering = $scope.note.config.numberingToggled
+    }
+
     for (let idx in forms) {
       if (forms[idx]) {
         if (forms[idx].options) {
@@ -643,6 +649,18 @@ function ParagraphCtrl($scope, $rootScope, $route, $window, $routeParams, $locat
     commitParagraph(paragraph);
   };
 
+  $scope.showNumbering = function(paragraph) {
+    console.log('show numbering');
+    paragraph.config.numbering = true;
+    commitParagraph(paragraph);
+  };
+
+  $scope.hideNumbering = function(paragraph) {
+    console.log('hide numbering');
+    paragraph.config.numbering = false;
+    commitParagraph(paragraph);
+  };
+
   let openEditorAndCloseTable = function(paragraph) {
     manageEditorAndTableState(paragraph, false, true);
   };
@@ -1806,6 +1824,14 @@ function ParagraphCtrl($scope, $rootScope, $route, $window, $routeParams, $locat
     $scope.closeTable($scope.paragraph);
   });
 
+  $scope.$on('setNumbering', function(event, value) {
+    if (value) {
+      $scope.showNumbering($scope.paragraph)
+    } else {
+      $scope.hideNumbering($scope.paragraph)
+    }
+  });
+
   $scope.$on('resultRendered', function(event, paragraphId) {
     if ($scope.paragraph.id !== paragraphId) {
       return;