[ZEPPELIN-695] Add AngularJS z.runParagraph()

zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java

@@ -17,21 +17,21 @@
 
 package org.apache.zeppelin.integration;
 
+import org.apache.commons.lang3.StringUtils;
 import org.apache.zeppelin.AbstractZeppelinIT;
 import org.apache.zeppelin.WebDriverManager;
 import org.hamcrest.CoreMatchers;
-import org.junit.After;
-import org.junit.Before;
-import org.junit.Rule;
-import org.junit.Test;
+import org.junit.*;
 import org.junit.rules.ErrorCollector;
 import org.openqa.selenium.By;
 import org.openqa.selenium.Keys;
 import org.openqa.selenium.WebElement;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import static org.apache.commons.lang3.StringUtils.isNotBlank;
 import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertTrue;
 
 /**
  * Test Zeppelin with web browser.
@@ -246,4 +246,68 @@ public void testSparkInterpreterDependencyLoading() throws Exception {
       handleException("Exception in ZeppelinIT while testSparkInterpreterDependencyLoading ", e);
     }
   }
+
+  @Test
+  public void testAngularRunParagraph() throws Exception {
+    if (!endToEndTestEnabled()) {
+      return;
+    }
+
+    try {
+      createNewNote();
+
+      // wait for first paragraph's " READY " status text
+      waitForParagraph(1, "READY");
+
+      // Create 1st paragraph
+      setTextOfParagraph(1,
+              "%angular <div id=\\'angularRunParagraph\\'>Run second paragraph</div>");
+      runParagraph(1);
+      waitForParagraph(1, "FINISHED");
+      waitForText("Run second paragraph", By.xpath(
+              getParagraphXPath(1) + "//div[@id=\"angularRunParagraph\"]"));
+
+      // Create 2nd paragraph
+      setTextOfParagraph(2, "%sh echo TEST");
+      runParagraph(2);
+      waitForParagraph(2, "FINISHED");
+
+      // Get 2nd paragraph id
+      final String secondParagraphId = driver.findElement(By.xpath(getParagraphXPath(2)
+              + "//div[@class=\"control ng-scope\"]//ul[@class=\"dropdown-menu\"]/li[1]"))
+              .getAttribute("textContent");
+
+      assertTrue("Cannot find paragraph id for the 2nd paragraph", isNotBlank(secondParagraphId));
+
+      // Update first paragraph to call z.runParagraph() with 2nd paragraph id
+      setTextOfParagraph(1,
+              "%angular <div id=\\'angularRunParagraph\\' ng-click=\\'z.runParagraph(\""
+                      + secondParagraphId.trim()
+                      + "\")\\'>Run second paragraph</div>");
+      runParagraph(1);
+      waitForParagraph(1, "FINISHED");
+
+      // Set new text value for 2nd paragraph
+      setTextOfParagraph(2, "%sh echo NEW_VALUE");
+
+      // Click on 1 paragraph to trigger z.runParagraph() function
+      driver.findElement(By.xpath(
+              getParagraphXPath(1) + "//div[@id=\"angularRunParagraph\"]")).click();
+
+      waitForParagraph(2, "FINISHED");
+
+      // Check that 2nd paragraph has been executed
+      waitForText("NEW_VALUE", By.xpath(
+              getParagraphXPath(2) + "//div[contains(@id,\"_text\") and @class=\"text\"]"));
+
+      //delete created notebook for cleanup.
+      deleteTestNotebook(driver);
+      sleep(1000, true);
+
+      LOG.info("testAngularRunParagraph Test executed");
+    }  catch (Exception e) {
+      handleException("Exception in ZeppelinIT while testAngularRunParagraph", e);
+    }
+
+  }
 }

zeppelin-web/src/app/home/home.html

@@ -72,7 +72,7 @@ <h4>Community</h4>
   <div ng-show="home.notebookHome" id="{{currentParagraph.id}}_paragraphColumn_main"
        ng-repeat="currentParagraph in home.note.paragraphs"
        ng-controller="ParagraphCtrl"
-       ng-Init="init(currentParagraph)"
+       ng-Init="init(currentParagraph, home.note)"
        ng-class="columnWidthClass(currentParagraph.config.colWidth)"
        class="paragraph-col">
     <div id="{{currentParagraph.id}}_paragraphColumn"

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

@@ -488,7 +488,9 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl',
           paragraphToBeFocused = note.paragraphs[index].id;
           break;
         }
-        $scope.$broadcast('updateParagraph', {paragraph: note.paragraphs[index]});
+        $scope.$broadcast('updateParagraph', {
+          note: $scope.note, // pass the note object to paragraph scope
+          paragraph: note.paragraphs[index]});
       }
     }
 
@@ -497,7 +499,9 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl',
       for (var idx in newParagraphIds) {
         var newEntry = note.paragraphs[idx];
         if (oldParagraphIds[idx] === newParagraphIds[idx]) {
-          $scope.$broadcast('updateParagraph', {paragraph: newEntry});
+          $scope.$broadcast('updateParagraph', {
+            note: $scope.note, // pass the note object to paragraph scope
+            paragraph: newEntry});
         } else {
           // move paragraph
           var oldIdx = oldParagraphIds.indexOf(newParagraphIds[idx]);

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

@@ -84,11 +84,11 @@ <h4>Note Permissions (Only note owners can change)</h4>
 
   <div class="note-jump"></div>
 
-  <!-- Include the paragraphs according to the note -->
+  <!-- Include the paragraphs according to the note, pass the note to init function -->
   <div id="{{currentParagraph.id}}_paragraphColumn_main"
        ng-repeat="currentParagraph in note.paragraphs"
        ng-controller="ParagraphCtrl"
-       ng-Init="init(currentParagraph)"
+       ng-Init="init(currentParagraph, note)"
        ng-class="columnWidthClass(currentParagraph.config.colWidth)"
        class="paragraph-col">
     <div class="new-paragraph" ng-click="insertNew('above')" ng-hide="viewOnly || asIframe">

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

@@ -18,6 +18,7 @@ angular.module('zeppelinWebApp')
   .controller('ParagraphCtrl', function($scope,$rootScope, $route, $window, $element, $routeParams, $location,
                                          $timeout, $compile, websocketMsgSrv) {
   var ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_';
+  $scope.parentNote = null;
   $scope.paragraph = null;
   $scope.originalText = '';
   $scope.editor = null;
@@ -28,6 +29,20 @@ angular.module('zeppelinWebApp')
   $scope.compiledScope = paragraphScope;
 
   paragraphScope.z = {
+    // z.runParagraph('20150213-231621_168813393')
+    runParagraph: function(paragraphId) {
+      if (paragraphId) {
+        var filtered = $scope.parentNote.paragraphs.filter(function(x) {
+          return x.id === paragraphId;});
+        if (filtered.length === 1) {
+          var paragraph = filtered[0];
+          websocketMsgSrv.runParagraph(paragraph.id, paragraph.title, paragraph.text,
+              paragraph.config, paragraph.settings.params);
+        } else {
+          // Error message here
+        }
+      }
+    },
 
     // Example: z.angularBind('my_var', 'Test Value', '20150213-231621_168813393')
     angularBind: function(varName, value, paragraphId) {
@@ -36,6 +51,7 @@ angular.module('zeppelinWebApp')
         websocketMsgSrv.clientBindAngularObject($routeParams.noteId, varName, value, paragraphId);
       }
     },
+
     // Example: z.angularUnBind('my_var', '20150213-231621_168813393')
     angularUnbind: function(varName, paragraphId) {
       // Only push to server if paragraphId is defined
@@ -55,8 +71,9 @@ angular.module('zeppelinWebApp')
   };
 
   // Controller init
-  $scope.init = function(newParagraph) {
+  $scope.init = function(newParagraph, note) {
     $scope.paragraph = newParagraph;
+    $scope.parentNote = note;
     $scope.originalText = angular.copy(newParagraph.text);
     $scope.chart = {};
     $scope.colWidthOption = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];