Make topology details section scrollable in Heron UI (#3400)

Author: nwangtw

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 {

heron/tools/ui/resources/templates/topology.html

@@ -103,7 +103,7 @@ <h4 class="space-above">
   <!-- 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 @@ <h4 class="space-above">
       }
     );
 
+    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 @@ <h4 class="space-above">
       }, 100));
       render(planController);
       drawStatsTable(planController, "{{baseUrl}}", "{{cluster}}", "{{environ}}", "{{topology}}", physicalPlan, logicalPlan);
+
       planController.planDrawn();
     }
   };