Browse Source

HUE-3571 [editor] Syntax highlight history

Enrico Berti 9 years ago
parent
commit
6ba95fd18d

+ 45 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3695,4 +3695,49 @@
     }
   };
 
+  ko.bindingHandlers.highlight = {
+    update: function (element, valueAccessor, allBindingsAccessor) {
+
+      var value = ko.unwrap(valueAccessor());
+
+      var options = ko.unwrap(allBindingsAccessor());
+
+      if (value !== undefined) { // allows highlighting static code
+
+        window.setTimeout(function () {
+          var res = [];
+
+          var Tokenizer = ace.require('ace/tokenizer').Tokenizer;
+          var Rules;
+          if (options.flavor() == 'impala') {
+            Rules = ace.require('ace/mode/impala_highlight_rules').ImpalaHighlightRules;
+          }
+          else {
+            Rules = ace.require('ace/mode/hive_highlight_rules').HiveHighlightRules;
+          }
+          var Text = ace.require('ace/layer/text').Text;
+
+          var tok = new Tokenizer(new Rules().getRules());
+          var lines = value.split('\n');
+
+          lines.forEach(function (line) {
+            var renderedTokens = [];
+            var tokens = tok.getLineTokens(line);
+
+            if (tokens && tokens.tokens.length) {
+              new Text(document.createElement('div')).$renderSimpleLine(renderedTokens, tokens.tokens);
+            }
+
+            res.push('<div class="ace_line pull-left">' + renderedTokens.join('') + ' </div>');
+          });
+
+
+          element.innerHTML = '<div class="ace_editor ace-hue"><div class="ace_layer" style="position: static;">' + res.join('') + '</div></div>';
+        }, 0)
+      }
+
+    }
+
+  };
+
 }));

+ 2 - 4
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -943,10 +943,8 @@ h4.header {
   background-color: #f7f7f9;
 }
 
-code.history-item {
-  white-space: normal;
-  border: none;
-  color: #666;
+.history-item .ace-hue {
+  background-color: transparent!important;
 }
 
 .player-toolbar img {

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -518,7 +518,7 @@ ${ hueIcons.symbols() }
                 <td style="width: 25px" class="muted" data-bind="style:{'border-top-width': $index()==0 ? '0' : ''}">
                   <i class="fa fa-fw fa-bolt inactive-action" data-bind="css: {'fa-unlink': status == 'expired', 'fa-fighter-jet': status == 'running', 'fa-cloud-download': status == 'available'}, attr: {'title': status}"></i>
                 </td>
-                <td data-bind="style:{'border-top-width': $index()==0 ? '0' : ''}"><code data-bind="text: query" class="history-item"></code></td>
+                <td data-bind="style:{'border-top-width': $index()==0 ? '0' : ''}"><div data-bind="highlight: query, flavor: $parent.type" class="history-item"></div></td>
               </tr>
             </tbody>
           </table>