Skip to content
This repository was archived by the owner on Mar 3, 2023. It is now read-only.

Add parallelism calculator in Heron UI #3401

Merged
merged 1 commit into from
Nov 15, 2019
Merged

Add parallelism calculator in Heron UI #3401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion heron/tools/ui/resources/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
51 changes: 44 additions & 7 deletions heron/tools/ui/resources/static/js/topologies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
59 changes: 59 additions & 0 deletions heron/tools/ui/resources/templates/topology.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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
Expand Down