summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorClark Laughlin <clark.laughlin@linaro.org>2015-05-26 22:01:18 -0400
committerClark Laughlin <clark.laughlin@linaro.org>2015-05-26 22:01:18 -0400
commit41497b2f0cf3ef3843c6c40898385bf5d813ca11 (patch)
tree55b527ff846532e71448befcfb1dc9f0b43790bd
parent48f3d2ad1c3161fd520ec73581f0777fe6e6050f (diff)
fleshing out the web UI some more
-rw-r--r--web-app/static/chart.js82
-rw-r--r--web-app/static/detail.html90
-rw-r--r--web-app/static/index.html88
-rw-r--r--web-app/static/util.js31
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;
+}
+