Bläddra i källkod

HUE-8704 [jb] Fix profile expand doesn't respond to click.

(cherry picked from commit 50cf2a96ddfdfe27b68f441f284aaae8e58552ff)
jdesjean 6 år sedan
förälder
incheckning
b1406a0

+ 21 - 17
apps/jobbrowser/src/jobbrowser/static/jobbrowser/js/impala_dagre.js

@@ -163,12 +163,12 @@ function impalaDagre(id) {
       return;
     }
     clearSelection();
-    $("g.node:contains('" + key + "')").attr('class', 'node active');
+    $('#' + id + " g.node:contains('" + key + "')").attr('class', 'node active');
     showDetail(node);
   }
 
   function clearSelection() {
-    $("g.node").attr('class', 'node'); // addClass doesn't work in svg on our version of jQuery
+    $('#' + id + " g.node").attr('class', 'node'); // addClass doesn't work in svg on our version of jQuery
   }
 
   function getNode(id) {
@@ -200,7 +200,7 @@ function impalaDagre(id) {
     if (!key) {
       return;
     }
-    var n = $("g.node:contains('" + key + "')")[0];
+    var n = $('#' + id + " g.node:contains('" + key + "')")[0];
     var t = d3.transform(d3.select(n).attr("transform")),
         x = t.translate[0],
         y = t.translate[1];
@@ -469,11 +469,10 @@ function impalaDagre(id) {
   }
 
   function showDetailGlobal() {
-    var details = d3.select('.query-plan .details');
+    var details = d3.select('#' + id + '.query-plan .details');
     var key = getKey(id);
     details.html('<header class="metric-title">' + getIcon({ svg: 'hi-sitemap' }) + '<h4>' + window.HUE_I18n.profile.overview + '</h4></div>')
     var detailsContent = details.append('div').classed('details-content', true);
-
     var topNodes = getTopNodes();
     if (topNodes && topNodes.length) {
       var cpuTimelineSection = detailsContent.append('div').classed('details-section', true);
@@ -483,7 +482,7 @@ function impalaDagre(id) {
       cpuTimelineTitle.append('h5').text(window.HUE_I18n.profile.topnodes + metricsMax);
       var cpuTimelineSectionTable = cpuTimelineSection.append('table').classed('clickable', true);
       var cpuTimelineSectionTableRows = cpuTimelineSectionTable.selectAll('tr').data(topNodes).enter().append('tr').on('click', function (node) {
-        select(node.key);
+        select(getId(node.key));
         zoomToNode(node.key);
       });
       cpuTimelineSectionTableRows.append('td').html(function (time) { return '' + getIcon(time.icon) + '<div class="metric-name" title="' + time.name + '">' + time.name + '</div>'; });
@@ -493,7 +492,7 @@ function impalaDagre(id) {
     appendTimelineAndLegend(detailsContent, getTimelineData('summary', 'Query Compilation'), window.HUE_I18n.profile.planning, '#hi-access-time');
     appendTimelineAndLegend(detailsContent, getTimelineData('summary', 'Query Timeline'), window.HUE_I18n.profile.execution, '#hi-access-time');
 
-    d3.select('.query-plan .details .metric-title').on('click', function () {
+    d3.select('#' + id + '.query-plan .details .metric-title').on('click', function () {
       toggleDetails();
     });
   }
@@ -514,17 +513,17 @@ function impalaDagre(id) {
     }
   }
 
-  function showDetail(id) {
+  function showDetail(key) {
     var data;
-    var node = getNode(id);
+    var node = getNode(key);
     if (!node) {
       return;
     }
     var data = node;
 
-    d3.select('.query-plan').classed('open', true);
-    var details = d3.select('.query-plan .details');
-    var key = getKey(id);
+    d3.select('#' + id + '.query-plan').classed('open', true);
+    var details = d3.select('#' + id + '.query-plan .details');
+    var key = getKey(key);
     details.html('<header class="metric-title">' + getIcon(states_by_name[key].icon) + '<h4>' + states_by_name[key].label+ '</h4></div>')
     var detailsContent = details.append('div').classed('details-content', true);
 
@@ -577,13 +576,13 @@ function impalaDagre(id) {
     metricsChildSectionsContentCols.enter().append('tr').selectAll('td').data(function (x) { return Object.keys(x).sort().map(function (key) {return x[key]; }) }).enter().append('td').text(function(datum) { return ko.bindingHandlers.numberFormat.human(datum.value, datum.unit);});
     metricsChildSectionsContentTable.append('thead').selectAll('tr').data(function (key) { return ['\u00A0'].concat(Object.keys(data.children[key].hosts).sort()); }).enter().append('tr').append('td').text(function (x, i) { return i > 0 ? x === 'averaged' ? x : 'Host ' + (i - 1) : x; }).attr('title', function (x) {return x;});
 
-    d3.select('.query-plan .details .metric-title').on('click', function () {
+    d3.select('#' + id + '.query-plan .details .metric-title').on('click', function () {
       toggleDetails();
     });
   }
 
   function hideDetail(id) {
-    d3.select('.query-plan').classed('open', false);
+    d3.select('#' + id + '.query-plan').classed('open', false);
   }
 
   function getProperty(object, path) {
@@ -618,7 +617,7 @@ function impalaDagre(id) {
   }
 
   function toggleDetails() {
-    var queryPlan = d3.select('.query-plan');
+    var queryPlan = d3.select('#' + id + '.query-plan');
     queryPlan.classed('open', !queryPlan.classed('open'));
   }
 
@@ -650,7 +649,7 @@ function impalaDagre(id) {
     // Keep a map of names to states for use when processing edges.
     states.forEach(function(state) {
       // Build the label for the node from the name and the detail
-      var html = "<div onclick=\"event.stopPropagation(); huePubSub.publish('impala.node.select', " + getId(state.name) + ");\">"; // TODO: Remove Hue dependency
+      var html = "<div attr-id='" + state.name + "'>";
       html += getIcon(state.icon);
       html += "<span style='display: inline-block;'><span class='name'>" + state.label + "</span><br/>";
       var aboveAverageClass = state.max_time_val > avgCombined ? 'above-average' : '';
@@ -687,7 +686,7 @@ function impalaDagre(id) {
       var node = g.node(v);
       node.rx = node.ry = 5;
     });
-    d3.select('.query-plan .details .metric-title').on('click', function () {
+    d3.select('#' + id + '.query-plan .details .metric-title').on('click', function () {
       toggleDetails();
     });
 
@@ -696,6 +695,11 @@ function impalaDagre(id) {
 
     // Run the renderer. This is what draws the final graph.
     render(inner, g);
+    d3.selectAll('#' + id + ' g.node').on('click', function () {
+      d3.event.stopPropagation();
+      var name = d3.select(this).select('div > div').attr('attr-id');
+      select(getId(name));
+    });
 
     // Center the graph, but only the first time through (so as to not lose user zooms).
     if (is_first) {

+ 0 - 13
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -1534,19 +1534,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
           <div data-bind="visible:properties.plan && properties.plan().plan_json && properties.plan().plan_json.plan_nodes.length">
             <div class="query-plan" id="queries-page-plan-graph${ SUFFIX }" data-bind="impalaDagre: { value: properties.plan && properties.plan(), height:$root.isMini() ? 535 : 600 }">
               <svg style="width:100%;height:100%;position:relative;" id="queries-page-plan-svg${ SUFFIX }">
-                <defs>
-                  <filter id="dropshadow" height="130%">
-                    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
-                    <feOffset dx="0" dy="0" result="offsetBlur"/> <!-- how much to offset -->
-                    <feComponentTransfer>
-                      <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
-                    </feComponentTransfer>
-                    <feMerge>
-                      <feMergeNode/> <!-- this contains the offset blurred image -->
-                      <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
-                    </feMerge>
-                  </filter>
-                </defs>
                 <g/>
               </svg>
             </div>

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

@@ -7506,12 +7506,12 @@
       init: function (element, valueAccessor, allBindingsAccessor) {
         var id = $(element).attr("id");
         var self = this;
-        self._impalaDagre = impalaDagre(id);
+        element._impalaDagre = impalaDagre(id);
         var clickSubscription = huePubSub.subscribe('impala.node.moveto', function(value) {
-          self._impalaDagre.moveTo(value);
+          element._impalaDagre.moveTo(value);
         });
         var selectSubscription = huePubSub.subscribe('impala.node.select', function(value) {
-          self._impalaDagre.select(value);
+          element._impalaDagre.select(value);
         });
         ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
           clickSubscription.remove();
@@ -7520,9 +7520,9 @@
       },
       update: function (element, valueAccessor) {
         var props = ko.unwrap(valueAccessor());
-        this._impalaDagre.metrics(props.metrics);
-        this._impalaDagre.height(props.height);
-        this._impalaDagre.update(props.value);
+        element._impalaDagre.metrics(props.metrics);
+        element._impalaDagre.height(props.height);
+        element._impalaDagre.update(props.value);
       }
     };
   })();

+ 2 - 2
desktop/core/src/desktop/templates/common_header.mako

@@ -237,12 +237,12 @@ if USE_NEW_EDITOR.get():
     });
   </script>
 %endif
-
 </head>
-<body>
 
+<body>
 ${ hueIcons.symbols() }
 
+
 % if conf.DISABLE_HUE_3.get() and conf.IS_HUE_4.get() and request.environ.get("PATH_INFO").find("/hue/") < 0:
   <script>
     window.location.replace("/");

+ 14 - 1
desktop/core/src/desktop/templates/hue_icons.mako

@@ -18,7 +18,7 @@
 %>
 
 <%def name="symbols()">
-  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none;">
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="height: 0; margin: 0; border: none; width: 0;">
 
     <symbol id="hi-empty" viewBox="0 0 640 640">
     </symbol>
@@ -391,6 +391,19 @@
     <symbol id="hi-heart" viewBox="0 0 1024 1024">
       <path d="M886.250667 552.490667 512 927.957333l-374.229333-375.466667C79.786667 505.429333 42.666667 433.536 42.666667 352.896 42.666667 211.029333 157.290667 96.042667 298.666667 96.042667c89.088 0 167.488 45.717333 213.333333 114.986667 45.845333-69.269333 124.245333-114.986667 213.333333-114.986667 141.376 0 256 114.986667 256 256.832C981.333333 433.536 944.213333 505.429333 886.250667 552.490667zM832.341333 458.858667l-138.858667 0-53.888-197.610667-20.586667 5.610667-20.117333-7.104-93.226667 317.034667-101.077333-252.672-20.245333 6.741333-19.989333-7.509333-50.794667 135.509333L192.341333 458.858667l0 42.666667 128 0 19.989333 7.509333 44.672-119.168 107.114667 267.754667 40.469333-13.504-3.477333-8.661333 3.349333 1.173333 85.76-291.562667 44.202667 162.090667 20.586667-5.610667 149.333333 0L832.341333 458.858667z" />
     </symbol>
+    <defs>
+      <filter id="dropshadow" height="130%">
+        <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
+        <feOffset dx="0" dy="0" result="offsetBlur"/> <!-- how much to offset -->
+        <feComponentTransfer>
+          <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
+        </feComponentTransfer>
+        <feMerge>
+          <feMergeNode/> <!-- this contains the offset blurred image -->
+          <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
+        </feMerge>
+      </filter>
+    </defs>
   </svg>
 
   <script type="text/html" id="app-switcher-icon-template">