From a67db75976027d3b6359ffea026ee19e47ebcdc6 Mon Sep 17 00:00:00 2001 From: Ning Wang Date: Thu, 7 Nov 2019 09:31:53 -0800 Subject: [PATCH] Re-organize UI elements in Heorn UI topology page --- heron/tools/ui/resources/static/css/main.css | 38 +++ heron/tools/ui/resources/static/js/config.js | 2 +- .../ui/resources/static/js/topologies.js | 2 +- .../resources/static/js/topology-details.js | 41 +++ .../ui/resources/templates/topology.html | 252 ++++++++++-------- 5 files changed, 223 insertions(+), 112 deletions(-) create mode 100644 heron/tools/ui/resources/static/js/topology-details.js diff --git a/heron/tools/ui/resources/static/css/main.css b/heron/tools/ui/resources/static/css/main.css index d8c65705362..5cde8207f9d 100644 --- a/heron/tools/ui/resources/static/css/main.css +++ b/heron/tools/ui/resources/static/css/main.css @@ -2253,3 +2253,41 @@ nav { .navbar-custom .navbar-link:hover { color: #ffecb3; } + +/* Topology details */ +div#display-navigator { + border-style: solid; + border-width: 1px; + border-color: #dddddd; + border-bottom-width: 0px; +} + +#display-navigator .navbar-default button { + padding-left: 15px; + padding-right: 15px; + padding-top: 5px; + padding-bottom: 5px; + background-color: transparent; + border-width: 0px; +} + +#display-navigator .navbar-default button.active { + background-color: lightskyblue; +} + +/* Select the right topology details to show */ +div#topologydetails { + border-style: solid; + border-width: 1px; + border-color: #dddddd; +} + +div#topologydetails div.display-info { + display: none; +} + +div#topologydetails.display-stats div.display-info.display-stats, +div#topologydetails.display-counters div.display-info.display-counters, +div#topologydetails.display-config div.display-info.display-config { + display: block; +} \ No newline at end of file diff --git a/heron/tools/ui/resources/static/js/config.js b/heron/tools/ui/resources/static/js/config.js index 762fe2ba7dd..4e23f2d5b15 100644 --- a/heron/tools/ui/resources/static/js/config.js +++ b/heron/tools/ui/resources/static/js/config.js @@ -166,7 +166,7 @@ var ConfigTable = React.createClass({ tableLayout: 'inherit' }; return ( -
+

{title}

diff --git a/heron/tools/ui/resources/static/js/topologies.js b/heron/tools/ui/resources/static/js/topologies.js index 1d1a0f93dfd..764e0aac113 100644 --- a/heron/tools/ui/resources/static/js/topologies.js +++ b/heron/tools/ui/resources/static/js/topologies.js @@ -598,7 +598,7 @@ var AllMetrics = React.createClass({ instance: this.props.instance, }; return ( -
+
diff --git a/heron/tools/ui/resources/static/js/topology-details.js b/heron/tools/ui/resources/static/js/topology-details.js new file mode 100644 index 00000000000..8add7da35b3 --- /dev/null +++ b/heron/tools/ui/resources/static/js/topology-details.js @@ -0,0 +1,41 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/** + * Navigator of the topology details section in the topology page. + * When a tab is clicked, the corresponding "display-" class + * is set to the "topologydetails" element. Then CSS shows/hides + * the information. + */ +(function () { + var selected = "stats"; // Show stats tab at beginning. + + function navigate () { + this.parentElement.selected=this.id; + for (var i = 0; i < this.parentElement.children.length; ++i) { + this.parentElement.children[i].className = ''; // Hide all + } + this.className = 'active'; // Show "this" element. + + // Show the right div by setting the class of the outter div. + d3.selectAll('div#topologydetails').attr('class', 'display-' + this.id); + } + + d3.selectAll('.navigator button').on('click', navigate); +}()); diff --git a/heron/tools/ui/resources/templates/topology.html b/heron/tools/ui/resources/templates/topology.html index 3ad281637ac..49961a7b948 100644 --- a/heron/tools/ui/resources/templates/topology.html +++ b/heron/tools/ui/resources/templates/topology.html @@ -21,6 +21,7 @@ {% block content %} +
@@ -46,129 +47,151 @@

+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Topology nameStatusClusterRoleEnvironmentVersionLaunched atSubmitted byLinks
{{topology}}{{execution_state['status']}}{{cluster}}{{execution_state['role']}}{{environ}}{{execution_state['release_version']}}{{launched}}{{execution_state['submission_user']}} + Job + {% for extra_link in execution_state['extra_links'] %} + {{extra_link['name']}} + {% end %} +
+
-
-
-
-
- Aggregate topology metrics - + +
+ +
+
+
+
+ + +
-

- Click the circles below to color instances by metric over a time period -

- - - - - - - -
- Role + + + + + +
+ +
+
+
+
+
+ Aggregate topology metrics -
- Color instances by role -
-
-
- - + title="Aggregate Topology Metrics" + data-html="true" + data-content=" +

Colors in this table show the worst value for any instance in the topology for each metric/time range.

+

⬤ green metrics are healthy

+

⬤ orange metrics are elevated

+

⬤ red indicates there may be a problem.

+ Click on a circle to color instances by their value for that metric."> +
+

+ Click the circles below to color instances by metric over a time period +

+ + + + + + + +
+ Role + + + Color instances by role +
+
+
+ + +
+
+
+
+ +
+
+ + +
+
- -
-
- - + +
+
+
-
+
+ +
+
+
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Topology nameStatusClusterRoleEnvironmentVersionLaunched atSubmitted byLinks
{{topology}}{{execution_state['status']}}{{cluster}}{{execution_state['role']}}{{environ}}{{execution_state['release_version']}}{{launched}}{{execution_state['submission_user']}} - Config - Job - {% for extra_link in execution_state['extra_links'] %} - {{extra_link['name']}} - {% end %} -
-
-
- - - -
-
-
-
-
- -
- @@ -177,7 +200,10 @@

+ + + + {% end %}