Add failed builders to sheriff-o-matic.

Tools/GardeningServer/ui/ct-unexpected-failures.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="../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../bower_components/paper-toast/paper-toast.html">
+<link rel="import" href="ct-failing-builders.html">
 <link rel="import" href="ct-failure-analyzer.html">
 <link rel="import" href="ct-failure-grouper.html">
 <link rel="import" href="ct-failure-stream.html">
 
 <polymer-element name="ct-unexpected-failures">
   <template>
     <style>
       paper-toast {
         bottom: 40px;
         left: 10px;
       }
+
       paper-button {
         background: #4285f4;
         color: #fff;
       }
+
+      ct-building-grid {

[ojan, 2014/07/10 02:26:43]

This is unused?

[michaelpg, 2014/07/10 02:53:28]

yes, not sure how this got here.

+        width: 350px;
+      }
+
+      ct-failing-builders {
+        margin-left: 365px;

[ojan, 2014/07/10 02:26:43]

I realize the old code probably did something like this, but lets instead use
flexbox. This is just trying to get the failing builders list to be to the right
of the button, right?

[michaelpg, 2014/07/10 02:53:28]

The goal is to get the failing builders to align with the right-hand side of the
page. It looks kind of ugly any other way I tried it. 365px corresponds with the
width + margin of ct-builder-grid, which sets its own width to 350px.

The problem is ct-unexpected-failures doesn't know how ct-failure-stream ->
ct-failure-card -> ct-builder-grid is laid out. 

Screenshot:
https://drive.google.com/a/google.com/file/d/0B6HSBrih6pNUU3hyZnBtcHNENXc/edi...

[ojan, 2014/07/10 17:58:49]

I see. What we really want here is grid layout and/or CSS variables. But, since
we don't have either of those shipping, we'll have to make due with something
like this.

+        padding: 5px;
+      }
     </style>
-    <ct-failure-analyzer id="analyzer" status="{{analyzerStatus}}" failures="{{failures}}"></ct-failure-analyzer>
-    <ct-failure-grouper failures="{{failures}}" groups="{{failureGroups}}"></ct-failure-grouper>
-    <paper-button on-tap="{{update}}">Update</paper-button>
-    <ct-failure-stream groups="{{failureGroups}}"></ct-failure-stream>
-    <paper-toast id="toast" text="{{analyzerStatus}}"></paper-toast>
+    <ct-failure-analyzer id="analyzer" status="{{ analyzerStatus }}" failures="{{ failures }}"></ct-failure-analyzer>
+    <ct-failure-grouper failures="{{ failures.unexpected }}" groups="{{ failureGroups }}"></ct-failure-grouper>
+    <div>
+      <paper-button on-tap="{{ update }}">Update</paper-button>
+      <ct-failing-builders builders="{{ failures.builders }}"></ct-failing-builders>
+    </div>
+    <ct-failure-stream groups="{{ failureGroups }}"></ct-failure-stream>
+    <paper-toast id="toast" text="{{ analyzerStatus }}"></paper-toast>
   </template>
   <script>
     Polymer({
       attached: function() {
         this.update();
       },
 
       update: function() {
         this.$.analyzer.update();
       },
 
       analyzerStatusChanged: function() {
         this.$.toast.show();
       },
     });
   </script>
 </polymer-element>