[pinpoint] Show status for every Execution.

dashboard/dashboard/pinpoint/elements/job-page-change-table.html

Index: dashboard/dashboard/pinpoint/elements/job-page-change-table.html
diff --git a/dashboard/dashboard/pinpoint/elements/job-page-change-table.html b/dashboard/dashboard/pinpoint/elements/job-page-change-table.html
index f05b1a183fa08ce427a3de97b1f3640f56bc4fb3..f4592ddaf140f9145cc7b6be8900cf0e7fbcce87 100644
--- a/dashboard/dashboard/pinpoint/elements/job-page-change-table.html
+++ b/dashboard/dashboard/pinpoint/elements/job-page-change-table.html
@@ -7,6 +7,7 @@ found in the LICENSE file.
 
 <link rel="import" href="/dashboard/pinpoint/elements/base-style.html">
 <link rel="import" href="/dashboard/pinpoint/elements/change-info.html">
+<link rel="import" href="/dashboard/pinpoint/elements/execution-status.html">
 <link rel="import" href="/dashboard/pinpoint/elements/values-histogram.html">
 
 <dom-module id="job-page-change-table">
@@ -21,52 +22,28 @@ found in the LICENSE file.
         flex: 1;
         margin: 0 0.5em;
       }
-
-      th {
-        text-align: right;
-        width: 8em;
-      }
     </style>
 
-    <template is="dom-if" if="[[isShowing(index)]]">
-      <change-info change=[[change]]></change-info>
+    <template is="dom-if" if="[[isShowing(changeIndex)]]">
+      <change-info change="[[change(changeIndex)]]"></change-info>
 
       <div class="columns">
         <div class="column">
           <h2>[[buildTitle]]</h2>
-          <table>
-            <tr>
-              <th>Status
-              <td>[[buildStatus]]
-            <tr>
-              <th>Buildbucket
-              <td><a href="https://buildbucket/[[buildbucketIds]]" target="_blank">[[buildbucketIds]]</a>
-            <tr>
-              <th>Test Isolate
-              <td><a href="https://isolateserver.appspot.com/browse?hash=[[inputIsolateHashes]]" target="_blank">[[inputIsolateHashes]]</a>
-          </table>
+          <execution-status attempts="[[attempts]]" attempt-index="{{attemptIndex}}" quest-index="0"></execution-status>
         </div>
 
         <div class="column">
           <template is="dom-if" if="[[runTitle]]">
             <h2>[[runTitle]]</h2>
-            <table>
-              <tr>
-                <th>Status
-                <td>[[runStatus]]
-              <tr>
-                <th>Swarming Task
-                <td><a href="https://chromium-swarm.appspot.com/user/task/[[taskIds]]" target="_blank">[[taskIds]]</a>
-              <tr>
-                <th>Output Isolate
-                <td><a href="https://isolateserver.appspot.com/browse?hash=[[outputIsolateHashes]]" target="_blank">[[outputIsolateHashes]]</a>
-            </table>
+            <execution-status attempts="[[attempts]]" attempt-index="{{attemptIndex}}" quest-index="1"></execution-status>
           </template>
         </div>
 
         <div class="column">
+          <h2>[[testTitle]]</h2>
+          <execution-status attempts="[[attempts]]" attempt-index="{{attemptIndex}}" quest-index="2"></execution-status>
           <template is="dom-if" if="[[resultValues.length]]">
-            <h2>[[testTitle]]</h2>
             <values-histogram values="[[resultValues]]"></values-histogram>
           </template>
         </div>
@@ -80,48 +57,45 @@ found in the LICENSE file.
       is: 'job-page-change-table',
 
       properties: {
-        index: {
+        jobInfo: {
           type: Object,
-          observer: '_indexChanged'
         },
 
-        change: {
+        attempts: {
           type: Object,
         },
+
+        attemptIndex: {
+          type: Number,
+        },
+
+        changeIndex: {
+          type: Number,
+          observer: '_indexChanged'
+        },
+      },
+
+      change(changeIndex) {
+        return this.jobInfo.changes[changeIndex];
       },
 
       _indexChanged() {
-        if (this.index == -1) {
+        if (this.changeIndex === null) {
           return;
         }
 
+        // TODO: Do this with data binding instead.
         this.buildTitle = this.jobInfo.quests[0];
         this.runTitle = this.jobInfo.quests[1];
         this.testTitle = this.jobInfo.quests[2];
 
-        this.buildStatus = this.jobInfo.getStatusString(this.index, 0);
-        this.runStatus = this.jobInfo.getStatusString(this.index, 1);
-
-        this.buildbucketIds = this.jobInfo.getAttemptData(
-            this.index, 0, 'build');
-
-        // Task ID is actually an array of arrays of ids, so flatten it for
-        // viewing purposes.
-        const taskIds = this.jobInfo.getAttemptData(
-            this.index, 1, 'task_ids');
-        this.taskIds = [].concat.apply([], taskIds);
-
-        this.inputIsolateHashes = this.jobInfo.getAttemptData(
-            this.index, 1, 'input_isolate_hash');
-        this.outputIsolateHashes = this.jobInfo.getAttemptData(
-            this.index, 1, 'isolate_hashes');
-        this.resultValues = this.jobInfo.resultValues[this.index][2];
+        this.attempts = this.jobInfo.attempts[this.changeIndex];
 
-        this.change = this.jobInfo.changes[this.index];
+        this.resultValues = this.jobInfo.resultValues[this.changeIndex][2];
       },
 
-      isShowing(index) {
-        return index >= 0;
+      isShowing(changeIndex) {
+        return changeIndex !== null;
       }
     });
   </script>