Add a perf tab to garden-o-matic
[WebKit-https.git] / Tools / BuildSlaveSupport / build.webkit.org-config / public_html / TestFailures / scripts / ui / perf.js
1 /*
2  * Copyright (C) 2012 Google Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 var ui = ui || {};
27 ui.perf = ui.perf || {};
28
29 (function(){
30
31 ui.perf.Picker = base.extends('select', {
32     init: function(items, onChange, opt_values)
33     {
34         this.onchange = onChange;
35         this._values = opt_values;
36         items.forEach(this._appendItem.bind(this));
37     },
38     _appendItem: function(item, index)
39     {
40         var option = document.createElement('option');
41         option.innerHTML = item;
42         if (this._values)
43             option.value = this._values[index];
44         this.appendChild(option);
45     }
46 });
47
48 ui.perf.View = base.extends('div', {
49     init: function()
50     {
51         this.id = 'perf-view';
52         builders.perfBuilders(this.loadGraphs.bind(this));
53
54         var stream = new ui.notifications.Stream();
55         var notifications = document.createElement()
56         this._notification = ui.notifications.Info("Loading list of perf dashboards...");
57         stream.appendChild(this._notification);
58         this.appendChild(stream);
59     },
60     loadGraphs: function(graphData)
61     {
62         this._notification.dismiss();
63
64         // FIXME: Add next/previous buttons for easy navigation through all the graphs.
65         // FIXME: Also, show the list of failing perf builders along with which steps are failing.
66         this._data = graphData;
67
68         this._titleBar = document.createElement('div');
69         this._titleBar.className = 'title-bar';
70         this.appendChild(this._titleBar);
71
72         var testSuites = Object.keys(graphData);
73         var suitePicker = new ui.perf.Picker(testSuites, this._updateBuilderPicker.bind(this));
74         this._titleBar.appendChild(suitePicker);
75
76         this._suitePicker = suitePicker;
77         this._updateBuilderPicker();
78     },
79     _updateBuilderPicker: function()
80     {
81         if (this._builderPicker)
82             this._titleBar.removeChild(this._builderPicker);
83
84         var selectedSuite = this._suitePicker[this._suitePicker.selectedIndex].text;
85         var builders = [];
86         var urls = [];
87         this._data[selectedSuite].forEach(function(config) {
88             builders.push(config.builder);
89             urls.push(config.url);
90         });
91         this._builderPicker = new ui.perf.Picker(builders, this._displayGraph.bind(this), urls);
92         this._titleBar.appendChild(this._builderPicker);
93
94         this._displayGraph();
95     },
96     _displayGraph: function() {
97         var popOutLink = this.querySelector('.pop-out');
98         if (!popOutLink) {
99             popOutLink = document.createElement('a');
100             popOutLink.className = 'pop-out';
101             popOutLink.textContent = 'Pop out';
102             popOutLink.target = '_blank';
103             this._titleBar.appendChild(popOutLink);
104         }
105
106         var graph = this.querySelector('iframe');
107         if (!graph) {
108             graph = document.createElement('iframe');
109             this.appendChild(graph);
110         }
111
112         var url = this._builderPicker[this._builderPicker.selectedIndex].value;
113         popOutLink.href = url;
114         graph.src = url;
115     }
116 });
117
118 })();