Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dashboard: adding workflow data table #86

Merged
merged 7 commits into from
Dec 31, 2018
Merged

Dashboard: adding workflow data table #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3cc05a3
First structure of table there
gjethwani Nov 30, 2018
e53c356
Finished table
gjethwani Dec 14, 2018
bd28f28
Finished collapsible sectioons
gjethwani Dec 14, 2018
14ed77d
Animations not working
gjethwani Dec 14, 2018
5ae2d79
Sliding works
gjethwani Dec 15, 2018
22d3442
Added rotating arrows
gjethwani Dec 15, 2018
e21d69b
Prevent highlighting with double click
gjethwani Dec 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
129 changes: 106 additions & 23 deletions src/wrench/dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='public/jquery-3.3.1.min.js'></script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wrench Dashboard</title>
Expand All @@ -11,39 +12,121 @@
<link rel="stylesheet" href="public/styles.css">
<link rel="icon" href="public/favicon.ico" />
<script src="public/d3.min.js" type="text/javascript"></script>
<!-- <script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script> -->
<script src="public/jQueryRotate.js" type="text/javascript"></script>
</head>
<body>
<div id='overall-container'>
<div id='info-container'>
<img src='public/logo-vertical.png' id=logo>
<h3>Wrench Dashboard</h3>
<p id='updated'></p>
<div id='info-container'>
<img src='public/logo-vertical.png' id=logo>
<h3>Wrench Dashboard</h3>
<p id='updated'></p>
</div>

<div class='element-and-title-container'>
<div class='title-container' onclick='showHide("overall-metrics-table-container", "overall-metrics-arrow")'>
<h6 class='title-text'>Overall Simulation Metrics</h6>
<div class='arrow-div'>
<span class='arrow-helper'></span>
<img id='overall-metrics-arrow' class='arrow-img' src='public/expand-arrow.png'/>
</div>
</div>

<div class='hidden' id='overall-metrics-table-container'>
<table id='overall-metrics-table'>
<colgroup>
<col span="1" class='overall-metrics-table-col read-col'></col>
<col span="1" class='overall-metrics-table-col write-col'></col>
</colgroup>
<thead>
<tr>
<th class='task-details-table-td'>Metric</th>
<th class='task-details-table-td'>Value</th>
</tr>
</thead>
</table>
</div>
</div>

<div class='element-and-title-container'>
<div class='title-container' onclick='showHide("overall-graph-container", "simulation-graph-arrow")'>
<h6 class='title-text'>Simulation Graph</h6>
<div class='arrow-div'>
<span class='arrow-helper'></span>
<img id='simulation-graph-arrow' class='arrow-img' src='public/expand-arrow.png'/>
</div>
</div>
<div class="container legend" id="workflow-execution-chart-legend">
<small>Legend:</small>
<small class="inline-block" id="workflow-execution-chart-legend-read-input">Reading Input</small>
<small class="inline-block" id="workflow-execution-chart-legend-computation">Performing Computation</small>
<small class="inline-block" id="workflow-execution-chart-legend-write-output">Writing Output</small>
<small class="inline-block" id="workflow-execution-chart-legend-failed">Failed During Execution</small>
<small class="inline-block" id="workflow-execution-chart-legend-terminated">Terminated by User</small>

<div class='hidden' id='overall-graph-container'>
<div class="container legend" id="workflow-execution-chart-legend">
<small>Legend:</small>
<small class="inline-block" id="workflow-execution-chart-legend-read-input">Reading Input</small>
<small class="inline-block" id="workflow-execution-chart-legend-computation">Performing Computation</small>
<small class="inline-block" id="workflow-execution-chart-legend-write-output">Writing Output</small>
<small class="inline-block" id="workflow-execution-chart-legend-failed">Failed During Execution</small>
<small class="inline-block" id="workflow-execution-chart-legend-terminated">Terminated by User</small>
</div>
<div id="graph-container">
<div class="text-left" id="tooltip-container">
<span id="tooltip-task-id"></span><br>
<span id="tooltip-task-operation"></span><br>
<span id="tooltip-task-operation-duration"></span>
</div>
</div>
</div>
<div id="graph-container" style="height:1000px;">
<div class="text-left" id="tooltip-container">
<span id="tooltip-task-id"></span><br>
<span id="tooltip-task-operation"></span><br>
<span id="tooltip-task-operation-duration"></span>
</div>

<div class='element-and-title-container'>
<div class='title-container' onclick='showHide("task-details-table-container", "simulation-details-arrow")'>
<h6 class='title-text'>Simulation Details</h6>
<div class='arrow-div'>
<span class='arrow-helper'></span>
<img id='simulation-details-arrow' class='arrow-img' src='public/expand-arrow.png'/>
</div>
</div>

<div class='hidden' id='task-details-table-container'>
<table class="task-details-table" id='task-details-table'>
<colgroup>
<col span="1"></col>
<col span="3" class="read-col"></col>
<col span="3" class="compute-col"></col>
<col span="3" class="write-col"></col>
<col span="1"></col>
</colgroup>
<thead class="task-details-table">
<tr>
<td></td>
<td colspan="3" class="text-center task-details-table-td">Read Input</td>
<td colspan="3" class="text-center task-details-table-td">Computation</td>
<td colspan="3" class="text-center task-details-table-td">Write Output</td>
<td></td>
</tr>
<tr>
<th scope="col" class="task-details-table-header">TaskID</th>
<th scope="col" class="task-details-table-header">Start Time</th>
<th scope="col" class="task-details-table-header">End Time</th>
<th scope="col" class="task-details-table-header">Duration</th>
<th scope="col" class="task-details-table-header">Start Time</th>
<th scope="col" class="task-details-table-header">End Time</th>
<th scope="col" class="task-details-table-header">Duration</th>
<th scope="col" class="task-details-table-header">Start Time</th>
<th scope="col" class="task-details-table-header">End Time</th>
<th scope="col" class="task-details-table-header">Duration</th>
<th scope="col" class="task-details-table-header">Task Duration</th>
</tr>
</thead>

<tbody class="task-details-table" id="task-details-table-body">

</tbody>
</table>
</div>

</div>


</body>
<script>
populateMetadata()
generateGraph(data.contents, "graph-container")
populateWorkflowTaskDataTable(data.contents)
getOverallWorkflowMetrics(data.contents)
</script>
</html>
2 changes: 1 addition & 1 deletion src/wrench/dashboard/parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function addToHTMLFile(data) {
var fileContents = fs.readFileSync("public/scripts.js"); //read existing contents into data
fileContents = fileContents.toString().split('\n').slice(1).join('\n'); //remove first line
fileContents = Buffer.from(fileContents, 'utf8');
var fd = fs.openSync("scripts.js", 'w+');
var fd = fs.openSync("public/scripts.js", 'w+');
var buffer = new Buffer("var data=" + JSON.stringify(data) + "\n");

fs.writeSync(fd, buffer, 0, buffer.length, 0); //write new data
Expand Down
Binary file added src/wrench/dashboard/public/expand-arrow.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.