Sfoglia il codice sorgente

HUE-5633 [editor] Show column details in the autocomplete dropdown

Johan Ahlen 8 anni fa
parent
commit
3cc72e5

+ 21 - 0
desktop/core/src/desktop/static/desktop/js/sqlAutocompleter3.js

@@ -672,6 +672,9 @@ var SqlAutocompleter3 = (function () {
       var callback = function (data) {
         if (data.extended_columns) {
           data.extended_columns.forEach(function (column) {
+            column.database = data.database;
+            column.table = data.table;
+            column.identifierChain = data.identifierChain;
             if (column.type.indexOf('map') === 0 && self.snippet.type() === 'hive') {
               columnSuggestions.push({
                 value: self.backTickIfNeeded(column.name) + '[]',
@@ -734,6 +737,9 @@ var SqlAutocompleter3 = (function () {
           });
         } else if (data.columns) {
           data.columns.forEach(function (column) {
+            column.database = data.database;
+            column.table = data.table;
+            column.identifierChain = data.identifierChain;
             columnSuggestions.push({
               value: self.backTickIfNeeded(column),
               meta: 'column',
@@ -761,6 +767,10 @@ var SqlAutocompleter3 = (function () {
         }
         if (data.type === 'struct') {
           data.fields.forEach(function (field) {
+            field.database = data.database;
+            field.table = data.table;
+            field.identifierChain = data.identifierChain;
+
             columnSuggestions.push({
               value: self.backTickIfNeeded(field.name),
               meta: field.type,
@@ -771,6 +781,10 @@ var SqlAutocompleter3 = (function () {
           });
         } else if (data.type === 'map' && (data.value && data.value.fields)) {
           data.value.fields.forEach(function (field) {
+            field.database = data.database;
+            field.table = data.table;
+            field.identifierChain = data.identifierChain;
+
             if (SqlFunctions.matchesType(self.snippet.type(), types, [field.type.toUpperCase()]) ||
                 SqlFunctions.matchesType(self.snippet.type(), [field.type.toUpperCase()], types)) {
               columnSuggestions.push({
@@ -785,6 +799,10 @@ var SqlAutocompleter3 = (function () {
         } else if (data.type === 'array' && data.item) {
           if (data.item.fields) {
             data.item.fields.forEach(function (field) {
+              field.database = data.database;
+              field.table = data.table;
+              field.identifierChain = data.identifierChain;
+
               if ((field.type === 'array' || field.type === 'map')) {
                 if (self.snippet.type() === 'hive') {
                   columnSuggestions.push({
@@ -1539,6 +1557,9 @@ var SqlAutocompleter3 = (function () {
             }
             fetchFieldsInternal(table, database, identifierChain, callback, errorCallback, fetchedFields)
           } else {
+            data.database = database;
+            data.table = table;
+            data.identifierChain = originalIdentifierChain;
             callback(data);
           }
         },

+ 24 - 4
desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

@@ -140,7 +140,9 @@ from desktop.views import _ko
       color: #EDB233;
     }
 
+    .autocomplete-details-table .details-attribute,
     .autocomplete-details-table .details-popularity {
+      color: #737373;
       display: inline-block;
     }
 
@@ -213,12 +215,13 @@ from desktop.views import _ko
   </script>
 
   <script type="text/html" id="autocomplete-details-table">
-    <!-- ko if: details.comment || details.popularity -->
+    <!-- ko if: details -->
     <div class="autocompleter-details">
       <div class="autocomplete-details-table">
-        <div class="details-header"><i class="fa fa-fw" data-bind="css: { 'fa-eye': details.type !== 'table', 'fa-table': details.type !== 'table' }"></i> <span data-bind="text: details.database + '.' + details.name"></span></div>
+        <div class="details-header"><i class="fa fa-fw" data-bind="css: { 'fa-eye': details.type !== 'table', 'fa-table': details.type !== 'table' }"></i> <span data-bind="text: details.name"></span></div>
+        <div class="details-attribute" ><i class="fa fa-database fa-fw"></i> <span data-bind="text: details.database"></span></div>
         <!-- ko if: typeof details.popularity !== 'undefined' -->
-        <div class="details-popularity" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.popularity.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-icon"></i>
+        <div class="details-popularity margin-left-5" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.popularity.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-icon"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.popularity.relativePopularity + '%' }"></div>
           </div>
@@ -233,9 +236,26 @@ from desktop.views import _ko
   </script>
 
   <script type="text/html" id="autocomplete-details-column">
+    <!-- ko if: details -->
     <div class="autocompleter-details">
-      <pre data-bind="text: ko.mapping.toJSON(details)"></pre>
+      <div class="autocomplete-details-table">
+        <div class="details-header"><i class="fa fa-fw fa-columns"></i> <span data-bind="text: details.name"></span></div>
+        <div class="details-attribute" ><i class="fa fa-database fa-fw"></i> <span data-bind="text: details.database"></span></div>
+        <div class="details-attribute" ><i class="fa fa-table fa-fw"></i> <span data-bind="text: details.table"></span></div>
+        <!-- ko if: typeof details.popularity !== 'undefined' -->
+        <br/>
+        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.popularity.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-icon"></i>
+          <div class="progress">
+            <div class="bar" data-bind="style: { 'width': details.popularity.relativePopularity + '%' }"></div>
+          </div>
+        </div>
+        <!-- /ko -->
+        <!-- ko if: typeof details.comment !== 'undefined' && details.comment !== null -->
+        <div class="details-comment" data-bind="text: details.comment"></div>
+        <!-- /ko -->
+      </div>
     </div>
+    <!-- /ko -->
   </script>
 
   <script type="text/html" id="autocomplete-details-variable">