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

appengine/trooper_o_matic/ui/tom-patch-summary-list.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">
 <link rel="import" href="./tom-patch-summary.html">
 <link rel="import" href="./paper-multi-menu.html">
 <link rel="import" href="/bower_components/paper-button/paper-button.html">
 <link rel="import" href="/bower_components/paper-shadow/paper-shadow.html">
 
 <polymer-element name="tom-patch-summary-list" attributes="model">
   <template>
     <link rel="stylesheet" href="./tom-patch-summary-list.css">
     <link rel="stylesheet" href="./tom-patch-summary.css">
     <paper-shadow z="2" class="shadow-box">
       <div class="list-box">
         <div class="list-header">
           <span class="header-title">Worst {{ model.unit }}</span><br>
-          From: {{ model.begin }}<br>
-          Until: {{ model.end }}
+          From: {{ model.graphInterval.begin | timestampToDateString }}<br>
+          Until: {{ model.graphInterval.end | timestampToDateString }}
           <paper-button class="close" on-tap="{{ close }}">X</paper-button>
         </div>
 
         <div class="view-menu">
           View:
           <paper-multi-menu id="viewMenu" model="{{ _viewMenu }}"></paper-multi-menu>
         </div>
 
         <div class="row">
           <div class="metric-cell column header">Graph metric</div>
           <div class="patch-cell column header">Patch</div>
           <div class="column-container">
+
+            <template if="{{ $.viewMenu.value == 'jobs' }}">
+              <div class="column grow header">{{ $.viewMenu.subMenu.text }} jobs</div>
+            </template>
+
+            <template if="{{ $.viewMenu.value == 'timeline' }}">
+              <template bind="{{ model[$.viewMenu.subMenu.value] as interval }}">
+                <div class="column grow header">
+                  Timeline Interval<br>
+                  {{ interval.begin | timestampToLocaleString }}<br>
+                  {{ interval.end | timestampToLocaleString }}
+                </div>
+              </template>
+            </template>
+
             <template if="{{ $.viewMenu.value == 'summary' }}">
               <template repeat="{{ column in _summaryColumns }}">
                 <div class="column header">{{ column.header }}</div>
               </template>
             </template>
-            <template if="{{ $.viewMenu.value == 'jobs' }}">
-              <div class="column grow header">{{ $.viewMenu.subMenu.text }} jobs</div>
-            </template>
+
           </div>
         </div>
 
         <div class="item-rows">
-          <template repeat="{{ patchSummary in model.list }}">
+          <template repeat="{{ patchSummary in model._list }}">
             <tom-patch-summary model="{{ patchSummary }}" viewMenu="{{ $.viewMenu }}"></tom-patch-summary>
           </template>
         </div>
       </div>
     </paper-shadow>
   </template>
   <script>
     Polymer({
       ready: function() {
         this._viewMenu = PatchSummaryList.viewMenu;
         this._summaryColumns = PatchSummary.summaryColumns;
       },
       close: function() {
-        this.model.list = [];
+        this.model.clear();
+      },
+      timestampToDateString: function(timestamp) {
+        return new Date(timestamp * 1000).toString();
+      },
+      timestampToLocaleString: function(timestamp) {
+        return new Date(timestamp * 1000).toLocaleString();
       },
     });
   </script>
 </polymer-element>