Re-organize UI elements in Heorn UI topology page (#3397)

Author: nwangtw

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;
+}

heron/tools/ui/resources/static/js/config.js

@@ -166,7 +166,7 @@ var ConfigTable = React.createClass({
       tableLayout: 'inherit'
     };
     return (
-      <div>
+      <div className="display-info display-config">
         <div className="widget-header">
           <div className="title">
             <h4>{title}</h4>

heron/tools/ui/resources/static/js/topologies.js

@@ -598,7 +598,7 @@ var AllMetrics = React.createClass({
       instance: this.props.instance,
     };
     return (
-      <div>
+      <div className="display-info display-counters">
         <TopologyCounters info={info} />
         <SpoutRunningInfo info={info} />
         <BoltRunningInfo info={info} />

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);
+}());