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
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: #dd;
+ 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.
-
+
@@ -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();
}
};
