Git hash links now go to githug compare view.

push/res/imp/server.html

 <!-- The <push-selection-sk> custom element declaration.
 
   Presents a dialog of package choices and generates an event when the user has
   made a selection. It is a custom element used by <push-server-sk>.
 
   Attributes:
     'choices'
         The list of packages that are available.
     'choice'
         The selected package.
   Events:
     'change'
         A 'change' event is generated when the user selects a package to push.
         The change event has the following attributes:
 
           event.detail.name   - The full name of the package selected.
   Methods:
     toggle()
         Toggles the visibility of the selection dialog.
 -->
 <style type="text/css" media="screen">
   html /deep/ .pushSelection {
     font-family: monospace;
     padding: 0.5em;
     cursor: pointer;
   }
   html /deep/ .pushSelection:hover {
     background: #eee;
   }
+  html /deep/ .built {
+    color: #D95F02;
+    display:inline;
+  }
+  html /deep/ .userid {
+    color: #7570B3;
+    display:inline;
+  }
 </style>
 <polymer-element name="push-selection-sk">
   <template>
     <paper-action-dialog id=chooser heading="Choose a release package to push">
       <core-selector id=newChoice>
         <template repeat="{{p in choices}}">
           <div class=pushSelection name="{{p.Name}}">
             <core-icon icon="{{choice == p.Name ? 'check' : ''}}" title="Currently installed"></core-icon>
-            <a href="https://skia.googlesource.com/buildbot/+/{{p.Hash}}">{{p.Hash | shortHash}}</a>
-            <pre style="color: #D95F02;display:inline;"> {{p.Built | humanDiffDate }} </pre>
+            <a href="https://github.com/google/skia-buildbot/compare/{{p.Hash}}...HEAD">{{p.Hash | short}}</a>

[borenet, 2014/12/16 12:33:34]

FWIW this also seems to work:
https://skia.googlesource.com/buildbot/+/HEAD~3..HEAD

[jcgregorio, 2014/12/16 12:45:50]

Right, but I don't know how far back I am from HEAD, or even what HEAD is on
Github.

[borenet, 2014/12/16 12:48:32]

That was just an example. You can use any refs.

[jcgregorio, 2014/12/16 12:52:13]

Ah, OK, got it, I thought you we're talking about Github, I completely skipped
over the skia.googlesource.com part of the URL. I actually don't like the
googlesource.com view over a range of commits, the Github view is much better,
giving a rolled up summary of all the commits with the ability to then dive into
more details.

+            <pre class=built> {{p.Built | humanDiffDate }} </pre>
+            <pre class=userid title="{{p.UserID}}"> {{p.UserID | short}} </pre>
             {{p.Note}}
             <core-icon icon="{{p.Dirty ? 'warning' : ''}}" title="Uncommited changes when the package was built."></core-icon>
           </div>
         </template>
       </core-selector>
       <paper-button dismissive>Cancel</paper-button>
     </paper-action-dialog>
   </template>
   <script>
     (function() {
@@ skipping 23 matching lines @@
             that.toggle();
             var detail = {name: that.$.newChoice.selected};
             that.dispatchEvent(new CustomEvent('change', {detail: detail}));
           });
         },
 
         toggle: function() {
           this.$.chooser.toggle();
         },
 
-        // shortHash is a utility function used in templates to truncate git hashes.
-        shortHash: function(s) {
+        // short is a utility function used in templates to truncate strings.
+        short: function(s) {
           return s.slice(0, 8);
         },

[borenet, 2014/12/16 12:33:34]

What's in a user id? If it's an email address, maybe we can be smarter and just
return the part before the '@'?

[jcgregorio, 2014/12/16 12:45:51]

They are just email addresses, but I'm being lazy above and doing formatting by
using a fixed width font so the columns line up :-)

[borenet, 2014/12/16 12:48:32]

SGTM

 
         humanDiffDate: function(s) {
           var diff = (Date.now() - Date.parse(s))/1000;
           for (var i=0; i<deltas.length; i++) {
             if (deltas[i].delta < diff) {
               var s = Math.round(diff/deltas[i].delta)+deltas[i].units;
               while (s.length < 4) {
                 s = ' ' + s;
               }
               return s;
@@ skipping 100 matching lines @@
     <template repeat="{{server in servers}}">
       <section>
         <h2>{{server.Name}}</h2> [<a target=_blank href="http://{{ip[server.Name]}}:10114">monit</a>] [<a target=_blank href="http://{{ip[server.Name]}}:10115">logs</a>]
         <table>
           <template repeat="{{id in server.Installed}}">
           <tr>
             <td>
               <paper-button class=application data-server="{{server.Name}}" data-name="{{id}}" data-app="{{id | prefixOf}}"><core-icon icon="create" title="Edit which package is installed."></core-icon></paper-button>
             </td>
             <td><span class=appName>{{id | prefixOf}}</span></td>
-            <td><span class=appName><a href="https://skia.googlesource.com/buildbot/+/{{id | fullHash}}">{{id | shortHash}}</a></span></td>
+            <td><span class=appName><a href="https://github.com/google/skia-buildbot/compare/{{id | fullHash}}...HEAD">{{id | short}}</a></span></td>
             <td><core-icon icon="{{packageLookup[id].Latest ? '' : 'alarm'}}" title="Out of date."></core-icon></td>
             <td><core-icon icon="{{packageLookup[id].Dirty ? 'warning' : ''}}" title="Uncommited changes when the package was built."></core-icon></td>
           </tr>
           </template>
         </table>
       </section>
     </template>
     <push-selection-sk id=extChooser></push-selection-sk>
   </template>
   <script>
@@ skipping 75 matching lines @@
       prefixOf: function(s) {
         return s.split('/')[0];
       },
 
       // fullHash is a utility function used in templates to extract the full git hash
       // from a package name.
       fullHash: function(s) {
         return s.slice(s.length-44, s.length-4)
       },
 
-      // shortHash is a utility function used in templates to truncate git hashes.
-      shortHash: function(s) {
+      // short is a utility function used in templates to truncate strings.
+      short: function(s) {
         return this.fullHash(s).slice(0, 6);
       },
 
+
     });
   </script>
 </polymer-element>