Re-organize UI elements in Heorn UI topology page (#3397)
diff --git a/heron/tools/ui/resources/static/css/main.css b/heron/tools/ui/resources/static/css/main.css
index d8c6570..5cde820 100644
--- a/heron/tools/ui/resources/static/css/main.css
+++ b/heron/tools/ui/resources/static/css/main.css
@@ -2253,3 +2253,41 @@
.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 762fe2b..4e23f2d 100644
--- a/heron/tools/ui/resources/static/js/config.js
+++ b/heron/tools/ui/resources/static/js/config.js
@@ -166,7 +166,7 @@
tableLayout: 'inherit'
};
return (
- <div>
+ <div className="display-info display-config">
<div className="widget-header">
<div className="title">
<h4>{title}</h4>
diff --git a/heron/tools/ui/resources/static/js/topologies.js b/heron/tools/ui/resources/static/js/topologies.js
index 1d1a0f9..764e0aa 100644
--- a/heron/tools/ui/resources/static/js/topologies.js
+++ b/heron/tools/ui/resources/static/js/topologies.js
@@ -598,7 +598,7 @@
instance: this.props.instance,
};
return (
- <div>
+ <div className="display-info display-counters">
<TopologyCounters info={info} />
<SpoutRunningInfo info={info} />
<BoltRunningInfo info={info} />
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 0000000..8add7da
--- /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 3ad2816..49961a7 100644
--- a/heron/tools/ui/resources/templates/topology.html
+++ b/heron/tools/ui/resources/templates/topology.html
@@ -21,6 +21,7 @@
{% block content %}
+<!-- Plans -->
<div class="plans">
<button type="button" class="reset close"><span aria-hidden="true">Reset View</span></button>
<div class="row">
@@ -46,129 +47,151 @@
<div id="color-key" class="text-center"></div>
</div>
</div>
+</div>
- <div class="row space-above">
- <div class="col-md-6">
- <div class="container">
- <div class="text-center">
- <span class="h5">Aggregate topology metrics</span>
- <span
- class="glyphicon glyphicon-question-sign bs-popover text-muted"
- aria-hidden="true"
- data-toggle="popover"
- data-placement="top"
- title="Aggregate Topology Metrics"
- data-html="true"
- data-content="
- <p>Colors in this table show the worst value for any instance in the topology for each metric/time range.</p>
- <p><strong class='status-circle' style='color: #1a9850'>⬤</strong> green metrics are healthy</p>
- <p><strong class='status-circle' style='color: #fdae61'>⬤</strong> orange metrics are elevated</p>
- <p><strong class='status-circle' style='color: #d73027'>⬤</strong> red indicates there may be a problem.</p>
- Click on a circle to color instances by their value for that metric."></span>
+<!-- Topology Info -->
+<div class="col-md-12">
+ <table class="table">
+ <thead>
+ <th>Topology name</th>
+ <th>Status</th>
+ <th>Cluster</th>
+ <th>Role</th>
+ <th>Environment</th>
+ <th>Version</th>
+ <th>Launched at</th>
+ <th>Submitted by</th>
+ <th>Links</th>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>{{topology}}</td>
+ <td>{{execution_state['status']}}</td>
+ <td>{{cluster}}</td>
+ <td>{{execution_state['role']}}</td>
+ <td>{{environ}}</td>
+ <td>{{execution_state['release_version']}}</td>
+ <td>{{launched}}</td>
+ <td>{{execution_state['submission_user']}}</td>
+ <td>
+ <a id="jobPageLink" class="btn btn-primary btn-xs" href={{job_page_link}} target="_blank">Job</a>
+ {% for extra_link in execution_state['extra_links'] %}
+ <a id="{{extra_link['name']}}" class="btn btn-primary btn-xs" href="{{extra_link['url']}}" target="_blank">{{extra_link['name']}}</a>
+ {% end %}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<!-- Details section. It contains a navigator and the details. -->
+<div class="col-md-12">
+ <!-- Navegator -->
+ <div id="display-navigator">
+ <div class="navbar-default">
+ <div class="row navbar-collapse collapse navbar-responsive-collapse">
+ <div class="btn-group navigator">
+ <button type="button" id="stats" class="active">Stats</button>
+ <button type="button" id="counters" class="">Counters</button>
+ <button type="button" id="config" class="">Config</button>
</div>
- <p class="text-muted text-center">
- <em>Click the circles below to color instances by metric over a time period</em>
- </p>
- <table class="stat-rollup-table">
- <tbody class="stats">
- </tbody>
- <tbody>
- <td class="text-right">
- Role
+ </div>
+ </div>
+ </div>
+
+ <!-- Topology details, including stats, counter, and config. -->
+ <div class="display-stats" id="topologydetails">
+ <!-- Stats -->
+ <div class="row">
+ <div class="display-info space-above display-stats" id="topologystats">
+ <div class="col-md-6">
+ <div class="container">
+ <div class="text-center">
+ <span class="h5">Aggregate topology metrics</span>
<span
class="glyphicon glyphicon-question-sign bs-popover text-muted"
aria-hidden="true"
data-toggle="popover"
data-placement="top"
- title="Role"
- data-content="Color instances by their role from the logical plan. This is the default behavior on page load."></span>
- </td>
- <td colspan="4">
- <a href="#" id="reset-colors" class="strong">Color instances by role</a>
- </td>
- </tbody>
- </table>
- <div class="text-center">
- <div class="btn-group color-choice">
- <button type="button" class="btn btn-xs btn-default active" data-color="default">Default Colors</button>
- <button type="button" class="btn btn-xs btn-default" data-color="leonid">Colorblind Friendly</button>
+ title="Aggregate Topology Metrics"
+ data-html="true"
+ data-content="
+ <p>Colors in this table show the worst value for any instance in the topology for each metric/time range.</p>
+ <p><strong class='status-circle' style='color: #1a9850'>⬤</strong> green metrics are healthy</p>
+ <p><strong class='status-circle' style='color: #fdae61'>⬤</strong> orange metrics are elevated</p>
+ <p><strong class='status-circle' style='color: #d73027'>⬤</strong> red indicates there may be a problem.</p>
+ Click on a circle to color instances by their value for that metric."></span>
+ </div>
+ <p class="text-muted text-center">
+ <em>Click the circles below to color instances by metric over a time period</em>
+ </p>
+ <table class="stat-rollup-table">
+ <tbody class="stats">
+ </tbody>
+ <tbody>
+ <td class="text-right">
+ Role
+ <span
+ class="glyphicon glyphicon-question-sign bs-popover text-muted"
+ aria-hidden="true"
+ data-toggle="popover"
+ data-placement="top"
+ title="Role"
+ data-content="Color instances by their role from the logical plan. This is the default behavior on page load."></span>
+ </td>
+ <td colspan="4">
+ <a href="#" id="reset-colors" class="strong">Color instances by role</a>
+ </td>
+ </tbody>
+ </table>
+ <div class="text-center">
+ <div class="btn-group color-choice">
+ <button type="button" class="btn btn-xs btn-default active" data-color="default">Default Colors</button>
+ <button type="button" class="btn btn-xs btn-default" data-color="leonid">Colorblind Friendly</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-md-6">
+ <div class="text-center">
+ <span class="h5" id="trendline-title"></span>
+ <span
+ class="glyphicon glyphicon-question-sign bs-popover text-muted"
+ aria-hidden="true"
+ data-toggle="popover"
+ data-placement="top"
+ title="Metric Trendlines"
+ data-html="true"
+ data-content="
+ <p>Trendline of topology metrics over the past hour. Shows the entire topology by default.</p>
+ <p>Click on a logical component of the topology to stats for just instances of that component.</p>
+ <p>Click on an instance to get metrics, logs, and exceptions for that instance.</p>
+ <p><em>When the entire topology or a single logical component is selected, values
+ show are the <strong>maximum</strong> across all instances.</em></p>
+ "></span>
+ </div>
+ <div id="stat-trendlines" class="container">
</div>
</div>
</div>
</div>
-
- <div class="col-md-6">
- <div class="text-center">
- <span class="h5" id="trendline-title"></span>
- <span
- class="glyphicon glyphicon-question-sign bs-popover text-muted"
- aria-hidden="true"
- data-toggle="popover"
- data-placement="top"
- title="Metric Trendlines"
- data-html="true"
- data-content="
- <p>Trendline of topology metrics over the past hour. Shows the entire topology by default.</p>
- <p>Click on a logical component of the topology to stats for just instances of that component.</p>
- <p>Click on an instance to get metrics, logs, and exceptions for that instance.</p>
- <p><em>When the entire topology or a single logical component is selected, values
- show are the <strong>maximum</strong> across all instances.</em></p>
- "></span>
+ <!-- Counters -->
+ <div class="col-md-12">
+ <div class="col-md-12">
+ <div id="display-counters"></div>
</div>
- <div id="stat-trendlines" class="container">
+ </div>
+ <!-- Config -->
+ <div class="col-md-12">
+ <div class="col-md-12">
+ <div id="display-config"></div>
</div>
</div>
</div>
</div>
-<div class="row space-above">
- <div class="col-md-12">
- <table class="table">
- <thead>
- <th>Topology name</th>
- <th>Status</th>
- <th>Cluster</th>
- <th>Role</th>
- <th>Environment</th>
- <th>Version</th>
- <th>Launched at</th>
- <th>Submitted by</th>
- <th>Links</th>
- </thead>
-
- <tbody>
- <tr>
- <td>{{topology}}</td>
- <td>{{execution_state['status']}}</td>
- <td>{{cluster}}</td>
- <td>{{execution_state['role']}}</td>
- <td>{{environ}}</td>
- <td>{{execution_state['release_version']}}</td>
- <td>{{launched}}</td>
- <td>{{execution_state['submission_user']}}</td>
- <td>
- <a class="btn btn-primary btn-xs" href="./{{topology}}/config" target="_blank">Config</a>
- <a id="jobPageLink" class="btn btn-primary btn-xs" href={{job_page_link}} target="_blank">Job</a>
- {% for extra_link in execution_state['extra_links'] %}
- <a id="{{extra_link['name']}}" class="btn btn-primary btn-xs" href="{{extra_link['url']}}" target="_blank">{{extra_link['name']}}</a>
- {% end %}
- </td>
- </tr>
- </tbody>
- </table>
- </div>
-</div>
-
-
-
-<div class="row">
- <div class="col-md-12">
- <div id="display-counters"></div>
- </div>
-</div>
-
-<hr>
-
<script src="{{ static_url('js/d3.min.3.4.11.js') }}"></script>
<script src="{{ static_url('js/d3-tip.min.0.6.3.js') }}"></script>
<script src="{{ static_url('js/stat-trendlines.js') }}"></script>
@@ -177,7 +200,10 @@
<script src="{{ static_url('js/logical-plan.js') }}"></script>
<script src="{{ static_url('js/plan-stats.js') }}"></script>
<script src="{{ static_url('js/colors.js') }}"></script>
+<script src="{{ static_url('js/topology-details.js') }}"></script>
<script type="text/jsx" src="{{ static_url('js/topologies.js') }}" ></script>
+<script type="text/jsx" src="{{ static_url('js/config.js') }}"></script>
+
<script type="application/javascript">
// colors used shading nodes in logical and physical plan
@@ -275,12 +301,18 @@
}
};
</script>
+
<script type="text/jsx">
/** @jsx React.DOM */
- React.renderComponent(
- <AllMetrics baseUrl="{{baseUrl}}" cluster="{{cluster}}" environ="{{environ}}" topology="{{topology}}"/>,
- document.getElementById('display-counters')
- );
+ React.renderComponent(
+ <AllMetrics baseUrl="{{baseUrl}}" cluster="{{cluster}}" environ="{{environ}}" topology="{{topology}}"/>,
+ document.getElementById('display-counters')
+ );
+
+ React.renderComponent(
+ <ConfigTable baseUrl="{{baseUrl}}" cluster="{{cluster}}" environ="{{environ}}" topology="{{topology}}" />,
+ document.getElementById("display-config")
+ );
</script>
{% end %}
