Prechádzať zdrojové kódy

[editor] Added basic SQL formatting capabilities

Enrico Berti 10 rokov pred
rodič
commit
ce5fe95

+ 17 - 0
apps/beeswax/src/beeswax/templates/execute.mako

@@ -314,6 +314,7 @@ ${ layout.menubar(section='query') }
               % endif
               <button data-bind="click: saveAsModal" type="button" class="btn">${_('Save as...')}</button>
               <button data-bind="click: tryExplainQuery, visible: $root.canExecute" type="button" id="explainQuery" class="btn">${_('Explain')}</button>
+              <button data-bind="click: formatQuery" type="button" class="btn">${_('Format')}</button>
               &nbsp; ${_('or create a')} &nbsp;
               <button data-bind="click: createNewQuery" type="button" class="btn">${_('New query')}</button>
               <br/><br/>
@@ -809,6 +810,7 @@ ${ commonshare() | n,unicode }
 <script src="${ static('notebook/js/notebook.ko.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('beeswax/js/beeswax.vm.js') }"></script>
 <script src="${ static('desktop/js/share.vm.js') }"></script>
+<script src="${ static('desktop/ext/js/vkbeautify.js') }" type="text/javascript" charset="utf-8"></script>
 
 <script src="${ static('desktop/ext/js/codemirror-3.11.js') }"></script>
 <link rel="stylesheet" href="${ static('desktop/ext/css/codemirror.css') }">
@@ -1631,6 +1633,9 @@ $(document).ready(function () {
       }
     },
     onKeyEvent: function (e, s) {
+      if (s.type == "keydown" && s.keyCode == 73 && (s.altKey || s.ctrlKey || s.metaKey)) {
+        formatQuery();
+      }
       if (s.type == "keyup") {
         if (s.keyCode == 190) {
           var _statement = getStatementAtCursor().statement;
@@ -2282,6 +2287,18 @@ function tryExplainQuery() {
   logGA('query/explain');
 }
 
+function formatQuery() {
+  if (vkbeautify) {
+    if (codeMirror.getSelection() != '') {
+      codeMirror.replaceSelection(vkbeautify.sql(codeMirror.getSelection(), 2));
+    }
+    else {
+      codeMirror.setValue(vkbeautify.sql(codeMirror.getValue(), 2));
+    }
+    viewModel.design.query.value(codeMirror.getValue());
+  }
+}
+
 function tryExplainParameterizedQuery() {
   $(".tooltip").remove();
   viewModel.explainQuery();

+ 380 - 0
desktop/core/src/desktop/static/desktop/ext/js/vkbeautify.js

@@ -0,0 +1,380 @@
+/**
+ * vkBeautify - javascript plugin to pretty-print or minify text in XML, JSON, CSS and SQL formats.
+ *
+ * Version - 0.99.00.beta
+ * Copyright (c) 2012 Vadim Kiryukhin
+ * vkiryukhin @ gmail.com
+ * http://www.eslinstructor.net/vkbeautify/
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ *   Pretty print
+ *
+ *        vkbeautify.xml(text [,indent_pattern]);
+ *        vkbeautify.json(text [,indent_pattern]);
+ *        vkbeautify.css(text [,indent_pattern]);
+ *        vkbeautify.sql(text [,indent_pattern]);
+ *
+ *        @text - String; text to beatufy;
+ *        @indent_pattern - Integer | String;
+ *                Integer:  number of white spaces;
+ *                String:   character string to visualize indentation ( can also be a set of white spaces )
+ *   Minify
+ *
+ *        vkbeautify.xmlmin(text [,preserve_comments]);
+ *        vkbeautify.jsonmin(text);
+ *        vkbeautify.cssmin(text [,preserve_comments]);
+ *        vkbeautify.sqlmin(text);
+ *
+ *        @text - String; text to minify;
+ *        @preserve_comments - Bool; [optional];
+ *                Set this flag to true to prevent removing comments from @text ( minxml and mincss functions only. )
+ *
+ *   Examples:
+ *        vkbeautify.xml(text); // pretty print XML
+ *        vkbeautify.json(text, 4 ); // pretty print JSON
+ *        vkbeautify.css(text, '. . . .'); // pretty print CSS
+ *        vkbeautify.sql(text, '----'); // pretty print SQL
+ *
+ *        vkbeautify.xmlmin(text, true);// minify XML, preserve comments
+ *        vkbeautify.jsonmin(text);// minify JSON
+ *        vkbeautify.cssmin(text);// minify CSS, remove comments ( default )
+ *        vkbeautify.sqlmin(text);// minify SQL
+ *
+ */
+
+(function () {
+
+  function createShiftArr(step) {
+
+    var space = '    ';
+
+    if (isNaN(parseInt(step))) {  // argument is string
+      space = step;
+    } else { // argument is integer
+      switch (step) {
+        case 1:
+          space = ' ';
+          break;
+        case 2:
+          space = '  ';
+          break;
+        case 3:
+          space = '   ';
+          break;
+        case 4:
+          space = '    ';
+          break;
+        case 5:
+          space = '     ';
+          break;
+        case 6:
+          space = '      ';
+          break;
+        case 7:
+          space = '       ';
+          break;
+        case 8:
+          space = '        ';
+          break;
+        case 9:
+          space = '         ';
+          break;
+        case 10:
+          space = '          ';
+          break;
+        case 11:
+          space = '           ';
+          break;
+        case 12:
+          space = '            ';
+          break;
+      }
+    }
+
+    var shift = ['\n']; // array of shifts
+    for (ix = 0; ix < 100; ix++) {
+      shift.push(shift[ix] + space);
+    }
+    return shift;
+  }
+
+  function vkbeautify() {
+    this.step = '    '; // 4 spaces
+    this.shift = createShiftArr(this.step);
+  };
+
+  vkbeautify.prototype.xml = function (text, step) {
+
+    var ar = text.replace(/>\s{0,}</g, "><")
+        .replace(/</g, "~::~<")
+        .replace(/\s*xmlns\:/g, "~::~xmlns:")
+        .replace(/\s*xmlns\=/g, "~::~xmlns=")
+        .split('~::~'),
+      len = ar.length,
+      inComment = false,
+      deep = 0,
+      str = '',
+      ix = 0,
+      shift = step ? createShiftArr(step) : this.shift;
+
+    for (ix = 0; ix < len; ix++) {
+      // start comment or <![CDATA[...]]> or <!DOCTYPE //
+      if (ar[ix].search(/<!/) > -1) {
+        str += shift[deep] + ar[ix];
+        inComment = true;
+        // end comment  or <![CDATA[...]]> //
+        if (ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1 || ar[ix].search(/!DOCTYPE/) > -1) {
+          inComment = false;
+        }
+      } else
+      // end comment  or <![CDATA[...]]> //
+      if (ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1) {
+        str += ar[ix];
+        inComment = false;
+      } else
+      // <elm></elm> //
+      if (/^<\w/.exec(ar[ix - 1]) && /^<\/\w/.exec(ar[ix]) &&
+        /^<[\w:\-\.\,]+/.exec(ar[ix - 1]) == /^<\/[\w:\-\.\,]+/.exec(ar[ix])[0].replace('/', '')) {
+        str += ar[ix];
+        if (!inComment) deep--;
+      } else
+      // <elm> //
+      if (ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) == -1 && ar[ix].search(/\/>/) == -1) {
+        str = !inComment ? str += shift[deep++] + ar[ix] : str += ar[ix];
+      } else
+      // <elm>...</elm> //
+      if (ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) > -1) {
+        str = !inComment ? str += shift[deep] + ar[ix] : str += ar[ix];
+      } else
+      // </elm> //
+      if (ar[ix].search(/<\//) > -1) {
+        str = !inComment ? str += shift[--deep] + ar[ix] : str += ar[ix];
+      } else
+      // <elm/> //
+      if (ar[ix].search(/\/>/) > -1) {
+        str = !inComment ? str += shift[deep] + ar[ix] : str += ar[ix];
+      } else
+      // <? xml ... ?> //
+      if (ar[ix].search(/<\?/) > -1) {
+        str += shift[deep] + ar[ix];
+      } else
+      // xmlns //
+      if (ar[ix].search(/xmlns\:/) > -1 || ar[ix].search(/xmlns\=/) > -1) {
+        str += shift[deep] + ar[ix];
+      }
+
+      else {
+        str += ar[ix];
+      }
+    }
+
+    return (str[0] == '\n') ? str.slice(1) : str;
+  }
+
+  vkbeautify.prototype.json = function (text, step) {
+
+    var step = step ? step : this.step;
+
+    if (typeof JSON === 'undefined') return text;
+
+    if (typeof text === "string") return JSON.stringify(JSON.parse(text), null, step);
+    if (typeof text === "object") return JSON.stringify(text, null, step);
+
+    return text; // text is not string nor object
+  }
+
+  vkbeautify.prototype.css = function (text, step) {
+
+    var ar = text.replace(/\s{1,}/g, ' ')
+        .replace(/\{/g, "{~::~")
+        .replace(/\}/g, "~::~}~::~")
+        .replace(/\;/g, ";~::~")
+        .replace(/\/\*/g, "~::~/*")
+        .replace(/\*\//g, "*/~::~")
+        .replace(/~::~\s{0,}~::~/g, "~::~")
+        .split('~::~'),
+      len = ar.length,
+      deep = 0,
+      str = '',
+      ix = 0,
+      shift = step ? createShiftArr(step) : this.shift;
+
+    for (ix = 0; ix < len; ix++) {
+
+      if (/\{/.exec(ar[ix])) {
+        str += shift[deep++] + ar[ix];
+      } else if (/\}/.exec(ar[ix])) {
+        str += shift[--deep] + ar[ix];
+      } else if (/\*\\/.exec(ar[ix])) {
+        str += shift[deep] + ar[ix];
+      }
+      else {
+        str += shift[deep] + ar[ix];
+      }
+    }
+    return str.replace(/^\n{1,}/, '');
+  }
+
+//----------------------------------------------------------------------------
+
+  function isSubquery(str, parenthesisLevel) {
+    return parenthesisLevel - (str.replace(/\(/g, '').length - str.replace(/\)/g, '').length )
+  }
+
+  function split_sql(str, tab) {
+
+    return str.replace(/\s{1,}/g, " ")
+
+      .replace(/ AND /ig, "~::~" + tab + tab + "AND ")
+      .replace(/ BETWEEN /ig, "~::~" + tab + "BETWEEN ")
+      .replace(/ CASE /ig, "~::~" + tab + "CASE ")
+      .replace(/ ELSE /ig, "~::~" + tab + "ELSE ")
+      .replace(/ END /ig, "~::~" + tab + "END ")
+      .replace(/ FROM /ig, "~::~FROM ")
+      .replace(/ GROUP\s{1,}BY/ig, "~::~GROUP BY ")
+      .replace(/ HAVING /ig, "~::~HAVING ")
+      //.replace(/ SET /ig," SET~::~")
+      .replace(/ IN /ig, " IN ")
+
+      .replace(/ JOIN /ig, "~::~JOIN ")
+      .replace(/ CROSS~::~{1,}JOIN /ig, "~::~CROSS JOIN ")
+      .replace(/ INNER~::~{1,}JOIN /ig, "~::~INNER JOIN ")
+      .replace(/ LEFT~::~{1,}JOIN /ig, "~::~LEFT JOIN ")
+      .replace(/ RIGHT~::~{1,}JOIN /ig, "~::~RIGHT JOIN ")
+
+      .replace(/ ON /ig, "~::~" + tab + "ON ")
+      .replace(/ OR /ig, "~::~" + tab + tab + "OR ")
+      .replace(/ ORDER\s{1,}BY/ig, "~::~ORDER BY ")
+      .replace(/ OVER /ig, "~::~" + tab + "OVER ")
+
+      .replace(/\(\s{0,}SELECT /ig, "~::~(SELECT ")
+      .replace(/\)\s{0,}SELECT /ig, ")~::~SELECT ")
+
+      .replace(/ THEN /ig, " THEN~::~" + tab + "")
+      .replace(/ UNION /ig, "~::~UNION~::~")
+      .replace(/ USING /ig, "~::~USING ")
+      .replace(/ WHEN /ig, "~::~" + tab + "WHEN ")
+      .replace(/ WHERE /ig, "~::~WHERE ")
+      .replace(/ WITH /ig, "~::~WITH ")
+
+      //.replace(/\,\s{0,}\(/ig,",~::~( ")
+      //.replace(/\,/ig,",~::~"+tab+tab+"")
+
+      .replace(/ ALL /ig, " ALL ")
+      .replace(/ AS /ig, " AS ")
+      .replace(/ ASC /ig, " ASC ")
+      .replace(/ DESC /ig, " DESC ")
+      .replace(/ DISTINCT /ig, " DISTINCT ")
+      .replace(/ EXISTS /ig, " EXISTS ")
+      .replace(/ NOT /ig, " NOT ")
+      .replace(/ NULL /ig, " NULL ")
+      .replace(/ LIKE /ig, " LIKE ")
+      .replace(/\s{0,}SELECT /ig, "SELECT ")
+      .replace(/\s{0,}UPDATE /ig, "UPDATE ")
+      .replace(/ SET /ig, " SET ")
+
+      .replace(/~::~{1,}/g, "~::~")
+      .split('~::~');
+  }
+
+  vkbeautify.prototype.sql = function (text, step) {
+
+    var ar_by_quote = text.replace(/\s{1,}/g, " ")
+        .replace(/\'/ig, "~::~\'")
+        .split('~::~'),
+      len = ar_by_quote.length,
+      ar = [],
+      deep = 0,
+      tab = this.step,//+this.step,
+      inComment = true,
+      inQuote = false,
+      parenthesisLevel = 0,
+      str = '',
+      ix = 0,
+      shift = step ? createShiftArr(step) : this.shift;
+    ;
+
+    for (ix = 0; ix < len; ix++) {
+      if (ix % 2) {
+        ar = ar.concat(ar_by_quote[ix]);
+      } else {
+        ar = ar.concat(split_sql(ar_by_quote[ix], tab));
+      }
+    }
+
+    len = ar.length;
+    for (ix = 0; ix < len; ix++) {
+
+      parenthesisLevel = isSubquery(ar[ix], parenthesisLevel);
+
+      if (/\s{0,}\s{0,}SELECT\s{0,}/.exec(ar[ix])) {
+        ar[ix] = ar[ix].replace(/\,/g, ",\n" + tab + tab + "")
+      }
+
+      if (/\s{0,}\s{0,}SET\s{0,}/.exec(ar[ix])) {
+        ar[ix] = ar[ix].replace(/\,/g, ",\n" + tab + tab + "")
+      }
+
+      if (/\s{0,}\(\s{0,}SELECT\s{0,}/.exec(ar[ix])) {
+        deep++;
+        str += shift[deep] + ar[ix];
+      } else if (/\'/.exec(ar[ix])) {
+        if (parenthesisLevel < 1 && deep) {
+          deep--;
+        }
+        str += ar[ix];
+      }
+      else {
+        str += shift[deep] + ar[ix];
+        if (parenthesisLevel < 1 && deep) {
+          deep--;
+        }
+      }
+      var junk = 0;
+    }
+
+    str = str.replace(/^\n{1,}/, '').replace(/\n{1,}/g, "\n").replace(/;/gi, ";\n\n");
+    return str;
+  }
+
+
+  vkbeautify.prototype.xmlmin = function (text, preserveComments) {
+
+    var str = preserveComments ? text
+      : text.replace(/\<![ \r\n\t]*(--([^\-]|[\r\n]|-[^\-])*--[ \r\n\t]*)\>/g, "")
+      .replace(/[ \r\n\t]{1,}xmlns/g, ' xmlns');
+    return str.replace(/>\s{0,}</g, "><");
+  }
+
+  vkbeautify.prototype.jsonmin = function (text) {
+
+    if (typeof JSON === 'undefined') return text;
+
+    return JSON.stringify(JSON.parse(text), null, 0);
+
+  }
+
+  vkbeautify.prototype.cssmin = function (text, preserveComments) {
+
+    var str = preserveComments ? text
+      : text.replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g, "");
+
+    return str.replace(/\s{1,}/g, ' ')
+      .replace(/\{\s{1,}/g, "{")
+      .replace(/\}\s{1,}/g, "}")
+      .replace(/\;\s{1,}/g, ";")
+      .replace(/\/\*\s{1,}/g, "/*")
+      .replace(/\*\/\s{1,}/g, "*/");
+  }
+
+  vkbeautify.prototype.sqlmin = function (text) {
+    return text.replace(/\s{1,}/g, " ").replace(/\s{1,}\(/, "(").replace(/\s{1,}\)/, ")");
+  }
+
+  window.vkbeautify = new vkbeautify();
+
+})();
+

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

@@ -2503,6 +2503,24 @@
         }
       });
 
+      editor.commands.addCommand({
+        name: "format",
+        bindKey: {win: "Ctrl-i", mac: "Command-i|Ctrl-i"},
+        exec: function () {
+          if (['ace/mode/hive', 'ace/mode/impala', 'ace/mode/sql', 'ace/mode/mysql', 'ace/mode/pgsql', 'ace/mode/sqlite', 'ace/mode/oracle'].indexOf(snippet.getAceMode()) > -1) {
+            if (vkbeautify) {
+              if (editor.getSelectedText() != '') {
+                editor.session.replace(editor.session.selection.getRange(), vkbeautify.sql(editor.getSelectedText(), 2));
+              }
+              else {
+                editor.setValue(vkbeautify.sql(editor.getValue(), 2), 1);
+                snippet.statement_raw(editor.getValue());
+              }
+            }
+          }
+        }
+      });
+
       huePubSub.subscribe("assist.dblClickDbItem", function(assistDbEntry) {
         if ($el.data("last-active-editor")) {
           var text = assistDbEntry.editorText();

+ 12 - 0
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -483,6 +483,18 @@
       self.execute();
     };
 
+    self.format = function () {
+      if (self.isSqlDialect() && vkbeautify) {
+        if (self.ace().getSelectedText() != '') {
+          self.ace().session.replace(self.ace().session.selection.getRange(), vkbeautify.sql(self.ace().getSelectedText(), 2));
+        }
+        else {
+          self.statement_raw(vkbeautify.sql(self.statement_raw(), 2));
+          self.ace().setValue(self.statement_raw(), 1);
+        }
+      }
+    };
+
     self.fetchResult = function (rows, startOver) {
       if (typeof startOver == "undefined") {
         startOver = true;

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

@@ -43,6 +43,7 @@ from desktop.views import _ko
 
 <script src="${ static('desktop/ext/js/bootstrap-editable.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/chosen/chosen.jquery.min.js') }" type="text/javascript" charset="utf-8"></script>
+<script src="${ static('desktop/ext/js/vkbeautify.js') }" type="text/javascript" charset="utf-8"></script>
 
 <script src="${ static('desktop/js/hue.geo.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/hue.colors.js') }" type="text/javascript" charset="utf-8"></script>
@@ -888,11 +889,14 @@ ${ require.config() }
       <i class="fa fa-fw fa-stop"></i>
     </a>
     <a class="snippet-side-btn" data-bind="click: reexecute, visible: $root.editorMode && result && result.handle().has_more, css: {'blue': $parent.history().length == 0 || $root.editorMode, 'disabled': statement() === '' }" title="${ _('Restart from the first statement') }">
-      <i class="fa fa-fw fa-sign-out"></i>
+      <i class="fa fa-fw fa-repeat"></i>
     </a>
     <a class="snippet-side-btn" data-bind="click: execute, visible: status() != 'running' && status() != 'loading', css: {'blue': $parent.history().length == 0 || $root.editorMode, 'disabled': statement() === '' }" title="${ _('Execute or CTRL + ENTER') }">
       <i class="fa fa-fw fa-play"></i>
     </a>
+    <a class="snippet-side-btn" data-bind="click: format, visible: status() != 'running' && status() != 'loading', css: {'disabled': statement() === '' }" title="${ _('Format the current SQL query') }">
+      <i class="fa fa-fw fa-indent"></i>
+    </a>
     <!-- ko if: $root.editorMode -->
       <a class="snippet-side-btn" data-bind="click: function() { $parent.showHistory(! $parent.showHistory()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'blue': true}" title="${ _('Show query history') }">
         <i class="fa fa-fw fa-history"></i>