ZEPPELIN-491: Giving fixed height to container when result type is text

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

@@ -23,9 +23,20 @@
        ng-bind-html="paragraph.result.comment">
   </div>
 
-  <div id="p{{paragraph.id}}_text"
-       class="text"
-       ng-if="getResultType() == 'TEXT'"></div>
+  <div id="{{paragraph.id}}_text"
+       ng-if="getResultType() == 'TEXT'">
+    <div class="fa fa-level-down scroll-paragraph-down"
+         ng-show="showScrollDownIcon()"
+         ng-click="scrollParagraphDown()"
+         tooltip="Follow Output"></div>
+    <div id="p{{paragraph.id}}_text"
+         style="max-height: {{paragraph.config.graph.height}}px; overflow: auto"
+         class="text"></div>
+    <div class="fa fa-chevron-up scroll-paragraph-up"
+         ng-show="showScrollUpIcon()"
+         ng-click="scrollParagraphUp()"
+         tooltip="Scroll Top"></div>
+  </div>
 
   <div id="p{{paragraph.id}}_html"
        class="resultContained"

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

@@ -108,6 +108,11 @@ angular.module('zeppelinWebApp')
         if ($scope.paragraph.result && $scope.paragraph.result.msg) {
           $scope.appendTextOutput($scope.paragraph.result.msg);
         }
+
+        angular.element('#p' + $scope.paragraph.id + '_text').bind("mousewheel", function(e) {
+          $scope.keepScrollDown = false;
+        });
+
       } else {
         $timeout(retryRenderer, 10);
       }
@@ -130,6 +135,10 @@ angular.module('zeppelinWebApp')
         textEl.append(angular.element('<div></div>').text(lines[i]));
       }
     }
+    if ($scope.keepScrollDown) {
+      var doc = angular.element('#p' + $scope.paragraph.id + '_text');
+      doc[0].scrollTop = doc[0].scrollHeight;
+    }
   };
 
 
@@ -2077,4 +2086,33 @@ angular.module('zeppelinWebApp')
     var redirectToUrl = location.protocol + '//' + location.host + location.pathname + '#/notebook/' + noteId + '/paragraph/' + $scope.paragraph.id+'?asIframe';
     $window.open(redirectToUrl);
   };
+
+  $scope.showScrollDownIcon = function(){
+    var doc = angular.element('#p' + $scope.paragraph.id + '_text');
+    if(doc[0]){
+      return doc[0].scrollHeight > doc.innerHeight();
+    }
+    return false;
+  };
+
+  $scope.scrollParagraphDown = function() {
+    var doc = angular.element('#p' + $scope.paragraph.id + '_text');
+    doc.animate({scrollTop: doc[0].scrollHeight}, 500);
+    $scope.keepScrollDown = true;
+  };
+
+  $scope.showScrollUpIcon = function(){
+    if(angular.element('#p' + $scope.paragraph.id + '_text')[0]){
+      return angular.element('#p' + $scope.paragraph.id + '_text')[0].scrollTop != 0;
+    }
+    return false;
+
+  };
+
+  $scope.scrollParagraphUp = function() {
+    var doc = angular.element('#p' + $scope.paragraph.id + '_text');
+    doc.animate({scrollTop: 0}, 500);
+    $scope.keepScrollDown = false;
+  };
+
 });

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

@@ -411,3 +411,17 @@ table.table-striped {
   border-top: 1px solid #ddd;
   margin-top: 20px;
 }
+
+.scroll-paragraph-down {
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+}
+
+
+.scroll-paragraph-up {
+  bottom: 5px;
+  cursor: pointer;
+  position: absolute;
+  right: 15px;
+}

zeppelin-web/src/components/resizable/resizable.directive.js

@@ -35,7 +35,7 @@ angular.module('zeppelinWebApp').directive('resizable', function() {
           var colStep = window.innerWidth / 12;
           elem.off('resizestop');
           var conf = angular.copy(resizableConfig);
-          if (resize.graphType === 'TABLE') {
+          if (resize.graphType === 'TABLE' || resize.graphType === 'TEXT') {
             conf.grid = [colStep, 10];
             conf.minHeight = 100;
           } else {