view talosnames/templates/tbpl.html @ 65:22c35af93ef8

lets give these a border
author Jeff Hammel <jhammel@mozilla.com>
date Thu, 16 Aug 2012 16:54:36 -0700
parents 4171e8477cdb
children 277b167060e5
line wrap: on
line source

<html>
<head>
<title>Talos names: TBPL View</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>
// In order to get anything working with Config.js
// We have to stub a bunch of stuff for no reason
BuildbotDBUser = null;
PushlogJSONParser = null;
</script>
<script src="http://hg.mozilla.org/users/mstange_themasta.com/tinderboxpushlog/raw-file/tip/js/Config.js"></script>

<script>
var data =
{{json | html}};

function empty(selector) {
$(selector).html('');
}

$(document).ready(function() {

// map letter names to TBPL long names
var reverse_mapping = {};
for (var i in Config.testNames) {
reverse_mapping[Config.testNames[i]] = i;
}

// buildbot suites
var buildbot_suites = {};
for (var suite in data.tbpl) {
var tbpl_name = data.tbpl[suite];
if (buildbot_suites[tbpl_name] == undefined) {
buildbot_suites[tbpl_name] = [];
}
buildbot_suites[tbpl_name].push(suite);
}

// order suites by enabled/disabled
// TODO
for (var suite in buildbot_suites) {
var disabled = [];
var enabled = [];
for (var index in buildbot_suites[suite]) {
var suitename = buildbot_suites[suite][index]

if(data.enabled[suitename]) {
enabled.push(suitename)
} else {
disabled.push(suitename)
}
}

buildbot_suites[suite] = enabled.concat(disabled);

}

$(".letter").each(function() {
var text = $(this).text()
if (text.length && reverse_mapping[text]) {
$(this).attr('title', reverse_mapping[text]);

var that = this;
$(this).click(function() {
empty("#content");
$(".selected").removeClass("selected");
$(that).addClass('selected');

var letter = $(that).text();
var title = $(that).attr('title');

var html = '<h1>' + title + '</h1>';
var bbsuite = buildbot_suites[title];
if (bbsuite) {
html += '<div class="buildbot">';
for (var suite in bbsuite) {
var enabled = data.enabled[bbsuite[suite]];
var classes = 'buildbotsuite';
if (!enabled) {
classes += ' disabled';
}
html += '<div class="' + classes + '">';
html += '<h2 title="buildbot suite name">' + bbsuite[suite] + '</h2>';
if (!enabled) {
html += '<i>(disabled)</i>';
}

// PerfConfigurator command
html += '<div><tt><b>PerfConfigurator</b>'
html += ' ' + data.commands[bbsuite[suite]].join(' ');
html += '</tt></div>'

// talos tests
var tests = data.tests[bbsuite[suite]];
if (tests) {
html += '<table><tr><td>Talos Test Config</td><td>Graphserver Name</td></tr>';

for (var test in tests) {
html += '<tr><td>' + test + '</td><td>';

var graphserver_names = data.graphserver[bbsuite[suite]][test];
if (graphserver_names) {

html += '<dl>';
for (var grindex in graphserver_names) {
// We only have one for now, but might as well enumerate
var name = graphserver_names[grindex][0];
var longname = graphserver_names[grindex][1];
html += '<dt>' + name + '</dt>';
html += '<dd>' + longname + '</dd>';

}
html += '</dl>';

}

html += '</td></tr>';
}

html += '</table>';
}

html += '</div>'
}
html += '</div>';

}

$("#content").html(html);
});

}

});

});
</script>

<style>
* {
font-family: sans-serif;
}

tt {
font-family: monospace;
}

table, th, td {
border: 1px solid black;
}

th {
font-weight: bold;
}

table {
border-collapse: collapse;
}

#header {
font-weight: bold;
width: 20em;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.letter {
color: green;
}

.selected {
color: white;
background-color: green;
}

h1 {

}

#navigation {
list-style-type: none;
clear: right;
}

#navigation li {
float: left;
padding: 0.4em;
}

.disabled {
background-color: #BBB;
}

.buildbotsuite {
border: thin solid #BBB;
}

</style>

</head>
<body>

<ul id="navigation">
  <li><a href="/">Buildbot view</a></li>
</ul>

<div id="header">
<span id="T">T</span> (
<span class="letter" id="c">c</span>
<span class="letter" id="d">d</span>
<span class="letter" id="di">di</span>
<span class="letter" id="dr">dr</span>
<span class="letter" id="n">n</span>
<span class="letter" id="o">o</span>
<span class="letter" id="p">p</span>
<span class="letter" id="s">s</span>
<span class="letter" id="tp">tp</span>
<span class="letter" id="x">x</span>
)
</div><!-- header -->

<div id="content"></div>

</body>
</html>