diff options
author | Clark Laughlin <clark.laughlin@linaro.org> | 2015-05-26 22:01:18 -0400 |
---|---|---|
committer | Clark Laughlin <clark.laughlin@linaro.org> | 2015-05-26 22:01:18 -0400 |
commit | 41497b2f0cf3ef3843c6c40898385bf5d813ca11 (patch) | |
tree | 55b527ff846532e71448befcfb1dc9f0b43790bd | |
parent | 48f3d2ad1c3161fd520ec73581f0777fe6e6050f (diff) |
fleshing out the web UI some more
-rw-r--r-- | web-app/static/chart.js | 82 | ||||
-rw-r--r-- | web-app/static/detail.html | 90 | ||||
-rw-r--r-- | web-app/static/index.html | 88 | ||||
-rw-r--r-- | web-app/static/util.js | 31 |
4 files changed, 208 insertions, 83 deletions
diff --git a/web-app/static/chart.js b/web-app/static/chart.js new file mode 100644 index 0000000..a9c9ad1 --- /dev/null +++ b/web-app/static/chart.js @@ -0,0 +1,82 @@ + +function create_chart(div_name, branch, distro, version, max_results, f) { + var div_name = branch + ":" + distro + ":" + version; + + $.getJSON( "/results/tempest?count=" + max_results + "&branch=" + branch + "&osdistro=" + distro + "&osversion=" + version, function(data) { + var failureDataPoints = []; + var skippedDataPoints = []; + var passingDataPoints = []; + + $.each(data, function (index, value) { + if (value['t.all_tests'] > 0) { + failureDataPoints.unshift({label: value['t.lava_job'], y: value['t.failing_tests']}); + skippedDataPoints.unshift({label: value['t.lava_job'], y: value['t.skipped_tests']}); + passingDataPoints.unshift({label: value['t.lava_job'], y: value['t.passing_tests']}); + } + }); + + var chart = new CanvasJS.Chart(div_name, + { + title: { + text: "Branch \"" + branch + "\" on \"" + distro + "/" + version + "\" (up to last " + max_results + " results)" + }, + legend: { + cursor: "pointer", + itemclick: function (e) { + if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { + e.dataSeries.visible = false; + } else { + e.dataSeries.visible = true; + } + e.chart.render(); + } + }, + axisY: {title: "# of Tests" }, + axisX: {title: "Test Job", prefix: "Job " }, + toolTip: { + content: function(e) { + var content; + content = e.entries[0].dataSeries.legendText + " <strong>"+ e.entries[0].dataPoint.y ; + return content; + } + }, + animationEnabled: true, + zoomEnabled: true, + data: [ + { + name: "skip", + legendText: "Skipped Tests", showInLegend: true, + type: "stackedColumn", + color: "rgba(13,131,172,.8)", + dataPoints: skippedDataPoints, + click: function(e) { + f(e.dataPoint.label, e.dataSeries.name); + } + }, + { + name: "fail", + legendText: "Failing Tests", showInLegend: true, + type: "stackedColumn", + color: "rgba(224,72,108,.8)", + dataPoints: failureDataPoints, + click: function(e) { + f(e.dataPoint.label, e.dataSeries.name); + } + }, + { + name: "pass", + legendText: "Passing Tests", showInLegend: true, + type: "stackedColumn", + color: "rgba(159,204,64,.8)", + dataPoints: passingDataPoints, + click: function(e) { + f(e.dataPoint.label, e.dataSeries.name); + } + } + ] + }); + + chart.render(); + }); +} + diff --git a/web-app/static/detail.html b/web-app/static/detail.html new file mode 100644 index 0000000..4205944 --- /dev/null +++ b/web-app/static/detail.html @@ -0,0 +1,90 @@ +<html> +<head> + <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'> + <link href='http://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css' rel='stylesheet' type='text/css'> + + <script type='text/javascript' src="http://code.jquery.com/jquery-2.1.4.min.js"></script> + <script type='text/javascript' src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> + <script type='text/javascript' src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> + + <style> + h1,h2,h3 { font-family: ‘Merriweather Sans’, Arial, serif; font-weight: 700; } + BODY { font-family: ‘Merriweather Sans’, Arial, serif; font-weight: 400; } + </style> + +<script type="text/javascript" src="util.js"></script> +<script type="text/javascript" src="chart.js"></script> +<script type="text/javascript"> + +$(function() { + params = parse_query(window.location.search); + + job = params["job"]; + + // get the top-level job data + $.getJSON("/results/tempest/job/" + job, function(data) { + item = data[0]; + + $("#lava_job").text(job); + $("#date").text(item["t.date"]); + + $("#branch").text(item["b.name"]); + $("#os_distro").text(item["o.distro"]); + $("#os_version").text(item["o.version"]); + + $("#passing_tests").text(item["t.passing_tests"]); + $("#failing_tests").text(item["t.failing_tests"]); + $("#skipped_tests").text(item["t.skipped_tests"]); + $("#total_tests").text(item["t.all_tests"]); + }); + + // get the list of failed tests + $.getJSON("/results/tempest/job/" + job + "/failures", function(data) { + data.forEach(function(value, index) { + $('<li>').text(value["t.name"]).appendTo($('#failing_tests_list')); + }); + }); + + // get the list of skipped tests + $.getJSON("/results/tempest/job/" + job + "/skipped", function(data) { + data.forEach(function(value, index) { + $('<li>').text(value["t.name"]).appendTo($('#skipped_tests_list')); + }); + }); +}); + +</script> + + +</head> +<body> +<h1><img style="vertical-align: middle; width: 150px" src="http://www.linaro.org/app/images/linaro-logo-web.png"/> +Openstack CI</h1> + +<h2>Tempest Run <span id="lava_job"></span> (<span id="date"></span>)</h2> + +<table> +<tr><td>Tested Branch:</td><td><span id="branch"></span></td></tr> +<tr><td>OS Distro:</td><td><span id="os_distro"></span></td></tr> +<tr><td>OS Version:</td><td><span id="os_version"></span></td></tr> +</table> + +<table> +<tr><td>Passing Tests:</td><td><span id="passing_tests"></span></td></tr> +<tr><td>Failing Tests:</td><td><span id="failing_tests"></span></td></tr> +<tr><td>Skipped tests:</td><td><span id="skipped_tests"></span></td></tr> +<tr><td>Total Tests:</td><td><span id="total_tests"></span></td></tr> +</table> + +<p> +Click here to view the log output: <span id="lava_job"></span> +</p> + +<h3>Failing Tests</h3> +<div id="failing_tests_list"></div> + +<h3>Skipped Tests</h3> +<div id="skipped_tests_list"></div> + +</body> +</html> diff --git a/web-app/static/index.html b/web-app/static/index.html index 5bc0160..2fa5546 100644 --- a/web-app/static/index.html +++ b/web-app/static/index.html @@ -12,6 +12,8 @@ BODY { font-family: ‘Merriweather Sans’, Arial, serif; font-weight: 400; } </style> +<script type="text/javascript" src="util.js"></script> +<script type="text/javascript" src="chart.js"></script> <script type="text/javascript"> $(function() { @@ -30,95 +32,15 @@ $(function() { }).appendTo($("#chartContainer")); $("<br>").appendTo($("#chartContainer")); - create_chart(div_name, branch, distro, version, 60); + // generate a chart for the combination + create_chart(div_name, branch, distro, version, 60, handle_chart_click); }); }); }); }); -function create_chart(div_name, branch, distro, version, max_results) { - var div_name = branch + ":" + distro + ":" + version; - - $.getJSON( "/results/tempest?count=" + max_results + "&branch=" + branch + "&osdistro=" + distro + "&osversion=" + version, function(data) { - var failureDataPoints = []; - var skippedDataPoints = []; - var passingDataPoints = []; - - $.each(data, function (index, value) { - if (value['t.all_tests'] > 0) { - failureDataPoints.unshift({label: value['t.lava_job'], y: value['t.failing_tests']}); - skippedDataPoints.unshift({label: value['t.lava_job'], y: value['t.skipped_tests']}); - passingDataPoints.unshift({label: value['t.lava_job'], y: value['t.passing_tests']}); - } - }); - - var chart = new CanvasJS.Chart(div_name, - { - title: { - text: "Branch \"" + branch + "\" on \"" + distro + "/" + version + "\" (up to last " + max_results + " results)" - }, - legend: { - cursor: "pointer", - itemclick: function (e) { - if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { - e.dataSeries.visible = false; - } else { - e.dataSeries.visible = true; - } - e.chart.render(); - } - }, - axisY: {title: "# of Tests" }, - axisX: {title: "Test Job", prefix: "Job " }, - toolTip: { - content: function(e) { - var content; - content = e.entries[0].dataSeries.legendText + " <strong>"+ e.entries[0].dataPoint.y ; - return content; - } - }, - animationEnabled: true, - zoomEnabled: true, - data: [ - { - name: "skip", - legendText: "Skipped Tests", showInLegend: true, - type: "stackedColumn", - color: "rgba(13,131,172,.8)", - dataPoints: skippedDataPoints, - click: function(e) { - handle_chart_click(e.dataPoint.label, e.dataSeries.name); - } - }, - { - name: "fail", - legendText: "Failing Tests", showInLegend: true, - type: "stackedColumn", - color: "rgba(224,72,108,.8)", - dataPoints: failureDataPoints, - click: function(e) { - handle_chart_click(e.dataPoint.label, e.dataSeries.name); - } - }, - { - name: "pass", - legendText: "Passing Tests", showInLegend: true, - type: "stackedColumn", - color: "rgba(159,204,64,.8)", - dataPoints: passingDataPoints, - click: function(e) { - handle_chart_click(e.dataPoint.label, e.dataSeries.name); - } - } - ] - }); - - chart.render(); - }); -} - function handle_chart_click(job, series) { - window.alert(job + ": " + series); + window.location.href = "detail.html?job=" + job; } </script> diff --git a/web-app/static/util.js b/web-app/static/util.js new file mode 100644 index 0000000..8c4e948 --- /dev/null +++ b/web-app/static/util.js @@ -0,0 +1,31 @@ + +function parse_query(s) { + var searchStr = s; + var section = location.hash.substring(1,location.hash.length); + var searchArray = new Array(); + + while (searchStr!='') { + var name, value; + // strip off leading ? or & + if ((searchStr.charAt(0)=='?')||(searchStr.charAt(0)=='&')) searchStr = searchStr.substring(1,searchStr.length); + // find name + name = searchStr.substring(0,searchStr.indexOf('=')); + // find value + if (searchStr.indexOf('&')!=-1) + value = searchStr.substring(searchStr.indexOf('=')+1,searchStr.indexOf('&')); + else + value = searchStr.substring(searchStr.indexOf('=')+1,searchStr.length); + // add pair to an associative array + searchArray[name] = value; + // cut first pair from string + if (searchStr.indexOf('&')!=-1) + searchStr = searchStr.substring(searchStr.indexOf('&')+1,searchStr.length); + else + searchStr = ''; + // debug step + //document.write(name + ': ' + value + ': ' + searchStr + '<br>'); + } + + return searchArray; +} + |