[incubator-heron] branch master updated: Make topology details section scrollable in Heron UI (#3400)

[nwang]

This is an automated email from the ASF dual-hosted git repository.

nwang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-heron.git


The following commit(s) were added to refs/heads/master by this push:
     new ae2d1f7  Make topology details section scrollable in Heron UI (#3400)
ae2d1f7 is described below

commit ae2d1f7487d9b27d9d29a90dd16c31609418732f
Author: Ning Wang <nw...@twitter.com>
AuthorDate: Mon Nov 11 14:40:04 2019 -0800

    Make topology details section scrollable in Heron UI (#3400)
---
 heron/tools/ui/resources/static/css/main.css     |  5 +++--
 heron/tools/ui/resources/templates/topology.html | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/heron/tools/ui/resources/static/css/main.css 
b/heron/tools/ui/resources/static/css/main.css
index 5cde820..0ae4425 100644
--- a/heron/tools/ui/resources/static/css/main.css
+++ b/heron/tools/ui/resources/static/css/main.css
@@ -583,8 +583,7 @@ header {
           left: 0; }
 
 .dashboard-wrapper {
-  /*padding: 30px;*/
-  padding: 0px 30px 30px 10px;
+  padding: 0px 10px 20px 10px;
   position: relative;
   margin: 0px 0px 10px 10px;
   background: white;
@@ -2269,6 +2268,7 @@ div#display-navigator {
   padding-bottom: 5px;
   background-color: transparent;
   border-width: 0px;
+  outline: none;  /* disable outline after clicked on */
 }
 
 #display-navigator .navbar-default button.active {
@@ -2280,6 +2280,7 @@ div#topologydetails {
   border-style: solid;
   border-width: 1px;
   border-color: #dddddd;
+  overflow-y: scroll;
 }
 
 div#topologydetails div.display-info {
diff --git a/heron/tools/ui/resources/templates/topology.html 
b/heron/tools/ui/resources/templates/topology.html
index 49961a7..f743c78 100644
--- a/heron/tools/ui/resources/templates/topology.html
+++ b/heron/tools/ui/resources/templates/topology.html
@@ -103,7 +103,7 @@ under the License.
   <!-- Topology details, including stats, counter, and config. -->
   <div class="display-stats" id="topologydetails">
     <!-- Stats -->
-    <div class="row">
+    <div class="col-md-12">
       <div class="display-info space-above display-stats" id="topologystats">
         <div class="col-md-6">
           <div class="container">
@@ -281,12 +281,23 @@ under the License.
       }
     );
 
+    function resizeDetailsSection() {
+      const minSectionHeight = 350;  // Minimal height in pixel.
+      var windowH = $(window).height();
+      var planH = $(".plans").height();
+      var detailsH = Math.max(minSectionHeight, windowH - planH - 222);  // 
Leave 222 pixels for topology info.
+
+      d3.selectAll("div#topologydetails").style('height', detailsH + 'px');
+    }
+
     function render(planController) {
       drawLogicalPlan(planController, logicalPlan, "#logical-plan", 
$("#logical-plan").width(), 400, "{{baseUrl}}",
           "{{cluster}}", "{{environ}}", "{{topology}}");
-      planController.planResized();
       drawPhysicalPlan(planController, physicalPlan, packingPlan, 
"#physical-plan", $("#physical-plan").width(), 400, "{{baseUrl}}", 
"{{cluster}}",
           "{{environ}}", "{{topology}}");
+
+      resizeDetailsSection();
+
       planController.planResized();
     }
 
@@ -297,6 +308,7 @@ under the License.
       }, 100));
       render(planController);
       drawStatsTable(planController, "{{baseUrl}}", "{{cluster}}", 
"{{environ}}", "{{topology}}", physicalPlan, logicalPlan);
+
       planController.planDrawn();
     }
   };