瀏覽代碼

HUE-5681 [editor] Add details for popular order by, group by and filter to the autocomplete dropdown

Johan Ahlen 8 年之前
父節點
當前提交
e4ac796

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

@@ -1285,6 +1285,7 @@ var SqlAutocompleter3 = (function () {
         tables: suggestFilters.tables,
         successCallback: function (data) {
           var filterSuggestions = [];
+          var totalCount = 0;
           data.values.forEach(function (value) {
             if (typeof value.popularValues !== 'undefined' && value.popularValues.length > 0) {
               value.popularValues.forEach(function (popularValue) {
@@ -1300,6 +1301,7 @@ var SqlAutocompleter3 = (function () {
                       compVal += ' ';
                     }
                     compVal += grp.literal;
+                    totalCount += popularValue.count;
                     filterSuggestions.push({
                       value: compVal,
                       meta: AutocompleterGlobals.i18n.meta.filter,
@@ -1312,6 +1314,11 @@ var SqlAutocompleter3 = (function () {
               });
             }
           });
+          filterSuggestions.forEach(function (suggestion) {
+            suggestion.details.relativePopularity = totalCount === 0 ? suggestion.details.count : Math.round(100 * suggestion.details.count / totalCount);
+            suggestion.weightAdjust = suggestion.details.relativePopularity + 1;
+          });
+
           self.entries(self.entries().concat(filterSuggestions));
           self.loadingFilters(false);
           filtersDeferred.resolve(filterSuggestions);

+ 27 - 7
desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

@@ -255,7 +255,6 @@ from desktop.views import _ko
   </script>
 
   <script type="text/html" id="autocomplete-details-table">
-    <!-- ko if: details -->
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw" data-bind="css: { 'fa-eye': details.type.toLowerCase() !== 'table', 'fa-table': details.type.toLowerCase() === 'table' }"></i> <span data-bind="text: details.name"></span></div>
       <div class="autocompleter-details-contents">
@@ -272,11 +271,9 @@ from desktop.views import _ko
         <!-- /ko -->
       </div>
     </div>
-    <!-- /ko -->
   </script>
 
   <script type="text/html" id="autocomplete-details-column">
-    <!-- ko if: details -->
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-columns"></i> <span data-bind="text: details.name"></span></div>
       <div class="autocompleter-details-contents">
@@ -295,7 +292,6 @@ from desktop.views import _ko
         <!-- /ko -->
       </div>
     </div>
-    <!-- /ko -->
   </script>
 
   <script type="text/html" id="autocomplete-details-variable">
@@ -348,19 +344,43 @@ from desktop.views import _ko
 
   <script type="text/html" id="autocomplete-details-group-by">
     <div class="autocompleter-details">
-      <pre data-bind="text: ko.mapping.toJSON(details)"></pre>
+      <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular group by')}</div>
+      <div class="autocompleter-details-contents">
+        <div class="details-code" data-bind="text: value"></div>
+        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Workload percent') } ' + details.workloadPercent + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-icon"></i>
+          <div class="progress">
+            <div class="bar" data-bind="style: { 'width': details.workloadPercent + '%' }"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </script>
 
   <script type="text/html" id="autocomplete-details-order-by">
     <div class="autocompleter-details">
-      <pre data-bind="text: ko.mapping.toJSON(details)"></pre>
+      <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular order by')}</div>
+      <div class="autocompleter-details-contents">
+        <div class="details-code" data-bind="text: value"></div>
+        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Workload percent') } ' + details.workloadPercent + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-icon"></i>
+          <div class="progress">
+            <div class="bar" data-bind="style: { 'width': details.workloadPercent + '%' }"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </script>
 
   <script type="text/html" id="autocomplete-details-filter">
     <div class="autocompleter-details">
-      <pre data-bind="text: ko.mapping.toJSON(details)"></pre>
+      <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular filter')}</div>
+      <div class="autocompleter-details-contents">
+        <div class="details-code" data-bind="text: value"></div>
+        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.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.relativePopularity + '%' }"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </script>