big-data/hadoop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YARN-9836. General usability improvements in showSimulationTrace.html. Contributed by Adam Antal

Browse Source
This commit is contained in:
Szilard Nemeth 2019-10-11 13:39:27 +02:00
parent 4a700c20d5
commit 62b5cefaea
1 changed files with 237 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
hadoop-tools/hadoop-sls/src/main/html/showSimulationTrace.html
View File

@ -69,38 +69,52 @@
</div> </div>
</div> </div>
<div>
<div id="error-div" style="display:none">
<div class="alert alert-danger" role="alert" style="margin-left:20%; margin-right:20%">
<span id="error-message"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
</div>
<div id="data" style="display:none;">
<div class="row"> <div class="row">
<div class="divborder span8" style="margin-left:50px" id="area1"></div> <div class="divborder span8 chart-area" style="margin-left:50px" id="area1"></div>
<div class="divborder span8" id="area2"></div> <div class="divborder span8 chart-area" id="area2"></div>
</div> </div>
<div class="row"> <div class="row">
<div class="divborder span8" style="margin-left:50px" id="area3"></div> <div class="divborder span8 chart-area" style="margin-left:50px" id="area3"></div>
<div class="divborder span8" id="area4"></div> <div class="divborder span8 chart-area" id="area4"></div>
</div> </div>
<div class="row"> <div class="row">
<div class="divborder span8" style="margin-left:50px" id="area5"></div> <div class="divborder span8 chart-area" style="margin-left:50px" id="area5"></div>
<div class="divborder span8" id="area6"></div> <div class="divborder span8 chart-area" id="area6"></div>
</div> </div>
<div class="row"> <div class="row">
<div class="divborder span8 " style="margin-left:50px" id="area7"></div> <div class="divborder span8 " style="margin-left:50px" id="area7"></div>
<div class="span7" id="area8"></div> <div class="span7 chart-area" id="area8"></div>
</div>
</div> </div>
<p>&nbsp;</p> <p>&nbsp;</p>
<script> <script>
// select file and draw // select file and draw
function draw() { function draw() {
$("#error-div").css("display", "none");
var filepath = document.getElementById('jsonfile').value; var filepath = document.getElementById('jsonfile').value;
if (filepath) { if (filepath) {
for (var i = 1; i < 9; i ++) { $(".chart-area").empty();
$('#area' + i).empty();
}
filepath = filepath.replace("C:\\fakepath\\", ""); filepath = filepath.replace("C:\\fakepath\\", "");
drawCharts(filepath); drawCharts(filepath);
} else { } else {
alert('choose file firstly.'); $("#error-message").html("Please choose file.");
$("#error-div").css("display", "block");
$("#data").css("display", "none");
} }
} }
@ -149,6 +163,12 @@
]; ];
drawEachChart("#area7", data, legends, "Scheduler allocate & handle operations timecost", "Timecost (ms)", 0, 210); drawEachChart("#area7", data, legends, "Scheduler allocate & handle operations timecost", "Timecost (ms)", 0, 210);
}); });
}).done(function() {
$("#data").css("display", "block");
}).fail(function(jqxhr, textStatus, error) {
$("#error-message").html(String(error));
$("#error-div").css("display", "block");
$("#data").css("display", "none");
}); });
} }
@ -293,6 +313,7 @@
.attr("d", function(d) { return line(d.values); }) .attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); }); .style("stroke", function(d) { return color(d.name); });
} }
// title // title
svg.append("text") svg.append("text")
.attr("x", (width / 2)) .attr("x", (width / 2))