Browse Source

HUE-2727 [spark] Improved JVM memory form input for spark settings

This adds a custom knockout component for JVM memory input, allowing the user to enter a value and select either MB or GB units. The result is stored in the JVM memory format in the observable referenced in the params.

(cherry picked from commit ed614d4f18462e066b00f42b44743207e26c28fb)
Johan Ahlen 10 years ago
parent
commit
91ed6e6
1 changed files with 40 additions and 2 deletions
  1. 40 2
      apps/spark/src/spark/templates/editor.mako

+ 40 - 2
apps/spark/src/spark/templates/editor.mako

@@ -720,7 +720,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
             <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" />
+                <jvm-memory-input params="value: executor_memory" />
               </div>
             </div>
             <div class="control-group" style="float: left;">
@@ -738,7 +738,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
             <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" />
+                <jvm-memory-input params="value: 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) }">
@@ -757,6 +757,44 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
   <div><a class="pointer demi-modal-chevron" data-dismiss="modal"><i class="fa fa-chevron-up"></i></a></div>
 </div>
 
+<template id="jvm-memory-input-template">
+  <input type="text" class="input-small" data-bind="textInput: value" /> <select class="input-mini" data-bind="options: units, value: selectedUnit" />
+</template>
+
+<script type="text/javascript" charset="utf-8">
+  var JVM_MEM_PATTERN = /([0-9]+)([MG])$/;
+  var UNITS = { 'MB' : 'M', 'GB' : 'G'};
+
+  function JvmMemoryInputViewModel(params) {
+    this.valueObservable = params.value;
+    this.units = Object.keys(UNITS);
+    this.selectedUnit = ko.observable();
+    this.value = ko.observable().extend({ 'numeric' : 0 });
+
+    var match = JVM_MEM_PATTERN.exec(this.valueObservable());
+    if (match.length === 3) {
+      this.value(match[1]);
+      this.selectedUnit(match[2] === 'M' ? 'MB' : 'GB');
+    }
+
+    this.value.subscribe(this.updateValueObservable, this);
+    this.selectedUnit.subscribe(this.updateValueObservable, this);
+  }
+
+  JvmMemoryInputViewModel.prototype.updateValueObservable = function() {
+    if (isNaN(this.value()) || this.value() === '') {
+      this.valueObservable(undefined);
+    } else {
+      this.valueObservable(this.value() + UNITS[this.selectedUnit()]);
+    }
+  };
+
+  ko.components.register('jvm-memory-input', {
+    viewModel: JvmMemoryInputViewModel,
+    template: { element: 'jvm-memory-input-template' }
+  });
+</script>
+
 
 ${ koComponents.assistPanel() }