* hydra: make chart zoomable and clickable

Dependencies

• [2] 2R7GHSA4 * hydra: added initial version of build graph
• [3] J5UVLXOK * Start of a basic Catalyst web interface.
• [4] NZI7E2E3 * hydra: handle case where logfile is empty
• [5] WHAFVCEI
• [6] ZI535LI6 * hydra: 'new' UI for project/jobset/job/build
• [7] VCOSLZRP
• [*] LBNVQXUB * Build the /build stuff in a separate controller.
• [*] A52HEFHQ * Allow builds to be restarted (if they failed with a transient error,

Change contents

• replacement in src/lib/Hydra/Controller/Build.pm at line 62
  [2.621]→[2.621:671](∅→∅)
  − , { order_by => "id DESC", rows => 20 }
  [2.621]

  [2.671]
  + , { order_by => "id DESC", rows => 100 }
• edit in src/root/build.tt at line 83
  [10.1696]

  [3.7438]
  +
• edit in src/root/build.tt at line 420
  [2.873]

  [3.8443]
  + <h2>Build time history (in seconds)</h2>

  + <div id="placeholder" style="width:800px;height:400px;"></div>

  + <div id="overview" style="margin-left:50px;margin-top:20px;width:600px;height:50px"></div>
• edit in src/root/build.tt at line 424
  [3.8444]→[2.874:938](∅→∅)
  − <div id="placeholder" style="width:600px;height:300px;"></div>
• edit in src/root/build.tt at line 425
  [2.1016]

  [2.1016]
  + <script src="/static/js/flot/jquery.flot.selection.js" type="text/javascript"></script>
• replacement in src/root/build.tt at line 428
  [2.1065]→[2.1065:1378](∅→∅)
  − var d = [ null [% FOREACH prevbuild IN prevBuilds %][% IF prevbuild.resultInfo.starttime != 0 && (prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime) != 0 %],[[% prevbuild.resultInfo.starttime * 1000 %],[% prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime %]] [% END %] [% END %] ] ;
  [2.1065]

  [2.1378]
  + var d = [];

  + var ids = [];

  + [% FOREACH prevbuild IN prevBuilds %][% IF prevbuild.resultInfo.starttime != 0 %]

  + d.push([[% prevbuild.resultInfo.starttime * 1000 %],[% prevbuild.resultInfo.stoptime - prevbuild.resultInfo.starttime %]]);

  + ids[[% prevbuild.resultInfo.starttime * 1000 %]] = [% prevbuild.id %] ;

  + [% END %][% END %]
• edit in src/root/build.tt at line 435
  [2.1379]→[2.1379:2290](∅→∅)
  − // helper for returning the weekends in a period

  − function weekendAreas(axes) {

  − var markings = [];

  − var d = new Date(axes.xaxis.min);

  − // go to the first Saturday

  − d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))

  − d.setUTCSeconds(0);

  − d.setUTCMinutes(0);

  − d.setUTCHours(0);

  − var i = d.getTime();

  − do {

  − // when we don't set yaxis, the rectangle automatically

  − // extends to infinity upwards and downwards

  − markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });

  − i += 7 * 24 * 60 * 60 * 1000;

  − } while (i < axes.xaxis.max);

  −

  − return markings;

  − }

  − var now = (new Date()).getTime() ;

  − var minimum = now;

  − for (var i = 1; i < d.length; ++i)

  − if ( minimum > d[i][0] )

  − minimum = d[i][0] ;

  −

  − var now = (new Date()).getTime() ;
• replacement in src/root/build.tt at line 436
  [2.2310]→[2.2310:2377](∅→∅)
  − xaxis: { mode: "time", min: minimum, max: now,

  − },
  [2.2310]

  [2.2377]
  + xaxis: { mode: "time" },

  + selection: { mode: "x" },
• replacement in src/root/build.tt at line 440
  [2.2440]→[2.2440:2515](∅→∅)
  − selection: { mode: "x" },

  − grid: { markings: weekendAreas }
  [2.2440]

  [2.2515]
  + grid: {

  + clickable: true,

  + hoverable: true,

  + hoverFill: '#444',

  + hoverRadius: 4,

  + },
• edit in src/root/build.tt at line 447
  [2.2522]

  [2.2522]
  +
• replacement in src/root/build.tt at line 450
  [2.2585]→[2.2585:2801](∅→∅)
  − if (ui.panel.id == "tabs-history") {

  − $.plot($("#placeholder"), [

  − { data: d,

  − clickable : true,

  − hoverable : true,

  − },

  − ], options );

  − }

  − })
  [2.2585]

  [2.2801]
  + if (ui.panel.id == "tabs-history") {

  +

  + var plot = $.plot($("#placeholder"), [d], options);

  +

  + var overview = $.plot($("#overview"), [d], {

  + series: {

  + lines: { show: true, lineWidth: 1 },

  + shadowSize: 0

  + },

  + xaxis: { ticks: [], mode: "time" },

  + yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },

  + selection: { mode: "x" }

  + });

  +

  + // now connect the two

  +

  + $("#placeholder").bind("plotselected", function (event, ranges) {

  + // do the zooming

  + plot = $.plot($("#placeholder"), [d],

  + $.extend(true, {}, options, {

  + xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }

  + }));

  +

  + // don't fire event on the overview to prevent eternal loop

  + overview.setSelection(ranges, true);

  + });

  +

  + $("#overview").bind("plotselected", function (event, ranges) {

  + plot.setSelection(ranges);

  + });

  +

  + $("#placeholder").bind("plotclick", function (e, pos, item) {

  + if (item) {

  + plot.highlight(item.series, item.datapoint);

  + buildid = ids[item.datapoint[0]];

  + window.location = "/build/"+buildid;

  + }

  + });

  + }

  + });