Jelajahi Sumber

[notebook] Consolidate view-related snippet settings and add missing icons

Johan Ahlen 10 tahun lalu
induk
melakukan
9d28080

+ 5 - 9
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1707,12 +1707,7 @@ ko.bindingHandlers.aceEditor = {
     $el.text(options.value());
 
     var editor = ace.edit($el.attr("id"));
-    editor.session.setMode(ko.utils.unwrapObservable(options.mode));
-    if (ko.isObservable(options.mode)) {
-      options.mode.subscribe(function (newValue) {
-        editor.session.setMode(newValue);
-      });
-    }
+    editor.session.setMode(options.mode);
     if (navigator.platform && navigator.platform.toLowerCase().indexOf("linux") > -1) {
       editor.setOptions({fontSize: "14px"})
     }
@@ -2005,7 +2000,7 @@ ko.bindingHandlers.aceEditor = {
     editor.previousSize = 0;
 
     window.setInterval(function(){
-      editor.session.getMode().$id = valueAccessor().mode(); // forces the id again because of Ace command internals
+      editor.session.getMode().$id = valueAccessor().mode; // forces the id again because of Ace command internals
     }, 100);
 
     editor.middleClick = false;
@@ -2027,7 +2022,7 @@ ko.bindingHandlers.aceEditor = {
 
     editor.on("change", function (e) {
       editor.clearErrors();
-      editor.session.getMode().$id = valueAccessor().mode();
+      editor.session.getMode().$id = valueAccessor().mode;
       var currentSize = editor.session.getLength();
       if (currentSize != editor.previousSize && currentSize >= editorOptions.minLines && currentSize <= editorOptions.maxLines){
         editor.previousSize = editor.session.getLength();
@@ -2064,7 +2059,7 @@ ko.bindingHandlers.aceEditor = {
           }, 100);
         }
       }
-      editor.session.getMode().$id = valueAccessor().mode(); // forces the id again because of Ace command internals
+      editor.session.getMode().$id = valueAccessor().mode; // forces the id again because of Ace command internals
       if ((editor.session.getMode().$id == "ace/mode/hive" || editor.session.getMode().$id == "ace/mode/impala") && e.args == ".") {
         editor.execCommand("startAutocomplete");
       }
@@ -2116,6 +2111,7 @@ ko.bindingHandlers.aceEditor = {
     var options = ko.unwrap(valueAccessor());
     if (options.aceInstance()) {
       var editor = options.aceInstance();
+      editor.session.setMode(options.mode);
       editor.completers = element.originalCompleters.slice();
       if (options.extraCompleters && options.extraCompleters().length > 0) {
         options.extraCompleters().forEach(function (complete) {

+ 11 - 14
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -98,17 +98,6 @@ var Result = function (snippet, result) {
   };
 };
 
-var TYPE_ACE_EDITOR_MAP = {
-  'hive': 'ace/mode/hive',
-  'impala': 'ace/mode/impala',
-  'mysql': 'ace/mode/sql',
-  'mysqljdbc': 'ace/mode/sql',
-  'pig': 'ace/mode/pig',
-  'pyspark': 'ace/mode/python',
-  'r': 'ace/mode/r',
-  'scala': 'ace/mode/scala'
-};
-
 var getDefaultSnippetProperties = function (snippetType) {
   var properties = {};
 
@@ -154,7 +143,6 @@ var Snippet = function (vm, notebook, snippet) {
   self.subtype = ko.observable(typeof snippet.subtype != "undefined" && snippet.subtype != null ? snippet.subtype : '');
 
   //Ace stuff
-  self.aceEditorMode = ko.observable(TYPE_ACE_EDITOR_MAP[self.type()]);
   self.ace = ko.observable(null);
   self.completers = ko.observableArray([]);
   self.errors = ko.observableArray([]);
@@ -169,13 +157,16 @@ var Snippet = function (vm, notebook, snippet) {
     return Object.keys(ko.mapping.toJS(self.properties())).length > 0;
   });
 
+  self.viewSettings = ko.computed(function() {
+    return vm.getSnippetViewSettings(self.type());
+  });
+
   var previousProperties = {};
   self.type.subscribe(function(oldValue) {
     previousProperties[oldValue] = self.properties();
   }, null, "beforeChange");
 
   self.type.subscribe(function (newValue) {
-    self.aceEditorMode(TYPE_ACE_EDITOR_MAP[newValue]);
     if (typeof previousProperties[newValue] != "undefined") {
       self.properties(previousProperties[newValue]);
     } else {
@@ -930,7 +921,13 @@ function EditorViewModel(notebooks, options) {
   });
 
   self.availableSnippets = ko.mapping.fromJS(options.languages);
-  self.snippetPlaceholders = options.snippet_placeholders;
+
+  self.getSnippetViewSettings = function(snippetType) {
+    if (options.snippetViewSettings[snippetType]) {
+      return options.snippetViewSettings[snippetType];
+    }
+    return options.snippetViewSettings.default;
+  };
 
   self.availableSessionProperties = ko.computed(function () { // Only Spark
     return ko.utils.arrayFilter(options.session_properties, function (item) {

+ 64 - 27
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -306,32 +306,11 @@ from desktop.views import _ko
 
 <script type="text/html" id="snippetIcon">
 
-  <!-- ko if: type() == 'text' -->
-  <i class="fa fa-header snippet-icon"></i>
+  <!-- ko if: viewSettings().snippetImage -->
+  <img class="snippet-icon" data-bind="attr: { 'src': viewSettings().snippetImage }">
   <!-- /ko -->
-
-  <!-- ko if: type() == 'hive' -->
-  <img src="${ static('beeswax/art/icon_beeswax_48.png') }" class="snippet-icon">
-  <!-- /ko -->
-
-  <!-- ko if: type() == 'jar' -->
-  <i class="fa fa-file-archive-o snippet-icon"></i>
-  <!-- /ko -->
-
-  <!-- ko if: type() == 'py' -->
-  <i class="fa fa-file-code-o snippet-icon"></i>
-  <!-- /ko -->
-
-  <!-- ko if: type() == 'impala' -->
-  <img src="${ static('impala/art/icon_impala_48.png') }" class="snippet-icon">
-  <!-- /ko -->
-
-  <!-- ko if: type() == 'pig' -->
-  <img src="${ static('pig/art/icon_pig_48.png') }" class="snippet-icon">
-  <!-- /ko -->
-
-  <!-- ko if: type() == 'r' || type() == 'spark' || type() == 'pyspark' || type() == 'sql' -->
-  <img src="${ static('spark/art/icon_spark_48.png') }" class="snippet-icon">
+  <!-- ko if: viewSettings().snippetIcon -->
+  <i class="fa snippet-icon" data-bind="css: viewSettings().snippetIcon"></i>
   <!-- /ko -->
 
   <sup style="color: #338bb8; margin-left: -2px" data-bind="text: $root.getSnippetName(type())"></sup>
@@ -476,13 +455,13 @@ from desktop.views import _ko
           value: statement_raw,
           onExecute: execute,
           aceInstance: ace,
-          mode: aceEditorMode,
+          mode: viewSettings().aceMode,
           extraCompleters: completers,
           errors: errors,
           autocompleter: aceAutocompleter,
           assistHelper: assistHelper,
           openIt: '${ _ko("Alt or Ctrl + Click to open it") }',
-          placeholder: $root.snippetPlaceholders[type()] }"></div>
+          placeholder: viewSettings().placeHolder }"></div>
       </div>
     <div class="clearfix"></div>
     <ul data-bind="foreach: variables" class="unstyled inline">
@@ -931,6 +910,63 @@ from desktop.views import _ko
 
 <script type="text/javascript" charset="utf-8">
 
+  var SNIPPET_VIEW_SETTINGS = {
+    default: {
+      placeHolder: '${ _("Example: 1 + 1, or press CTRL + space") }',
+      snippetIcon: 'fa-code'
+    },
+    hive: {
+      placeHolder: '${ _("Example: SELECT * FROM tablename, or press CTRL + space") }',
+      aceMode: 'ace/mode/hive',
+      snippetImage: '${ static("beeswax/art/icon_beeswax_48.png") }'
+    },
+    impala: {
+      placeHolder: '${ _("Example: SELECT * FROM tablename, or press CTRL + space") }',
+      aceMode: 'ace/mode/impala',
+      snippetImage: '${ static("impala/art/icon_impala_48.png") }'
+    },
+    jar : {
+      snippetIcon: 'fa-file-archive-o '
+    },
+    mysql: {
+      placeHolder: '${ _("Example: SELECT * FROM tablename, or press CTRL + space") }',
+      aceMode: 'ace/mode/sql',
+      snippetIcon: 'fa-database'
+    },
+    mysqljdbc: {
+      placeHolder: '${ _("Example: SELECT * FROM tablename, or press CTRL + space") }',
+      aceMode: 'ace/mode/sql',
+      snippetIcon: 'fa-database'
+    },
+    pig: {
+      placeHolder: '${ _("Example: 1 + 1, or press CTRL + space") }',
+      aceMode: 'ace/mode/pig',
+      snippetImage: '${ static("pig/art/icon_pig_48.png") }'
+    },
+    py : {
+      snippetIcon: 'fa-file-code-o'
+    },
+    pyspark: {
+      placeHolder: '${ _("Example: 1 + 1, or press CTRL + space") }',
+      aceMode: 'ace/mode/python',
+      snippetImage: '${ static("spark/art/icon_spark_48.png") }'
+    },
+    r: {
+      placeHolder: '${ _("Example: 1 + 1, or press CTRL + space") }',
+      aceMode: 'ace/mode/r',
+      snippetImage: '${ static("spark/art/icon_spark_48.png") }'
+    },
+    scala: {
+      placeHolder: '${ _("Example: 1 + 1, or press CTRL + space") }',
+      aceMode: 'ace/mode/scala',
+      snippetImage: '${ static("spark/art/icon_spark_48.png") }'
+    },
+    text: {
+      snippetIcon: 'fa-header'
+    }
+  };
+
+
   // Drag and drop iPython / Zeppelin notebooks
   if (window.FileReader) {
 
@@ -1724,6 +1760,7 @@ from desktop.views import _ko
 
   var vmOptions = ${ options_json | n,unicode };
   vmOptions.assistAvailable = "${ autocomplete_base_url | n,unicode }" !== "";
+  vmOptions.snippetViewSettings = SNIPPET_VIEW_SETTINGS;
 
   viewModel = new EditorViewModel(${ notebooks_json | n,unicode }, vmOptions);
   ko.applyBindings(viewModel);

+ 0 - 8
desktop/libs/notebook/src/notebook/views.py

@@ -55,14 +55,6 @@ def notebook(request):
       'notebooks_json': json.dumps([notebook.get_data()]),
       'options_json': json.dumps({
           'languages': get_interpreters(),
-          'snippet_placeholders' : {
-              'sql': _('Example: 1 + 1, or press CTRL + space'),
-              'spark': _('Example: 1 + 1, or press CTRL + space'),
-              'pyspark': _('Example: 1 + 1, or press CTRL + space'),
-              'impala': _('Example: SELECT * FROM tablename, or press CTRL + space'),
-              'hive': _('Example: SELECT * FROM tablename, or press CTRL + space'),
-              'r': _('Example: 1 + 1, or press CTRL + space')
-          },
           'session_properties': SparkApi.PROPERTIES
       }),
       'autocomplete_base_url': autocomplete_base_url,