Group similar failures (same directory, same fixture)

Tools/GardeningServer/ui/ct-test-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="../bower_components/paper-icon-button/paper-icon-button.html">
+
 <polymer-element name="ct-test-list" attributes="tests tree">
   <template>
     <style>
       :host {
         display: block;
       }
+
+      paper-icon-button {
+        vertical-align: middle;
+      }
     </style>
-    <template repeat="{{ test in tests }}">
+    <template repeat="{{ groups in testGroups_ }}">
       <!-- FIXME: Find a less redundant UI than repeating the step on each line. -->
-      <div>
-        {{ test.step }}
-        <template if="{{ test.testName }}"><a href="{{ test | flakinessDashboardURL }}">{{ test.testName }}</a></template>
-        <template if="{{ !test.testName }}"><b>whole step failed</b></template>
-      </div>
+      <template repeat="{{ group in groups.tests }}">
+        <!-- Case 1: entire step failed -->
+        <template if="{{ !group.name }}">
+          <div>{{groups.step}} <b>whole step failed</b></div>
+        </template>
+        <!-- Case 2: single test failure -->
+        <template if="{{ group.name && (group.tests.length == 1 || group.expanded) }}">
+          <template repeat="{{test in group.tests}}">
+            <div>
+              {{ groups.step }}
+              <a href="{{ test | flakinessDashboardURL }}">{{ test.testName }}</a>
+            </div>
+          </template>
+        </template>
+        <!-- Case 3: group of tests failed -->
+        <template if="{{ group.name && group.tests.length > 1 && !group.expanded}}">

[ojan, 2014/08/11 02:18:55]

Here and below, put spaces after {{ and before }}.

[jochen (gone - plz use gerrit), 2014/08/11 12:59:36]

done

+          <div>
+            {{ groups.step }} {{ group.name }} ({{ group.tests.length }} Tests)
+            <paper-icon-button id="expand" icon="more-vert" step="{{groups.step}}" group="{{group.name}}" on-click="{{ _expand }}"></paper-icon-button>
+          </div>
+        </template>
+      </template>
     </template>
   </template>
   <script>
-    Polymer({
+    Polymer('ct-test-list', {
+      testsChanged: function() {
+        var groups = {};
+        if (this.tests) {
+          this.tests.forEach(function(test) {
+            if (!groups[test.step])
+              groups[test.step] = {};
+            var testName = this._nameForTest(test);

[ojan, 2014/08/11 02:18:56]

How about if we put a method reasonGroupName on CTFailure and use that here? I
want the '.' vs '/' distinction to be in the model code, not in the ui code.

About the confusing naming: We're trying to s/testName/reason everywhere since
the failure reasons are no longer just tests. We also need to s/test/failure
everywhere in the code (e.g. this component should be ct-failure-list).

[jochen (gone - plz use gerrit), 2014/08/11 12:59:36]

added the method to CTFailure

+            if (!groups[test.step][testName])
+              groups[test.step][testName] = [];
+            groups[test.step][testName].push(test);
+          }.bind(this));
+        }
+        this.testGroups_ = [];
+        Object.keys(groups, function(step, testsByName) {
+          var tests = [];
+          Object.keys(testsByName, function(name, testList) {
+            if (name == 'undefined')
+              name = undefined;
+            tests.push({'name': name, 'tests': testList, 'expanded': false});
+          }.bind(this));
+          this.testGroups_.push({'step': step, 'tests': tests});

[ojan, 2014/08/11 02:18:56]

this.testGroups_ should be sorted by step and tests should be sorted by name?

[jochen (gone - plz use gerrit), 2014/08/11 12:59:36]

Done

+        }.bind(this));
+      },
+
+      _nameForTest: function(test) {
+        if (!test.testName)
+          return undefined;
+        if (test.step == 'blink')

[ojan, 2014/08/11 02:18:56]

Shouldn't this be webkit_tests?

[jochen (gone - plz use gerrit), 2014/08/11 12:59:36]

done

+          return test.testName.substr(0, test.testName.lastIndexOf('/'));

[ojan, 2014/08/11 02:18:56]

We'll probably want to have more complicated grouping for layout tests since
there are multiple levels of hierarchy there, but we can start with this and see
if we need more.

+        return test.testName.substr(0, test.testName.lastIndexOf('.'));
+      },
+
+      _expand: function(evt) {
+        step = evt.target.attributes['step'].value;
+        name = evt.target.attributes['group'].value;
+        this.testGroups_.forEach(function(testGroup) {
+          if (testGroup.step == step) {
+            testGroup.tests.forEach(function(test) {
+              if (test.name == name)
+                test.expanded = true;
+            });
+          }
+        });
+      },
+
       flakinessDashboardURL: function(test) {
         return ui.urlForFlakinessDashboard(test.testName, test.step, this.tree);
       },
     });
   </script>
 </polymer-element>