Przeglądaj źródła

HUE-5699 [assist] Show a star next to popular tables in the assist

Johan Ahlen 8 lat temu
rodzic
commit
9a9b2661b4

+ 3 - 3
desktop/core/src/desktop/static/desktop/css/hue.css

@@ -506,6 +506,9 @@ a {
   line-height: 18px;
   margin-bottom: 10px;
 }
+.popular-color {
+  color: #EDB233;
+}
 /*
  Licensed to Cloudera, Inc. under one
  or more contributor license agreements.  See the NOTICE file
@@ -639,9 +642,6 @@ a {
   height: 8px;
   border-radius: 4px;
 }
-.popular-icon {
-  color: #EDB233;
-}
 .autocompleter-details-contents {
   flex: 1 1 100%;
   overflow-y: auto;

+ 3 - 3
desktop/core/src/desktop/static/desktop/css/hue3-extra.css

@@ -506,6 +506,9 @@ a {
   line-height: 18px;
   margin-bottom: 10px;
 }
+.popular-color {
+  color: #EDB233;
+}
 /*
  Licensed to Cloudera, Inc. under one
  or more contributor license agreements.  See the NOTICE file
@@ -639,9 +642,6 @@ a {
   height: 8px;
   border-radius: 4px;
 }
-.popular-icon {
-  color: #EDB233;
-}
 .autocompleter-details-contents {
   flex: 1 1 100%;
   overflow-y: auto;

+ 3 - 36
desktop/core/src/desktop/static/desktop/js/assist/assistDbEntry.js

@@ -52,8 +52,7 @@ var AssistDbEntry = (function () {
     self.highlight = ko.observable(false);
     self.highlightParent = ko.observable(false);
     self.activeSort = self.assistDbSource.activeSort;
-    self.popularityIndex = {};
-    self.popularityIndexSet = false;
+    self.popularity = ko.observable(0);
 
     self.expandable = typeof definition.type === "undefined" || /table|view|struct|array|map/i.test(definition.type);
 
@@ -77,34 +76,8 @@ var AssistDbEntry = (function () {
       return self.entries().length > 0;
     });
 
-    var deferredSort = false;
-
-    self.assistDbSource.selectedDatabase.subscribe(function (newValue) {
-      if (newValue === self && deferredSort) {
-        self.applySort(self.assistDbSource.activeSort(), self.entries);
-      }
-    });
-
-    self.applySort = function (sortName, entries) {
-      if (sortName === 'popular' && self.definition.isDatabase) {
-        if (self.assistDbSource.selectedDatabase() === self) {
-          self.entries().forEach(function (entry) {
-            if (self.popularityIndex[entry.definition.name]) {
-              entry.definition.popularity = self.popularityIndex[entry.definition.name];
-            }
-            entries.sort(self.sortFunctions.popular);
-          });
-          deferredSort = false;
-        } else {
-          deferredSort = true;
-        }
-      } else {
-        entries.sort(self.sortFunctions[sortName]);
-      }
-    };
-
     self.assistDbSource.activeSort.subscribe(function (newSort) {
-      self.applySort(newSort, self.entries);
+      self.entries.sort(self.sortFunctions[newSort]);
     });
 
     self.filteredEntries = ko.pureComputed(function () {
@@ -181,12 +154,6 @@ var AssistDbEntry = (function () {
     });
   }
 
-  AssistDbEntry.prototype.setPopularityIndex = function (popularityIndex) {
-    var self = this;
-    self.popularityIndexSet = true;
-    self.popularityIndex = popularityIndex;
-  };
-
   AssistDbEntry.prototype.showContextPopover = function (entry, event, positionAdjustment) {
     var self = this;
     var $source = $(event.target);
@@ -383,7 +350,7 @@ var AssistDbEntry = (function () {
         self.entries(newEntries);
         self.entries()[0].open(true);
       } else {
-        self.applySort(self.assistDbSource.activeSort(), newEntries);
+        newEntries.sort(self.sortFunctions[self.assistDbSource.activeSort()]);
         self.entries(newEntries);
       }
       if (typeof callback === 'function') {

+ 19 - 20
desktop/core/src/desktop/static/desktop/js/assist/assistDbSource.js

@@ -27,19 +27,10 @@ var AssistDbSource = (function () {
       return sortFunctions.alpha(a, b);
     },
     popular: function (a, b) {
-      if (a.definition.popularity && !b.definition.popularity) {
-        return -1;
+      if (a.popularity() === b.popularity()) {
+        return sortFunctions.creation(a, b);
       }
-      if (b.definition.popularity && !a.definition.popularity) {
-        return 1;
-      }
-      if (a.definition.popularity && b.definition.popularity) {
-        if (a.definition.popularity === b.definition.popularity) {
-          return sortFunctions.creation(a, b);
-        }
-        return a.definition.popularity - b.definition.popularity
-      }
-      return sortFunctions.creation(a, b);
+      return b.popularity() - a.popularity();
     }
   };
 
@@ -130,16 +121,24 @@ var AssistDbSource = (function () {
             data.top_tables.forEach(function (topTable) {
               popularityIndex[topTable.name] = topTable.popularity;
             });
-            db.setPopularityIndex(popularityIndex);
-            if (self.activeSort() === 'popular') {
-              if (db.loading()) {
-                var subscription = db.loading.subscribe(function () {
-                  db.entries.sort(sortFunctions.popular);
-                  subscription.remove();
-                });
-              } else {
+            var applyPopularity = function () {
+              db.entries().forEach(function (entry) {
+                if (popularityIndex[entry.definition.name]) {
+                  entry.popularity(popularityIndex[entry.definition.name]);
+                }
+              });
+              if (self.activeSort() === 'popular') {
                 db.entries.sort(sortFunctions.popular);
               }
+            };
+
+            if (db.loading()) {
+              var subscription = db.loading.subscribe(function () {
+                subscription.remove();
+                applyPopularity();
+              });
+            } else {
+              applyPopularity();
             }
           }
         });

+ 4 - 0
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -578,4 +578,8 @@
   direction: ltr;
   line-height: 18px;
   margin-bottom: 10px;
+}
+
+.popular-color {
+  color: @cui-orange-300;
 }

+ 0 - 4
desktop/core/src/desktop/static/desktop/less/hue-autocomplete.less

@@ -153,10 +153,6 @@
   border-radius: 4px;
 }
 
-.popular-icon {
-  color: @cui-orange-300;
-}
-
 .autocompleter-details-contents {
   flex: 1 1 100%;
   overflow-y: auto;

+ 1 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -134,7 +134,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
       </div>
       <a class="assist-entry assist-table-link" href="javascript:void(0)" data-bind="click: toggleOpen, attr: {'title': definition.title }, draggableText: { text: editorText,  meta: {'type': 'sql', 'table': tableName, 'database': databaseName} }">
         <i class="fa fa-fw fa-table muted valign-middle" data-bind="css: { 'fa-eye': definition.isView, 'fa-table': definition.isTable }"></i>
-        <span data-bind="text: definition.displayName, css: { 'highlight': highlight }"></span>
+        <span data-bind="text: definition.displayName, css: { 'highlight': highlight }"></span> <!-- ko if: popularity() > 0 --><i title="${ _('Popular') }" class="fa fa-star-o popular-color"></i> <!-- /ko -->
       </a>
       <div class="center" data-bind="visible: loading"><i class="fa fa-spinner fa-spin assist-spinner"></i></div>
       <!-- ko template: { if: open, name: 'assist-db-entries'  } --><!-- /ko -->

+ 9 - 9
desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

@@ -42,7 +42,7 @@ from desktop.views import _ko
               <div class="autocompleter-suggestion-value">
                 <div class="autocompleter-dot" data-bind="style: { 'background-color': category.color }"></div> <span data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter }"></span> <!-- ko if: details && details.primary_key --><i class="fa fa-key"></i><!-- /ko -->
               </div>
-              <div class="autocompleter-suggestion-meta"><!-- ko if: popular --><i class="fa fa-star-o popular-icon"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
+              <div class="autocompleter-suggestion-meta"><!-- ko if: popular --><i class="fa fa-star-o popular-color"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
             </div>
           </div>
         </div>
@@ -82,7 +82,7 @@ from desktop.views import _ko
       <div class="autocompleter-details-contents">
         <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 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="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-color"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.popularity.relativePopularity + '%' }"></div>
           </div>
@@ -106,7 +106,7 @@ from desktop.views import _ko
         <!-- /ko -->
         <!-- 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="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-color"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.popularity.relativePopularity + '%' }"></div>
           </div>
@@ -137,7 +137,7 @@ from desktop.views import _ko
       <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular join')}</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="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
           </div>
@@ -151,7 +151,7 @@ from desktop.views import _ko
       <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular join condition')}</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="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
           </div>
@@ -165,7 +165,7 @@ from desktop.views import _ko
       <div class="autocompleter-header"><i class="fa fa-fw fa-superscript"></i> ${ _('Popular aggregate')} - <span data-bind="text: details.aggregateFunction"></span></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="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
           </div>
@@ -198,7 +198,7 @@ from desktop.views import _ko
       <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="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-color"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.workloadPercent + '%' }"></div>
           </div>
@@ -212,7 +212,7 @@ from desktop.views import _ko
       <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="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-color"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.workloadPercent + '%' }"></div>
           </div>
@@ -226,7 +226,7 @@ from desktop.views import _ko
       <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="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
           <div class="progress">
             <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
           </div>