Browse Source

HUE-5724 [assist] Keep the formatting when copying the view sql definition

I also added a spinner for the formatting operation
Johan Ahlen 8 years ago
parent
commit
acd98fd

+ 60 - 74
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -82,7 +82,7 @@
   ko.bindingHandlers.clickToCopy = {
     init: function (element, valueAccessor) {
       $(element).click(function () {
-        var $input = $('<input>').css({ opacity: 0 }).val(valueAccessor()).appendTo('body').select();
+        var $input = $('<textarea>').css({ opacity: 0 }).val(ko.unwrap(valueAccessor())).appendTo('body').select();
         document.execCommand('copy');
         $input.remove()
       });
@@ -4905,99 +4905,85 @@
     init: function (element) {
       $(element).addClass('ace-highlight');
     },
-    update: function (element, valueAccessor, allBindingsAccessor) {
+    update: function (element, valueAccessor) {
       var options = $.extend({
         dialect: 'hive',
         value: '',
-        format: false
+        formatted: false
       }, valueAccessor());
 
-      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 value = ko.unwrap(options.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) {
+          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 {
                 screenColumn = txt.$renderToken(stringBuilder, screenColumn, token, value);
               }
-              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;
+              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;
               }
-            };
-
-            var additionalClass = '';
-            if (!options.splitLines && !options.format) {
-              additionalClass = 'pull-left';
-            } else if (options.format) {
-              additionalClass = 'ace-highlight-pre';
             }
+          };
 
-            lines.forEach(function (line) {
-              var renderedTokens = [];
-              var tokens = tok.getLineTokens(line);
+          var additionalClass = '';
+          if (!options.splitLines && !options.formatted) {
+            additionalClass = 'pull-left';
+          } else if (options.formatted) {
+            additionalClass = 'ace-highlight-pre';
+          }
 
-              if (tokens && tokens.tokens.length) {
-                renderSimpleLine(new Text(document.createElement('div')), renderedTokens, tokens.tokens);
-              }
+          lines.forEach(function (line) {
+            var renderedTokens = [];
+            var tokens = tok.getLineTokens(line);
 
-              res.push('<div class="ace_line ' + additionalClass + '">' + renderedTokens.join('') + '&nbsp;</div>');
-            });
+            if (tokens && tokens.tokens.length) {
+              renderSimpleLine(new Text(document.createElement('div')), renderedTokens, tokens.tokens);
+            }
 
-            element.innerHTML = '<div class="ace_editor ace-hue"><div class="ace_layer" style="position: static;">' + res.join('') + '</div></div>';
+            res.push('<div class="ace_line ' + additionalClass + '">' + renderedTokens.join('') + '&nbsp;</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);
+          element.innerHTML = '<div class="ace_editor ace-hue"><div class="ace_layer" style="position: static;">' + res.join('') + '</div></div>';
+        });
       }
+
+
     }
   };
 

+ 17 - 2
desktop/core/src/desktop/templates/sql_context_popover.mako

@@ -205,7 +205,10 @@ 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: { value: viewSql, format: true, dialect: $parent.sourceType }"></div>
+      <!-- ko hueSpinner: { spin: loadingViewSql, center: true, size: 'large' } --><!-- /ko -->
+      <!-- ko ifnot: loadingViewSql -->
+      <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, formatted: true, dialect: $parent.sourceType }"></div>
+      <!-- /ko -->
       <!-- /ko -->
     </div>
     <!-- /ko -->
@@ -507,7 +510,19 @@ from metadata.conf import has_navigator
             if (typeof data.properties !== 'undefined') {
               data.properties.forEach(function (property) {
                 if (property.col_name.toLowerCase() === 'view original text:') {
-                  data.viewSql = property.data_type;
+                  data.viewSql = ko.observable();
+                  data.loadingViewSql = ko.observable(true);
+                  ApiHelper.getInstance().formatSql(property.data_type).done(function (formatResponse) {
+                    if (formatResponse.status == 0) {
+                      data.viewSql(formatResponse.formatted_statements);
+                    } else {
+                      data.viewSql(property.data_type);
+                    }
+                  }).fail(function () {
+                    data.viewSql(property.data_type);
+                  }).always(function () {
+                    data.loadingViewSql(false);
+                  })
                 }
               })
             }