Browse Source

[security] Added autocomplete for Hive

Enrico Berti 11 năm trước cách đây
mục cha
commit
a754f9896f

+ 1 - 0
apps/beeswax/src/beeswax/urls.py

@@ -60,6 +60,7 @@ urlpatterns += patterns(
   url(r'^api/autocomplete/$', 'autocomplete', name='api_autocomplete_databases'),
   url(r'^api/autocomplete/(?P<database>\w+)/$', 'autocomplete', name='api_autocomplete_tables'),
   url(r'^api/autocomplete/(?P<database>\w+)/(?P<table>\w+)$', 'autocomplete', name='api_autocomplete_columns'),
+  url(r'^api/autocomplete/(?P<database>\w+)/(?P<table>\w+)/$', 'autocomplete', name='api_autocomplete_columns'),
   url(r'^api/design/(?P<design_id>\d+)?$', 'save_query_design', name='api_save_design'),
   url(r'^api/design/(?P<design_id>\d+)/get$', 'fetch_saved_design', name='api_fetch_saved_design'),
   url(r'^api/query/(?P<query_history_id>\d+)/get$', 'fetch_query_history', name='api_fetch_query_history'),

+ 33 - 4
apps/security/src/security/templates/hive.mako

@@ -99,10 +99,10 @@ ${ layout.menubar(section='hive') }
 
         <div class="card-body">
           <div class="row-fluid">
-            <div class="span8">
+            <div class="span6">
               <div class="path-container">
                 <div class="input-append span12">
-                  <input id="path" class="path" type="text" data-bind="value: $root.assist.path, valueUpdate: 'afterkeydown'" autocomplete="off" />
+                  <input id="path" class="path" type="text" autocomplete="off" />
                   <a data-bind="attr: { href: '/metastore/' + $root.assist.path() }" target="_blank" title="${ _('Open in Metastore Browser') }" class="btn btn-inverse">
                     <i class="fa fa-external-link"></i>
                   </a>
@@ -142,7 +142,7 @@ ${ layout.menubar(section='hive') }
               ${ tree.render(id='expandableTree', data='$root.assist.treeData', afterRender='$root.assist.afterRender') }
 
             </div>
-            <div class="span4 acl-panel">
+            <div class="span6 acl-panel">
               <div class="acl-panel-content">
                 <h4>${ _('Privileges') }</h4>
                 <div data-bind="visible: $root.assist.privileges().length == 0"><em class="muted">${ _('No privileges found for the selected item.')}</em></div>
@@ -199,7 +199,7 @@ ${ layout.menubar(section='hive') }
                 </td>
                 <td class="center">
                   <a href="javascript:void(0);">
-                    <i class="fa" data-bind="click: function() { if (showPrivileges()) { showPrivileges(false); } else { $root.list_sentry_privileges_by_role($data);} }, css: {'fa-caret-right' : ! showPrivileges(), 'fa-caret-down': showPrivileges() }"></i>
+                    <i class="fa fa-2x fa-caret" data-bind="click: function() { if (showPrivileges()) { showPrivileges(false); } else { $root.list_sentry_privileges_by_role($data);} }, css: {'fa-caret-right' : ! showPrivileges(), 'fa-caret-down': showPrivileges() }"></i>
                   </a>
                 </td>
                 <td data-bind="text: name, click: function() { if (showPrivileges()) { showPrivileges(false); } else { $root.list_sentry_privileges_by_role($data);} }" class="pointer"></td>
@@ -286,6 +286,7 @@ ${ tree.import_templates(itemClick='$root.assist.setPath', iconClick='$root.assi
 <script src="/security/static/js/hive.ko.js" type="text/javascript" charset="utf-8"></script>
 
 <script src="/static/ext/js/moment.min.js" type="text/javascript" charset="utf-8"></script>
+  <script src="/static/js/jquery.hiveautocomplete.js" type="text/javascript" charset="utf-8"></script>
 
   <script type="text/javascript" charset="utf-8">
     var viewModel = new HiveViewModel(${ initial | n,unicode });
@@ -298,6 +299,28 @@ ${ tree.import_templates(itemClick='$root.assist.setPath', iconClick='$root.assi
         _initialPath = window.location.hash.substr(1);
       }
       viewModel.init(_initialPath);
+      $("#path").val(_initialPath);
+
+
+      function setPathFromAutocomplete(path){
+        if (path.lastIndexOf(".") == path.length -1){
+          path = path.substring(0, path.length - 1);
+        }
+        viewModel.assist.path(path);
+        viewModel.assist.updatePathProperty(viewModel.assist.growingTree(), path, "isExpanded", true);
+        viewModel.assist.fetchHivePath();
+      }
+
+      $("#path").jHueHiveAutocomplete({
+        home: viewModel.assist.path(),
+        onPathChange: function (path) {
+          setPathFromAutocomplete(path);
+        },
+        onEnter: function (el) {
+          setPathFromAutocomplete(el.val());
+        },
+        smartTooltip: "${_('Did you know? You can use the tab key or CTRL + Space to autocomplete file and folder names')}"
+      });
 
       function resizeComponents() {
         $("#path").width($(".tree-toolbar").width() - 64);
@@ -323,6 +346,12 @@ ${ tree.import_templates(itemClick='$root.assist.setPath', iconClick='$root.assi
         $("#createRoleModal").modal("hide");
       });
 
+      $(document).on("changed.path", function(){
+        if ($("#path").val() != viewModel.assist.path()){
+          $("#path").val(viewModel.assist.path());
+        }
+      });
+
       function showMainSection(mainSection) {
         if ($("#" + mainSection).is(":hidden")) {
           $(".mainSection").hide();

+ 4 - 0
apps/security/static/css/security.css

@@ -200,3 +200,7 @@ h1.emptyMessage {
   color: #BBB;
   line-height: 60px;
 }
+
+.fa-caret {
+  padding-top: 2px;
+}

+ 19 - 24
apps/security/static/js/hdfs.ko.js

@@ -349,32 +349,27 @@ var Assist = function (vm, assist) {
         'isDiffMode': self.isDiffMode()
       },
       function (data) {
-        if (data.error != null){
-          self.path("/");
+        self.loadParents(data.breadcrumbs);
+        if (data['files'] && data['files'][0] && data['files'][0]['type'] == 'dir') { // Hack for now
+          $.each(data.files, function (index, item) {
+            self.convertItemToObject(item);
+          });
         }
         else {
-          self.loadParents(data.breadcrumbs);
-          if (data['files'] && data['files'][0] && data['files'][0]['type'] == 'dir') { // Hack for now
-            $.each(data.files, function (index, item) {
-              self.convertItemToObject(item);
-            });
-          }
-          else {
-            self.convertItemToObject(data);
-          }
-          self.getTreeAdditionalDataForPath(_path).loaded = true;
-          if (data.page != null && data.page.number != null){
-            self.updatePathProperty(self.growingTree(), _path, "page", data.page);
-          }
-          if (typeof loadCallback != "undefined"){
-            loadCallback(data);
-          }
-          else {
-            self.loadData(self.growingTree());
-          }
-          if (typeof optionalPath == "undefined"){
-            self.getAcls();
-          }
+          self.convertItemToObject(data);
+        }
+        self.getTreeAdditionalDataForPath(_path).loaded = true;
+        if (data.page != null && data.page.number != null){
+          self.updatePathProperty(self.growingTree(), _path, "page", data.page);
+        }
+        if (typeof loadCallback != "undefined"){
+          loadCallback(data);
+        }
+        else {
+          self.loadData(self.growingTree());
+        }
+        if (typeof optionalPath == "undefined"){
+          self.getAcls();
         }
       }).fail(function (xhr, textStatus, errorThrown) {
         $(document).trigger("error", xhr.responseText);

+ 1 - 1
apps/security/static/js/hive.ko.js

@@ -193,7 +193,6 @@ var Assist = function (vm) {
 
   self.path = ko.observable("");
   self.path.subscribe(function (path) {
-    //self.fetchHivePath();
     window.location.hash = path;
   });
   self.server = ko.observable('');
@@ -397,6 +396,7 @@ var Assist = function (vm) {
       self.updatePathProperty(self.growingTree(), obj.path(), "isExpanded", obj.isExpanded());
     }
     self.path(obj.path());
+    $(document).trigger("changed.path");
     self.fetchHivePath();
   }
 

+ 7 - 3
desktop/core/static/css/hue3.css

@@ -1702,16 +1702,20 @@ border-bottom-left-radius: 0px;
 }
 
 
-#jHueHdfsAutocomplete ul li {
+#jHueHdfsAutocomplete ul li, #jHueHiveAutocomplete ul li {
   cursor: pointer;
 }
 
-#jHueHdfsAutocomplete ul li:hover,  #jHueHdfsAutocomplete ul li.active {
+#jHueHdfsAutocomplete ul li:hover, #jHueHdfsAutocomplete ul li.active, #jHueHiveAutocomplete ul li:hover, #jHueHiveAutocomplete ul li.active {
   color: #FFFFFF;
   background: #338BB8;
 }
 
-#jHueHdfsAutocomplete .popover-content {
+#jHueHdfsAutocomplete .popover-content, #jHueHiveAutocomplete .popover-content {
   max-height: 200px;
   overflow-y: auto;
 }
+
+.fa-1halfx {
+  font-size: 1.5em;
+}

+ 343 - 0
desktop/core/static/js/jquery.hiveautocomplete.js

@@ -0,0 +1,343 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/*
+ * jHue HDFS autocomplete plugin
+ * augment a textbox into an HDFS autocomplete
+ */
+
+(function ($, window, document, undefined) {
+  var pluginName = "jHueHiveAutocomplete",
+      defaults = {
+        home: "/",
+        onEnter: function () {
+        },
+        onBlur: function () {
+        },
+        onPathChange: function () {
+        },
+        smartTooltip: "",
+        smartTooltipThreshold: 10 // needs 10 up/down or click actions and no tab to activate the smart tooltip
+      };
+
+  function Plugin(element, options) {
+    this.element = element;
+    this.options = $.extend({}, defaults, options);
+    this._defaults = defaults;
+    this._name = pluginName;
+    this.init();
+  }
+
+  Plugin.prototype.init = function () {
+    var _this = this;
+    var _el = $(_this.element);
+
+    // creates autocomplete popover
+    if ($("#jHueHiveAutocomplete").length == 0) {
+      $("<div>").attr("id", "jHueHiveAutocomplete").addClass("popover")
+          .addClass("bottom").attr("style", "position:absolute;display:none;max-width:1000px;z-index:33000")
+          .html('<div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p><ul class="unstyled"></ul></p></div></div>')
+          .appendTo($("body"));
+    }
+
+    function setHueBreadcrumbCaretAtEnd(element) {
+      var elemLength = element.value.length;
+      if (document.selection) {
+        element.focus();
+        var _oSel = document.selection.createRange();
+        _oSel.moveStart('character', -elemLength);
+        _oSel.moveStart('character', elemLength);
+        _oSel.moveEnd('character', 0);
+        _oSel.select();
+      }
+      else if (element.selectionStart || element.selectionStart == '0') {
+        element.selectionStart = elemLength;
+        element.selectionEnd = elemLength;
+        element.focus();
+      }
+    }
+
+
+    _el.focus(function () {
+      $(document.body).on("contextmenu", function (e) {
+        e.preventDefault(); // prevents native menu on FF for Mac from being shown
+      });
+      setHueBreadcrumbCaretAtEnd(_this.element);
+    });
+
+    _el.keydown(function (e) {
+      if (e.keyCode == 9) {
+        e.preventDefault();
+        showHiveAutocomplete(function () {
+          var path = _el.val();
+          if (path.indexOf(".") > -1) {
+            path = path.substr(path.lastIndexOf(".") + 1);
+          }
+          guessHivePath(path);
+        });
+      }
+    });
+
+    function smartTooltipMaker() {
+      if (_this.options.smartTooltip != "" && typeof $.totalStorage != "undefined" && $.totalStorage("jHueHiveAutocompleteTooltip") != -1) {
+        var cnt = 0;
+        if ($.totalStorage("jHueHiveAutocompleteTooltip") != null) {
+          cnt = $.totalStorage("jHueHiveAutocompleteTooltip") + 1;
+        }
+        $.totalStorage("jHueHiveAutocompleteTooltip", cnt);
+        if (cnt >= _this.options.smartTooltipThreshold) {
+          _el.tooltip({
+            animation: true,
+            title: _this.options.smartTooltip,
+            trigger: "manual",
+            placement: "top"
+          }).tooltip("show");
+          window.setTimeout(function () {
+            _el.tooltip("hide");
+          }, 10000);
+          $.totalStorage("jHueHiveAutocompleteTooltip", -1);
+        }
+      }
+    }
+
+    $(window).on("scroll", function(){
+      $("#jHueHiveAutocomplete").css("top", _el.offset().top + _el.outerHeight()).css("left", _el.offset().left).width(_el.width());
+    });
+
+    var _hdfsAutocompleteSelectedIndex = -1;
+    var _filterTimeout = -1;
+    _el.keyup(function (e) {
+      window.clearTimeout(_filterTimeout);
+      if ($.inArray(e.keyCode, [17, 38, 40, 13, 32, 191]) == -1) {
+        _hdfsAutocompleteSelectedIndex = -1;
+        _filterTimeout = window.setTimeout(function () {
+          var path = _el.val();
+          if (path.indexOf(".") > -1) {
+            path = path.substr(path.lastIndexOf(".") + 1);
+          }
+          $("#jHueHiveAutocomplete ul li").show();
+          if (path != ""){
+            $("#jHueHiveAutocomplete ul li").each(function () {
+              if ($(this).text().trim().indexOf(path) != 0) {
+                $(this).hide();
+              }
+            });
+          }
+        }, 500);
+      }
+      if (e.keyCode == 38) {
+        if (_hdfsAutocompleteSelectedIndex <= 0) {
+          _hdfsAutocompleteSelectedIndex = $("#jHueHiveAutocomplete ul li:visible").length - 1;
+        }
+        else {
+          _hdfsAutocompleteSelectedIndex--;
+        }
+      }
+      if (e.keyCode == 40) {
+        if (_hdfsAutocompleteSelectedIndex == $("#jHueHiveAutocomplete ul li:visible").length - 1) {
+          _hdfsAutocompleteSelectedIndex = 0;
+        }
+        else {
+          _hdfsAutocompleteSelectedIndex++;
+        }
+      }
+      if (e.keyCode == 38 || e.keyCode == 40) {
+        smartTooltipMaker();
+        $("#jHueHiveAutocomplete ul li").removeClass("active");
+        $("#jHueHiveAutocomplete ul li:visible").eq(_hdfsAutocompleteSelectedIndex).addClass("active");
+        $("#jHueHiveAutocomplete .popover-content").scrollTop($("#jHueHiveAutocomplete ul li:visible").eq(_hdfsAutocompleteSelectedIndex).prevAll().length * $("#jHueHiveAutocomplete ul li:visible").eq(_hdfsAutocompleteSelectedIndex).outerHeight());
+      }
+      if ((e.keyCode == 32 && e.ctrlKey) || e.keyCode == 191) {
+        smartTooltipMaker();
+        showHiveAutocomplete();
+      }
+      if (e.keyCode == 13) {
+        if (_hdfsAutocompleteSelectedIndex > -1) {
+          $("#jHueHiveAutocomplete ul li:visible").eq(_hdfsAutocompleteSelectedIndex).click();
+        }
+        else {
+          _this.options.onEnter($(this));
+        }
+        $("#jHueHiveAutocomplete").hide();
+        _hdfsAutocompleteSelectedIndex = -1;
+      }
+    });
+
+    var _pauseBlur = false;
+
+    _el.blur(function () {
+      if (!_pauseBlur) {
+        $(document.body).off("contextmenu");
+        $("#jHueHiveAutocomplete").hide();
+        _this.options.onBlur();
+      }
+    });
+
+    var BASE_PATH = "/beeswax/api/autocomplete/";
+    var _currentFiles = [];
+
+    function showHiveAutocomplete(callback) {
+      var path = _el.val();
+      var autocompleteUrl = BASE_PATH;
+
+      if (path != "" && path.indexOf(".") == -1) {
+        path = "";
+      }
+
+      if (path != "" && path.lastIndexOf(".") != path.length - 1) {
+        path = path.substring(0, _el.val().lastIndexOf("."));
+      }
+
+      autocompleteUrl += path.replace(/\./g, "/");
+
+      $.getJSON(autocompleteUrl, function (data) {
+        if (data.error == null) {
+          _currentFiles = [];
+
+          var _ico = "";
+          var _iterable = [];
+
+          if (data.databases != null){ // it's a db
+            _iterable = data.databases;
+            _ico = "fa-database";
+          }
+          else if (data.tables != null) { // it's a table
+            _iterable = data.tables;
+            _ico = "fa-table";
+          }
+          else {
+            _iterable = data.columns;
+            _ico = "fa-columns";
+          }
+
+
+          $(_iterable).each(function (cnt, item) {
+            _currentFiles.push('<li class="hiveAutocompleteItem" data-value="' + item + '"><i class="fa '+ _ico +'"></i> ' + item + '</li>');
+          });
+
+            $("#jHueHiveAutocomplete").css("top", _el.offset().top + _el.outerHeight()).css("left", _el.offset().left).width(_el.width());
+            $("#jHueHiveAutocomplete").find("ul").empty().html(_currentFiles.join(""));
+            $("#jHueHiveAutocomplete").find("li").on("click", function (e) {
+              smartTooltipMaker();
+              e.preventDefault();
+              var item = $(this).text().trim();
+              var path = autocompleteUrl.substring(BASE_PATH.length);
+
+              if ($(this).html().indexOf("database") > -1){
+                _el.val(item + ".");
+                _this.options.onPathChange(item);
+                showHiveAutocomplete();
+              }
+
+              if ($(this).html().indexOf("table") > -1){
+                if (_el.val().indexOf(".") > -1){
+                  if (_el.val().match(/\./gi).length == 1){
+                    _el.val(_el.val().substring(0, _el.val().lastIndexOf(".") + 1) + item + ".");
+                  }
+                  else {
+                    _el.val(_el.val().substring(0, _el.val().indexOf(".") + 1) + item + ".");
+                  }
+                }
+                else {
+                  _el.val(_el.val() + item + ".");
+                }
+                _this.options.onPathChange(_el.val());
+                showHiveAutocomplete();
+              }
+
+              if ($(this).html().indexOf("columns") > -1){
+                if (_el.val().match(/\./gi).length > 1){
+                  _el.val(_el.val().substring(0, _el.val().lastIndexOf(".") + 1) + item);
+                }
+                else {
+                  _el.val(_el.val() + "." + item);
+                }
+                $("#jHueHiveAutocomplete").hide();
+                _hdfsAutocompleteSelectedIndex = -1;
+                //_this.options.onEnter(_el);
+                _this.options.onPathChange(_el.val());
+              }
+
+            });
+            $("#jHueHiveAutocomplete").show();
+            window.setTimeout(function(){
+              setHueBreadcrumbCaretAtEnd(_this.element);
+            }, 100)
+            if ("undefined" != typeof callback) {
+              callback();
+            }
+        }
+      });
+    }
+
+    $(document).on("mouseenter", ".hiveAutocompleteItem", function () {
+      _pauseBlur = true;
+    });
+
+    $(document).on("mouseout", ".hiveAutocompleteItem", function () {
+      _pauseBlur = false;
+    })
+
+    function guessHivePath(lastChars) {
+      var possibleMatches = [];
+      for (var i = 0; i < _currentFiles.length; i++) {
+        if (($(_currentFiles[i]).text().trim().indexOf(lastChars) == 0 || lastChars == "") && $(_currentFiles[i]).text().trim() != "..") {
+          possibleMatches.push(_currentFiles[i]);
+        }
+      }
+      if (possibleMatches.length == 1) {
+        _el.val(_el.val() + $(possibleMatches[0]).text().trim().substr(lastChars.length));
+        if ($(possibleMatches[0]).html().indexOf("folder") > -1) {
+          _el.val(_el.val() + "/");
+          showHiveAutocomplete();
+        }
+      }
+      else if (possibleMatches.length > 1) {
+        // finds the longest common prefix
+        var possibleMatchesPlain = [];
+        for (var z = 0; z < possibleMatches.length; z++) {
+          possibleMatchesPlain.push($(possibleMatches[z]).text().trim());
+        }
+        var arr = possibleMatchesPlain.slice(0).sort(),
+            word1 = arr[0], word2 = arr[arr.length - 1],
+            j = 0;
+        while (word1.charAt(j) == word2.charAt(j))++j;
+        var match = word1.substring(0, j);
+        _el.val(_el.val() + match.substr(lastChars.length));
+      }
+    }
+  };
+
+  Plugin.prototype.setOptions = function (options) {
+    this.options = $.extend({}, defaults, options);
+  };
+
+
+  $.fn[pluginName] = function (options) {
+    return this.each(function () {
+      if (!$.data(this, 'plugin_' + pluginName)) {
+        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+      }
+    });
+  }
+
+  $[pluginName] = function (options) {
+    if (typeof console != "undefined") {
+      console.warn("$(elem).jHueHiveAutocomplete() is a preferred call method.");
+    }
+    $(options.element).jHueHiveAutocomplete(options);
+  };
+
+})(jQuery, window, document);