Przeglądaj źródła

HUE-2560 [metastore] Integrate terms into the column stats popover

Enrico Berti 10 lat temu
rodzic
commit
ac7eeacb8d

+ 66 - 12
apps/beeswax/src/beeswax/static/beeswax/js/stats.utils.js

@@ -21,15 +21,18 @@ function showStats(options) {
     $("#tableAnalysis .stats-refresh").data("refreshUrl", options.refreshUrl);
     $("#tableAnalysis .stats-refresh").data("tableName", options.tableName);
     $("#tableAnalysis .stats-refresh").data("isTable", true);
-    $("#tableAnalysis .popover-content").css("opacity", ".5");
+    $("#tableAnalysisStats .content").css("opacity", ".5");
   }
   else {
     $("#tableAnalysis").hide();
     $("#columnAnalysis .stats-refresh").data("startUrl", options.statsUrl);
     $("#columnAnalysis .stats-refresh").data("refreshUrl", options.refreshUrl);
+    $("#columnAnalysis .stats-refresh").data("termsUrl", options.termsUrl);
     $("#columnAnalysis .stats-refresh").data("columnName", options.columnName);
+    $("#columnAnalysis .stats-refresh").data("errorLabel", options.errorLabel);
     $("#columnAnalysis .stats-refresh").data("isTable", false);
-    $("#columnAnalysis .popover-content").css("opacity", ".5");
+    $("#columnAnalysisStats .content").css("opacity", ".5");
+    $("#columnAnalysisTerms .content").css("opacity", ".5");
   }
   $.ajax({
     url: options.statsUrl,
@@ -55,8 +58,8 @@ function showStats(options) {
           });
           _stats += "</table>"
           $("#tableAnalysis .table-name").text(options.tableName);
-          $("#tableAnalysis .popover-content").html(_stats);
-          $("#tableAnalysis .popover-content").css("opacity", "1");
+          $("#tableAnalysisStats .content").html(_stats);
+          $("#tableAnalysisStats .content").css("opacity", "1");
         }
         else {
           data.stats.forEach(function (item) {
@@ -64,8 +67,8 @@ function showStats(options) {
           });
           _stats += "</table>"
           $("#columnAnalysis .column-name").text(options.columnName);
-          $("#columnAnalysis .popover-content").html(_stats);
-          $("#columnAnalysis .popover-content").css("opacity", "1");
+          $("#columnAnalysisStats .content").html(_stats);
+          $("#columnAnalysisStats .content").css("opacity", "1");
         }
         if (options.callback) {
           options.callback();
@@ -85,6 +88,48 @@ function showStats(options) {
       }
     }
   });
+  loadTerms(options);
+}
+
+function loadTerms(options) {
+  $.ajax({
+    url: options.termsUrl,
+    data: {},
+    beforeSend: function (xhr) {
+      xhr.setRequestHeader("X-Requested-With", "Hue");
+    },
+    dataType: "json",
+    success: function (data) {
+      if (data && data.status == 0) {
+        if (data.terms.length > 0){
+          $("#columnAnalysisTerms .alert").addClass("hide");
+          var _terms = "<table class='table table-striped'>";
+          data.terms.forEach(function(item){
+            _terms += "<tr><th>" + item[0] + "</th><td width='1%'>" + item[1] + "</td></tr>";
+          });
+          _terms += "</table>"
+          $("#columnAnalysisTerms .content").html(_terms);
+          $("#columnAnalysisTerms .content").css("opacity", "1");
+        }
+        else {
+          $("#columnAnalysisTerms .alert").removeClass("hide");
+          $("#columnAnalysisTerms .content").html("");
+        }
+      }
+      else {
+        $(document).trigger("error", options.errorLabel);
+        $("#tableAnalysis").hide();
+        $("#columnAnalysis").hide();
+      }
+    },
+    error: function (e) {
+      if (e.status == 500) {
+        $(document).trigger("error", options.errorLabel);
+        $("#tableAnalysis").hide();
+        $("#columnAnalysis").hide();
+      }
+    }
+  });
 }
 
 function showTableStats(statsUrl, refreshUrl, tableName, errorLabel, callback) {
@@ -98,11 +143,12 @@ function showTableStats(statsUrl, refreshUrl, tableName, errorLabel, callback) {
   });
 }
 
-function showColumnStats(statsUrl, refreshUrl, columnName, errorLabel, callback) {
+function showColumnStats(statsUrl, refreshUrl, termsUrl, columnName, errorLabel, callback) {
   showStats({
     isTable: false,
     statsUrl: statsUrl,
     refreshUrl: refreshUrl,
+    termsUrl: termsUrl,
     columnName: columnName,
     errorLabel: errorLabel,
     callback: callback
@@ -118,13 +164,13 @@ function refreshLoop(el){
     }
     else {
       $(el).removeClass("fa-spin");
-      $(el).parents(".popover").find(".popover-content").css("opacity", "1");
+      $(el).parents(".popover").find(".content").css("opacity", "1");
       if (data.isSuccess){
         if (el.data("isTable")){
-          showTableStats($(el).data("startUrl"), $(el).data("tableName"));
+          showTableStats($(el).data("startUrl"), $(el).data("refreshUrl"), $(el).data("tableName"), $(el).data("errorLabel"));
         }
         else {
-          showColumnStats($(el).data("startUrl"), $(el).data("columnName"));
+          showColumnStats($(el).data("startUrl"), $(el).data("refreshUrl"), $(el).data("termsUrl"), $(el).data("columnName"), $(el).data("errorLabel"));
         }
       }
       else {
@@ -136,11 +182,12 @@ function refreshLoop(el){
 
 $(document).ready(function () {
   $(".stats-refresh").on("click", function () {
+    $("#columnAnalysis .filter input").val("");
     var _this = $(this);
-    _this.parents(".popover").find(".popover-content").css("opacity", ".5");
+    _this.parents(".popover").find(".content").css("opacity", ".5");
     if (_this.hasClass("fa-spin")){
       _this.removeClass("fa-spin");
-      _this.parents(".popover").find(".popover-content").css("opacity", "1");
+      _this.parents(".popover").find(".content").css("opacity", "1");
       window.clearTimeout(_this.data("refreshTimeout"));
     }
     else {
@@ -155,4 +202,11 @@ $(document).ready(function () {
       });
     }
   });
+  $("#columnAnalysis .filter input").jHueDelayedInput(function(){
+    $("#columnAnalysisTerms .content").css("opacity", ".5");
+    loadTerms({
+      errorLabel: $("#columnAnalysis .stats-refresh").data("errorLabel"),
+      termsUrl: $("#columnAnalysis .stats-refresh").data("termsUrl") + $("#columnAnalysis .filter input").val()
+    });
+  });
 });

+ 34 - 9
apps/beeswax/src/beeswax/templates/execute.mako

@@ -730,7 +730,11 @@ ${layout.menubar(section='query')}
     <span class="pull-right stats-warning muted" rel="tooltip" data-placement="top" title="${ _('The column stats for this table are not accurate') }" style="margin-left: 8px"><i class="fa fa-exclamation-triangle"></i></span>
     <strong class="table-name"></strong> ${ _(' table analysis') }
   </h3>
-  <div class="popover-content" style="text-align: left"></div>
+  <div class="popover-content">
+    <div id="tableAnalysisStats">
+      <div class="content"></div>
+    </div>
+  </div>
 </div>
 
 <div id="columnAnalysis" class="popover mega-popover right">
@@ -740,7 +744,24 @@ ${layout.menubar(section='query')}
     <a class="pull-right pointer stats-refresh" style="margin-left: 8px"><i class="fa fa-refresh"></i></a>
     <strong class="column-name"></strong> ${ _(' column analysis') }
   </h3>
-  <div class="popover-content" style="text-align: left"></div>
+  <div class="popover-content">
+    <div class="pull-right hide filter">
+      <input id="columnAnalysisTermsFilter" type="text" placeholder="${ _('Prefix filter...') }"/>
+    </div>
+    <ul class="nav nav-tabs" role="tablist">
+      <li class="active"><a href="#columnAnalysisStats" role="tab" data-toggle="tab">${ _('Stats') }</a></li>
+      <li><a href="#columnAnalysisTerms" role="tab" data-toggle="tab">${ _('Terms') }</a></li>
+    </ul>
+    <div class="tab-content">
+      <div class="tab-pane active" id="columnAnalysisStats" style="text-align: left">
+        <div class="content"></div>
+      </div>
+      <div class="tab-pane" id="columnAnalysisTerms" style="text-align: left">
+        <div class="alert">${ _('There are no terms to be shown') }</div>
+        <div class="content"></div>
+      </div>
+    </div>
+  </div>
 </div>
 
 ${ commonshare() | n,unicode }
@@ -988,10 +1009,6 @@ ${ commonshare() | n,unicode }
     color: #DDD;
   }
 
-  .mega-popover {
-    max-width: 1200px;
-  }
-
   .tooltip {
     z-index: 10001;
   }
@@ -1263,9 +1280,11 @@ $(document).ready(function () {
                       var _link = $(this);
                       var statsUrl = "/${ app_name }/api/table/" + viewModel.database() + "/" + _table.data("table") + "/stats/" + col.name;
                       var refreshUrl = "/${ app_name }/api/analyze/" + viewModel.database() + "/" + _table.data("table") + "/" + col.name;
-                      $("#columnAnalysis .popover-content").html("<i class='fa fa-spinner fa-spin'></i>");
+                      var termsUrl = "/${ app_name }/api/table/" + viewModel.database() + "/" + _table.data("table") + "/terms/" + col.name + "/";
+                      $("#columnAnalysisStats .content").html("<i class='fa fa-spinner fa-spin'></i>");
+                      $("#columnAnalysisTerms .content").html("<i class='fa fa-spinner fa-spin'></i>");
                       $("#columnAnalysis").show().css("top", _link.position().top - $("#columnAnalysis").outerHeight() / 2 + _link.outerHeight() / 2).css("left", _link.position().left + _link.outerWidth());
-                      showColumnStats(statsUrl, refreshUrl, col.name, STATS_PROBLEMS, function () {
+                      showColumnStats(statsUrl, refreshUrl, termsUrl, col.name, STATS_PROBLEMS, function () {
                         $("#columnAnalysis").show().css("top", _link.position().top - $("#columnAnalysis").outerHeight() / 2 + _link.outerHeight() / 2).css("left", _link.position().left + _link.outerWidth());
                       });
                     });
@@ -1310,7 +1329,7 @@ $(document).ready(function () {
               var _link = $(this);
               var statsUrl = "/${ app_name }/api/table/" + viewModel.database() + "/" + _table.data("table") + "/stats/";
               var refreshUrl = "/${ app_name }/api/analyze/" + viewModel.database() + "/" + _table.data("table") + "/";
-              $("#tableAnalysis .popover-content").html("<i class='fa fa-spinner fa-spin'></i>");
+              $("#tableAnalysisStats .content").html("<i class='fa fa-spinner fa-spin'></i>");
               $("#tableAnalysis").show().css("top", _link.position().top - $("#tableAnalysis").outerHeight()/2 + _link.outerHeight()/2).css("left", _link.position().left + _link.outerWidth());
               showTableStats(statsUrl, refreshUrl, _table.data("table"), STATS_PROBLEMS, function(){
                 $("#tableAnalysis").show().css("top", _link.position().top - $("#tableAnalysis").outerHeight()/2 + _link.outerHeight()/2).css("left", _link.position().left + _link.outerWidth());
@@ -1443,6 +1462,12 @@ $(document).ready(function () {
     } else {
       reinitializeTable();
     }
+    if ($(e.target).attr("href") == "#columnAnalysisTerms") {
+      $("#columnAnalysis .filter").removeClass("hide");
+    }
+    if ($(e.target).attr("href") == "#columnAnalysisStats") {
+      $("#columnAnalysis .filter").addClass("hide");
+    }
     return e;
   });
 

+ 0 - 4
apps/metastore/src/metastore/static/metastore/css/metastore.css

@@ -46,7 +46,3 @@
 .sampleTable td, .sampleTable th {
   white-space: nowrap;
 }
-
-.mega-popover {
-  max-width: 1200px;
-}

+ 29 - 5
apps/metastore/src/metastore/templates/describe_table.mako

@@ -229,7 +229,24 @@ ${ components.menubar() }
     <a class="pull-right pointer stats-refresh" style="margin-left: 8px"><i class="fa fa-refresh"></i></a>
     <strong class="column-name"></strong> ${ _(' column analysis') }
   </h3>
-  <div class="popover-content" style="text-align: left"></div>
+  <div class="popover-content">
+    <div class="pull-right hide filter">
+      <input id="columnAnalysisTermsFilter" type="text" placeholder="${ _('Prefix filter...') }"/>
+    </div>
+    <ul class="nav nav-tabs" role="tablist">
+      <li class="active"><a href="#columnAnalysisStats" role="tab" data-toggle="tab">${ _('Stats') }</a></li>
+      <li><a href="#columnAnalysisTerms" role="tab" data-toggle="tab">${ _('Terms') }</a></li>
+    </ul>
+    <div class="tab-content">
+      <div class="tab-pane active" id="columnAnalysisStats" style="text-align: left">
+        <div class="content"></div>
+      </div>
+      <div class="tab-pane" id="columnAnalysisTerms" style="text-align: left">
+        <div class="alert">${ _('There are no terms to be shown') }</div>
+        <div class="content"></div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <script src="${ static('beeswax/js/stats.utils.js') }"></script>
@@ -256,7 +273,7 @@ ${ components.menubar() }
         });
     % endif
 
-    $('a[data-toggle="tab"]').on('shown', function () {
+    $('a[data-toggle="tab"]').on('shown', function (e) {
       var sortables = [];
       $(".sampleTable").not('.initialized').each(function () {
         var _id = $(this).attr("id");
@@ -298,6 +315,12 @@ ${ components.menubar() }
           }
         });
       }
+      if ($(e.target).attr("href") == "#columnAnalysisTerms") {
+        $("#columnAnalysis .filter").removeClass("hide");
+      }
+      if ($(e.target).attr("href") == "#columnAnalysisStats") {
+        $("#columnAnalysis .filter").addClass("hide");
+      }
     });
 
     $("#import-data-btn").click(function () {
@@ -317,10 +340,11 @@ ${ components.menubar() }
       var _link = $(this);
       var _col = _link.data("column");
       var statsUrl = "/beeswax/api/table/${database}/${table.name}/stats/" + _col;
-      var refreshUrl = "/beeswax/api/analyze/${database}/${table.name}/stats/" + _col;
-      $("#columnAnalysis .popover-content").html("<i class='fa fa-spinner fa-spin'></i>");
+      var refreshUrl = "/beeswax/api/analyze/${database}/${table.name}/" + _col;
+      var termsUrl = "/beeswax/api/table/${database}/${table.name}/terms/" + _col + "/";
+      $("#columnAnalysisStats .content").html("<i class='fa fa-spinner fa-spin'></i>");
       $("#columnAnalysis").show().css("top", _link.position().top - $("#columnAnalysis").outerHeight() / 2 + _link.outerHeight() / 2).css("left", _link.position().left + _link.outerWidth());
-      showColumnStats(statsUrl, refreshUrl, _col, STATS_PROBLEMS, function () {
+      showColumnStats(statsUrl, refreshUrl, termsUrl, _col, STATS_PROBLEMS, function () {
         $("#columnAnalysis").show().css("top", _link.position().top - $("#columnAnalysis").outerHeight() / 2 + _link.outerHeight() / 2).css("left", _link.position().left + _link.outerWidth());
       });
     });

+ 6 - 2
apps/metastore/src/metastore/templates/tables.mako

@@ -104,7 +104,11 @@ ${ components.menubar() }
     <span class="pull-right stats-warning muted" rel="tooltip" data-placement="top" title="${ _('The column stats for this table are not accurate') }" style="margin-left: 8px"><i class="fa fa-exclamation-triangle"></i></span>
     <strong class="table-name"></strong> ${ _(' table analysis') }
   </h3>
-  <div class="popover-content" style="text-align: left"></div>
+  <div class="popover-content">
+    <div class="tab-pane active" id="tableAnalysisStats">
+      <div class="content"></div>
+    </div>
+  </div>
 </div>
 
 
@@ -168,7 +172,7 @@ ${ components.menubar() }
       var _link = $(this);
       var statsUrl = "/beeswax/api/table/${database}/" + _link.data("table") + "/stats/";
       var refreshUrl = "/beeswax/api/analyze/${database}/" + _link.data("table") + "/";
-      $("#tableAnalysis .popover-content").html("<i class='fa fa-spinner fa-spin'></i>");
+      $("#tableAnalysisStats .content").html("<i class='fa fa-spinner fa-spin'></i>");
       $("#tableAnalysis").show().css("top", _link.position().top - $("#tableAnalysis").outerHeight()/2 + _link.outerHeight()/2).css("left", _link.position().left + _link.outerWidth());
       showTableStats(statsUrl, refreshUrl, _link.data("table"), STATS_PROBLEMS, function(){
         $("#tableAnalysis").show().css("top", _link.position().top - $("#tableAnalysis").outerHeight()/2 + _link.outerHeight()/2).css("left", _link.position().left + _link.outerWidth());

+ 0 - 24
apps/search/src/search/static/search/css/search.css

@@ -323,30 +323,6 @@ em {
   background-color: #DDD;
 }
 
-.mega-popover {
-  max-width: 1200px;
-}
-
-.mega-popover .popover-content {
-  min-width: 440px;
-  min-height: 360px;
-}
-
-.mega-popover .tab-pane {
-  height: 300px;
-  overflow-y: scroll;
-}
-
-.mega-popover input[type='text'] {
-  margin: 0;
-  width: 130px;
-  border-radius: 20px;
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  min-height: 26px;
-  padding-left: 12px;
-}
-
 .fa.analysis {
   margin-top: 3px;
   margin-right: 3px;

+ 23 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -1963,3 +1963,26 @@ div.navigator ul.dropdown-menu {
 div.navigator > ul > li.oozie > ul.dropdown-menu {
   overflow-y: visible;
 }
+
+.mega-popover {
+  max-width: 1200px;
+}
+
+.mega-popover .content {
+  height: 300px;
+  overflow-y: scroll;
+}
+
+.mega-popover .popover-content {
+  min-height: 360px;
+  min-width: 440px;
+  max-width: 660px;
+}
+
+.mega-popover input[type="text"] {
+  border-radius: 20px;
+  margin: 0;
+  min-height: 26px;
+  padding-left: 12px;
+  width: 130px;
+}