blob: 9df44cee7a94c5d2adb6530161a8cdc6ab49ac30 [file] [log] [blame]
Joshua Hesketh4db99cb2014-05-23 11:28:08 +10001// jquery plugin for Zuul status page
Timo Tijhof51516cd2013-04-09 01:32:29 +02002//
3// Copyright 2012 OpenStack Foundation
4// Copyright 2013 Timo Tijhof
5// Copyright 2013 Wikimedia Foundation
Joshua Hesketh6b1a2182014-03-21 14:40:04 +11006// Copyright 2014 Rackspace Australia
Timo Tijhof51516cd2013-04-09 01:32:29 +02007//
8// Licensed under the Apache License, Version 2.0 (the "License"); you may
9// not use this file except in compliance with the License. You may obtain
10// a copy of the License at
11//
12// http://www.apache.org/licenses/LICENSE-2.0
13//
14// Unless required by applicable law or agreed to in writing, software
15// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
16// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
17// License for the specific language governing permissions and limitations
18// under the License.
19
20(function ($) {
Timo Tijhof4be9f742015-04-02 01:13:19 +010021 'use strict';
22
Joshua Heskethace48892014-03-22 17:18:31 +110023 function set_cookie(name, value) {
Monty Taylor860bb0a2014-03-22 09:41:25 -070024 document.cookie = name + '=' + value + '; path=/';
Joshua Heskethace48892014-03-22 17:18:31 +110025 }
26
27 function read_cookie(name, default_value) {
Monty Taylor860bb0a2014-03-22 09:41:25 -070028 var nameEQ = name + '=';
Joshua Heskethace48892014-03-22 17:18:31 +110029 var ca = document.cookie.split(';');
30 for(var i=0;i < ca.length;i++) {
31 var c = ca[i];
Monty Taylor860bb0a2014-03-22 09:41:25 -070032 while (c.charAt(0) === ' ') {
33 c = c.substring(1, c.length);
34 }
35 if (c.indexOf(nameEQ) === 0) {
Joshua Heskethace48892014-03-22 17:18:31 +110036 return c.substring(nameEQ.length, c.length);
37 }
38 }
39 return default_value;
40 }
41
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100042 $.zuul = function(options) {
Timo Tijhof4be9f742015-04-02 01:13:19 +010043 options = $.extend({
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100044 'enabled': true,
45 'graphite_url': '',
46 'source': 'status.json',
47 'msg_id': '#zuul_msg',
48 'pipelines_id': '#zuul_pipelines',
49 'queue_events_num': '#zuul_queue_events_num',
50 'queue_results_num': '#zuul_queue_results_num',
51 }, options);
Joshua Heskethace48892014-03-22 17:18:31 +110052
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100053 var collapsed_exceptions = [];
Joshua Hesketh6f94dd12014-08-20 16:14:53 +100054 var current_filter = read_cookie('zuul_filter_string', '');
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100055 var $jq;
Timo Tijhof51516cd2013-04-09 01:32:29 +020056
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100057 var xhr,
58 zuul_graph_update_count = 0,
59 zuul_sparkline_urls = {};
Joshua Hesketh9d013542014-04-03 13:08:04 +110060
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100061 function get_sparkline_url(pipeline_name) {
62 if (options.graphite_url !== '') {
63 if (!(pipeline_name in zuul_sparkline_urls)) {
64 zuul_sparkline_urls[pipeline_name] = $.fn.graphite
65 .geturl({
66 url: options.graphite_url,
67 from: "-8hours",
68 width: 100,
69 height: 26,
70 margin: 0,
71 hideLegend: true,
72 hideAxes: true,
73 hideGrid: true,
74 target: [
75 "color(stats.gauges.zuul.pipeline." + pipeline_name
Timo Tijhof4be9f742015-04-02 01:13:19 +010076 + ".current_changes, '6b8182')"
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100077 ]
Joshua Hesketh298c4912014-03-20 16:06:25 +110078 });
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100079 }
80 return zuul_sparkline_urls[pipeline_name];
81 }
82 return false;
83 }
Joshua Hesketh298c4912014-03-20 16:06:25 +110084
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +100085 var format = {
Joshua Hesketh6b1a2182014-03-21 14:40:04 +110086 job: function(job) {
Joshua Hesketh9e6ce532014-04-01 13:11:53 +110087 var $job_line = $('<span />');
88
Joshua Hesketh6b1a2182014-03-21 14:40:04 +110089 if (job.url !== null) {
Joshua Hesketh9e6ce532014-04-01 13:11:53 +110090 $job_line.append(
91 $('<a />')
92 .addClass('zuul-job-name')
93 .attr('href', job.url)
94 .text(job.name)
95 );
Joshua Hesketh6b1a2182014-03-21 14:40:04 +110096 }
Joshua Hesketh9e6ce532014-04-01 13:11:53 +110097 else {
98 $job_line.append(
99 $('<span />')
100 .addClass('zuul-job-name')
101 .text(job.name)
102 );
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100103 }
Joshua Hesketh9e6ce532014-04-01 13:11:53 +1100104
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000105 $job_line.append(this.job_status(job));
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100106
107 if (job.voting === false) {
108 $job_line.append(
Joshua Hesketh9e6ce532014-04-01 13:11:53 +1100109 $(' <small />')
110 .addClass('zuul-non-voting-desc')
111 .text(' (non-voting)')
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100112 );
113 }
Joshua Hesketh9e6ce532014-04-01 13:11:53 +1100114
Joshua Hesketha95fd552014-08-21 11:21:05 +1000115 $job_line.append($('<div style="clear: both"></div>'));
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100116 return $job_line;
117 },
118
119 job_status: function(job) {
120 var result = job.result ? job.result.toLowerCase() : null;
121 if (result === null) {
122 result = job.url ? 'in progress' : 'queued';
123 }
124
Monty Taylor860bb0a2014-03-22 09:41:25 -0700125 if (result === 'in progress') {
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000126 return this.job_progress_bar(job.elapsed_time,
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100127 job.remaining_time);
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100128 }
129 else {
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000130 return this.status_label(result);
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100131 }
132 },
133
134 status_label: function(result) {
Monty Taylor860bb0a2014-03-22 09:41:25 -0700135 var $status = $('<span />');
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100136 $status.addClass('zuul-job-result label');
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100137
138 switch (result) {
139 case 'success':
140 $status.addClass('label-success');
141 break;
142 case 'failure':
143 $status.addClass('label-danger');
144 break;
145 case 'unstable':
146 $status.addClass('label-warning');
147 break;
Alexander Evseev3103a842015-11-17 10:12:45 +0300148 case 'skipped':
149 $status.addClass('label-info');
150 break;
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100151 case 'in progress':
152 case 'queued':
153 case 'lost':
154 $status.addClass('label-default');
155 break;
156 }
157 $status.text(result);
158 return $status;
159 },
160
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100161 job_progress_bar: function(elapsed_time, remaining_time) {
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100162 var progress_percent = 100 * (elapsed_time / (elapsed_time +
163 remaining_time));
164 var $bar_inner = $('<div />')
165 .addClass('progress-bar')
166 .attr('role', 'progressbar')
167 .attr('aria-valuenow', 'progressbar')
168 .attr('aria-valuemin', progress_percent)
169 .attr('aria-valuemin', '0')
170 .attr('aria-valuemax', '100')
171 .css('width', progress_percent + '%');
172
173 var $bar_outter = $('<div />')
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100174 .addClass('progress zuul-job-result')
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100175 .append($bar_inner);
176
177 return $bar_outter;
178 },
179
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100180 enqueue_time: function(ms) {
181 // Special format case for enqueue time to add style
182 var hours = 60 * 60 * 1000;
183 var now = Date.now();
184 var delta = now - ms;
Monty Taylor860bb0a2014-03-22 09:41:25 -0700185 var status = 'text-success';
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000186 var text = this.time(delta, true);
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100187 if (delta > (4 * hours)) {
Monty Taylor860bb0a2014-03-22 09:41:25 -0700188 status = 'text-danger';
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100189 } else if (delta > (2 * hours)) {
Monty Taylor860bb0a2014-03-22 09:41:25 -0700190 status = 'text-warning';
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100191 }
192 return '<span class="' + status + '">' + text + '</span>';
193 },
194
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100195 time: function(ms, words) {
Monty Taylor860bb0a2014-03-22 09:41:25 -0700196 if (typeof(words) === 'undefined') {
197 words = false;
198 }
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100199 var seconds = (+ms)/1000;
200 var minutes = Math.floor(seconds/60);
201 var hours = Math.floor(minutes/60);
202 seconds = Math.floor(seconds % 60);
203 minutes = Math.floor(minutes % 60);
Monty Taylor860bb0a2014-03-22 09:41:25 -0700204 var r = '';
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100205 if (words) {
206 if (hours) {
207 r += hours;
208 r += ' hr ';
209 }
210 r += minutes + ' min';
211 } else {
Monty Taylor860bb0a2014-03-22 09:41:25 -0700212 if (hours < 10) {
213 r += '0';
214 }
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100215 r += hours + ':';
Monty Taylor860bb0a2014-03-22 09:41:25 -0700216 if (minutes < 10) {
217 r += '0';
218 }
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100219 r += minutes + ':';
Monty Taylor860bb0a2014-03-22 09:41:25 -0700220 if (seconds < 10) {
221 r += '0';
222 }
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100223 r += seconds;
224 }
225 return r;
226 },
227
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100228 change_total_progress_bar: function(change) {
Monty Taylor860bb0a2014-03-22 09:41:25 -0700229 var job_percent = Math.floor(100 / change.jobs.length);
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100230 var $bar_outter = $('<div />')
231 .addClass('progress zuul-change-total-result');
232
233 $.each(change.jobs, function (i, job) {
234 var result = job.result ? job.result.toLowerCase() : null;
235 if (result === null) {
236 result = job.url ? 'in progress' : 'queued';
237 }
238
Monty Taylor860bb0a2014-03-22 09:41:25 -0700239 if (result !== 'queued') {
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100240 var $bar_inner = $('<div />')
241 .addClass('progress-bar');
242
243 switch (result) {
244 case 'success':
245 $bar_inner.addClass('progress-bar-success');
246 break;
247 case 'lost':
248 case 'failure':
249 $bar_inner.addClass('progress-bar-danger');
250 break;
251 case 'unstable':
252 $bar_inner.addClass('progress-bar-warning');
253 break;
254 case 'in progress':
255 case 'queued':
256 break;
257 }
258 $bar_inner.attr('title', job.name)
259 .css('width', job_percent + '%');
260 $bar_outter.append($bar_inner);
261 }
262 });
263 return $bar_outter;
264 },
265
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100266 change_header: function(change) {
Monty Taylor860bb0a2014-03-22 09:41:25 -0700267 var change_id = change.id || 'NA';
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100268 if (change_id.length === 40) {
269 change_id = change_id.substr(0, 7);
Joshua Hesketh298c4912014-03-20 16:06:25 +1100270 }
Timo Tijhof51516cd2013-04-09 01:32:29 +0200271
Monty Taylor860bb0a2014-03-22 09:41:25 -0700272 var $change_link = $('<small />');
Joshua Hesketh298c4912014-03-20 16:06:25 +1100273 if (change.url !== null) {
Joshua Heskethcd7a0772014-08-21 11:32:44 +1000274 if (/^[0-9a-f]{40}$/.test(change.id)) {
275 var change_id_short = change.id.slice(0, 7);
276 $change_link.append(
277 $('<a />').attr('href', change.url).append(
278 $('<abbr />')
279 .attr('title', change.id)
280 .text(change_id_short)
281 )
282 );
283 }
284 else {
285 $change_link.append(
286 $('<a />').attr('href', change.url).text(change.id)
287 );
288 }
Timo Tijhof51516cd2013-04-09 01:32:29 +0200289 }
Joshua Hesketh298c4912014-03-20 16:06:25 +1100290 else {
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100291 $change_link.text(change_id);
Timo Tijhof51516cd2013-04-09 01:32:29 +0200292 }
Timo Tijhof51516cd2013-04-09 01:32:29 +0200293
Monty Taylor860bb0a2014-03-22 09:41:25 -0700294 var $change_progress_row_left = $('<div />')
Timo Tijhofa62e8492015-04-02 03:05:04 +0100295 .addClass('col-xs-4')
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100296 .append($change_link);
Monty Taylor860bb0a2014-03-22 09:41:25 -0700297 var $change_progress_row_right = $('<div />')
Timo Tijhofa62e8492015-04-02 03:05:04 +0100298 .addClass('col-xs-8')
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000299 .append(this.change_total_progress_bar(change));
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100300
Monty Taylor860bb0a2014-03-22 09:41:25 -0700301 var $change_progress_row = $('<div />')
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100302 .addClass('row')
303 .append($change_progress_row_left)
Monty Taylor860bb0a2014-03-22 09:41:25 -0700304 .append($change_progress_row_right);
Joshua Heskethf1b06ca2014-03-21 17:01:12 +1100305
Monty Taylor860bb0a2014-03-22 09:41:25 -0700306 var $project_span = $('<span />')
Joshua Heskethace48892014-03-22 17:18:31 +1100307 .addClass('change_project')
308 .text(change.project);
309
Monty Taylor860bb0a2014-03-22 09:41:25 -0700310 var $left = $('<div />')
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100311 .addClass('col-xs-8')
Joshua Hesketh1751e4f2014-04-01 13:24:51 +1100312 .append($project_span, $change_progress_row);
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100313
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000314 var remaining_time = this.time(
Monty Taylor860bb0a2014-03-22 09:41:25 -0700315 change.remaining_time, true);
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000316 var enqueue_time = this.enqueue_time(
Monty Taylor860bb0a2014-03-22 09:41:25 -0700317 change.enqueue_time);
318 var $remaining_time = $('<small />').addClass('time')
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100319 .attr('title', 'Remaining Time').html(remaining_time);
Monty Taylor860bb0a2014-03-22 09:41:25 -0700320 var $enqueue_time = $('<small />').addClass('time')
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100321 .attr('title', 'Elapsed Time').html(enqueue_time);
322
James E. Blair6dc954b2015-02-11 18:32:19 -0800323 var $right = $('<div />');
324 if (change.live === true) {
325 $right.addClass('col-xs-4 text-right')
326 .append($remaining_time, $('<br />'), $enqueue_time);
327 }
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100328
Monty Taylor860bb0a2014-03-22 09:41:25 -0700329 var $header = $('<div />')
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100330 .addClass('row')
331 .append($left, $right);
332 return $header;
333 },
334
335 change_list: function(jobs) {
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000336 var format = this;
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100337 var $list = $('<ul />')
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100338 .addClass('list-group zuul-patchset-body');
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100339
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100340 $.each(jobs, function (i, job) {
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100341 var $item = $('<li />')
342 .addClass('list-group-item')
343 .addClass('zuul-change-job')
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000344 .append(format.job(job));
Joshua Hesketh298c4912014-03-20 16:06:25 +1100345 $list.append($item);
Timo Tijhof51516cd2013-04-09 01:32:29 +0200346 });
347
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100348 return $list;
349 },
350
351 change_panel: function (change) {
352 var $header = $('<div />')
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100353 .addClass('panel-heading zuul-patchset-header')
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000354 .append(this.change_header(change));
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100355
Joshua Heskethdb8046e2014-03-21 18:42:25 +1100356 var panel_id = change.id ? change.id.replace(',', '_')
357 : change.project.replace('/', '_') +
Monty Taylor860bb0a2014-03-22 09:41:25 -0700358 '-' + change.enqueue_time;
Joshua Heskethdb8046e2014-03-21 18:42:25 +1100359 var $panel = $('<div />')
Monty Taylor860bb0a2014-03-22 09:41:25 -0700360 .attr('id', panel_id)
Joshua Hesketh0ca1e2e2014-03-21 16:49:05 +1100361 .addClass('panel panel-default zuul-change')
362 .append($header)
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000363 .append(this.change_list(change.jobs));
Joshua Heskethdb8046e2014-03-21 18:42:25 +1100364
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000365 $header.click(this.toggle_patchset);
Joshua Heskethdb8046e2014-03-21 18:42:25 +1100366 return $panel;
Timo Tijhof51516cd2013-04-09 01:32:29 +0200367 },
368
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100369 change_status_icon: function(change) {
370 var icon_name = 'green.png';
371 var icon_title = 'Succeeding';
372
373 if (change.active !== true) {
374 // Grey icon
375 icon_name = 'grey.png';
376 icon_title = 'Waiting until closer to head of queue to' +
377 ' start jobs';
378 }
James E. Blair107c3852015-02-07 08:23:10 -0800379 else if (change.live !== true) {
380 // Grey icon
381 icon_name = 'grey.png';
Joshua Hesketh6bc619d2015-02-11 09:30:21 +1100382 icon_title = 'Dependent change required for testing';
James E. Blair107c3852015-02-07 08:23:10 -0800383 }
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100384 else if (change.failing_reasons &&
385 change.failing_reasons.length > 0) {
386 var reason = change.failing_reasons.join(', ');
387 icon_title = 'Failing because ' + reason;
388 if (reason.match(/merge conflict/)) {
389 // Black icon
390 icon_name = 'black.png';
391 }
392 else {
393 // Red icon
394 icon_name = 'red.png';
395 }
396 }
397
398 var $icon = $('<img />')
399 .attr('src', 'images/' + icon_name)
400 .attr('title', icon_title)
401 .css('margin-top', '-6px');
402
403 return $icon;
404 },
405
406 change_with_status_tree: function(change, change_queue) {
407 var $change_row = $('<tr />');
408
409 for (var i = 0; i < change_queue._tree_columns; i++) {
410 var $tree_cell = $('<td />')
411 .css('height', '100%')
412 .css('padding', '0 0 10px 0')
413 .css('margin', '0')
414 .css('width', '16px')
415 .css('min-width', '16px')
416 .css('overflow', 'hidden')
417 .css('vertical-align', 'top');
418
419 if (i < change._tree.length && change._tree[i] !== null) {
420 $tree_cell.css('background-image',
421 'url(\'images/line.png\')')
422 .css('background-repeat', 'repeat-y');
423 }
424
425 if (i === change._tree_index) {
426 $tree_cell.append(
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000427 this.change_status_icon(change));
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100428 }
429 if (change._tree_branches.indexOf(i) !== -1) {
430 var $image = $('<img />')
431 .css('vertical-align', 'baseline');
432 if (change._tree_branches.indexOf(i) ===
433 change._tree_branches.length - 1) {
434 // Angle line
435 $image.attr('src', 'images/line-angle.png');
436 }
437 else {
438 // T line
439 $image.attr('src', 'images/line-t.png');
440 }
441 $tree_cell.append($image);
442 }
443 $change_row.append($tree_cell);
444 }
445
446 var change_width = 360 - 16*change_queue._tree_columns;
447 var $change_column = $('<td />')
448 .css('width', change_width + 'px')
449 .addClass('zuul-change-cell')
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000450 .append(this.change_panel(change));
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100451
452 $change_row.append($change_column);
453
454 var $change_table = $('<table />')
455 .addClass('zuul-change-box')
456 .css('-moz-box-sizing', 'content-box')
457 .css('box-sizing', 'content-box')
458 .append($change_row);
459
460 return $change_table;
461 },
462
Joshua Hesketh9d013542014-04-03 13:08:04 +1100463 pipeline_sparkline: function(pipeline_name) {
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000464 if (options.graphite_url !== '') {
Joshua Hesketh9d013542014-04-03 13:08:04 +1100465 var $sparkline = $('<img />')
466 .addClass('pull-right')
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000467 .attr('src', get_sparkline_url(pipeline_name));
Joshua Hesketh9d013542014-04-03 13:08:04 +1100468 return $sparkline;
469 }
470 return false;
471 },
472
473 pipeline_header: function(pipeline, count) {
474 // Format the pipeline name, sparkline and description
475 var $header_div = $('<div />')
476 .addClass('zuul-pipeline-header');
477
478 var $heading = $('<h3 />')
479 .css('vertical-align', 'middle')
480 .text(pipeline.name)
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100481 .append(
Joshua Hesketh9d013542014-04-03 13:08:04 +1100482 $('<span />')
483 .addClass('badge pull-right')
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100484 .css('vertical-align', 'middle')
Joshua Hesketh9d013542014-04-03 13:08:04 +1100485 .css('margin-top', '0.5em')
486 .text(count)
487 )
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000488 .append(this.pipeline_sparkline(pipeline.name));
Joshua Hesketh9d013542014-04-03 13:08:04 +1100489
490 $header_div.append($heading);
Joshua Hesketh298c4912014-03-20 16:06:25 +1100491
Timo Tijhof51516cd2013-04-09 01:32:29 +0200492 if (typeof pipeline.description === 'string') {
Alexander Evseev057aed12015-10-28 17:17:04 +0300493 var descr = $('<small />')
494 $.each( pipeline.description.split(/\r?\n\r?\n/), function(index, descr_part){
495 descr.append($('<p />').text(descr_part));
496 });
Joshua Hesketh9d013542014-04-03 13:08:04 +1100497 $header_div.append(
Alexander Evseev057aed12015-10-28 17:17:04 +0300498 $('<p />').append(descr)
Joshua Hesketh298c4912014-03-20 16:06:25 +1100499 );
Timo Tijhof51516cd2013-04-09 01:32:29 +0200500 }
Joshua Hesketh9d013542014-04-03 13:08:04 +1100501 return $header_div;
502 },
503
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000504 pipeline: function (pipeline, count) {
505 var format = this;
Joshua Hesketh9d013542014-04-03 13:08:04 +1100506 var $html = $('<div />')
507 .addClass('zuul-pipeline col-md-4')
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000508 .append(this.pipeline_header(pipeline, count));
Timo Tijhof51516cd2013-04-09 01:32:29 +0200509
Joshua Heskethcbdcca12014-03-20 16:06:25 +1100510 $.each(pipeline.change_queues,
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100511 function (queue_i, change_queue) {
512 $.each(change_queue.heads, function (head_i, changes) {
Joshua Heskethcbdcca12014-03-20 16:06:25 +1100513 if (pipeline.change_queues.length > 1 &&
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100514 head_i === 0) {
515 var name = change_queue.name;
Joshua Hesketh6b1a2182014-03-21 14:40:04 +1100516 var short_name = name;
517 if (short_name.length > 32) {
518 short_name = short_name.substr(0, 32) + '...';
Timo Tijhof51516cd2013-04-09 01:32:29 +0200519 }
Joshua Hesketh298c4912014-03-20 16:06:25 +1100520 $html.append(
521 $('<p />')
522 .text('Queue: ')
523 .append(
524 $('<abbr />')
525 .attr('title', name)
526 .text(short_name)
527 )
528 );
Timo Tijhof51516cd2013-04-09 01:32:29 +0200529 }
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100530
531 $.each(changes, function (change_i, change) {
532 var $change_box =
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000533 format.change_with_status_tree(
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100534 change, change_queue);
535 $html.append($change_box);
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000536 format.display_patchset($change_box);
Timo Tijhof51516cd2013-04-09 01:32:29 +0200537 });
538 });
539 });
Joshua Hesketh298c4912014-03-20 16:06:25 +1100540 return $html;
Joshua Heskethace48892014-03-22 17:18:31 +1100541 },
542
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000543 toggle_patchset: function(e) {
544 // Toggle showing/hiding the patchset when the header is
545 // clicked.
546
547 // Grab the patchset panel
548 var $panel = $(e.target).parents('.zuul-change');
549 var $body = $panel.children('.zuul-patchset-body');
550 $body.toggle(200);
551 var collapsed_index = collapsed_exceptions.indexOf(
552 $panel.attr('id'));
553 if (collapsed_index === -1 ) {
554 // Currently not an exception, add it to list
555 collapsed_exceptions.push($panel.attr('id'));
556 }
557 else {
558 // Currently an except, remove from exceptions
559 collapsed_exceptions.splice(collapsed_index, 1);
560 }
561 },
562
563 display_patchset: function($change_box, animate) {
564 // Determine if to show or hide the patchset and/or the results
565 // when loaded
566
567 // See if we should hide the body/results
568 var $panel = $change_box.find('.zuul-change');
569 var panel_change = $panel.attr('id');
570 var $body = $panel.children('.zuul-patchset-body');
571 var expand_by_default = $('#expand_by_default')
572 .prop('checked');
573
574 var collapsed_index = collapsed_exceptions
575 .indexOf(panel_change);
576
577 if (expand_by_default && collapsed_index === -1 ||
578 !expand_by_default && collapsed_index !== -1) {
579 // Expand by default, or is an exception
580 $body.show(animate);
581 }
582 else {
583 $body.hide(animate);
584 }
585
586 // Check if we should hide the whole panel
587 var panel_project = $panel.find('.change_project').text()
588 .toLowerCase();
589
590
591 var panel_pipeline = $change_box
592 .parents('.zuul-pipeline')
593 .find('.zuul-pipeline-header > h3')
594 .html()
595 .toLowerCase();
596
597 if (current_filter !== '') {
598 var show_panel = false;
599 var filter = current_filter.trim().split(/[\s,]+/);
600 $.each(filter, function(index, f_val) {
601 if (f_val !== '') {
602 f_val = f_val.toLowerCase();
603 if (panel_project.indexOf(f_val) !== -1 ||
604 panel_pipeline.indexOf(f_val) !== -1 ||
605 panel_change.indexOf(f_val) !== -1) {
606 show_panel = true;
607 }
608 }
609 });
610 if (show_panel === true) {
611 $change_box.show(animate);
612 }
613 else {
614 $change_box.hide(animate);
615 }
616 }
617 else {
618 $change_box.show(animate);
619 }
620 },
621 };
622
623 var app = {
624 schedule: function (app) {
Timo Tijhof4be9f742015-04-02 01:13:19 +0100625 app = app || this;
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000626 if (!options.enabled) {
627 setTimeout(function() {app.schedule(app);}, 5000);
628 return;
629 }
630 app.update().complete(function () {
631 setTimeout(function() {app.schedule(app);}, 5000);
632 });
633
634 /* Only update graphs every minute */
635 if (zuul_graph_update_count > 11) {
636 zuul_graph_update_count = 0;
637 zuul.update_sparklines();
638 }
639 },
640
641 /** @return {jQuery.Promise} */
642 update: function () {
643 // Cancel the previous update if it hasn't completed yet.
644 if (xhr) {
645 xhr.abort();
646 }
647
648 this.emit('update-start');
649 var app = this;
650
Timo Tijhof4be9f742015-04-02 01:13:19 +0100651 var $msg = $(options.msg_id);
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000652 xhr = $.getJSON(options.source)
653 .done(function (data) {
654 if ('message' in data) {
655 $msg.removeClass('alert-danger')
656 .addClass('alert-info')
657 .text(data.message)
658 .show();
659 } else {
660 $msg.empty()
661 .hide();
662 }
663
664 if ('zuul_version' in data) {
665 $('#zuul-version-span').text(data.zuul_version);
666 }
667 if ('last_reconfigured' in data) {
668 var last_reconfigured =
669 new Date(data.last_reconfigured);
670 $('#last-reconfigured-span').text(
671 last_reconfigured.toString());
672 }
673
674 var $pipelines = $(options.pipelines_id);
675 $pipelines.html('');
676 $.each(data.pipelines, function (i, pipeline) {
677 var count = app.create_tree(pipeline);
678 $pipelines.append(
679 format.pipeline(pipeline, count));
680 });
681
682 $(options.queue_events_num).text(
683 data.trigger_event_queue ?
684 data.trigger_event_queue.length : '0'
685 );
686 $(options.queue_results_num).text(
687 data.result_event_queue ?
688 data.result_event_queue.length : '0'
689 );
690 })
Timo Tijhof67f4ac12015-04-10 00:33:50 +0100691 .fail(function (jqXHR, statusText, errMsg) {
692 if (statusText === 'abort') {
693 return;
694 }
Joshua Heskethd50eb582014-04-30 19:51:22 +1000695 $msg.text(options.source + ': ' + errMsg)
696 .addClass('alert-danger')
697 .removeClass('zuul-msg-wrap-off')
698 .show();
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000699 })
700 .complete(function () {
701 xhr = undefined;
702 app.emit('update-end');
703 });
704
705 return xhr;
706 },
707
708 update_sparklines: function() {
709 $.each(zuul_sparkline_urls, function(name, url) {
710 var newimg = new Image();
711 var parts = url.split('#');
712 newimg.src = parts[0] + '#' + new Date().getTime();
Timo Tijhof4be9f742015-04-02 01:13:19 +0100713 $(newimg).load(function () {
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000714 zuul_sparkline_urls[name] = newimg.src;
715 });
716 });
717 },
718
719 emit: function () {
720 $jq.trigger.apply($jq, arguments);
721 return this;
722 },
723 on: function () {
724 $jq.on.apply($jq, arguments);
725 return this;
726 },
727 one: function () {
728 $jq.one.apply($jq, arguments);
729 return this;
730 },
731
732 control_form: function() {
733 // Build the filter form filling anything from cookies
734
735 var $control_form = $('<form />')
736 .attr('role', 'form')
737 .addClass('form-inline')
738 .submit(this.handle_filter_change);
739
740 $control_form
741 .append(this.filter_form_group())
742 .append(this.expand_form_group());
743
744 return $control_form;
745 },
746
Joshua Hesketh1ed6f9d2014-03-31 22:53:06 +1100747 filter_form_group: function() {
Joshua Heskethace48892014-03-22 17:18:31 +1100748 // Update the filter form with a clear button if required
749
750 var $label = $('<label />')
751 .addClass('control-label')
752 .attr('for', 'filter_string')
753 .text('Filters')
754 .css('padding-right', '0.5em');
755
756 var $input = $('<input />')
757 .attr('type', 'text')
758 .attr('id', 'filter_string')
759 .addClass('form-control')
760 .attr('title',
761 'project(s), pipeline(s) or review(s) comma ' +
762 'separated')
Joshua Hesketh1ed6f9d2014-03-31 22:53:06 +1100763 .attr('value', current_filter);
Joshua Heskethace48892014-03-22 17:18:31 +1100764
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000765 $input.change(this.handle_filter_change);
Joshua Heskethace48892014-03-22 17:18:31 +1100766
767 var $clear_icon = $('<span />')
768 .addClass('form-control-feedback')
769 .addClass('glyphicon glyphicon-remove-circle')
770 .attr('id', 'filter_form_clear_box')
771 .attr('title', 'clear filter')
772 .css('cursor', 'pointer');
773
774 $clear_icon.click(function() {
775 $('#filter_string').val('').change();
776 });
777
Joshua Hesketh1ed6f9d2014-03-31 22:53:06 +1100778 if (current_filter === '') {
Joshua Heskethace48892014-03-22 17:18:31 +1100779 $clear_icon.hide();
780 }
781
782 var $form_group = $('<div />')
783 .addClass('form-group has-feedback')
784 .append($label, $input, $clear_icon);
785 return $form_group;
786 },
787
Joshua Heskethae230f62014-03-22 22:14:44 +1100788 expand_form_group: function() {
Monty Taylor860bb0a2014-03-22 09:41:25 -0700789 var expand_by_default = (
Joshua Heskethae230f62014-03-22 22:14:44 +1100790 read_cookie('zuul_expand_by_default', false) === 'true');
791
Monty Taylor860bb0a2014-03-22 09:41:25 -0700792 var $checkbox = $('<input />')
Joshua Heskethae230f62014-03-22 22:14:44 +1100793 .attr('type', 'checkbox')
794 .attr('id', 'expand_by_default')
795 .prop('checked', expand_by_default)
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000796 .change(this.handle_expand_by_default);
Joshua Heskethae230f62014-03-22 22:14:44 +1100797
Monty Taylor860bb0a2014-03-22 09:41:25 -0700798 var $label = $('<label />')
Joshua Heskethae230f62014-03-22 22:14:44 +1100799 .css('padding-left', '1em')
800 .html('Expand by default: ')
801 .append($checkbox);
802
803 var $form_group = $('<div />')
804 .addClass('checkbox')
805 .append($label);
806 return $form_group;
807 },
808
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000809 handle_filter_change: function() {
810 // Update the filter and save it to a cookie
811 current_filter = $('#filter_string').val();
812 set_cookie('zuul_filter_string', current_filter);
813 if (current_filter === '') {
814 $('#filter_form_clear_box').hide();
Joshua Heskethace48892014-03-22 17:18:31 +1100815 }
816 else {
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000817 $('#filter_form_clear_box').show();
Joshua Heskethace48892014-03-22 17:18:31 +1100818 }
Joshua Heskethace48892014-03-22 17:18:31 +1100819
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000820 $('.zuul-change-box').each(function(index, obj) {
821 var $change_box = $(obj);
822 format.display_patchset($change_box, 200);
Joshua Hesketh5caf4f62014-04-01 12:52:43 +1100823 });
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000824 return false;
Timo Tijhof51516cd2013-04-09 01:32:29 +0200825 },
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000826
827 handle_expand_by_default: function(e) {
828 // Handle toggling expand by default
829 set_cookie('zuul_expand_by_default', e.target.checked);
830 collapsed_exceptions = [];
831 $('.zuul-change-box').each(function(index, obj) {
832 var $change_box = $(obj);
833 format.display_patchset($change_box, 200);
834 });
835 },
836
837 create_tree: function(pipeline) {
838 var count = 0;
839 var pipeline_max_tree_columns = 1;
840 $.each(pipeline.change_queues, function(change_queue_i,
841 change_queue) {
842 var tree = [];
843 var max_tree_columns = 1;
844 var changes = [];
845 var last_tree_length = 0;
846 $.each(change_queue.heads, function(head_i, head) {
847 $.each(head, function(change_i, change) {
848 changes[change.id] = change;
849 change._tree_position = change_i;
850 });
851 });
852 $.each(change_queue.heads, function(head_i, head) {
853 $.each(head, function(change_i, change) {
James E. Blaird1d3ce32015-02-11 17:56:45 -0800854 if (change.live === true) {
855 count += 1;
856 }
Joshua Hesketh0f5c66a2014-04-30 19:23:36 +1000857 var idx = tree.indexOf(change.id);
858 if (idx > -1) {
859 change._tree_index = idx;
860 // remove...
861 tree[idx] = null;
862 while (tree[tree.length - 1] === null) {
863 tree.pop();
864 }
865 } else {
866 change._tree_index = 0;
867 }
868 change._tree_branches = [];
869 change._tree = [];
870 if (typeof(change.items_behind) === 'undefined') {
871 change.items_behind = [];
872 }
873 change.items_behind.sort(function(a, b) {
874 return (changes[b]._tree_position -
875 changes[a]._tree_position);
876 });
877 $.each(change.items_behind, function(i, id) {
878 tree.push(id);
879 if (tree.length>last_tree_length &&
880 last_tree_length > 0) {
881 change._tree_branches.push(
882 tree.length - 1);
883 }
884 });
885 if (tree.length > max_tree_columns) {
886 max_tree_columns = tree.length;
887 }
888 if (tree.length > pipeline_max_tree_columns) {
889 pipeline_max_tree_columns = tree.length;
890 }
891 change._tree = tree.slice(0); // make a copy
892 last_tree_length = tree.length;
893 });
894 });
895 change_queue._tree_columns = max_tree_columns;
896 });
897 pipeline._tree_columns = pipeline_max_tree_columns;
898 return count;
899 },
900 };
901
902 $jq = $(app);
903 return {
904 options: options,
905 format: format,
906 app: app,
907 jq: $jq
908 };
Timo Tijhof4be9f742015-04-02 01:13:19 +0100909 };
Timo Tijhof51516cd2013-04-09 01:32:29 +0200910}(jQuery));