<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[196553] trunk/Websites/perf.webkit.org</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/196553">196553</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2016-02-13 13:30:10 -0800 (Sat, 13 Feb 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>v3 UI should show status and associated bugs on analysis task pages
https://bugs.webkit.org/show_bug.cgi?id=154212

Reviewed by Chris Dumez.

Added the capability to see and modify the status and the list of associated of bugs on analysis task pages.

Also added the list of related tasks, which are analysis tasks associated with the same bug or have
overlapping time ranges with the same test metric but on a potentially different platform.

In addition, categorize analysis tasks with the status of &quot;no change&quot; or &quot;inconclusive&quot; as &quot;closed&quot; as no
further action can be taken (users can bring them back to non-closed state without any restrictions).

* public/api/analysis-tasks.php:
(format_task): Categorize 'unchanged' and 'inconclusive' analysis tasks as closed.

* public/privileged-api/associate-bug.php:
(main): Added shouldDelete as a new mechanism to disassociate a bug since v3 UI shares a single Bug object
between multiple analysis tasks (as it should have been in the first place).

* public/v3/components/chart-pane-base.js:
(ChartPaneBase):
(ChartPaneBase.prototype._fetchAnalysisTasks): Since each analysis task's change type (status/result) could
change, we need to create annotation objects during each render() call.
(ChartPaneBase.prototype.render):
(ChartPaneBase.prototype._renderAnnotations): Extracted from ChartPaneBase.prototype._fetchAnalysisTasks to
do that. I was afraid of the perf impact of this but it doesn't seem to be an issue in my testing.
(ChartPaneBase.cssTemplate): Removed superfluous margins (moved to ChartPane.cssTemplate) around the charts
since they are only useful in the charts page.

* public/v3/models/analysis-task.js:
(AnalysisTask):
(AnalysisTask.prototype.updateSingleton): Added a comment as to why object.result cannot be renamed to
object.changeType in the JSON API.
(AnalysisTask.prototype.updateName): Added.
(AnalysisTask.prototype.updateChangeType): Added.
(AnalysisTask.prototype._updateRemoteState): Added.
(AnalysisTask.prototype.associateBug): Added.
(AnalysisTask.prototype.disassociateBug): Added.
(AnalysisTask.fetchRelatedTasks): Added. See above for the criteria of related-ness.

* public/v3/pages/analysis-task-page.js:
(AnalysisTaskPage):
(AnalysisTaskPage.prototype.updateFromSerializedState):
(AnalysisTaskPage.prototype._fetchRelatedInfoForTaskId): Extracted from updateFromSerializedState.
(AnalysisTaskPage.prototype._didFetchRelatedAnalysisTasks): Added.
(AnalysisTaskPage.prototype.render): Render the list of associated bugs, the list of bug trackers (so that
users can use it to associate with a new bug), and the list of related analysis tasks.
(AnalysisTaskPage.prototype._renderTestGroupList): Extracted from render since it was getting too long.
(AnalysisTaskPage.prototype._renderTestGroupDetails): Ditto.
(AnalysisTaskPage.prototype._updateChangeType): Added.
(AnalysisTaskPage.prototype._associateBug): Added.
(AnalysisTaskPage.prototype._disassociateBug): Added.
(AnalysisTaskPage.htmlTemplate): Added various elements to show and modify the status, associate bugs,
and a list of related analysis tasks.
(AnalysisTaskPage.cssTemplate): Added various styles for those form controls.

* public/v3/pages/chart-pane.js:
(ChartPane.cssTemplate): Moved the margins from ChartPaneBase.cssTemplate.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsitesperfwebkitorgChangeLog">trunk/Websites/perf.webkit.org/ChangeLog</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicapianalysistasksphp">trunk/Websites/perf.webkit.org/public/api/analysis-tasks.php</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicprivilegedapiassociatebugphp">trunk/Websites/perf.webkit.org/public/privileged-api/associate-bug.php</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3componentschartpanebasejs">trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3modelsanalysistaskjs">trunk/Websites/perf.webkit.org/public/v3/models/analysis-task.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3pagesanalysistaskpagejs">trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3pageschartpanejs">trunk/Websites/perf.webkit.org/public/v3/pages/chart-pane.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsitesperfwebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/ChangeLog (196552 => 196553)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/ChangeLog        2016-02-13 19:12:28 UTC (rev 196552)
+++ trunk/Websites/perf.webkit.org/ChangeLog        2016-02-13 21:30:10 UTC (rev 196553)
</span><span class="lines">@@ -1,3 +1,65 @@
</span><ins>+2016-02-13  Ryosuke Niwa  &lt;rniwa@webkit.org&gt;
+
+        v3 UI should show status and associated bugs on analysis task pages
+        https://bugs.webkit.org/show_bug.cgi?id=154212
+
+        Reviewed by Chris Dumez.
+
+        Added the capability to see and modify the status and the list of associated of bugs on analysis task pages.
+
+        Also added the list of related tasks, which are analysis tasks associated with the same bug or have
+        overlapping time ranges with the same test metric but on a potentially different platform.
+
+        In addition, categorize analysis tasks with the status of &quot;no change&quot; or &quot;inconclusive&quot; as &quot;closed&quot; as no
+        further action can be taken (users can bring them back to non-closed state without any restrictions).
+
+        * public/api/analysis-tasks.php:
+        (format_task): Categorize 'unchanged' and 'inconclusive' analysis tasks as closed.
+
+        * public/privileged-api/associate-bug.php:
+        (main): Added shouldDelete as a new mechanism to disassociate a bug since v3 UI shares a single Bug object
+        between multiple analysis tasks (as it should have been in the first place).
+
+        * public/v3/components/chart-pane-base.js:
+        (ChartPaneBase):
+        (ChartPaneBase.prototype._fetchAnalysisTasks): Since each analysis task's change type (status/result) could
+        change, we need to create annotation objects during each render() call.
+        (ChartPaneBase.prototype.render):
+        (ChartPaneBase.prototype._renderAnnotations): Extracted from ChartPaneBase.prototype._fetchAnalysisTasks to
+        do that. I was afraid of the perf impact of this but it doesn't seem to be an issue in my testing.
+        (ChartPaneBase.cssTemplate): Removed superfluous margins (moved to ChartPane.cssTemplate) around the charts
+        since they are only useful in the charts page.
+
+        * public/v3/models/analysis-task.js:
+        (AnalysisTask):
+        (AnalysisTask.prototype.updateSingleton): Added a comment as to why object.result cannot be renamed to
+        object.changeType in the JSON API.
+        (AnalysisTask.prototype.updateName): Added.
+        (AnalysisTask.prototype.updateChangeType): Added.
+        (AnalysisTask.prototype._updateRemoteState): Added.
+        (AnalysisTask.prototype.associateBug): Added.
+        (AnalysisTask.prototype.disassociateBug): Added.
+        (AnalysisTask.fetchRelatedTasks): Added. See above for the criteria of related-ness.
+
+        * public/v3/pages/analysis-task-page.js:
+        (AnalysisTaskPage):
+        (AnalysisTaskPage.prototype.updateFromSerializedState):
+        (AnalysisTaskPage.prototype._fetchRelatedInfoForTaskId): Extracted from updateFromSerializedState.
+        (AnalysisTaskPage.prototype._didFetchRelatedAnalysisTasks): Added.
+        (AnalysisTaskPage.prototype.render): Render the list of associated bugs, the list of bug trackers (so that
+        users can use it to associate with a new bug), and the list of related analysis tasks.
+        (AnalysisTaskPage.prototype._renderTestGroupList): Extracted from render since it was getting too long.
+        (AnalysisTaskPage.prototype._renderTestGroupDetails): Ditto.
+        (AnalysisTaskPage.prototype._updateChangeType): Added.
+        (AnalysisTaskPage.prototype._associateBug): Added.
+        (AnalysisTaskPage.prototype._disassociateBug): Added.
+        (AnalysisTaskPage.htmlTemplate): Added various elements to show and modify the status, associate bugs,
+        and a list of related analysis tasks.
+        (AnalysisTaskPage.cssTemplate): Added various styles for those form controls.
+
+        * public/v3/pages/chart-pane.js:
+        (ChartPane.cssTemplate): Moved the margins from ChartPaneBase.cssTemplate.
+
</ins><span class="cx"> 2016-02-12  Ryosuke Niwa  &lt;rniwa@webkit.org&gt;
</span><span class="cx"> 
</span><span class="cx">         Perf dashboard should allow renaming analysis tasks and test groups
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicapianalysistasksphp"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/api/analysis-tasks.php (196552 => 196553)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/api/analysis-tasks.php        2016-02-13 19:12:28 UTC (rev 196552)
+++ trunk/Websites/perf.webkit.org/public/api/analysis-tasks.php        2016-02-13 21:30:10 UTC (rev 196553)
</span><span class="lines">@@ -85,6 +85,13 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> function format_task($task_row) {
</span><ins>+    $category = 'unconfirmed';
+    $result = $task_row['task_result'];
+    if ($result == 'unchanged' || $result == 'inconclusive')
+        $category = 'closed';
+    else if ($result)
+        $category = 'bisecting';
+
</ins><span class="cx">     return array(
</span><span class="cx">         'id' =&gt; $task_row['task_id'],
</span><span class="cx">         'name' =&gt; $task_row['task_name'],
</span><span class="lines">@@ -98,8 +105,8 @@
</span><span class="cx">         'startRunTime' =&gt; Database::to_js_time($task_row['task_start_run_time']),
</span><span class="cx">         'endRun' =&gt; $task_row['task_end_run'],
</span><span class="cx">         'endRunTime' =&gt; Database::to_js_time($task_row['task_end_run_time']),
</span><del>-        'category' =&gt; $task_row['task_result'] ? 'bisecting' : 'unconfirmed',
-        'result' =&gt; $task_row['task_result'],
</del><ins>+        'category' =&gt; $category,
+        'result' =&gt; $result,
</ins><span class="cx">         'needed' =&gt; $task_row['task_needed'] ? Database::is_true($task_row['task_needed']) : null,
</span><span class="cx">         'bugs' =&gt; array(),
</span><span class="cx">     );
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicprivilegedapiassociatebugphp"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/privileged-api/associate-bug.php (196552 => 196553)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/privileged-api/associate-bug.php        2016-02-13 19:12:28 UTC (rev 196552)
+++ trunk/Websites/perf.webkit.org/public/privileged-api/associate-bug.php        2016-02-13 21:30:10 UTC (rev 196553)
</span><span class="lines">@@ -9,11 +9,12 @@
</span><span class="cx">     $bug_tracker_id = array_get($data, 'bugTracker');
</span><span class="cx">     $bug_number = array_get($data, 'number');
</span><span class="cx">     $bug_id = array_get($data, 'bugToDelete');
</span><ins>+    $should_delete = array_get($data, 'shouldDelete');
</ins><span class="cx"> 
</span><span class="cx">     $db = connect();
</span><span class="cx">     $db-&gt;begin_transaction();
</span><span class="cx"> 
</span><del>-    if ($bug_id) {
</del><ins>+    if ($bug_id) { // V2 compatibility
</ins><span class="cx">         require_format('BugToDelete', $bug_id, '/^\d+$/');
</span><span class="cx">         $count = $db-&gt;query_and_get_affected_rows(&quot;DELETE FROM bugs WHERE bug_id = $1&quot;, array($bug_id));
</span><span class="cx">         if ($count != 1) {
</span><span class="lines">@@ -24,7 +25,16 @@
</span><span class="cx">         require_format('AnalysisTask', $analysis_task_id, '/^\d+$/');
</span><span class="cx">         require_format('BugTracker', $bug_tracker_id, '/^\d+$/');
</span><span class="cx">         require_format('BugNumber', $bug_number, '/^\d+$/');
</span><del>-        $bug_id = $db-&gt;insert_row('bugs', 'bug', array('task' =&gt; $analysis_task_id, 'tracker' =&gt; $bug_tracker_id, 'number' =&gt; $bug_number));
</del><ins>+        if ($should_delete) { // V3
+            $count = $db-&gt;query_and_get_affected_rows(&quot;DELETE FROM bugs WHERE bug_task = $1 AND bug_tracker = $2 AND bug_number = $3&quot;,
+                array($analysis_task_id, $bug_tracker_id, $bug_number));
+            if ($count &lt; 1) { // FIXME: We should forbid duplicate bugs (same bug number on same tracker for same task)
+                $db-&gt;rollback_transaction();
+                exit_with_error('UnexpectedNumberOfAffectedRows', array('affectedRows' =&gt; $count));
+            }
+        } else {
+            $bug_id = $db-&gt;insert_row('bugs', 'bug', array('task' =&gt; $analysis_task_id, 'tracker' =&gt; $bug_tracker_id, 'number' =&gt; $bug_number));
+        }
</ins><span class="cx">     }
</span><span class="cx">     $db-&gt;commit_transaction();
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentschartpanebasejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js (196552 => 196553)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js        2016-02-13 19:12:28 UTC (rev 196552)
+++ trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js        2016-02-13 21:30:10 UTC (rev 196553)
</span><span class="lines">@@ -15,6 +15,7 @@
</span><span class="cx">         this._mainChart = null;
</span><span class="cx">         this._mainChartStatus = null;
</span><span class="cx">         this._commitLogViewer = null;
</span><ins>+        this._tasksForAnnotations = null;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     configure(platformId, metricId)
</span><span class="lines">@@ -63,32 +64,11 @@
</span><span class="cx"> 
</span><span class="cx">     _fetchAnalysisTasks(platformId, metricId)
</span><span class="cx">     {
</span><ins>+        // FIXME: we need to update the annotation bars when the change type of tasks change.
</ins><span class="cx">         var self = this;
</span><span class="cx">         AnalysisTask.fetchByPlatformAndMetric(platformId, metricId).then(function (tasks) {
</span><del>-            self._mainChart.setAnnotations(tasks.map(function (task) {
-                var fillStyle = '#fc6';
-                switch (task.changeType()) {
-                case 'inconclusive':
-                    fillStyle = '#fcc';
-                case 'progression':
-                    fillStyle = '#39f';
-                    break;
-                case 'regression':
-                    fillStyle = '#c60';
-                    break;
-                case 'unchanged':
-                    fillStyle = '#ccc';
-                    break;
-                }
-
-                return {
-                    task: task,
-                    startTime: task.startTime(),
-                    endTime: task.endTime(),
-                    label: task.label(),
-                    fillStyle: fillStyle,
-                };
-            }));
</del><ins>+            self._tasksForAnnotations = tasks;
+            self.render();
</ins><span class="cx">         });
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="lines">@@ -193,6 +173,8 @@
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="cx"> 
</span><ins>+        this._renderAnnotations();
+
</ins><span class="cx">         if (this._mainChartStatus)
</span><span class="cx">             this._mainChartStatus.render();
</span><span class="cx"> 
</span><span class="lines">@@ -206,6 +188,38 @@
</span><span class="cx">         Instrumentation.endMeasuringTime('ChartPane', 'render');
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _renderAnnotations()
+    {
+        if (!this._tasksForAnnotations)
+            return;
+
+        var annotations = this._tasksForAnnotations.map(function (task) {
+            var fillStyle = '#fc6';
+            switch (task.changeType()) {
+            case 'inconclusive':
+                fillStyle = '#fcc';
+            case 'progression':
+                fillStyle = '#39f';
+                break;
+            case 'regression':
+                fillStyle = '#c60';
+                break;
+            case 'unchanged':
+                fillStyle = '#ccc';
+                break;
+            }
+
+            return {
+                task: task,
+                startTime: task.startTime(),
+                endTime: task.endTime(),
+                label: task.label(),
+                fillStyle: fillStyle,
+            };
+        });
+        this._mainChart.setAnnotations(annotations);
+    }
+
</ins><span class="cx">     static htmlTemplate()
</span><span class="cx">     {
</span><span class="cx">         return `
</span><span class="lines">@@ -231,8 +245,6 @@
</span><span class="cx">     {
</span><span class="cx">         return Toolbar.cssTemplate() + `
</span><span class="cx">             .chart-pane {
</span><del>-                margin: 1rem;
-                margin-bottom: 2rem;
</del><span class="cx">                 padding: 0rem;
</span><span class="cx">                 height: 18rem;
</span><span class="cx">                 outline: none;
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3modelsanalysistaskjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/models/analysis-task.js (196552 => 196553)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/models/analysis-task.js        2016-02-13 19:12:28 UTC (rev 196552)
+++ trunk/Websites/perf.webkit.org/public/v3/models/analysis-task.js        2016-02-13 21:30:10 UTC (rev 196553)
</span><span class="lines">@@ -17,7 +17,7 @@
</span><span class="cx">         this._endMeasurementId = object.endRun;
</span><span class="cx">         this._endTime = object.endRunTime;
</span><span class="cx">         this._category = object.category;
</span><del>-        this._changeType = object.result;
</del><ins>+        this._changeType = object.result; // Can't change due to v2 compatibility.
</ins><span class="cx">         this._needed = object.needed;
</span><span class="cx">         this._bugs = object.bugs || [];
</span><span class="cx">         this._buildRequestCount = object.buildRequestCount;
</span><span class="lines">@@ -43,7 +43,7 @@
</span><span class="cx">         console.assert(this._endTime == object.endRunTime);
</span><span class="cx"> 
</span><span class="cx">         this._category = object.category;
</span><del>-        this._changeType = object.result;
</del><ins>+        this._changeType = object.result; // Can't change due to v2 compatibility.
</ins><span class="cx">         this._needed = object.needed;
</span><span class="cx">         this._bugs = object.bugs || [];
</span><span class="cx">         this._buildRequestCount = object.buildRequestCount;
</span><span class="lines">@@ -67,19 +67,49 @@
</span><span class="cx">     category() { return this._category; }
</span><span class="cx">     changeType() { return this._changeType; }
</span><span class="cx"> 
</span><del>-    updateName(newName)
</del><ins>+    updateName(newName) { return this._updateRemoteState({name: newName}); }
+    updateChangeType(changeType) { return this._updateRemoteState({result: changeType}); }
+
+    _updateRemoteState(param)
</ins><span class="cx">     {
</span><del>-        var self = this;
</del><ins>+        param.task = this.id();
+        return PrivilegedAPI.sendRequest('update-analysis-task', param).then(function (data) {
+            return AnalysisTask.cachedFetch('../api/analysis-tasks', {id: param.task}, true)
+                .then(AnalysisTask._constructAnalysisTasksFromRawData.bind(AnalysisTask));
+        });
+    }
+
+    associateBug(tracker, bugNumber)
+    {
+        console.assert(tracker instanceof BugTracker);
+        console.assert(typeof(bugNumber) == 'number');
</ins><span class="cx">         var id = this.id();
</span><del>-        return PrivilegedAPI.sendRequest('update-analysis-task', {
</del><ins>+        return PrivilegedAPI.sendRequest('associate-bug', {
</ins><span class="cx">             task: id,
</span><del>-            name: newName,
</del><ins>+            bugTracker: tracker.id(),
+            number: bugNumber,
</ins><span class="cx">         }).then(function (data) {
</span><span class="cx">             return AnalysisTask.cachedFetch('../api/analysis-tasks', {id: id}, true)
</span><span class="cx">                 .then(AnalysisTask._constructAnalysisTasksFromRawData.bind(AnalysisTask));
</span><span class="cx">         });
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    disassociateBug(bug)
+    {
+        console.assert(bug instanceof Bug);
+        console.assert(this.bugs().includes(bug));
+        var id = this.id();
+        return PrivilegedAPI.sendRequest('associate-bug', {
+            task: id,
+            bugTracker: bug.bugTracker().id(),
+            number: bug.bugNumber(),
+            shouldDelete: true,
+        }).then(function (data) {
+            return AnalysisTask.cachedFetch('../api/analysis-tasks', {id: id}, true)
+                .then(AnalysisTask._constructAnalysisTasksFromRawData.bind(AnalysisTask));
+        });
+    }
+
</ins><span class="cx">     static categories()
</span><span class="cx">     {
</span><span class="cx">         return [
</span><span class="lines">@@ -107,6 +137,31 @@
</span><span class="cx">         });
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    static fetchRelatedTasks(taskId)
+    {
+        // FIXME: We should add new sever-side API to just fetch the related tasks.
+        return this.fetchAll().then(function () {
+            var task = AnalysisTask.findById(taskId);
+            if (!task)
+                return undefined;
+            var relatedTasks = new Set;
+            for (var bug of task.bugs()) {
+                for (var otherTask of AnalysisTask.all()) {
+                    if (otherTask.bugs().includes(bug))
+                        relatedTasks.add(otherTask);
+                }
+            }
+            for (var otherTask of AnalysisTask.all()) {
+                if (task.endTime() &lt; otherTask.startTime()
+                    || otherTask.endTime() &lt; task.startTime()
+                    || task.metric() != otherTask.metric())
+                    continue;
+                relatedTasks.add(otherTask);
+            }
+            return Array.from(relatedTasks);
+        });
+    }
+
</ins><span class="cx">     static _fetchSubset(params)
</span><span class="cx">     {
</span><span class="cx">         if (this._fetchAllPromise)
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3pagesanalysistaskpagejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js (196552 => 196553)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js        2016-02-13 19:12:28 UTC (rev 196552)
+++ trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js        2016-02-13 21:30:10 UTC (rev 196553)
</span><span class="lines">@@ -17,6 +17,7 @@
</span><span class="cx">     {
</span><span class="cx">         super('Analysis Task');
</span><span class="cx">         this._task = null;
</span><ins>+        this._relatedTasks = null;
</ins><span class="cx">         this._testGroups = null;
</span><span class="cx">         this._renderedTestGroups = null;
</span><span class="cx">         this._testGroupLabelMap = new Map;
</span><span class="lines">@@ -27,6 +28,7 @@
</span><span class="cx">         this._endPoint = null;
</span><span class="cx">         this._errorMessage = null;
</span><span class="cx">         this._currentTestGroup = null;
</span><ins>+
</ins><span class="cx">         this._chartPane = this.content().querySelector('analysis-task-chart-pane').component();
</span><span class="cx">         this._chartPane.setPage(this);
</span><span class="cx">         this._analysisResultsViewer = this.content().querySelector('analysis-results-viewer').component();
</span><span class="lines">@@ -36,6 +38,13 @@
</span><span class="cx">         this._taskNameLabel.setStartedEditingCallback(this._didStartEditingTaskName.bind(this));
</span><span class="cx">         this._taskNameLabel.setUpdateCallback(this._updateTaskName.bind(this));
</span><span class="cx"> 
</span><ins>+        this.content().querySelector('.change-type-form').onsubmit = this._updateChangeType.bind(this);
+        this._taskStatusControl = this.content().querySelector('.change-type-form select');
+
+        this.content().querySelector('.associate-bug-form').onsubmit = this._associateBug.bind(this);
+        this._bugTrackerControl = this.content().querySelector('.bug-tracker-control');
+        this._bugNumberControl = this.content().querySelector('.bug-number-control');
+
</ins><span class="cx">         this.content().querySelector('.test-group-retry-form').onsubmit = this._retryCurrentTestGroup.bind(this);
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="lines">@@ -51,13 +60,11 @@
</span><span class="cx">                 self._errorMessage = `Failed to fetch the analysis task ${state.remainingRoute}: ${error}`;
</span><span class="cx">                 self.render();
</span><span class="cx">             });
</span><del>-            TestGroup.fetchByTask(taskId).then(this._didFetchTestGroups.bind(this));
-            AnalysisResults.fetch(taskId).then(this._didFetchAnalysisResults.bind(this));
</del><ins>+            this._fetchRelatedInfoForTaskId(taskId);
</ins><span class="cx">         } else if (state.buildRequest) {
</span><span class="cx">             var buildRequestId = parseInt(state.buildRequest);
</span><span class="cx">             AnalysisTask.fetchByBuildRequestId(buildRequestId).then(this._didFetchTask.bind(this)).then(function (task) {
</span><del>-                TestGroup.fetchByTask(task.id()).then(self._didFetchTestGroups.bind(self));
-                AnalysisResults.fetch(task.id()).then(self._didFetchAnalysisResults.bind(self));
</del><ins>+                self._fetchRelatedInfoForTaskId(task.id());
</ins><span class="cx">             }, function (error) {
</span><span class="cx">                 self._errorMessage = `Failed to fetch the analysis task for the build request ${buildRequestId}: ${error}`;
</span><span class="cx">                 self.render();
</span><span class="lines">@@ -65,6 +72,13 @@
</span><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _fetchRelatedInfoForTaskId(taskId)
+    {
+        TestGroup.fetchByTask(taskId).then(this._didFetchTestGroups.bind(this));
+        AnalysisResults.fetch(taskId).then(this._didFetchAnalysisResults.bind(this));
+        AnalysisTask.fetchRelatedTasks(taskId).then(this._didFetchRelatedAnalysisTasks.bind(this));
+    }
+
</ins><span class="cx">     _didFetchTask(task)
</span><span class="cx">     {
</span><span class="cx">         console.assert(!this._task);
</span><span class="lines">@@ -92,6 +106,12 @@
</span><span class="cx">         return task;
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _didFetchRelatedAnalysisTasks(relatedTasks)
+    {
+        this._relatedTasks = relatedTasks;
+        this.render();
+    }
+
</ins><span class="cx">     _didFetchMeasurement()
</span><span class="cx">     {
</span><span class="cx">         console.assert(this._task);
</span><span class="lines">@@ -159,6 +179,8 @@
</span><span class="cx"> 
</span><span class="cx">         this._chartPane.render();
</span><span class="cx"> 
</span><ins>+        var element = ComponentBase.createElement;
+        var link = ComponentBase.createLink;
</ins><span class="cx">         if (this._task) {
</span><span class="cx">             this._taskNameLabel.setText(this._task.name());
</span><span class="cx">             var platform = this._task.platform();
</span><span class="lines">@@ -166,14 +188,59 @@
</span><span class="cx">             var anchor = this.content().querySelector('.platform-metric-names a');
</span><span class="cx">             this.renderReplace(anchor, metric.fullName() + ' on ' + platform.label());
</span><span class="cx">             anchor.href = this.router().url('charts', ChartsPage.createStateForAnalysisTask(this._task));
</span><ins>+
+            var bugs = [];
+            for (var bug of this._task.bugs()) {
+                bugs.push(element('li', [
+                    bug.bugTracker().label() + ' ',
+                    link(bug.label(), bug.title(), bug.url()),
+                    ' ',
+                    link(new CloseButton, 'Disassociate this bug', this._disassociateBug.bind(this, bug))]));
+            }
+            this.renderReplace(this.content().querySelector('.associated-bugs'), bugs);
+
+            this._taskStatusControl.value = this._task.changeType() || 'unconfirmed';
</ins><span class="cx">         }
</span><ins>+
+        var element = ComponentBase.createElement;
+        this.renderReplace(this._bugTrackerControl,
+            BugTracker.all().map(function (tracker) {
+                return element('option', {value: tracker.id()}, tracker.label());
+            }));
+
+        this.content().querySelector('.analysis-task-status').style.display = this._task ? null : 'none';
</ins><span class="cx">         this.content().querySelector('.overview-chart').style.display = this._task ? null : 'none';
</span><span class="cx">         this.content().querySelector('.test-group-view').style.display = this._task ? null : 'none';
</span><span class="cx">         this._taskNameLabel.render();
</span><span class="cx"> 
</span><ins>+        if (this._relatedTasks &amp;&amp; this._task) {
+            var router = this.router();
+            var link = ComponentBase.createLink;
+            var thisTask = this._task;
+            this.renderReplace(this.content().querySelector('.related-tasks-list'),
+                this._relatedTasks.map(function (otherTask) {
+                    console.assert(otherTask.metric() == thisTask.metric());
+                    var suffix = '';
+                    var taskLabel = otherTask.label();
+                    if (otherTask.platform() != thisTask.platform() &amp;&amp; taskLabel.indexOf(otherTask.platform().label()) &lt; 0)
+                        suffix = ` on ${otherTask.platform().label()}`;
+                    return element('li', [link(taskLabel, router.url(`analysis/task/${otherTask.id()}`)), suffix]);
+                }));
+        }
+
</ins><span class="cx">         this._analysisResultsViewer.setCurrentTestGroup(this._currentTestGroup);
</span><span class="cx">         this._analysisResultsViewer.render();
</span><span class="cx"> 
</span><ins>+        this._renderTestGroupList();
+        this._renderTestGroupDetails();
+
+        this._testGroupResultsTable.render();
+
+        Instrumentation.endMeasuringTime('AnalysisTaskPage', 'render');
+    }
+
+    _renderTestGroupList()
+    {
</ins><span class="cx">         var element = ComponentBase.createElement;
</span><span class="cx">         var link = ComponentBase.createLink;
</span><span class="cx">         if (this._testGroups != this._renderedTestGroups) {
</span><span class="lines">@@ -205,7 +272,10 @@
</span><span class="cx">                 label.render();
</span><span class="cx">             }
</span><span class="cx">         }
</span><ins>+    }
</ins><span class="cx"> 
</span><ins>+    _renderTestGroupDetails()
+    {
</ins><span class="cx">         if (this._renderedCurrentTestGroup !== this._currentTestGroup) {
</span><span class="cx">             if (this._renderedCurrentTestGroup) {
</span><span class="cx">                 var element = this.content().querySelector('.test-group-list-' + this._renderedCurrentTestGroup.id());
</span><span class="lines">@@ -237,10 +307,6 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.content().querySelector('.test-group-retry-button').disabled = !(this._currentTestGroup || this._startPoint);
</span><del>-
-        this._testGroupResultsTable.render();
-
-        Instrumentation.endMeasuringTime('AnalysisTaskPage', 'render');
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _showTestGroup(testGroup)
</span><span class="lines">@@ -283,6 +349,47 @@
</span><span class="cx">         });
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _updateChangeType(event)
+    {
+        event.preventDefault();
+        console.assert(this._task);
+
+        var newChangeType = this._taskStatusControl.value;
+        if (newChangeType == 'unconfirmed')
+            newChangeType = null;
+
+        var render = this.render.bind(this);
+        return this._task.updateChangeType(newChangeType).then(render, function (error) {
+            render();
+            alert('Failed to update the status: ' + error);
+        });
+    }
+
+    _associateBug(event)
+    {
+        event.preventDefault();
+        console.assert(this._task);
+
+        var tracker = BugTracker.findById(this._bugTrackerControl.value);
+        console.assert(tracker);
+        var bugNumber = parseInt(this._bugNumberControl.value);
+
+        var render = this.render.bind(this);
+        return this._task.associateBug(tracker, bugNumber).then(render, function (error) {
+            render();
+            alert('Failed to associate the bug: ' + error);
+        });
+    }
+
+    _disassociateBug(bug)
+    {
+        var render = this.render.bind(this);
+        return this._task.disassociateBug(bug).then(render, function (error) {
+            render();
+            alert('Failed to disassociate the bug: ' + error);
+        });
+    }
+
</ins><span class="cx">     _retryCurrentTestGroup(event)
</span><span class="cx">     {
</span><span class="cx">         event.preventDefault();
</span><span class="lines">@@ -366,12 +473,41 @@
</span><span class="cx">     static htmlTemplate()
</span><span class="cx">     {
</span><span class="cx">         return `
</span><del>-        &lt;div class=&quot;analysis-tasl-page-container&quot;&gt;
-            &lt;div class=&quot;analysis-tasl-page&quot;&gt;
</del><ins>+            &lt;div class=&quot;analysis-task-page&quot;&gt;
</ins><span class="cx">                 &lt;h2 class=&quot;analysis-task-name&quot;&gt;&lt;editable-text&gt;&lt;/editable-text&gt;&lt;/h2&gt;
</span><span class="cx">                 &lt;h3 class=&quot;platform-metric-names&quot;&gt;&lt;a href=&quot;&quot;&gt;&lt;/a&gt;&lt;/h3&gt;
</span><span class="cx">                 &lt;p class=&quot;error-message&quot;&gt;&lt;/p&gt;
</span><del>-                &lt;div class=&quot;overview-chart&quot;&gt;&lt;analysis-task-chart-pane&gt;&lt;/analysis-task-chart-pane&gt;&lt;/div&gt;
</del><ins>+                &lt;div class=&quot;analysis-task-status&quot;&gt;
+                    &lt;section&gt;
+                        &lt;h3&gt;Status&lt;/h3&gt;
+                        &lt;form class=&quot;change-type-form&quot;&gt;
+                            &lt;select&gt;
+                                &lt;option value=&quot;unconfirmed&quot;&gt;Unconfirmed&lt;/option&gt;
+                                &lt;option value=&quot;regression&quot;&gt;Definite regression&lt;/option&gt;
+                                &lt;option value=&quot;progression&quot;&gt;Definite progression&lt;/option&gt;
+                                &lt;option value=&quot;inconclusive&quot;&gt;Inconclusive (Closed)&lt;/option&gt;
+                                &lt;option value=&quot;unchanged&quot;&gt;No change (Closed)&lt;/option&gt;
+                            &lt;/select&gt;
+                            &lt;button type=&quot;submit&quot;&gt;Save&lt;/button&gt;
+                        &lt;/form&gt;
+                    &lt;/section&gt;
+                    &lt;section&gt;
+                        &lt;h3&gt;Associated Bugs&lt;/h3&gt;
+                        &lt;ul class=&quot;associated-bugs&quot;&gt;&lt;/ul&gt;
+                        &lt;form class=&quot;associate-bug-form&quot;&gt;
+                            &lt;select class=&quot;bug-tracker-control&quot;&gt;&lt;/select&gt;
+                            &lt;input type=&quot;number&quot; class=&quot;bug-number-control&quot;&gt;
+                            &lt;button type=&quot;submit&quot;&gt;Add&lt;/button&gt;
+                        &lt;/form&gt;
+                    &lt;/section&gt;
+                    &lt;section class=&quot;related-tasks&quot;&gt;
+                        &lt;h3&gt;Related Tasks&lt;/h3&gt;
+                        &lt;ul class=&quot;related-tasks-list&quot;&gt;&lt;/ul&gt;
+                    &lt;/section&gt;
+                &lt;/div&gt;
+                &lt;section class=&quot;overview-chart&quot;&gt;
+                    &lt;analysis-task-chart-pane&gt;&lt;/analysis-task-chart-pane&gt;
+                &lt;/section&gt;
</ins><span class="cx">                 &lt;section class=&quot;analysis-results-view&quot;&gt;
</span><span class="cx">                     &lt;analysis-results-viewer&gt;&lt;/analysis-results-viewer&gt;
</span><span class="cx">                 &lt;/section&gt;
</span><span class="lines">@@ -399,17 +535,14 @@
</span><span class="cx">                     &lt;/div&gt;
</span><span class="cx">                 &lt;/section&gt;
</span><span class="cx">             &lt;/div&gt;
</span><del>-        &lt;/div&gt;
</del><span class="cx"> `;
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     static cssTemplate()
</span><span class="cx">     {
</span><span class="cx">         return `
</span><del>-            .analysis-tasl-page-container {
</del><ins>+            .analysis-task-page {
</ins><span class="cx">             }
</span><del>-            .analysis-tasl-page {
-            }
</del><span class="cx"> 
</span><span class="cx">             .analysis-task-name {
</span><span class="cx">                 font-size: 1.2rem;
</span><span class="lines">@@ -441,6 +574,48 @@
</span><span class="cx">                 padding: 0;
</span><span class="cx">             }
</span><span class="cx"> 
</span><ins>+            .overview-chart {
+                margin: 0 1rem;
+            }
+
+            .analysis-task-status {
+                margin: 0;
+                display: flex;
+                margin-bottom: 1.5rem;
+            }
+
+            .analysis-task-status &gt; section {
+                flex-grow: 1;
+                border-left: solid 1px #eee;
+                padding-left: 1rem;
+            }
+
+            .analysis-task-status &gt; section:first-child {
+                border-left: none;
+            }
+
+            .associated-bugs:not(:empty) {
+                margin-bottom: 1rem;
+            }
+
+            .analysis-task-status h3 {
+                font-size: 1rem;
+                font-weight: inherit;
+                color: #c93;
+            }
+
+            .analysis-task-status ul,
+            .analysis-task-status li {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+            }
+
+            .related-tasks-list {
+                max-height: 10rem;
+                overflow-y: scroll;
+            }
+
</ins><span class="cx">             .analysis-results-view {
</span><span class="cx">                 margin: 1rem;
</span><span class="cx">             }
</span><span class="lines">@@ -506,13 +681,6 @@
</span><span class="cx">             .test-group-list &gt; li:not(.selected) &gt; a:hover {
</span><span class="cx">                 background: #eee;
</span><span class="cx">             }
</span><del>-
-            .x-overview-chart {
-                width: auto;
-                height: 10rem;
-                margin: 1rem;
-                border: solid 0px red;
-            }
</del><span class="cx"> `;
</span><span class="cx">     }
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3pageschartpanejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/pages/chart-pane.js (196552 => 196553)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/pages/chart-pane.js        2016-02-13 19:12:28 UTC (rev 196552)
+++ trunk/Websites/perf.webkit.org/public/v3/pages/chart-pane.js        2016-02-13 21:30:10 UTC (rev 196553)
</span><span class="lines">@@ -239,6 +239,8 @@
</span><span class="cx">             .chart-pane {
</span><span class="cx">                 border: solid 1px #ccc;
</span><span class="cx">                 border-radius: 0.5rem;
</span><ins>+                margin: 1rem;
+                margin-bottom: 2rem;
</ins><span class="cx">             }
</span><span class="cx"> 
</span><span class="cx">             .chart-pane-body {
</span></span></pre>
</div>
</div>

</body>
</html>