trooper-o-matic: Add patch attempt timeline view to CQ graphs

appengine/trooper_o_matic/ui/tom-patch-summary.html

 <!--
 Copyright 2014 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
 <link rel="import" href="../model/patch-summary.html">
 <link rel="import" href="../model/patch-summary-list.html">
 
 <polymer-element name="tom-patch-summary" attributes="model viewMenu">
   <template>
     <link rel="stylesheet" href="./tom-patch-summary.css">
     <div class="row">
       <div class="metric-cell column">{{ model.value | toFixed }} {{ model.unit }}</div>
 
       <template bind="{{ model._issueTitle ? model._issueTitle : model._patchURL as title }}">
         <div class="patch-cell">
           <a href="{{ model._patchURL }}" title="{{ title }}">{{ title }}</a><br>
           <a href="{{ model._patchURL }}">#{{ model.patchset }}</a>
-          <a href="//chromium-cq-status.appspot.com/patch-status/{{ model.issue }}/{{ model.patchset }}">[CQ Status]</a>
-          <a href="//chromium-cq-status.appspot.com/recent#issue={{ model.issue }},patchset={{ model.patchset }}">[CQ Logs]</a>
+          <a href="{{ model._statusURL }}">[CQ Status]</a>
+          <a href="{{ model._recentURL }}">[CQ Logs]</a>
         </div>
       </template>
 
       <template if="{{ !model._summary }}">
         <div class="column-container">
           <div class="column">Loading...</div>
         </div>
       </template>
 
       <template if="{{ model._summary }}">
-        <template if="{{ viewMenu.value == 'summary' }}">
-          <div class="column-container">
-            <template repeat="{{ value in model._columnValues }}">
-              <div class="column">{{ value }}</div>
-            </template>
-          </div>
-        </template>
-
         <template if="{{ viewMenu.value == 'jobs' }}">
           <div class="column grow builder-bubbles">
             <template repeat="{{ builder in model._jobViewBuilderBuilds[viewMenu.subMenu.value] }}">
               <span class="builder-bubble">
                 <a href="http://build.chromium.org/p/{{ builder.master }}/builders/{{ builder.name }}" title="{{ builder.master }}">
                   {{ builder.name }}:
                 </a>
                 <template repeat="{{ build in builder.builds }}">
                   <a href="{{ build.url }}" title="{{ build.slave }}" class="build-bubble {{ build.state }}">
                     #{{ build.number }}
                   </a>
                 </template>
               </span>
               <br>
             </template>
           </div>
         </template>
+
+        <template if="{{ viewMenu.value == 'timeline' }}">
+          <template bind="{{ model.list[viewMenu.subMenu.value] as interval }}">
+            <div style="position: relative; width: 100%; overflow: hidden;">
+              <template repeat="{{ attempt in model._summary.attempts }}">
+                <a
+                  href="{{ model._statusURL }}#{{ attempt.number }}"
+                  class="attempt success-{{ attempt.success }}"
+                  style="
+                    left: {{ 100 * (attempt.begin - interval.begin) / (interval.end - interval.begin) }}%;
+                    width: {{ 100 * attempt.durations.total / (interval.end - interval.begin) }}%;"
+                  title="{{ attempt | attemptText }}">

[ojan, 2015/01/15 02:48:33]

This won't bind correctly if you change a member of attempt (e.g.
attempt.success or attempt.durations.total), but don't actually replace the
whole attempt object since the binding is based off object identity.

[alancutter (OOO until 2018), 2015/01/19 23:19:01]

Done.

+                  {{ attempt | attemptText }}
+                </a>
+              </template>
+            </div>
+          </template>
+        </template>
+
+        <template if="{{ viewMenu.value == 'summary' }}">
+          <div class="column-container">
+            <template repeat="{{ value in model._columnValues }}">
+              <div class="column">{{ value }}</div>
+            </template>
+          </div>
+        </template>
+
       </template>
     </div class="row">
   </template>
   <script>
     Polymer({
       toFixed: function(number) {
         return number.toFixed();
       },
+      attemptText: function(attempt) {
+        return '{1} ({2}min)'.assign(
+            this.attemptSuccessText(attempt),
+            (attempt.durations.total / 60).toFixed());
+      },
+      attemptSuccessText: function(attempt) {
+        switch (attempt.success) {
+          case true:
+            return 'Success';
+          case null:
+            return 'Running';
+          default:
+            var text = 'Fail';
+            var reason = attempt.fail_reason;
+            if (reason && reason.fail_type) {
+              text += ': ';
+              if (reason.fail_type === 'failed_jobs') {
+                var getBuilder = function(detail) { return detail.builder };
+                text += reason.fail_details.map(getBuilder).join(' ');
+              } else {
+                text += reason.fail_type;
+              }
+            }
+            return text;
+        }
+      }
     });
   </script>
 </polymer-element>