[Midnightbsd-cvs] mports: www/tmpls: Changed how result details work.

ctriv at midnightbsd.org ctriv at midnightbsd.org
Sat Nov 3 12:13:57 EDT 2007


Log Message:
-----------
Changed how result details work.  We now load them in the background on
demand inside a results list.

Modified Files:
--------------
    mports/Tools/magus/www/data/magus:
        index.cgi (r1.2 -> r1.3)
    mports/Tools/magus/www/data/magus/elements:
        magus.css (r1.10 -> r1.11)
    mports/Tools/magus/www/tmpls:
        header.tmpl (r1.5 -> r1.6)
        index.tmpl (r1.5 -> r1.6)
        list.tmpl (r1.1 -> r1.2)
        port.tmpl (r1.1 -> r1.2)
        result-list.tmpl (r1.1 -> r1.2)

Added Files:
-----------
    mports/Tools/magus/www/data/magus/elements:
        magus.js (r1.1)

-------------- next part --------------
Index: index.cgi
===================================================================
RCS file: /home/cvs/mports/Tools/magus/www/data/magus/index.cgi,v
retrieving revision 1.2
retrieving revision 1.3
diff -LTools/magus/www/data/magus/index.cgi -LTools/magus/www/data/magus/index.cgi -u -r1.2 -r1.3
--- Tools/magus/www/data/magus/index.cgi
+++ Tools/magus/www/data/magus/index.cgi
@@ -7,6 +7,7 @@
 use Magus;
 use CGI;
 use HTML::Template;
+use JSON::XS;
 
 eval {
   main();
@@ -16,6 +17,7 @@
 
 sub main {
   my $p = CGI->new;
+  
   my $path = $p->path_info;
 
   if ($path eq '' || $path eq '/') {
@@ -24,10 +26,8 @@
     list_page($p, $1);
   } elsif ($path =~ m:/ports/(.*):) {
     port_page($p, $1);
-  } elsif ($path =~ m:/results/(\d+)/log:) {
-    log_page($p, $1);
-  } elsif ($path =~ m:/results/(\d+)/details:) {
-    subresults_page($p, $1);
+  } elsif ($path =~ m:/results/async/(\d+):) {
+    result_details_async($p, $1);
   } else {
     die "Unknown path: $path\n";
   }
@@ -90,8 +90,7 @@
     machine => $_->machine->name,
     arch    => $_->arch,
     summary => $_->summary,
-    has_log => defined $_->logs->next,
-    has_subresults => defined $_->subresults->next,
+    has_details => ($_->summary eq 'pass') ? 0 : 1,
   }} $port->results;
   
   if (@results) {
@@ -119,43 +118,31 @@
   print $p->header, $tmpl->output;
 }
 
-sub subresults_page {
+sub result_details_async {
   my ($p, $id) = @_;
-
-  my $tmpl = template($p, "subresults.tmpl");
-
+  
+  my %details = (id => $id);
+  
   my $result = Magus::Result->retrieve($id) || die "No such results: $id";
-
+  
   my @subresults = map { {
 	phase => $_->phase,
 	type  => $_->type,
 	name  => $_->name,
-	msg   => $_->msg
+	msg   => $_->msg,
   }} $result->subresults;
 
   if (@subresults) {
-    $tmpl->param(
-      subresults => \@subresults,
-    );
+    $details{subresults} = \@subresults;
   }
-
-  print $p->header, $tmpl->output;
-}
-
-
-
-sub log_page {
-  my ($p, $id) = @_;
-  
-  my $result = Magus::Result->retrieve($id) || die "No such result.";
   
   my $log = $result->logs->next;
   
-  my $tmpl = template($p, 'log.tmpl');
-  
-  $tmpl->param(port => $result->port, log => $log->data);
-  
-  print $p->header, $tmpl->output;
+  if ($log) {
+    $details{log} = $log->data;
+  }
+#  use Data::Dumper
+  print $p->header(-type => 'text/plain'), to_json(\%details);
 }
 
 sub list_page {
@@ -166,7 +153,9 @@
     port    => $_->port,
     version => $_->version,
     machine => $_->machine->name,
-    arch    => $_->arch 
+    arch    => $_->arch, 
+    id      => $_->id,
+    has_details => ($_->summary eq 'pass') ? 0 : 1,
   }} sort { $b->id <=> $a->id } Magus::Result->search(summary => $summary);
   
   my $tmpl = template($p, 'list.tmpl');
Index: magus.css
===================================================================
RCS file: /home/cvs/mports/Tools/magus/www/data/magus/elements/magus.css,v
retrieving revision 1.10
retrieving revision 1.11
diff -LTools/magus/www/data/magus/elements/magus.css -LTools/magus/www/data/magus/elements/magus.css -u -r1.10 -r1.11
--- Tools/magus/www/data/magus/elements/magus.css
+++ Tools/magus/www/data/magus/elements/magus.css
@@ -15,12 +15,22 @@
 	letter-spacing: .1em;
 	font-size: 2em;
 	font-family: Verdana, Helvetica, Arial, sans-serif;
-	color: white;
 	margin: 0;
 }
 
+h1 a {
+	color: white;
+	text-decoration: none;
+}
+
+h1 a:visited {
+	color: white;
+}
+
 h2 {
 	font-size: 1.5em;
+	letter-spacing: .05em;
+	color: #555;
 }
 
 a {
@@ -41,7 +51,7 @@
 }
 
 table tr:hover {
-	background: #DBDCE9;
+	background: #FCFCFF;
 }
 
 table th {
@@ -52,6 +62,11 @@
 	background: #eaeaea;
 }
 
+tr.details {
+	display: none;
+}
+
+
 *.fail {
 	color: #C0000B;
 }
@@ -81,12 +96,33 @@
 }
 
 div.right {
-	float: right;
-/*	position: relative; */
-	bottom: 60px;
-	right: 20px
+	position: absolute;
+	top: 60px;
+	right: 0px;
+	width: 20%;
 }
 
+div.full {
+	width: 100%;
+	max-width: 100%;
+}
+
+div.left {
+	width: 75%;
+	max-width: 75%;	
+}
+
+table.result-list, table.port-results {
+	max-width: 100%;
+	width: 100%;
+}
+
+pre.log {
+	overflow: auto;
+}
+
+
+
 ul.depends li {
 	list-style: none;
 }
--- /dev/null
+++ Tools/magus/www/data/magus/elements/magus.js
@@ -0,0 +1,88 @@
+function details_link(id) {
+	var row = document.getElementById("result_" + id + "_row");
+	var div = document.getElementById("result_" + id + "_details");
+
+	if (!row.style.display || row.style.display == 'none') {
+		if (!div.innerHTML) {
+			sendAsycQuery(id);
+		} else {
+			row.style.display = 'table-row';
+			twiddle_link(id, 'hide');
+		}
+	} else {
+		row.style.display = 'none';
+		twiddle_link(id, 'show');
+	}
+
+	return false;
+}
+
+var url = 'http://cs.emich.edu/magus/index.cgi/results/async/';
+
+function sendAsycQuery(query) {
+    // branch for native XMLHttpRequest object	
+    if (window.XMLHttpRequest) {
+        req = new XMLHttpRequest();
+        req.open("GET", url + query, true);
+        req.setRequestHeader('Content-type', 'application/x-json');
+        req.setRequestHeader('Connection', 'close');
+        req.onreadystatechange = processDetailResults;
+        req.send(null);
+    // branch for IE/Windows ActiveX version
+    } else if (window.ActiveXObject) {
+        req = new ActiveXObject("Microsoft.XMLHTTP");
+        if (req) {
+            req.open("GET", url + query, true);
+            req.onreadystatechange = processDetailResults;
+            req.setRequestHeader('Content-Type', 'application/x-json');
+            req.setRequestHeader('Connection', 'close');
+            req.send(null);
+        }
+    } else {
+        return ' ';
+    }
+}
+
+function processDetailResults() {
+    // only if req shows "loaded"
+    if (req.readyState == 4) {
+        // only if "OK"
+        if (req.status == 200) {
+            var result = eval( "(" + req.responseText + ")" );
+
+	    var row = document.getElementById("result_" + result.id + "_row");
+            var td = document.getElementById("result_" + result.id + "_details");
+
+	    var html = '';
+	    
+	    if (result.subresults) {
+	    	html = '<ul class="subresults">';
+	    	for (i=0; i<result.subresults.length; i++) {
+	    		html = html + '<li class="' + result.subresults[i].type + '">' + result.subresults[i].phase + ': ' + result.subresults[i].msg + '</li>';
+	    	}
+	    	html = html + '</ul>';
+	    }
+	    
+	    if (result.log) {
+	    	html = html + '<pre class="log">' + result.log + '</pre>';
+	    }
+	    
+            td.innerHTML = html;
+	    twiddle_link(result.id, 'hide');
+            row.style.display   = 'table-row';
+        } else {
+            alert("There was a problem retrieving the data:\n" + req.statusText);
+        }
+    }
+}
+
+
+function twiddle_link(id, mode) {
+	var link = document.getElementById("result_" + id + "_link");
+
+	if (mode == 'show') {
+		link.innerHTML = 'Show Details';
+	} else {
+		link.innerHTML = 'Hide Details';
+	}
+}
Index: list.tmpl
===================================================================
RCS file: /home/cvs/mports/Tools/magus/www/tmpls/list.tmpl,v
retrieving revision 1.1
retrieving revision 1.2
diff -LTools/magus/www/tmpls/list.tmpl -LTools/magus/www/tmpls/list.tmpl -u -r1.1 -r1.2
--- Tools/magus/www/tmpls/list.tmpl
+++ Tools/magus/www/tmpls/list.tmpl
@@ -1,8 +1,13 @@
 <TMPL_INCLUDE NAME="header.tmpl">
 
-<h1><a href="/magus/">Magus</a> :: <TMPL_VAR name="TITLE"></h1>
+<div class="full">
+
+<h2><TMPL_VAR name="TITLE"></h2>
 
 <p><TMPL_VAR NAME="count"> ports:</p>
 
 <TMPL_INCLUDE NAME="result-list.tmpl">
+
+</div>
+
 <TMPL_INCLUDE NAME="footer.tmpl">
Index: result-list.tmpl
===================================================================
RCS file: /home/cvs/mports/Tools/magus/www/tmpls/result-list.tmpl,v
retrieving revision 1.1
retrieving revision 1.2
diff -LTools/magus/www/tmpls/result-list.tmpl -LTools/magus/www/tmpls/result-list.tmpl -u -r1.1 -r1.2
--- Tools/magus/www/tmpls/result-list.tmpl
+++ Tools/magus/www/tmpls/result-list.tmpl
@@ -1,13 +1,22 @@
 <table class="result-list">
-	<tr><th>Port</th><th>Version</th><th>Summary</th><th>Machine</th><th>Arch</th></tr>
+	<tr><th>Port</th><th>Version</th><th>Summary</th><th>Machine</th><th>Arch</th><th></th></tr>
 	<TMPL_LOOP NAME=results>
-	<tr class="<TMPL_VAR NAME=summary>">
+	<tr class="<TMPL_VAR NAME=summary><TMPL_UNLESS NAME=__odd__> even</TMPL_UNLESS>">
 		<td><a href="<TMPL_VAR name=port_root>/<TMPL_VAR NAME=port>"><TMPL_VAR NAME="port"></a></td>
 		<td><TMPL_VAR NAME=version></td>
 		<td><TMPL_VAR NAME=summary></td>
 		<td><TMPL_VAR NAME=machine></td>
 		<td><TMPL_VAR NAME=arch></td>
-	</tr>
+		<td>
+		    <TMPL_IF NAME="has_details">
+	                (<a href="#" id="result_<TMPL_VAR NAME=id>_link" onclick="return details_link(<TMPL_VAR NAME=id>);">Show Details</a>)
+	            </TMPL_IF>
+        	</td>
+        </tr>
+        <tr class="details<TMPL_UNLESS NAME=__odd__> even</TMPL_UNLESS>" id="result_<TMPL_VAR NAME=id>_row">
+        	<td colspan="6" id="result_<TMPL_VAR NAME=id>_details"></td>
+        </tr>
+                
 	</TMPL_LOOP>
 </table>
 
Index: port.tmpl
===================================================================
RCS file: /home/cvs/mports/Tools/magus/www/tmpls/port.tmpl,v
retrieving revision 1.1
retrieving revision 1.2
diff -LTools/magus/www/tmpls/port.tmpl -LTools/magus/www/tmpls/port.tmpl -u -r1.1 -r1.2
--- Tools/magus/www/tmpls/port.tmpl
+++ Tools/magus/www/tmpls/port.tmpl
@@ -1,6 +1,6 @@
 <TMPL_INCLUDE NAME="header.tmpl">
 
-<h1><a href="/magus/">Magus</a> :: <TMPL_VAR name="port"></h1>
+<h2><TMPL_VAR name="port"></h2>
 
 <div class="right">
 <a href="http://cvsweb.midnightbsd.org/mports/<TMPL_VAR NAME=port>">CVSWeb</a>
@@ -31,6 +31,7 @@
 
 </div>
 
+<div class="left">
 <p><TMPL_VAR NAME="desc"></p>
 
 <TMPL_IF name="results">
@@ -41,19 +42,22 @@
 	<th>Machine</th>
 	<th>Arch</th>
 	<th>Summary</th>
-	<td></td>
+	<th></th>
 </tr>
 <TMPL_LOOP name="results">
-<tr class="<TMPL_VAR NAME=summary>">
+<tr class="<TMPL_VAR NAME=summary><TMPL_UNLESS NAME=__odd__> even</TMPL_UNLESS>">
 	<td><TMPL_VAR NAME="version"></td>
 	<td><TMPL_VAR NAME="machine"></td>
 	<td><TMPL_VAR NAME="arch"></td>
 	<td><TMPL_VAR NAME="summary"></td>
 	<td>
-		<a href="<TMPL_VAR NAME=result_root>/<TMPL_VAR NAME=id>/details">Details</a>
-		--
-		<a href="<TMPL_VAR NAME=result_root>/<TMPL_VAR NAME=id>/log">Log</a> 
-	</td>
+	    <TMPL_IF NAME="has_details">
+		(<a href="#" id="result_<TMPL_VAR NAME=id>_link" onclick="return details_link(<TMPL_VAR NAME=id>);">Show Details</a>)
+	    </TMPL_IF>
+	</td> 
+</tr>
+<tr class="details<TMPL_UNLESS NAME=__odd__> even</TMPL_UNLESS>" id="result_<TMPL_VAR NAME=id>_row">
+	<td colspan="5" id="result_<TMPL_VAR NAME=id>_details"></td>
 </tr>
 </TMPL_LOOP>
 </table>
@@ -61,6 +65,6 @@
 <p><TMPL_VAR name=port> has not been tested.</p>
 </TMPL_IF>
 
-
+</div>
 
 <TMPL_INCLUDE NAME="footer.tmpl">
Index: index.tmpl
===================================================================
RCS file: /home/cvs/mports/Tools/magus/www/tmpls/index.tmpl,v
retrieving revision 1.5
retrieving revision 1.6
diff -LTools/magus/www/tmpls/index.tmpl -LTools/magus/www/tmpls/index.tmpl -u -r1.5 -r1.6
--- Tools/magus/www/tmpls/index.tmpl
+++ Tools/magus/www/tmpls/index.tmpl
@@ -16,7 +16,7 @@
 
 <tbody>
 <TMPL_LOOP NAME="locks">
-<tr <TMPL_UNLESS name="__odd__">class="even"</TMPL_UNLESS>>
+<tr<TMPL_UNLESS name="__odd__">class="even"</TMPL_UNLESS>>
 	<td><a href="<TMPL_VAR name=port_root>/<TMPL_VAR NAME=port>"><TMPL_VAR NAME="port"></a></td>
 	<td><TMPL_VAR name="machine"></td>
 	<td><TMPL_VAR name="arch"></td>
@@ -28,7 +28,7 @@
 
 </div>
 
-
+<div class="left">
 
 <h3>Latest Results</h3>
 <table class="result-list">
@@ -53,5 +53,6 @@
 	</TMPL_LOOP>
 	</tbody>
 </table>
+</div>
 
 <TMPL_INCLUDE NAME="footer.tmpl">
Index: header.tmpl
===================================================================
RCS file: /home/cvs/mports/Tools/magus/www/tmpls/header.tmpl,v
retrieving revision 1.5
retrieving revision 1.6
diff -LTools/magus/www/tmpls/header.tmpl -LTools/magus/www/tmpls/header.tmpl -u -r1.5 -r1.6
--- Tools/magus/www/tmpls/header.tmpl
+++ Tools/magus/www/tmpls/header.tmpl
@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
     <title><TMPL_VAR NAME="title"></title>
-    
+    <script src="/magus/elements/magus.js" type="text/javascript"></script>    
     <link rel="stylesheet" href="/magus/elements/magus.css" media="screen" />
 </head>
 <body><div id="tophead">
 
-<h1>Magus</h1>
+<h1><a href="/magus/">Magus</a></h1>
 
 <ul class="stats">
         <li>Tested: <TMPL_VAR NAME="ports_tested"></li>


More information about the Midnightbsd-cvs mailing list