| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WebM Dashboard</title> |
| <link href="/css/bootstrap.css" rel="stylesheet"> |
| <link href="/css/bootstrap-responsive.css" rel="stylesheet"> |
| <link href="/css/dashboard.css" rel="stylesheet"> |
| <style type="text/css"> |
| body { |
| padding-top: 60px; |
| padding-bottom: 40px; |
| } |
| </style> |
| <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> |
| <!--[if lt IE 9]> |
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
| <![endif]--> |
| <!-- The majority of our javascript --> |
| <!-- LQ: Will jstree work with a newer jQuery? Seems so. --> |
| <!-- script type="text/javascript" src="/js/jstree/_lib/jquery.js"></script --> |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> |
| <script type="text/javascript" src="/js/jstree/jquery.jstree.js"></script> |
| <link rel="stylesheet" type="text/css" href="/js/jquery-ui/css/custom-theme/jquery-ui-1.8.23.custom.css" /> |
| <script type="text/javascript" src="/js/jquery-ui/js/jquery-ui-1.8.21.custom.min.js"></script> |
| <script type="text/javascript" src="/js/json2.js"></script> |
| <!-- A file with useful js functions --> |
| <script type="text/javascript" src="/js/utils.js"></script> |
| <script type="text/javascript" src="/js/chartutils.js"></script> |
| |
| <script type="text/javascript"> |
| |
| var MetricState = new Array(); |
| var ConfigState = new Array(); |
| var FileState = new Array(); |
| var CommitState = new Array(); |
| var FileTableState = new Array(); |
| var openList = new Array(); |
| |
| {% if development %} |
| var development = true; |
| {% else %} |
| var development = false; |
| {% endif %} |
| |
| var init = true; |
| var tableinit = true; |
| |
| // We build up our State lists (if applicable) from our template values. |
| {% if metrics %} |
| MetricState = '{{metrics}}'.split(','); |
| {% endif %} |
| |
| {% if configs %} |
| ConfigState = '{{configs}}'.split(','); |
| {% endif %} |
| |
| {% if filesets %} |
| FileState = '{{filesets}}'.split(','); |
| {% endif %} |
| |
| {% if commits %} |
| CommitState = '{{commits}}'.split(','); |
| {% endif %} |
| |
| {% if filenames %} |
| FileTableState = '{{filenames}}'.split(','); |
| {% endif %} |
| |
| {% if opentrees %} |
| openList = '{{opentrees}}'.split(','); |
| {% endif %} |
| |
| // WE SET GLOBAL CHART OPTIONS |
| var chartOptions ={chartArea: {height: "70%", width: "70%"}}; |
| |
| </script> |
| <script type="text/javascript" src="/js/treehandler.js"></script> |
| |
| <!-- the AJAX API for google charts --> |
| <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| <script> |
| google.load('visualization', '1.0', {'packages':['corechart', 'table']}); |
| |
| function ChartFiller(baseline) { |
| var dist_responses = new Array(); |
| var bar_responses = new Array(); |
| var time_responses = new Array(); |
| |
| var queryNum = MetricState.length * ConfigState.length * |
| FileTableState.length * CommitState.length; |
| |
| // A loading image |
| $('#chartdiv').html("<img src='/images/ajax-loader.gif' alt='Loading...' style='display:block; margin:auto;'>"); |
| |
| // Wait until all data is fetched to generate graphs |
| $(document).ajaxStop(function() { |
| $(this).unbind("ajaxStop"); |
| if (dist_responses.length > 0) { |
| drawChart(dist_responses, 'chartdiv', null, 'tabs2', 'configInfo', 'status'); |
| } |
| else { |
| $('#chartdiv').html(""); |
| $('#tabs2').html(""); |
| } |
| |
| if (bar_responses.length > 0) { |
| drawChart2(bar_responses, 'chartdiv', null, 'tabs2', 'configInfo', 'status'); |
| } |
| |
| if (time_responses.length > 0) { |
| drawTimeSeriesChart(time_responses, 'chartdiv', null, 'tabs2', 'configInfo', 'status'); |
| } |
| |
| }); |
| |
| //var files = FileState.filter(removeParents); |
| var files = FileTableState; |
| |
| // Add the baseline to the list of commits, if one is set |
| var commits = Array(); |
| if (baseline) |
| commits.push(baseline); |
| commits = commits.concat(CommitState.filter(removeParents)); |
| |
| // Ew, quadruple nested loop |
| for (var i = 0; i < MetricState.length; i++) { |
| // one series per commit (we exclude cases of time series) |
| if (bar_responses.length == 0 && queryNum && !is_distortion(MetricState[i]) && !(commits[0][0] === "~")) |
| for (var t = 0; t < commits.length; t++) |
| bar_responses[t] = new Array(); |
| |
| for (var j = 0; j < ConfigState.length; j++) { |
| for (var k = 0; k < files.length; k++) { |
| if (files[k].slice(0, 8) === 'OVERALL:') { |
| if (queryNum == 1) { |
| $('#chartdiv').html("Please select a file (or files) to view graph."); |
| $('#status').html(""); |
| $('#tabs2').html(""); |
| } |
| $("#commitInfo").dialog('close'); |
| $("#configInfo").dialog('close'); |
| continue; |
| } |
| |
| for (var t = 0; t < commits.length; t++) { |
| // We put together a url |
| var metric = MetricState[i]; |
| var config = ConfigState[j]; |
| var file = files[k]; |
| var commit = commits[t]; |
| metricurl = "/metric-data/" + metric + "/" + config + "/" + file + "/" + commit |
| |
| // pretty-up commit hash |
| if (baseline && t == 0) |
| commit = commit.slice(0,9) + " (Baseline)"; |
| else |
| commit = commit.slice(0,9); |
| |
| // Build a more readable version of the series name |
| var series_name = [] |
| if (MetricState.length > 1) { |
| series_name.push(metric); |
| } |
| if (ConfigState.length > 1) { |
| series_name.push(config); |
| } |
| |
| if (commit[0] === "~") { |
| if (files.length > 1) { |
| series_name.push(file); |
| } |
| series_name.push(commit); |
| series_name = {label: series_name.join(" "), commit: commit}; |
| FetchMetric(metricurl, series_name, time_responses); |
| } |
| else if (is_distortion(metric)) { |
| if (files.length > 1) { |
| series_name.push(file); |
| } |
| series_name.push(commit); |
| series_name = {label: series_name.join(" "), commit: commit}; |
| FetchMetric(metricurl, series_name, dist_responses); |
| } else { |
| if (series_name.length == 0 || files.length > 1) { |
| series_name.push(file); |
| } |
| series_name = {label: series_name.join(" "), commit: commit}; |
| FetchMetric(metricurl, series_name, bar_responses[t]); |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| |
| </script> |
| |
| <script> |
| $(function() { |
| $("#helpdialog").dialog({ autoOpen: false, width: 800 }); |
| $("#helpbutton").bind('click', help); |
| |
| $("#sharedialog").dialog({ autoOpen: false, width: 800 }); |
| $("#sharebutton").bind('click', share); |
| |
| $("#commitInfo").dialog({ autoOpen: false, width: 800, position: ['right', 60] }); |
| $("#configInfo").dialog({ autoOpen: false, width: 800, position: ['right', 60] }); |
| $('#container').hide(); |
| |
| // This hides the whitespace used for storing the chart |
| $(document).click(function() { |
| if ($('#chartdiv').is(':empty')){ |
| $('#container').hide(); |
| } |
| else { |
| $('#container').show(); |
| } |
| }); |
| |
| }); |
| |
| function help() { |
| $("#helpdialog").dialog('open'); |
| } |
| |
| function share() { |
| // This function creates and displays a custom url for accessing the current |
| // dashboard view |
| var url; |
| |
| if (development) |
| url = "localhost:8080/explore/"; |
| else |
| url = "http://dashboard.webmproject.org/explore/"; |
| |
| var metrics = MetricState.join(","); |
| var configs = ConfigState.join(","); |
| var filesets = FileState.join(","); |
| var commits = CommitState.filter(removeParents).join(","); |
| var filenames = FileTableState.join(","); |
| var opentrees = openList.join(','); |
| url = url + metrics + "/" + configs + "/" + filesets + "/" + commits + |
| "/" + filenames + "/" + opentrees; |
| |
| var hyperurl = '<a href="' + url + '" target="_blank">' + url + "</a>"; |
| |
| $('#shareurl').html(hyperurl); |
| $("#sharedialog").dialog('open'); |
| } |
| |
| </script> |
| |
| <link rel="shortcut icon" href="/images/webm-48px.png"> |
| <link rel="apple-touch-icon" href="/images/apple-touch-icon.png"> |
| |
| <script type='text/javascript'> |
| $(document).ready(function () { |
| if ($("[rel=popover]").length) { |
| $("[rel=popover]").popover(); |
| } |
| }); |
| </script> |
| </head> |
| <body> |
| |
| <header> |
| |
| <div class="navbar navbar-inverse navbar-fixed-top"> |
| <div class="navbar-inner"> |
| <div class="container-fluid"> |
| <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </a> |
| <a class="brand" href="/">WebM Dashboard</a> |
| <div class="nav-collapse collapse"> |
| <p class="navbar-text pull-right"> |
| {% if user %} |
| Logged in as {{ user.nickname }} [<a href="{{ logout_url }}">Sign Out</a>] |
| {% else %} |
| <a href="{{ login_url }}">Sign In</a> |
| {% endif %} |
| </p> |
| <ul class="nav"> |
| <li><a href="/explore">Explorer View</a></li> |
| <li><a href="/commit_viewer/">Commit View</a></li> |
| <li><a href="#helpModal" data-toggle="modal">Help</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="modal hide fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
| <h3 id="helpModalLabel">About this page</h3> |
| </div> |
| <div class="modal-body"> |
| <ul> |
| <li>To view a graph of performance data, please select some metrics, configurations, filesets and patch sets. </li> |
| <li> The page will automatically update to reflect what data is available.</li> |
| <li> Then in the area below, pick a filename to view the graph.</li> |
| <li> Multiple filenames can be selected with the ctrl or shift keys.</li> |
| <li>The raw data for a graph is viewable in the "Table" tab.</li> |
| <li>The reset button unchecks all selected options. </li> |
| </ul> |
| </div> |
| </div> |
| |
| </header> |
| |
| <!-- |
| <div id="header"> |
| |
| <div id="headerLeft" onclick="javascript:treeReset();" style="cursor:pointer;"> |
| WebM Dashboard |
| </div> |
| |
| <div id="headerRight"> |
| |
| <a href="#null" id="resetbutton" style="display:table-cell; vertical-align: middle;"> |
| Reset |
| </a> |
| | |
| |
| |
| <div id="helpdialog" title="About this page"> |
| <ul> |
| <li>To view a graph of performance data, please select some metrics, configurations, filesets and patch sets. </li> |
| <li> The page will automatically update to reflect what data is available.</li> |
| <li> Then in the area below, pick a filename to view the graph.</li> |
| <li> Multiple filenames can be selected with the ctrl or shift keys.</li> |
| <li>The raw data for a graph is viewable in the "Table" tab.</li> |
| <li>The reset button unchecks all selected options. </li> |
| </ul> |
| </div> |
| <a href="#null" id="helpbutton" style="display:table-cell; vertical-align: middle;"> |
| Help |
| </a> |
| | |
| --> |
| |
| <div id="sharedialog" title="Share this view"> |
| To share the current view with someone else, use this custom url below: |
| <div id="shareurl"> |
| </div> |
| </div> |
| |
| <!-- |
| <a href="#null" id="sharebutton" style="display:table-cell; vertical-align: middle;"> |
| Share |
| </a> |
| |
| |
| </div> |
| |
| </div> |
| --> |
| |
| <div class="container-fluid"> |
| |
| <div class="row-fluid" id=""> |
| <div class="span6"> |
| <h3>Explorer View</h3> |
| </div> |
| <div class="span6"> |
| <a href="#null" id="resetbutton" class="btn pull-right" style="margin-left: 1em;">Reset</a> |
| <a href="#null" id="sharebutton" class="btn pull-right">Share</a> |
| </div> |
| </div> |
| |
| <div class="row-fluid" id="upper"> |
| |
| <div class="span2 border-right"> |
| <h3> |
| Metrics |
| </h3> |
| <!-- div rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title" style="float: right;">?</div --> |
| <div id="treeView1"></div> |
| </div> |
| |
| <div class="span2 border-right"> |
| <h3 id="configs" |
| rel="popover" |
| title="" |
| data-placement="bottom" |
| data-trigger="hover" |
| data-content="Select the enclode-types to compare.">Configs</h3> |
| <div id="treeView2"></div> |
| </div> |
| |
| <div class="span2 border-right"> |
| <h3>File Sets</h3> |
| <div id="treeView3"></div> |
| </div> |
| |
| <div class="span6"> |
| <h3>Patch Sets</h3> |
| <div id="treeView4"></div> |
| </div> |
| |
| </div><!-- End row --> |
| |
| <div class="row-fluid" id="middle"> |
| |
| <ul id="myTab" class="nav nav-tabs"> |
| <li class="active"> |
| <a href="#graph" data-toggle="tab">Graph</a> |
| </li> |
| <li> |
| <a href="#table" data-toggle="tab">Table</a> |
| </li> |
| <li> |
| <a href="#commit-history" data-toggle="tab">Commit History</a> |
| </li> |
| </ul> |
| |
| <div id="myTabContent" class="tab-content"> |
| |
| <div class="tab-pane fade in active" id="graph"> |
| <div class="span3"> |
| <div id="tabs11"></div> |
| </div> |
| |
| <div class="span9"> |
| <div id="chartdiv"></div> |
| <div id="status"> </div> |
| </div> |
| </div> |
| |
| <div class="tab-pane fade" id="table"> |
| <div id="tabs2" class="tabdiv"></div> |
| </div> |
| |
| <div class="tab-pane fade" id="commit-history"> |
| <div class="ui-widget-content" id="githistory"></div> |
| </div> |
| |
| </div> |
| |
| </div><!-- End row --> |
| |
| {% include "templates/footer.html" %} |
| |
| </div><!-- End container --> |
| |
| <div id="bottomcenter"> |
| |
| <div id="commitInfo" title="Commit Information"> </div> |
| <div id="configInfo" title="Configuration Information"> </div> |
| |
| <!-- the tab widget |
| <div id="tabs"> |
| <ul class="tabnav"> |
| <li><a href="#tabs1">Graph</a></li> |
| <li><a href="#tabs2">Table</a></li> |
| <li><a href="#tabs3">Commit History</a></li> |
| </ul> |
| |
| <div id="tabs1" class="tabdiv"> |
| <div> |
| </div> |
| <div class="clear"></div> |
| |
| </div> |
| |
| <div id="tabs3" class="tabdiv"> |
| |
| </div> |
| |
| </div> --> |
| </div> <!-- end of bottom center --> |
| <!-- |
| <div class="clear"></div> |
| <div id="footer"> |
| <a href="http://webmproject.org" target="_blank"> The WebM Project </a> |
| </div> --> |
| |
| <script src="/js/bootstrap.min.js"></script> |
| |
| </body> |
| </html> |
