Эх сурвалжийг харах

HUE-2727 [spark] Add snippet settings modal

This adds a modal for configuring the spark snippet execution. For now the modal contains settings for execution and driver memory and cores as well as number of executors.

(cherry picked from commit 9142fa6654040139c8c655d92f0b7251dc39105b)
Johan Ahlen 10 жил өмнө
parent
commit
471a858

+ 5 - 1
apps/spark/src/spark/models.py

@@ -286,7 +286,11 @@ class SparkApi():
   def create_session(self, lang='scala', properties=None):
     if properties is None:
       settings = { 
-          'executor-memory': '1G' # Some props only in YARN mode
+          'executor_cores': 1, # Some props only in YARN mode
+          'executor_count': 1,
+          'executor_memory': '1G',
+          'driver_cores': 1,
+          'driver_memory': '1G'
       }
 
     api = get_spark_api(self.user)

+ 39 - 1
apps/spark/src/spark/static/spark/js/spark.ko.js

@@ -310,7 +310,7 @@ var Snippet = function (vm, notebook, snippet) {
     }
   };
 
-  self.create_session = function (callback) {
+  self.create_session = function (callback, errorCallback) {
     self.status('loading');
     $.post("/spark/api/create_session", {
       notebook: ko.mapping.toJSON(notebook.getContext()),
@@ -326,9 +326,15 @@ var Snippet = function (vm, notebook, snippet) {
       else {
         self.status('failed');
         $(document).trigger("error", data.message);
+        if (errorCallback) {
+          errorCallback();
+        }
       }
     }).fail(function (xhr, textStatus, errorThrown) {
       $(document).trigger("error", xhr.responseText);
+      if (errorCallback) {
+        errorCallback();
+      }
     });
   };
 
@@ -564,6 +570,28 @@ var Notebook = function (vm, notebook) {
     return _s;
   };
 
+  self.restartSession = function (session) {
+    var snippetsOfType = $.grep(self.snippets(), function (snippet) {
+      return snippet.type() == session.type();
+    });
+
+    if (snippetsOfType.length > 0) {
+      var setSnippetStatus = function (status) {
+        $.each(snippetsOfType, function (index, snippet) {
+          snippet.status(status);
+        });
+      };
+      setSnippetStatus('loading');
+      var successCallback = function() {
+        setSnippetStatus('ready');
+      };
+      var failCallback = function() {
+        setSnippetStatus('failed');
+      };
+      snippetsOfType[0].create_session(successCallback, failCallback);
+    }
+  };
+
   self.addSession = function (session) {
     var toRemove = []
     $.each(self.sessions(), function (index, s) {
@@ -711,6 +739,16 @@ function EditorViewModel(notebooks, options) {
   self.availableSnippets = ko.mapping.fromJS(options.languages);
   self.snippetPlaceholders = options.snippet_placeholders;
 
+  self.getSnippetName = function(snippetType)  {
+    var availableSnippets = self.availableSnippets();
+    for (var i = 0; i < availableSnippets.length; i++) {
+      if (availableSnippets[i].type() === snippetType) {
+        return availableSnippets[i].name();
+      }
+    }
+    return '';
+  };
+
   self.init = function () {
     $.each(notebooks, function (index, notebook) {
       self.loadNotebook(notebook);

+ 37 - 10
apps/spark/src/spark/templates/editor.mako

@@ -158,8 +158,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
      <i class="fa fa-pencil"></i>
    </a>
 
-   <a class="btn pointer" title="${ _('Sessions') }" rel="tooltip" data-placement="bottom" data-toggle="modal" data-target="#sessionsDemiModal"
-       data-bind="css: {'btn': true}">
+   <a class="btn pointer" title="${ _('Sessions') }" rel="tooltip" data-placement="bottom" data-toggle="modal" data-target="#sessionsDemiModal">
      <i class="fa fa-cloud"></i>
    </a>
 
@@ -671,9 +670,6 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
         ${ _('Loading...') }
       </div>
     </div>
-
-    <span data-bind="text: ko.mapping.toJSON(properties)"></span>
-
   </div>
 </script>
 
@@ -708,17 +704,48 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
   <div class="modal-body">
     <div class="row-fluid">
       <div class="span12">
-        <!-- ko if: $root.selectedNotebook() -->
+        <!-- ko with: $root.selectedNotebook() -->
         <form class="form-horizontal">
           <fieldset>
             <legend><i class="fa fa-cloud"></i> ${ _('Sessions') }</legend>
-            
-            <div class="control-group" data-bind="foreach: $root.selectedNotebook().sessions">
-              <label class="control-label">${ _('Content') }</label>
+            <!-- ko foreach: sessions -->
+            <h4 data-bind="text: $root.getSnippetName($data.type())" style="clear:left;"></h4>
+            <!-- ko with: properties -->
+            <div class="control-group" style="float: left;">
+              <label class="control-label">${_('Executor Cores')}</label>
+              <div class="controls">
+                <input class="input-small" type="text" data-bind="textInput: executor_cores" />
+              </div>
+            </div>
+            <div class="control-group" style="float: left;">
+              <label class="control-label">${_('Executor Memory')}</label>
+              <div class="controls">
+                <input class="input-small" type="text" data-bind="textInput: executor_memory" />
+              </div>
+            </div>
+            <div class="control-group" style="float: left;">
+              <label class="control-label">${_('Executor Count')}</label>
               <div class="controls">
-                <span data-bind="text: ko.mapping.toJSON($data)"></span>
+                <input class="input-small" type="text" data-bind="textInput: executor_count" />
               </div>
             </div>
+            <div class="control-group cl" style="float: left; clear: left;">
+              <label class="control-label">${_('Driver Cores')}</label>
+              <div class="controls">
+                <input class="input-small" type="text" data-bind="textInput: driver_cores" />
+              </div>
+            </div>
+            <div class="control-group" style="float: left;">
+              <label class="control-label">${_('Driver Memory')}</label>
+              <div class="controls">
+                <input class="input-small" type="text" data-bind="textInput: driver_memory" />
+              </div>
+            </div>
+            <a style="float: right;" class="btn pointer" title="${ _('Restart Session') }" data-dismiss="modal" rel="tooltip" data-bind="click: function() { $root.selectedNotebook().restartSession($parent) }">
+              ${ _('Restart Session') }
+            </a>
+            <!-- /ko -->
+            <!-- /ko -->
             </br>
           </fieldset>
         </form>