ソースを参照

HUE-3430 [metastore] Navigate by editing table name in the breadcrumbs

Enrico Berti 9 年 前
コミット
5d1c7f4f4d

+ 36 - 2
apps/metastore/src/metastore/static/metastore/css/metastore.css

@@ -17,12 +17,18 @@
 */
 
 .hueBreadcrumb {
-  /*padding: 12px 14px;*/
 }
 
 .hueBreadcrumbBar {
   padding: 0;
-  /*margin: 12px;*/
+}
+
+.hueBreadcrumbBar li {
+  padding: 12px;
+}
+
+.hueBreadcrumbBar li:first-child {
+  padding-left: 0;
 }
 
 .hueBreadcrumbBar a {
@@ -86,6 +92,7 @@ h2.card-heading {
 
 .metastore-main {
   padding: 20px;
+  padding-top: 10px;
 }
 
 .metastore-main h3 {
@@ -124,3 +131,30 @@ h2.card-heading {
 .empty-message {
   padding: 10px;
 }
+
+.editable-breadcrumbs {
+  cursor: text;
+}
+
+.editable-breadcrumbs:hover {
+  background-color: #F0F0F0;
+}
+
+.editable-breadcrumb-input {
+  padding: 0!important;
+}
+
+.editable-breadcrumb-input input {
+  font-size: 22.75px;
+  height: 36px;
+  margin: 0;
+  margin-top: 3px;
+  padding-left: 11px;
+  border-radius: 2px;
+  border: 1px solid #EEE;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  font-weight: 300;
+}
+

+ 1 - 0
apps/metastore/src/metastore/static/metastore/js/metastore.ko.js

@@ -86,6 +86,7 @@
 
     self.selectedTables = ko.observableArray();
 
+    self.editingTable = ko.observable(false);
     self.table = ko.observable(null);
     
     self.addTags = function () {

+ 10 - 2
apps/metastore/src/metastore/templates/metastore.mako

@@ -43,6 +43,7 @@ ${ assist.assistPanel() }
 <script src="${ static('desktop/js/nv.d3.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/nv.d3.growingPie.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/nv.d3.growingPieChart.js') }" type="text/javascript" charset="utf-8"></script>
+<script src="${ static('desktop/js/jquery.hiveautocomplete.js') }" type="text/javascript" charset="utf-8"></script>
 
 <link rel="stylesheet" href="${ static('desktop/ext/css/bootstrap-editable.css') }">
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }" type="text/css">
@@ -76,10 +77,17 @@ ${ assist.assistPanel() }
       <!-- /ko -->
     </li>
     <!-- ko with: table -->
-    <li>
-      <span style="padding-left:12px" data-bind="text: name"></span>
+    <li class="editable-breadcrumbs" title="${_('Edit path')}" data-bind="click: function(){ $parent.editingTable(true); }, visible: !$parent.editingTable()">
+      <span data-bind="text: name"></span>
     </li>
     <!-- /ko -->
+    <!-- ko if: editingTable -->
+      <!-- ko with: table -->
+      <li class="editable-breadcrumb-input">
+        <input type="text" data-bind="hivechooser: {data: name, database: $parent.name, skipColumns: true, onChange: function(val){ $parent.setTableByName(val); $parent.editingTable(false); }}" autocomplete="off" />
+      </li>
+      <!-- /ko -->
+    <!-- /ko -->
     <!-- /ko -->
   </ul>
 </script>

+ 22 - 12
desktop/core/src/desktop/static/desktop/js/jquery.hiveautocomplete.js

@@ -14,8 +14,8 @@
 // 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
+ * jHue generic autocomplete plugin
+ * augment a textbox into an generic hive/solr autocomplete
  */
 
 (function ($, window, document, undefined) {
@@ -32,7 +32,9 @@
         },
         smartTooltip: "",
         smartTooltipThreshold: 10, // needs 10 up/down or click actions and no tab to activate the smart tooltip
-        showOnFocus: false
+        showOnFocus: false,
+        startingPath: '',
+        rewriteVal: false
       };
 
   function Plugin(element, options) {
@@ -84,7 +86,7 @@
     _el.keydown(function (e) {
       if (e.keyCode == 9) {
         e.preventDefault();
-        showHiveAutocomplete(function () {
+        showAutocomplete(function () {
           var path = _el.val();
           if (path.indexOf(".") > -1) {
             path = path.substr(path.lastIndexOf(".") + 1);
@@ -165,7 +167,7 @@
       }
       if ((e.keyCode == 32 && e.ctrlKey) || e.keyCode == 191) {
         smartTooltipMaker();
-        showHiveAutocomplete();
+        showAutocomplete();
       }
       if (e.keyCode == 13) {
         _pauseBlur = true;
@@ -182,7 +184,7 @@
 
     if (_this.options.showOnFocus){
       _el.on("focus", function(){
-        showHiveAutocomplete();
+        showAutocomplete();
       });
     }
 
@@ -205,8 +207,11 @@
     }
     var _currentFiles = [];
 
-    function showHiveAutocomplete(callback) {
+    function showAutocomplete(callback) {
       var path = _el.val();
+      if (_this.options.startingPath != ''){
+        path = _this.options.startingPath + path;
+      }
       var autocompleteUrl = BASE_PATH;
 
       if (path != "" && path.indexOf(".") == -1) {
@@ -214,7 +219,7 @@
       }
 
       if (path != "" && path.lastIndexOf(".") != path.length - 1) {
-        path = path.substring(0, _el.val().lastIndexOf("."));
+        path = path.substring(0, (_this.options.startingPath + _el.val()).lastIndexOf("."));
       }
 
       if (_this.options.serverType != "SOLR") {
@@ -286,7 +291,7 @@
               if ($(this).html().indexOf("database") > -1){
                 _el.val(item + ".");
                 _this.options.onPathChange(_el.val());
-                showHiveAutocomplete();
+                showAutocomplete();
               }
 
               if ($(this).html().indexOf("table") > -1){
@@ -299,14 +304,19 @@
                   }
                 }
                 else {
-                  _el.val(_el.val() + item);
+                  if (_this.options.rewriteVal) {
+                    _el.val(item);
+                  }
+                  else {
+                    _el.val(_el.val() + item);
+                  }
                 }
                 if (! _this.options.skipColumns){
                   _el.val(_el.val() + ".");
                 }
                 _this.options.onPathChange(_el.val());
                 if (! _this.options.skipColumns) {
-                  showHiveAutocomplete();
+                  showAutocomplete();
                 }
                 else {
                   _this.options.onEnter(_el);
@@ -359,7 +369,7 @@
         _el.val(_el.val() + $(possibleMatches[0]).text().trim().substr(lastChars.length));
         if ($(possibleMatches[0]).html().indexOf("folder") > -1) {
           _el.val(_el.val() + "/");
-          showHiveAutocomplete();
+          showAutocomplete();
         }
       }
       else if (possibleMatches.length > 1) {

+ 48 - 25
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -2115,34 +2115,57 @@
   ko.bindingHandlers.hivechooser = {
     init: function (element, valueAccessor, allBindingsAccessor, vm) {
       var self = $(element);
-      self.val(valueAccessor()());
-
-      function setPathFromAutocomplete(path) {
-        self.val(path);
-        valueAccessor()(path);
-        self.blur();
+      var options = ko.unwrap(valueAccessor());
+      var complexConfiguration = false;
+      if (typeof options === 'function'){
+        self.val(options());
+      }
+      else {
+        if (options.data){
+          self.val(options.data);
+          complexConfiguration = true;
+        }
+        else {
+          self.val(options);
+        }
       }
 
-      self.on("blur", function () {
-        valueAccessor()(self.val());
-      });
-
-      self.jHueGenericAutocomplete({
-        showOnFocus: true,
-        home: "/",
-        onPathChange: function (path) {
-          setPathFromAutocomplete(path);
-        },
-        onEnter: function (el) {
-          setPathFromAutocomplete(el.val());
-        },
-        onBlur: function () {
-          if (self.val().lastIndexOf(".") == self.val().length - 1) {
-            self.val(self.val().substr(0, self.val().length - 1));
-          }
-          valueAccessor()(self.val());
+      if (complexConfiguration) {
+        self.jHueGenericAutocomplete({
+          showOnFocus: true,
+          skipColumns: options.skipColumns,
+          startingPath: options.database + '.',
+          rewriteVal: true,
+          onPathChange: options.onChange
+        });
+      }
+      else {
+        function setPathFromAutocomplete(path) {
+          self.val(path);
+          valueAccessor()(path);
+          self.blur();
         }
-      });
+        self.on("blur", function () {
+          valueAccessor()(self.val());
+        });
+        self.jHueGenericAutocomplete({
+          showOnFocus: true,
+          home: "/",
+          onPathChange: function (path) {
+            setPathFromAutocomplete(path);
+          },
+          onEnter: function (el) {
+            setPathFromAutocomplete(el.val());
+          },
+          onBlur: function () {
+            if (self.val().lastIndexOf(".") == self.val().length - 1) {
+              self.val(self.val().substr(0, self.val().length - 1));
+            }
+            valueAccessor()(self.val());
+          }
+        });
+      }
+
     }
   }