Add parallelism calculator in Heron UI (#3401)

Author: nwangtw

heron/tools/ui/resources/static/css/main.css

@@ -2291,4 +2291,10 @@ 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;
-}
+}
+
+/* Backdrop in bootstrap 3 seems to have solid color and we would like it to be half transparent */
+div.modal-backdrop.fade.in {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}

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

@@ -1067,8 +1067,34 @@ var BoltRunningInfo = React.createClass({
     });
     var setState = this.setState.bind(this);
 
-    const headings = ["Bolt", "Parallelism", "Execute Count", "Failure Count",
-                      "Capacity Utilization(min)", "Capacity Utilization(max)"];
+    const headings = [
+      { name: "Bolt", sortable: true },
+      { name: "Parallelism", sortable: true },
+      { name: "Execute Count", sortable: true },
+      { name: "Failure Count", sortable: true },
+      { name: "Capacity Utilization(min)", sortable: true },
+      { name: "Capacity Utilization(max)", sortable: true },
+      { name: "Parallelism Calculator", sortable: false }
+    ];
+
+    var openParallelismCalculator = function (e, index) {
+      var row = rows[index];
+
+      var calculator = $("#parallelism-calculator-modal");
+      calculator.find('#modal-component').text(row[0]);
+      calculator.attr('data-execute-count', row[2]);
+      calculator.find('#modal-execute-count').text(row[2]);
+      calculator.find('#target-execute-count').val(row[2]);
+      calculator.attr('data-max-utilization', row[5].replace("%", ""));
+      calculator.find('#modal-max-utilization').text(row[5]);
+      calculator.find('#target-max-utilization').val(row[5].replace("%", ""));
+      calculator.attr('data-parallelism', row[1]);
+      calculator.find('#modal-parallelism').text(row[1]);
+      calculator.find('#target-parallelism').val(row[1]);
+
+      calculator.modal({keyboard: true});
+    };
+
     return (
       <div id="componentrunninginfo">
         <div className="widget-header">
@@ -1100,16 +1126,27 @@ var BoltRunningInfo = React.createClass({
                     reverse: i === sortKey ? (!reverse) : true
                   });
                 }
-                return <th key={i} className={classNameVals} onClick={clicked}>{heading}</th>;
+
+                if (heading.sortable) {
+                  return <th key={i} className={classNameVals} onClick={clicked}>{heading.name}</th>;
+                } else {
+                  return <th key={i}>{heading.name}</th>;
+                }
               })}
             </tr>
           </thead>
           <tbody>
-            {rows.map(function (row) {
+            {rows.map(function (row, index) {
               return <tr key={row[0]}>{
-                row.map(function (value, i) {
-                  return <td className="col-md-2" key={i}>{value}</td>;
-                })}</tr>;
+                  row.map(function (value, i) {
+                    return <td className="col-md-2" key={i}>{value}</td>;
+                  })}
+                  <td className="col-md-1">
+                    <button type="button" className="btn btn-primary btn-xs" data-toggle="modal"
+                            onClick={(e) => openParallelismCalculator(e, index)}>
+                      Calculator
+                    </button>
+                  </td></tr>;
             })}
           </tbody>
         </table>

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

@@ -182,7 +182,49 @@ <h4 class="space-above">
       <div class="col-md-12">
         <div id="display-counters"></div>
       </div>
+      <!-- Popup dialog for parallelism calculator -->
+      <div class="modal fade" id="parallelism-calculator-modal" tabindex="-1" role="dialog" aria-labelledby="parallelismCalculatorModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-sm" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="exampleModalLabel">Parallelism Calculator: <span id="modal-component"></span></h5>
+            </div>
+            <div class="modal-body">
+              <form class="form-horizontal">
+                <h3 id="modal-component"></h3>
+                <div class="form-group">
+                  <label class="col-sm-8 control-label" for="target-execute-count">
+                    Target execute count (current: <b id="modal-execute-count"></b>)</label>
+                  <div class="col-sm-4">
+                    <input id="target-execute-count" class="form-control form-control-sm" value="100"></input>
+                  </div>
+                </div>
+                <div class="form-group">
+                  <label class="col-sm-8 control-label" for="target-max-utilization">
+                    Target max capacity utilization (current: <b id="modal-max-utilization"></b>)</label>
+                  <div class="col-sm-3">
+                    <input id="target-max-utilization" class="form-control form-control-sm" value=50 max=100 min=1></input>
+                  </div>
+                  <span class="col-sm-1 control-label">%</span>
+                </div>
+                <div class="form-group">
+                  <label class="col-sm-8 control-label" for="target-parallelism">
+                    Target parallelism (current: <b id="modal-parallelism"></b>)</label>
+                  <div class="col-sm-4">
+                    <input id="target-parallelism" class="form-control form-control-sm" readonly=true value="3"></input>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-default" onclick="calculateParallelism()">Calculate</button>
+              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+
     <!-- Config -->
     <div class="col-md-12">
       <div class="col-md-12">
@@ -204,6 +246,23 @@ <h4 class="space-above">
 <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">
+  function calculateParallelism() {
+    var calculator = $("#parallelism-calculator-modal");
+
+    var execute_count = calculator.attr("data-execute-count");
+    var max_utilization = calculator.attr("data-max-utilization");
+    var parallelism = calculator.attr("data-parallelism");
+    var target_execute_count = calculator.find('#target-execute-count').val();
+    var target_max_utilization = calculator.find('#target-max-utilization').val();
+
+    // Estimate the target parallelism based on the current information.
+    var newParallelism = max_utilization * target_execute_count * parallelism /
+                         (execute_count * target_max_utilization);
+    calculator.find('#target-parallelism').val(Math.ceil(newParallelism));
+  }
+</script>
+
 <script type="application/javascript">
 
   // colors used shading nodes in logical and physical plan