Skip to content

Instantly share code, notes, and snippets.

@johan
Created May 28, 2012 05:11
Show Gist options
  • Select an option

  • Save johan/2817340 to your computer and use it in GitHub Desktop.

Select an option

Save johan/2817340 to your computer and use it in GitHub Desktop.
A nice table grid view for PASS/WARN/FAIL statuses
A modern-CSS version of http://pike.ida.liu.se/development/pikefarm/7.7.xml
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="xenofarm.css">
</head>
<body>
<table class="grid" cols="13" rules="groups" border="0" cellspacing="0" cellpadding="2">
<colgroup id="client"></colgroup>
<colgroup><col></colgroup>
<colgroup><col><col><col><col></colgroup>
<colgroup><col></colgroup>
<colgroup><col><col></colgroup>
<colgroup><col><col><col></colgroup>
<colgroup id="platform"></colgroup>
<thead>
<tr>
<th><table border="0">
<tbody><tr><td class="none"></td>
<td>Not built, or<br>Build in progress.</td></tr>
<tr><td class="fail"></td>
<td>Build failed.</td></tr>
<tr><td class="warn"></td>
<td>Build successful.<br>Testsuite failed.</td></tr>
<tr><td class="pass"></td>
<td>Build successful.<br>Testsuite successful.</td></tr>
</tbody></table>
Node Name</th>
<th><div>2008-08-06 20:35:28 (3235)</div></th>
<th><div>2008-08-07 12:47:24 (3236)</div></th>
<th><div>2008-08-07 14:05:49 (3237)</div></th>
<th><div>2008-08-07 15:00:50 (3238)</div></th>
<th><div>2008-08-07 23:09:21 (3239)</div></th>
<th><div>2008-08-08 16:35:30 (3240)</div></th>
<th><div>2008-08-09 16:20:58 (3241)</div></th>
<th><div>2008-08-09 21:24:03 (3242)</div></th>
<th><div>2008-08-11 13:37:00 (3243)</div></th>
<th><div>2008-08-11 15:15:44 (3244)</div></th>
<th><div>2008-08-11 17:37:36 (3245)</div></th>
<th>Platform</th>
</tr></thead>
<tbody class="data">
<tr class="source">
<td>pike.ida.liu.se</td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="pass"></td>
<td class="nowrap">xenofarm_export (SunOS 5.8 sun4u sparc)</td>
</tr>
</tbody>
<tfoot><tr id="changes">
<th>Source changes:</th>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3235&amp;between=2008-08-06 12:26:01&amp;and=2008-08-06 20:35:28" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3236&amp;between=2008-08-06 20:35:28&amp;and=2008-08-07 12:47:24" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3237&amp;between=2008-08-07 12:47:24&amp;and=2008-08-07 14:05:49" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3238&amp;between=2008-08-07 14:05:49&amp;and=2008-08-07 15:00:50" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3239&amp;between=2008-08-07 15:00:50&amp;and=2008-08-07 23:09:21" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3240&amp;between=2008-08-07 23:09:21&amp;and=2008-08-08 16:35:30" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3241&amp;between=2008-08-08 16:35:30&amp;and=2008-08-09 16:20:58" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3242&amp;between=2008-08-09 16:20:58&amp;and=2008-08-09 21:24:03" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3243&amp;between=2008-08-09 21:24:03&amp;and=2008-08-11 13:37:00" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3244&amp;between=2008-08-11 13:37:00&amp;and=2008-08-11 15:15:44" class="diff">see diff</a></td>
<td><a href="http://pike.ida.liu.se/development/cvs/pike.xml?v=7.7&amp;build=3245&amp;between=2008-08-11 15:15:44&amp;and=2008-08-11 17:37:36" class="diff">see diff</a></td>
<td></td>
</tr></tfoot>
</table>
</body>
</html>
colgroup {
width: 22px;
}
table.grid tr {
height: 20px;
}
table.grid thead {
vertical-align: bottom;
}
table.grid {
background: #F0F0F0;
}
table.grid th:nth-child(even) {
background-color: #F0F0F0;
}
table.grid tr:nth-child(odd) {
background-color: #FFF;
}
table.grid tbody.data tr:nth-child(odd) td:nth-child(even) {
background-color: #F0F0F0;
}
table.grid tbody.data tr td:nth-child(even) {
background-color: #E0E0E0;
}
#client { margin-right: 25px }
#platform { margin-left: 100px }
#changes { text-align: center; }
/* horizontal separators between specific sections of the grid: */
#os0,#os1,#os2,#os3,#os4,#os5,#os6,#os7,#os8,#os9,
#os10,#os11,#os12,#os13,#os14,#os15,#os16,#os17,#os18,#os19
{ border-top:1px solid #444; }
/* in-grid pills */
td.none, td.pass, td.warn, td.fail {
height: 22px;
min-width: 22px;
}
/* pills legend */
thead th td {
font-weight: normal;
white-space: nowrap;
height: 38px;
min-width: 22px;
}
/* standing headers */
thead th {
height: 190px;
}
th div {
white-space: nowrap;
-webkit-transform-origin: 0% 100%;
-webkit-transform: rotate(-90deg);
max-width: 24px;
margin-left: 20px;
margin-right: -20px;
margin-bottom: 4px;
}
.source, .source td {
background-color: #E5F3FF !important;
}
.nowrap {
white-space: nowrap;
}
td.none { background: url(icons/lite.gif) no-repeat 50% 50%; }
td.pass { background: url(icons/pass.gif) no-repeat 50% 50%; }
td.warn { background: url(icons/warn.gif) no-repeat 50% 50%; }
td.fail { background: url(icons/fail.gif) no-repeat 50% 50%; }
a.diff { background: url(icons/diff.gif) no-repeat 50% 50%;
display: block;
height: 22px;
width: 22px;
text-decoration: none;
text-indent: -2000px;
}
#changes th:first-child,
.source td:first-child {
text-align: right;
padding-right: 0.25em;
}
.source td:last-child {
padding-left: 0.25em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment