浏览代码

HUE-5724 [assist] Apply SQL formatting to the view sql in the context popover

Johan Ahlen 8 年之前
父节点
当前提交
0b71729

+ 6 - 0
desktop/core/src/desktop/static/desktop/js/apiHelper.js

@@ -1695,6 +1695,12 @@ var ApiHelper = (function () {
     }).fail(self.assistErrorCallback(options));
   };
 
+  ApiHelper.prototype.formatSql = function (statements) {
+    return $.post("/notebook/api/format", {
+      statements: statements
+    });
+  };
+
   /**
    * @param {Object} options
    * @param {string} options.sourceType

+ 78 - 56
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -4899,82 +4899,104 @@
         $(element).data('aceEditor').setValue(value, -1)
       }
     }
-  }
-
+  };
 
   ko.bindingHandlers.highlight = {
     init: function (element) {
       $(element).addClass('ace-highlight');
     },
     update: function (element, valueAccessor, allBindingsAccessor) {
-      var value = ko.unwrap(valueAccessor());
-      var options = ko.unwrap(allBindingsAccessor());
-
-      if (typeof value !== 'undefined' && value !== '') { // allows highlighting static code
-        if (options.path) {
-          value = value[options.path];
-        }
-        ace.require([
-          'ace/mode/impala_highlight_rules',
-          'ace/mode/hive_highlight_rules',
-          'ace/mode/xml_highlight_rules',
-          'ace/tokenizer',
-          'ace/layer/text'
-        ], function (impalaRules, hiveRules, xmlRules, tokenizer, text) {
-          var res = [];
+      var options = $.extend({
+        dialect: 'hive',
+        value: '',
+        format: false
+      }, valueAccessor());
 
-          var Tokenizer = tokenizer.Tokenizer;
-          var Rules = hiveRules.HiveHighlightRules;
-          if (options.flavor && ko.unwrap(options.flavor) == 'impala') {
-            Rules = impalaRules.ImpalaHighlightRules;
-          }
+      var createAceHighlight = function (value) {
+        if (typeof value !== 'undefined' && value !== '') { // allows highlighting static code
+          if (options.path) {
+            value = value[options.path];
+          }
+          ace.require([
+            'ace/mode/impala_highlight_rules',
+            'ace/mode/hive_highlight_rules',
+            'ace/mode/xml_highlight_rules',
+            'ace/tokenizer',
+            'ace/layer/text'
+          ], function (impalaRules, hiveRules, xmlRules, tokenizer, text) {
+            var res = [];
+
+            var Tokenizer = tokenizer.Tokenizer;
+            var Rules = hiveRules.HiveHighlightRules;
+            if (options.dialect && ko.unwrap(options.dialect) == 'impala') {
+              Rules = impalaRules.ImpalaHighlightRules;
+            }
 
-          var Text = text.Text;
+            var Text = text.Text;
 
-          var tok = new Tokenizer(new Rules().getRules());
-          var lines = value.split('\n');
+            var tok = new Tokenizer(new Rules().getRules());
+            var lines = value.split('\n');
 
-          var renderSimpleLine = function(txt, stringBuilder, tokens) {
-            var screenColumn = 0;
-            var token = tokens[0];
-            var value = token.value;
-            if (value) {
-              screenColumn = txt.$renderToken(stringBuilder, screenColumn, token, value);
-            }
-            for (var i = 1; i < tokens.length; i++) {
-              token = tokens[i];
-              value = token.value;
-              try {
+            var renderSimpleLine = function(txt, stringBuilder, tokens) {
+              var screenColumn = 0;
+              var token = tokens[0];
+              var value = token.value;
+              if (value) {
                 screenColumn = txt.$renderToken(stringBuilder, screenColumn, token, value);
               }
-              catch (e) {
-                if (console && console.warn) {
-                  console.warn(value, 'This token has some parsing errors and it has been rendered without highlighting.');
+              for (var i = 1; i < tokens.length; i++) {
+                token = tokens[i];
+                value = token.value;
+                try {
+                  screenColumn = txt.$renderToken(stringBuilder, screenColumn, token, value);
+                }
+                catch (e) {
+                  if (console && console.warn) {
+                    console.warn(value, 'This token has some parsing errors and it has been rendered without highlighting.');
+                  }
+                  stringBuilder.push(value);
+                  screenColumn = screenColumn + value.length;
                 }
-                stringBuilder.push(value);
-                screenColumn = screenColumn + value.length;
               }
+            };
+
+            var additionalClass = '';
+            if (!options.splitLines && !options.format) {
+              additionalClass = 'pull-left';
+            } else if (options.format) {
+              additionalClass = 'ace-highlight-pre';
             }
-          };
 
-          var additionalClass = 'pull-left';
-          if (options.splitLines) {
-            additionalClass = '';
-          }
+            lines.forEach(function (line) {
+              var renderedTokens = [];
+              var tokens = tok.getLineTokens(line);
 
-          lines.forEach(function (line) {
-            var renderedTokens = [];
-            var tokens = tok.getLineTokens(line);
+              if (tokens && tokens.tokens.length) {
+                renderSimpleLine(new Text(document.createElement('div')), renderedTokens, tokens.tokens);
+              }
 
-            if (tokens && tokens.tokens.length) {
-              renderSimpleLine(new Text(document.createElement('div')), renderedTokens, tokens.tokens);
-            }
+              res.push('<div class="ace_line ' + additionalClass + '">' + renderedTokens.join('') + '&nbsp;</div>');
+            });
 
-            res.push('<div class="ace_line ' + additionalClass + '">' + renderedTokens.join('') + '&nbsp;</div>');
-          })
+            element.innerHTML = '<div class="ace_editor ace-hue"><div class="ace_layer" style="position: static;">' + res.join('') + '</div></div>';
+          });
+        }
+      };
 
-          element.innerHTML = '<div class="ace_editor ace-hue"><div class="ace_layer" style="position: static;">' + res.join('') + '</div></div>';
-        });
+      var value = ko.unwrap(options.value);
+
+      if (options.format) {
+        ApiHelper.getInstance().formatSql(value).done(function (data) {
+          if (data.status == 0) {
+            createAceHighlight(data.formatted_statements);
+          } else {
+            createAceHighlight(value);
+          }
+        }).fail(function () {
+          createAceHighlight(value);
+        })
+      } else {
+        createAceHighlight(value);
       }
     }
   };

+ 1 - 1
desktop/core/src/desktop/templates/responsive.mako

@@ -271,7 +271,7 @@ ${ hueIcons.symbols() }
                     </div>
                     <div class="clearfix"></div>
                     <strong data-bind="text: name, attr: { title: uuid }"></strong>
-                    <div data-bind="highlight: 'statement'"></div>
+                    <div data-bind="highlight: { value: 'statement' }"></div>
                   </li>
                 <!-- /ko -->
               </ul>

+ 1 - 1
desktop/core/src/desktop/templates/sql_context_popover.mako

@@ -205,7 +205,7 @@ from metadata.conf import has_navigator
       %endif
       <!-- ko if: typeof viewSql !== 'undefined' -->
       <div style="margin: 10px; font-size: 15px; font-weight: 300;">${ _("View SQL") }</div>
-      <div style="margin: 0 10px;" class="pointer" title="${ _("Click to copy") }" data-bind="tooltip: { placement: 'bottom' }, clickToCopy: viewSql, click: function () { huePubSub.publish('sql.context.popover.hide'); }, highlight: viewSql flavor: $parent.sourceType"></div>
+      <div style="margin: 0 10px;" class="pointer" title="${ _("Click to copy") }" data-bind="tooltip: { placement: 'bottom' }, clickToCopy: viewSql, click: function () { huePubSub.publish('sql.context.popover.hide'); }, highlight: { value: viewSql, format: true, dialect: $parent.sourceType }"></div>
       <!-- /ko -->
     </div>
     <!-- /ko -->

文件差异内容过多而无法显示
+ 0 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css


+ 1 - 3
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -1137,9 +1137,7 @@ var EditorViewModel = (function() {
 
     self.format = function () {
       if (self.isSqlDialect()) {
-        $.post("/notebook/api/format", {
-          statements: self.ace().getSelectedText() != '' ? self.ace().getSelectedText() : self.statement_raw()
-        }, function(data) {
+        self.getApiHelper().formatSql(self.ace().getSelectedText() != '' ? self.ace().getSelectedText() : self.statement_raw()).done(function (data) {
           if (data.status == 0) {
             if (self.ace().getSelectedText() != '') {
               self.ace().session.replace(self.ace().session.selection.getRange(), data.formatted_statements);

+ 4 - 0
desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less

@@ -917,6 +917,10 @@ h4.header {
   white-space: normal;
 }
 
+.ace-highlight .ace-highlight-pre {
+  white-space: pre !important;
+}
+
 .history-status {
   width: 20px;
 }

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

@@ -802,7 +802,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
                     <!-- /ko -->
                   </td>
                   <td style="width: 25px" class="muted" data-bind="ellipsis: {data: name(), length: 30}, style: {'border-top-width': $index() == 0 ? '0' : ''}"></td>
-                  <td data-bind="style: {'border-top-width': $index() == 0 ? '0' : ''}"><div data-bind="highlight: query(), flavor: $parent.type"></div></td>
+                  <td data-bind="style: {'border-top-width': $index() == 0 ? '0' : ''}"><div data-bind="highlight: { value: query, dialect: $parent.type }"></div></td>
                 </tr>
               </tbody>
             </table>

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

@@ -151,7 +151,7 @@ ${ commonheader_m(editor_type, editor_type, user, request, "68px") | n,unicode }
           <!-- /ko -->
         </td>
         <td class="muted" data-bind="ellipsis: {data: name(), length: 30}, style: {'border-top-width': $index() == 0 ? '0' : ''}"></td>
-        <td data-bind="style: {'border-top-width': $index() == 0 ? '0' : ''}"><div data-bind="highlight: query(), flavor: $parent.type"></div></td>
+        <td data-bind="style: {'border-top-width': $index() == 0 ? '0' : ''}"><div data-bind="highlight: { value: query, dialect: $parent.type }"></div></td>
       </tr>
     <!-- /ko -->
     </tbody>

部分文件因为文件数量过多而无法显示