Skip to content

Commit

Permalink
Merge pull request #86 from wrench-project/workflowDataTable
Browse files Browse the repository at this point in the history 
Dashboard: adding workflow data table
  • Loading branch information
@rafaelfsilva
rafaelfsilva committed Dec 31, 2018
2 parents ecaf522 + e21d69b commit 17a5e5f
Show file tree
Hide file tree
Showing 10 changed files with 1,075 additions and 65 deletions.
129 changes: 106 additions & 23 deletions src/wrench/dashboard/index.html
View file
@@ -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
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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 17a5e5f

Please sign in to comment.