Add failed builders to sheriff-o-matic.

Tools/GardeningServer/ui/ct-unexpected-failures.html

Index: Tools/GardeningServer/ui/ct-unexpected-failures.html
diff --git a/Tools/GardeningServer/ui/ct-unexpected-failures.html b/Tools/GardeningServer/ui/ct-unexpected-failures.html
index 86fd774a50b0c6539b5cf34a47f12cfe9869f23f..2d676b4d4061f045605c6bbc1c1511678b2c32c5 100644
--- a/Tools/GardeningServer/ui/ct-unexpected-failures.html
+++ b/Tools/GardeningServer/ui/ct-unexpected-failures.html
@@ -6,6 +6,7 @@ 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">
@@ -17,16 +18,29 @@ found in the LICENSE file.
         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({