From ea4c88bda12d867e80fffd24ba43612248c9bab8 Mon Sep 17 00:00:00 2001
From: Eelco Dolstra <eelco.dolstra@logicblox.com>
Date: Fri, 26 Apr 2013 17:12:43 +0200
Subject: [PATCH] Use a popover to show how to use the build reproduction
 script

---
 src/root/build.tt  | 27 ++++++++++++++++++++-------
 src/root/common.tt |  7 +++++++
 src/root/layout.tt |  1 +
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/root/build.tt b/src/root/build.tt
index a9a1c8ea..be8fdc5e 100644
--- a/src/root/build.tt
+++ b/src/root/build.tt
@@ -78,10 +78,23 @@
   <div id="tabs-summary" class="tab-pane active">
 
     [% IF build.nixexprinput %]
-      <a class="btn btn-info pull-right clearfix"
-         href="[%c.uri_for('/build' build.id 'reproduce')%]">
-        Reproduce this build locally
-      </a>
+      [% WRAPPER makePopover title="Reproduce locally" %]
+        [% url = c.uri_for('/build' build.id 'reproduce') %]
+
+        <p>You can reproduce this build on your own machine by
+        downloading <a [% HTML.attributes(href => url) %]>a script</a>
+        that checks out all inputs of the build and then invokes Nix
+        to perform the build.  This script requires that you have Nix
+        on your system.</p>
+
+        <p>To download and execute the script from the command line,
+        run the following command:</p>
+
+<pre>
+bash <(curl <a [% HTML.attributes(href => url) %]>[% HTML.escape(url) %]</a>)
+</pre>
+
+      [% END %]
     [% END %]
 
     <table>
@@ -193,13 +206,13 @@
         <h3>Changes</h3>
         <table class="table table-striped table-condensed">
           <thead>
-            <th>Last successful build <tt>[% INCLUDE renderDateTime timestamp = prevSuccessfulBuild.timestamp %]</tt></th>
+            <th>Last successful build [% INCLUDE renderDateTime timestamp = prevSuccessfulBuild.timestamp %]</th>
             [% IF prevSuccessfulBuild && firstBrokenBuild && firstBrokenBuild.id != build.id %]
-              <th>First broken build <tt>[% INCLUDE renderDateTime timestamp = firstBrokenBuild.timestamp %]</tt>
+              <th>First broken build [% INCLUDE renderDateTime timestamp = firstBrokenBuild.timestamp %]
                 <a class="btn btn-mini" href="[% c.uri_for(c.controller('API').action_for('logdiff') prevSuccessfulBuild.id firstBrokenBuild.id ) %]">log diff</a>
               </th>
             [% END %]
-            <th>This build <tt>[% INCLUDE renderDateTime timestamp = build.timestamp %]</tt>
+            <th>This build [% INCLUDE renderDateTime timestamp = build.timestamp %]
               <a class="btn btn-mini" href="[% c.uri_for(c.controller('API').action_for('logdiff') prevSuccessfulBuild.id build.id) %]">log diff</a>
             </th>
           </thead>
diff --git a/src/root/common.tt b/src/root/common.tt
index 01d03c0d..dcc50c9f 100644
--- a/src/root/common.tt
+++ b/src/root/common.tt
@@ -492,4 +492,11 @@ BLOCK makeLazyTab %]
 [% END;
 
 
+BLOCK makePopover %]
+  <div class="btn btn-info pull-right hydra-popover" data-toggle="popover" data-placement="left" data-html="true" [% HTML.attributes('data-content' => content) %]>
+    [% title %]
+  </div>
+[% END;
+
+
 %]
diff --git a/src/root/layout.tt b/src/root/layout.tt
index 42f3ac37..addbb0f4 100644
--- a/src/root/layout.tt
+++ b/src/root/layout.tt
@@ -80,6 +80,7 @@
 
           bootbox.animate(false);
 
+          $(".hydra-popover").popover({});
       });
 
     </script>