Remove mockups for implemented pages

This commit removes the mockups, sample data files, and other js files
related to the mockups which served as guides to getting things up. We
already have working code landed for the first 2 pages and the mockups
don't really reflect what things actually look like any more. So there
really isn't a reason to keep them around anymore. We should also
remember to remove the mockups on the patches which implement the
corresponding page for real.

Change-Id: Ice14238928bcb534d9870ad51eb9585490bfd705
This commit is contained in:
Matthew Treinish 2015-10-12 15:47:50 -04:00
parent a1686b2240
commit bfe0da2991
No known key found for this signature in database
GPG Key ID: FD12A0F214C9E177
5 changed files with 0 additions and 658 deletions

View File

@ -1,250 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script src="project.json"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
<button id="button" class"autocompare">Update</button>
<div id="timegraph" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="dial1" style="width: 300px; height: 200px; float: left"></div>
<div id="dial2" style="width: 300px; height: 200px; float: left"></div>
<div id="dial3" style="width: 300px; height: 200px; float: left"></div>
<div id="dial4" style="width: 300px; height: 200px; float: left"></div>
<div id="dial5" style="width: 300px; height: 200px; float: left"></div>
<script type="text/javascript">
var data = JSON.parse(project_data);
$(function () {
$('#timegraph').highcharts('StockChart',{
title: {
text: 'Builds',
x: -20 //center
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Counts'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
});
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.6, '#DF5353'], // red
[0.8, '#DFDF00'], // yellow
[1.0, '#00BF00'] // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
$('#dial1').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Nova Status'
}
},
credits: {
enabled: false
}
}));
$('#dial2').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Neutron Status'
}
},
credits: {
enabled: false
}
}));
$('#dial3').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Cinder Status'
}
},
credits: {
enabled: false
}
}));
$('#dial4').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Glance Status'
}
},
credits: {
enabled: false
}
}));
$('#dial5').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Swift Status'
}
},
credits: {
enabled: false
}
}));
});
$('#button').click(function() {
var range = new Array();
var pass = new Array();
var fail = new Array();
var projects = new Array();
for (var ele=0; ele < data.timedata.length; ele++) {
var obj = data.timedata[ele];
range[ele]=obj.datetime;
var n_fail = 0;
var n_pass = 0;
for (var loop=0; loop < obj.project_data.length; loop++) {
var project = obj.project_data[loop].project;
n_fail += obj.project_data[loop].fail;
n_pass += obj.project_data[loop].pass;
var found = 0;
for (loop2=0; loop2 < projects.length; loop2++) {
if (projects[loop2].name === project) {
found = 1;
projects[loop2].fail += obj.project_data[loop].fail;
projects[loop2].pass += obj.project_data[loop].pass;
}
}
if (found === 0) {
projects.push({name: project, pass: n_pass, fail: n_fail});
}
}
pass[ele] = n_pass;
fail[ele] = n_fail;
}
var tgraph = $('#timegraph').highcharts();
while(tgraph.series.length > 0)
tgraph.series[0].remove(true);
tgraph.addSeries({name: "Pass", data: pass});
tgraph.addSeries({name: "Failed", data: fail});
tgraph.xAxis[0].setCategories(range);
tgraph.redraw();
var dial1 = $('#dial1').highcharts();
dial1.setTitle(projects[0].name);
var pct = new Array();
pct.push(projects[0].pass / (projects[0].pass+projects[0].fail)*100);
dial1.addSeries({name: "Pass %", data: pct, dataLabels:{format: "%"}});
var dial2 = $('#dial2').highcharts();
dial2.setTitle(projects[1].name);
var pct = new Array();
pct.push(projects[1].pass / (projects[1].pass+projects[1].fail)*100);
dial2.addSeries({name: "Pass %", data: pct, dataLabels:{format: "%"}});
var dial3 = $('#dial3').highcharts();
dial3.setTitle(projects[2].name);
var pct = new Array();
pct.push(projects[2].pass / (projects[2].pass+projects[2].fail)*100);
dial3.addSeries({name: "Pass %", data: pct, dataLabels:{format: "%"}});
var dial4 = $('#dial4').highcharts();
dial4.setTitle(projects[3].name);
var pct = new Array();
pct.push(projects[3].pass / (projects[3].pass+projects[3].fail)*100);
dial4.addSeries({name: "Pass %", data: pct, dataLabels:{format: "%"}});
var dial5 = $('#dial5').highcharts();
dial5.setTitle(projects[4].name);
var pct = new Array();
pct.push(projects[4].pass / (projects[4].pass+projects[4].fail)*100);
dial5.addSeries({name: "Pass %", data: pct, dataLabels:{format: "%"}});
});
</script>
</body>
</html>

View File

@ -1,130 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script src="project_data.json"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="sparkline.js"></script>
</head>
<body>
<button id="button" class"autocompare">Update</button>
<div id="timegraph" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="jobtable">
<tr><td>Failures</td><td>Job Name</td><td>Run Time</td><td>Passed</td><td>Failed</td><td>%Failed</td>
</table>
<script type="text/javascript">
var data = JSON.parse(project_data);
$(function () {
$('#timegraph').highcharts('StockChart',{
title: {
text: 'Nova Jobs',
x: -20 //center
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Counts'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
});
});
$('#button').click(function() {
var range = new Array();
var pass = new Array();
var fail = new Array();
var jobs = new Array();
for (var ele=0; ele < data.timedata.length; ele++) {
var obj = data.timedata[ele];
range[ele]=obj.datetime;
var n_fail = 0;
var n_pass = 0;
for (var loop=0; loop < obj.job_data.length; loop++) {
var job = obj.job_data[loop].job_name;
n_fail += obj.job_data[loop].fail;
n_pass += obj.job_data[loop].pass;
var found = 0;
for (loop2=0; loop2 < jobs.length; loop2++) {
if (jobs[loop2].job_name === job) {
found = 1;
jobs[loop2].fail += obj.job_data[loop].fail;
jobs[loop2].pass += obj.job_data[loop].pass;
jobs[loop2].fail_sparc_data.push(obj.job_data[loop].fail);
jobs[loop2].run_time_sparc_data.push(obj.job_data[loop].mean_run_time);
}
}
if (found === 0) {
jobs.push({job_name: job, pass: obj.job_data[loop].pass, fail: obj.job_data[loop].fail, fail_sparc_data:[obj.job_data[loop].fail], run_time_sparc_data:[obj.job_data[loop].mean_run_time]});
}
}
pass[ele] = n_pass;
fail[ele] = n_fail;
}
var tgraph = $('#timegraph').highcharts();
while(tgraph.series.length > 0)
tgraph.series[0].remove(true);
tgraph.addSeries({name: "Pass", data: pass});
tgraph.addSeries({name: "Failed", data: fail});
tgraph.xAxis[0].setCategories(range);
tgraph.redraw();
var ttable=$('#jobtable').find('tbody');
for (var loop=0; loop<jobs.length; loop++) {
pct = ( jobs[loop].fail * 100 ) / (jobs[loop].fail + jobs[loop].pass);
ttable.append($('<tr>')
.append($('<td><div id="fail_sparc_'+loop+'" style=""></div></td>'))
.append($('<td>'+jobs[loop].job_name+'</td>'))
.append($('<td><div id="runtime_sparc_'+loop+'" style=""></div></td>'))
.append($('<td>'+jobs[loop].pass+'</td>'))
.append($('<td>'+jobs[loop].fail+'</td>'))
.append($('<td>'+pct+'</td></tr>'))
);
$('#fail_sparc_'+loop).highcharts('SparkLine', {
title: { text: ' ' },
subtitle: { text: ' '},
xAxis: { lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', title: { text: ' ' }, labels: { enabled: false }},
yAxis: { lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', title: { text: ' ' }, labels: { enabled: false }},
series: [{name: ' ', data: jobs[loop].fail_sparc_data}],
plotOptions: {line: { marker: { enabled: false } } },
width: 150
});
$('#runtime_sparc_'+loop).highcharts('SparkLine', {
title: { text: ' ' },
subtitle: { text: ' '},
xAxis: { lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', title: { text: ' ' }, labels: { enabled: false }},
yAxis: { lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', title: { text: ' ' }, labels: { enabled: false }},
series: [{name: ' ', data: jobs[loop].run_time_sparc_data}],
plotOptions: {line: { marker: { enabled: false } } },
width: 150
});
}
});
</script>
</body>
</html>

View File

@ -1,49 +0,0 @@
project_data = '{ "timedata": [ { "datetime": "02 Jun 2015", "project_data":'+
' [ { "project": "glance", "pass": 100, "fail": 50 },'+
'{ "project": "cinder", "pass": 150, "fail": 25 },'+
'{ "project": "swift", "pass": 200, "fail": 0 },'+
'{ "project": "neutron", "pass": 230, "fail": 10 },'+
'{ "project": "nova", "pass": 300, "fail": 0 }'+
'] },'+
'{ "datetime": "03 Jun 2015", "project_data": ['+
'{ "project": "glance", "pass": 110, "fail": 40 },'+
'{ "project": "cinder", "pass": 160, "fail": 15 },'+
'{ "project": "swift", "pass": 195, "fail": 5 },'+
'{ "project": "neutron", "pass": 225, "fail": 15 },'+
'{ "project": "nova", "pass": 300, "fail": 5 }'+
'] },'+
'{ "datetime": "04 Jun 2015", "project_data": ['+
'{ "project": "glance", "pass": 100, "fail": 50 },'+
'{ "project": "cinder", "pass": 150, "fail": 25 },'+
'{ "project": "swift", "pass": 200, "fail": 0 },'+
'{ "project": "neutron", "pass": 230, "fail": 10 },'+
'{ "project": "nova", "pass": 300, "fail": 5 }'+
'] },'+
'{ "datetime": "05 Jun 2015", "project_data": ['+
'{ "project": "glance", "pass": 125, "fail": 25 },'+
'{ "project": "cinder", "pass": 160, "fail": 15 },'+
'{ "project": "swift", "pass": 200, "fail": 0 },'+
'{ "project": "neutron", "pass": 230, "fail": 10 },'+
'{ "project": "nova", "pass": 305, "fail": 5 }'+
'] },'+
'{ "datetime": "06 Jun 2015", "project_data": ['+
'{ "project": "glance", "pass": 115, "fail": 0 },'+
'{ "project": "cinder", "pass": 160, "fail": 5 },'+
'{ "project": "swift", "pass": 220, "fail": 30 },'+
'{ "project": "neutron", "pass": 230, "fail": 20 },'+
'{ "project": "nova", "pass": 310, "fail": 0 }'+
'] },'+
'{ "datetime": "07 Jun 2015", "project_data": ['+
'{ "project": "glance", "pass": 115, "fail": 0 },'+
'{ "project": "cinder", "pass": 160, "fail": 5 },'+
'{ "project": "swift", "pass": 220, "fail": 30 },'+
'{ "project": "neutron", "pass": 230, "fail": 20 },'+
'{ "project": "nova", "pass": 310, "fail": 0 }'+
'] },'+
'{ "datetime": "08 Jun 2015", "project_data": ['+
'{ "project": "glance", "pass": 115, "fail": 0 },'+
'{ "project": "cinder", "pass": 160, "fail": 5 },'+
'{ "project": "swift", "pass": 220, "fail": 30 },'+
'{ "project": "neutron", "pass": 230, "fail": 20 },'+
'{ "project": "nova", "pass": 310, "fail": 0 }'+
'] } ] }';

View File

@ -1,134 +0,0 @@
project_data = '{ "timedata": ['+
' { "datetime": "02 Jun 2015",'+
' "job_data": ['+
' { "job_name": "gate-devstack-dsvm-cells",'+
' "pass": 20,'+
' "fail": 40,'+
' "mean_run_time": 10.5 },'+
' { "job_name": "gate-nove-tox-functional",'+
' "pass": 15,'+
' "fail": 45,'+
' "mean_run_time": 5.3 },'+
' { "job_name": "gate-grenade-dsvm-partial",'+
' "pass": 40,'+
' "fail": 20,'+
' "mean_run_time": 50 },'+
' { "job_name": "gate-grenade-dsvm-ironic-sideways",'+
' "pass": 45,'+
' "fail": 15,'+
' "mean_run_time": 70 } ]'+
' },'+
' { "datetime": "03 Jun 2015",'+
' "job_data": ['+
' { "job_name": "gate-devstack-dsvm-cells",'+
' "pass": 30,'+
' "fail": 30,'+
' "mean_run_time": 12 },'+
' { "job_name": "gate-nove-tox-functional",'+
' "pass": 20,'+
' "fail": 40,'+
' "mean_run_time": 6 },'+
' { "job_name": "gate-grenade-dsvm-partial",'+
' "pass": 45,'+
' "fail": 15,'+
' "mean_run_time": 35 },'+
' { "job_name": "gate-grenade-dsvm-ironic-sideways",'+
' "pass": 45,'+
' "fail": 15,'+
' "mean_run_time": 70 } ]'+
' },'+
' { "datetime": "04 Jun 2015",'+
' "job_data": ['+
' { "job_name": "gate-devstack-dsvm-cells",'+
' "pass": 35,'+
' "fail": 25,'+
' "mean_run_time": 15 },'+
' { "job_name": "gate-nove-tox-functional",'+
' "pass": 45,'+
' "fail": 15,'+
' "mean_run_time": 8.2 },'+
' { "job_name": "gate-grenade-dsvm-partial",'+
' "pass": 50,'+
' "fail": 10,'+
' "mean_run_time": 45 },'+
' { "job_name": "gate-grenade-dsvm-ironic-sideways",'+
' "pass": 55,'+
' "fail": 5,'+
' "mean_run_time": 60 } ]'+
' },'+
' { "datetime": "05 Jun 2015",'+
' "job_data": ['+
' { "job_name": "gate-devstack-dsvm-cells",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 20.5 },'+
' { "job_name": "gate-nove-tox-functional",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 8 },'+
' { "job_name": "gate-grenade-dsvm-partial",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 40 },'+
' { "job_name": "gate-grenade-dsvm-ironic-sideways",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 45 } ]'+
' },'+
' { "datetime": "06 Jun 2015",'+
' "job_data": ['+
' { "job_name": "gate-devstack-dsvm-cells",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 20.5 },'+
' { "job_name": "gate-nove-tox-functional",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 8 },'+
' { "job_name": "gate-grenade-dsvm-partial",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 40 },'+
' { "job_name": "gate-grenade-dsvm-ironic-sideways",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 45 } ]'+
' },'+
' { "datetime": "07 Jun 2015",'+
' "job_data": ['+
' { "job_name": "gate-devstack-dsvm-cells",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 20.5 },'+
' { "job_name": "gate-nove-tox-functional",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 8 },'+
' { "job_name": "gate-grenade-dsvm-partial",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 40 },'+
' { "job_name": "gate-grenade-dsvm-ironic-sideways",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 45 } ]'+
' },'+
' { "datetime": "08 Jun 2015",'+
' "job_data": ['+
' { "job_name": "gate-devstack-dsvm-cells",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 20.5 },'+
' { "job_name": "gate-nove-tox-functional",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 8 },'+
' { "job_name": "gate-grenade-dsvm-partial",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 40 },'+
' { "job_name": "gate-grenade-dsvm-ironic-sideways",'+
' "pass": 60,'+
' "fail": 0,'+
' "mean_run_time": 45 } ]'+
' } ] }';

View File

@ -1,95 +0,0 @@
$(function () {
/**
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
*/
Highcharts.SparkLine = function (options, callback) {
var defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner: function (w, h, point) {
return { x: point.plotX - w / 2, y: point.plotY - h};
}
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return new Highcharts.Chart(options, callback);
};
});