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

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 жил өмнө
parent
commit
91ed6e6a13

+ 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;">
             <div class="control-group" style="float: left;">
               <label class="control-label">${_('Executor Memory')}</label>
               <label class="control-label">${_('Executor Memory')}</label>
               <div class="controls">
               <div class="controls">
-                <input class="input-small" type="text" data-bind="textInput: executor_memory" />
+                <jvm-memory-input params="value: executor_memory" />
               </div>
               </div>
             </div>
             </div>
             <div class="control-group" style="float: left;">
             <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;">
             <div class="control-group" style="float: left;">
               <label class="control-label">${_('Driver Memory')}</label>
               <label class="control-label">${_('Driver Memory')}</label>
               <div class="controls">
               <div class="controls">
-                <input class="input-small" type="text" data-bind="textInput: driver_memory" />
+                <jvm-memory-input params="value: driver_memory" />
               </div>
               </div>
             </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) }">
             <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><a class="pointer demi-modal-chevron" data-dismiss="modal"><i class="fa fa-chevron-up"></i></a></div>
 </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() }
 ${ koComponents.assistPanel() }