Sort branches by age
[gipeda.git] / site / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8"/>
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7
8 <title>Gipeda</title>
9 <script type="text/javascript" src="js/signals.min.js"></script>
10 <script type="text/javascript" src="js/hasher.min.js"></script>
11 <script type="text/javascript" src="js/handlebars-v2.0.0.js"></script>
12 <script src="js/jquery-1.11.2.min.js"></script>
13 <script src="js/jquery.timeago.js"></script>
14 <script src="js/jquery-ui/jquery-ui.min.js"></script>
15 <script src="js/naturalSort.js"></script>
16 <link rel="stylesheet" href="js/jquery-ui/jquery-ui.min.css">
17
18 <script src="js/flot/jquery.flot.min.js"></script>
19 <script src="js/flot/jquery.flot.resize.min.js"></script>
20
21 <link rel="stylesheet" href="js/bootstrap/dist/css/bootstrap.min.css">
22 <link rel="stylesheet" href="js/bootstrap/dist/css/bootstrap-theme.min.css">
23 <script src="js/bootstrap/dist/js/bootstrap.min.js"></script>
24
25
26 <script type="text/javascript" src="js/gipeda.js"></script>
27
28 <style type="text/css">
29 html {
30     overflow-y:scroll;
31 }
32
33 .panel-heading .accordion-toggle .indicator-untoggled {
34     display: none;
35     color: grey;
36     padding-left: 1em;
37 }
38 .panel-heading .accordion-toggle .indicator-toggled {
39     display: inline;
40     color: grey;
41     padding-left: 1em;
42 }
43 .panel-heading .accordion-toggle.collapsed .indicator-untoggled {
44     display: inline;
45 }
46 .panel-heading .accordion-toggle.collapsed .indicator-toggled {
47     display: none;
48 }
49
50 .summary-row-collapsed {
51     display:none;
52 }
53
54 .benchmark-table {
55     margin-bottom: 0px;
56 }
57
58 /* Trying to visualize collapsed rows */
59 .summary-table {
60     border-collapse:collapse; 
61     
62 }
63 .summary-table .summary-row-collapsed + .summary-row td {
64     border-top: 4px dotted #DDD;
65
66 }
67 /* Couldn’t make it to work easily
68 .summary-row-collapsed td {
69     background-color:grey;
70     padding:1px;
71     border: 0px;
72     height:1px !important;
73     line-height:0px;
74     padding:0px !important;
75     overflow:hidden !important;
76 }
77 */
78
79 /* Order matters! */
80 .summary-improvement , .row-Improvement {
81     background-color: #dff0d8;
82 }
83 .summary-regression, .row-Regression {
84     background-color: #fcf8e3;
85 }
86
87 .branch-improvement , .row-Improvement {
88     background-color: #dff0d8;
89 }
90 .branch-regression, .row-Regression {
91     background-color: #fcf8e3;
92 }
93
94 .benchmark-name a.graph-link {
95     visibility:hidden;
96 }
97 .benchmark-name:hover a.graph-link {
98     visibility:visible;
99 }
100
101 </style>
102
103 <script id="nothing" type="text/x-handlebars-template">
104   <div class="jumbotron nothing-to-see" style="display:none">
105    <p>Nothing selected... try the buttons in the top right corner.</p>
106   </div>
107 </script>
108
109 <script id="nav"  type="text/x-handlebars-template">
110  <nav class="navbar navbar-default">
111   <div class="container">
112
113     <!-- Inspired by http://stackoverflow.com/a/22978968/946226 -->
114     <!-- Title -->
115     <div class="navbar-header pull-left">
116       <a class="navbar-brand" href="#">{{ settings.title }}</a>
117     </div>
118
119     <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
120     <div class="navbar-header pull-right">
121       <p class="navbar-text nav-loading pull-left">Loading data...</p>
122
123       <div class="navbar-text nav-compare" role="group">
124        <a id="go-to-compare" href="#" class="navbar-link">
125         <code>
126          <span title="Drop a revision id to compare two revisions" id="compare-from">???????</span>..<span title="Drop a revision id to compare two revisions" id="compare-to">???????</span>
127          </code>
128        </a>
129       </div>
130
131       <ul class="nav pull-left">
132        <li class="pull-left">
133         <div class="btn-group" role="group">
134          <button type="button" class="btn btn-default navbar-btn active benchSelector" id="show-improvements" title="Show improvements">
135           <span class="text-success" style="font-weight:bold">+</span>
136          </button>
137          <button type="button" class="btn btn-default navbar-btn benchSelector" id="show-boring" title="Show unchanged">
138           <span style="font-weight:bold">=</span>
139          </button>
140          <button type="button" class="btn btn-default navbar-btn active benchSelector" id="show-regressions" title="Show regressions">
141           <span class="text-warning" style="font-weight:bold">-</span>
142          </button>
143         </div>
144        </li>
145       </ul>
146
147       <!-- Required bootstrap placeholder for the collapsed menu -->
148       <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
149     </div>
150
151     <!-- The Collapsing items            navbar-left or navbar-right -->
152     <div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
153       <ul class="nav navbar-nav pull-right">
154       <!--                      pull-right keeps the drop-down in line -->
155         <li><a href="{{indexLink}}">Revisions</a></li>
156         <!-- <li><a href="{{allLink}}">All</a></li> -->
157         <!-- <li><a href="{{revisionLink latest}}">Reports</a></li> -->
158         <li><a href="{{graphIndexLink}}">Graphs</a></li>
159       </ul>
160
161     </div>
162   </div>
163  </nav>
164 </script>
165
166 <script id="rev-id" type="text/x-handlebars-template">
167   <code data-rev="{{hash}}" class="rev-draggable">{{shortRev hash}}</code>
168 </script>
169
170
171 <script id="summary-icons"  type="text/x-handlebars-template">
172   <span title="{{id summaryDesc}}">
173   <span>
174    {{totalCount}}
175    <span class="glyphicon glyphicon-stats"></span>
176   </span>
177   <span>
178    {{improvementCount}}
179    <span class="glyphicon glyphicon-plus text-success"></span>
180   </span>
181   <span>
182    {{regressionCount}}
183    <span class="glyphicon glyphicon-minus text-warning"></span>
184   </span>
185   </span>
186 </script>
187
188 <script id="summary-list"  type="text/x-handlebars-template">
189   {{> nothing }}
190   <table class="table summary-table">
191    {{#each this}}
192    {{#with summary}}
193     <tr
194      class="
195        summary-row
196        {{#if stats.improvementCount}}summary-improvement{{/if}}
197        {{#if stats.regressionCount}}summary-regression{{/if}}
198      ">
199      <td class="col-md-2 text-right">
200        <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate gitDate}}</abbrv>
201      </td>
202      <td class="col-md-1">
203       <a href="{{revisionLink hash}}">
204         {{> rev-id hash=hash}}
205       </a>
206      </td>
207      <td class="col-md-7">
208        {{ gitSubject }}
209      </td>
210      <td class="col-md-2 text-right">
211       {{> summary-icons stats}}
212      </td>
213     </tr>
214    {{/with}}
215    {{/each}}
216   </table>
217 </script>
218
219 <script id="tags"  type="text/x-handlebars-template">
220   <h2>Tags</h2>
221   <table class="table tag-table">
222    {{#each_unnaturally tags}}
223      {{#with (lookup ../revisions this)}}
224       {{#with this.summary}}
225       <tr class="tag-row">
226        <td class="col-md-2 text-right">
227          <abbrv class="timeago" title="{{ iso8601 this.gitDate }}">{{ humanDate this.gitDate}}</abbrv>
228        </td>
229        <td class="col-md-1">
230         <a href="{{revisionLink hash}}">
231           {{> rev-id hash=hash}}
232         </a>
233        </td>
234        <td class="col-md-2">
235          <strong>{{ @key }}</strong>
236        </td>
237        <td class="col-md-7">
238          {{ gitSubject }}
239        </td>
240       </tr>
241       {{/with}}
242      {{else}}
243       <tr
244        title="This tag has not been benchmarked yet"
245        class="tag-row">
246        <td class="col-md-2 text-right">
247        </td>
248        <td class="col-md-1">
249           {{> rev-id hash=this}}
250        </td>
251        <td class="col-md-2">
252          {{ @key }}
253        </td>
254        <td class="col-md-7 text-right">
255        </td>
256       </tr>
257      {{/with}}
258    {{/each_unnaturally}}
259   </table>
260 </script>
261
262 <script id="branches"  type="text/x-handlebars-template">
263   <h2>Branches</h2>
264   <table class="table branch-table">
265    {{#each_branch branches}}
266      {{#with (lookup ../revisions this)}}
267       {{#with this.summary}}
268       <tr
269        class="
270          branch-row
271          {{#if stats.improvementCount}}branch-improvement{{/if}}
272          {{#if stats.regressionCount}}branch-regression{{/if}}
273        ">
274        <td class="col-md-2 text-right">
275          <abbrv class="timeago" title="{{ iso8601 this.gitDate }}">{{ humanDate this.gitDate}}</abbrv>
276        </td>
277        <td class="col-md-1">
278         <a href="{{revisionLink hash}}">
279           {{> rev-id hash=hash}}
280         </a>
281        </td>
282        <td class="col-md-2">
283          <strong>{{ @key }}</strong>
284        </td>
285        <td class="col-md-5">
286          {{ gitSubject }}
287        </td>
288        <td class="col-md-2 text-right">
289         {{> summary-icons stats}}
290        </td>
291       </tr>
292       {{/with}}
293      {{else}}
294       <tr
295        title="The tip of this branch has not been benchmarked yet"
296        class="branch-row">
297        <td class="col-md-2 text-right">
298        </td>
299        <td class="col-md-1">
300           {{> rev-id hash=this}}
301        </td>
302        <td class="col-md-2">
303          {{ @key }}
304        </td>
305        <td class="col-md-5">
306        </td>
307        <td class="col-md-2 text-right">
308        </td>
309       </tr>
310      {{/with}}
311    {{/each_branch}}
312   </table>
313 </script>
314
315 <script id="revTooltip" type="text/x-handlebars-template">
316  <a href="{{revisionLink hash}}">
317   {{> rev-id hash=hash}}
318  </a>:
319  {{ value }}<br/>
320  {{ humanDate gitDate}}<br/>
321  {{ gitSubject }}</br>
322  {{> summary-icons stats}}
323 </script>
324
325 <script id="graphIndex" type="text/x-handlebars-template">
326  {{> nav}}
327  <div class="container">
328   <h1>Benchmarks</h1>
329  </div>
330  <div class="container">
331     {{> nothing }}
332     <div class="panel-group" role="tablist">
333      {{#each benchGroups}}
334       <div class="panel panel-default graph-list-panel">
335        <div class="panel-heading" role="tab" id="heading-{{@index}}">
336         <h4 class="panel-title">
337          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
338          {{groupName}}
339          </a>
340         </h4>
341        </div>
342
343        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
344         <div class="panel-body">
345          <table class="table table-condensed benchmark-table">
346           <thead>
347           <tr>
348            <th class="col-md-6">Benchmark name</th>
349           </tr>
350           </thead>
351           <tbody>
352            {{#each groupMembers}}
353             <tr class="
354               summary-row
355               {{#with (lookup ../../graphSummaries this)}}
356                {{#if improvements}}summary-improvement{{/if}}
357                {{#if regressions}}summary-regression{{/if}}
358               {{/with}}
359               "
360             >
361              <td class="benchmark-name">
362               {{this}}
363               <a class="graph-link" title="Graphs" href="{{graphLink this}}">
364                <span class="glyphicon glyphicon-signal"/>
365               </a>
366              </td>
367              <td class="col-md-2 text-right">
368               {{#with (lookup ../../graphSummaries this)}}
369                <span>
370                 {{improvements}}
371                 <span class="glyphicon glyphicon-plus text-success"></span>
372                </span>
373                <span>
374                 {{regressions}}
375                 <span class="glyphicon glyphicon-minus text-warning"></span>
376                </span>
377               {{/with}}
378              </td>
379             </tr>
380            {{/each}}
381           </tbody>
382          </table>
383         </div>
384        </div> 
385       </div>
386      {{/each}}
387     </div>
388    </div>
389 </script>
390
391 <script id="index" type="text/x-handlebars-template">
392  {{> nav}}
393  <div class="container">
394   <h1>Recent commits</h1>
395   {{> summary-list (recentCommits revisions)}}
396   <p class="text-center">
397     <a href="{{allLink}}">view older commits...</a>
398   </p>
399  </div>
400  <div class="container">
401   {{> tags }}
402  </div>
403  <div class="container">
404   {{> branches }}
405  </div>
406 </script>
407
408 <script id="complete" type="text/x-handlebars-template">
409  {{> nav}}
410  <div class="container">
411   <h1>All commits</h1>
412   {{> summary-list (allCommits revisions)}}
413   {{> tags }}
414   {{> branches }}
415  </div>
416 </script>
417
418
419 <script id="revision" type="text/x-handlebars-template">
420  {{> nav}}
421
422  <div class="container">
423   <div class="row">
424    <div class="col-md-6 col-md-push-6">
425     {{#if rev.summary}}
426     <h2>
427      Commit {{shortRev rev.summary.hash}}
428     </h2>
429     <p>
430     {{#if rev.summary.parents}}
431     Parent:
432     {{#with (lookup rev.summary.parents 0)}}
433       <a href="{{revisionLink this}}">
434         {{> rev-id hash=this}}
435       </a>
436     {{/with}} –
437     {{/if}}
438     {{revisionInfo rev.summary }} –
439     {{> summary-icons rev.summary.stats }}
440     </p> 
441     <pre>{{rev.gitLog}}</pre>
442     {{/if}}
443    </div>
444
445    <div class="col-md-6 col-md-pull-6">
446     {{> nothing }}
447     <div class="panel-group" role="tablist">
448      {{#each groups}}
449       <div class="panel panel-default bench-panel">
450        <div class="panel-heading" role="tab" id="heading-{{@index}}">
451         <h4 class="panel-title">
452          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
453          {{groupName}}
454          <span class="stats pull-right">
455           {{> summary-icons groupStats}}
456           <span class="indicator-toggled glyphicon glyphicon-chevron-down text-grey"/>
457           <span class="indicator-untoggled glyphicon glyphicon-chevron-right text-grey"/>
458          </span>
459          </a>
460         </h4>
461        </div>
462
463        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
464         <div class="panel-body">
465          <table class="table table-condensed benchmark-table">
466           <thead>
467           <tr>
468           <th class="col-md-5">Benchmark name</th>
469           <th class="col-md-2 text-right">previous</th>
470           <th class="col-md-2 text-right">change</th>
471           <th class="col-md-2 text-right">now</th>
472           <th class="col-md-1 text-left"></th>
473           </tr>
474           </thead>
475           <tbody>
476            {{#each benchResults}}
477             <tr class="row-result row-{{changeType}}">
478             <td class="benchmark-name">
479              {{name}}
480              <a class="graph-link" title="Graphs" href="{{graphLink name ../../rev.summary.hash}}">
481               <span class="glyphicon glyphicon-signal"/>
482              </a>
483             </td>
484             <td class="text-right">{{previous}}</td>
485             <td class="text-right">{{change}}</td>
486             <td class="text-right">{{value}}</td>
487             <td class="text-left">{{unit}}</td>
488             </tr>
489            {{/each}}
490           </tbody>
491          </table>
492         </div>
493        </div> 
494       </div>
495      {{/each}}
496     </div>
497    </div>
498   </div>
499 </script>
500
501 <script id="graph" type="text/x-handlebars-template">
502  {{> nav}}
503
504  <div class="container">
505  <h2>{{benchName}}</h2>
506
507  <div id="benchChart" style="width:100%; height:400px">
508  </div>
509
510 </script>
511
512 <script id="compare" type="text/x-handlebars-template">
513  {{> nav}}
514
515  <div class="container">
516   <div class="row">
517    <div class="col-md-6 col-md-push-6">
518     {{#if rev1.summary}}{{#if rev2.summary}}
519     <h2>
520      Comparing
521       {{> rev-id hash=rev1.summary.hash}}..{{> rev-id hash=rev2.summary.hash}}
522     </h2>
523     <p>
524      Parents:
525      {{#each rev1.summary.parents}}
526       <a href="{{compareLink this ../rev2.summary.hash}}">{{shortRev this}}</a>
527      {{/each}}</br>
528       <a href="{{revisionLink rev1.summary.hash}}">{{> rev-id hash=rev1.summary.hash}}</a> <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate rev1.summary.gitDate}}</abbrv>:<br/>
529      <strong>{{ rev1.summary.gitSubject }}</strong><br/>
530      {{revisionInfo rev1.summary }}
531     </p>
532     <p class="text-center">
533       ⁞<br/>
534       <a href="{{diffLink rev1.summary.hash rev2.summary.hash}}">View diff</a><br/>
535       ⁞
536     </p>
537     <p>
538      Parents:
539      {{#each rev2.summary.parents}}
540       <a href="{{compareLink ../rev1.summary.hash this}}">{{shortRev this}}</a>
541      {{/each}}</br>
542       <a href="{{revisionLink rev2.summary.hash}}">{{> rev-id hash=rev2.summary.hash}}</a> <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate rev2.summary.gitDate}}</abbrv>:<br/>
543      <strong>{{ rev2.summary.gitSubject }}</strong><br/>
544      {{revisionInfo rev2.summary }}
545     </p>
546     {{/if}} {{/if}}
547    </div>
548
549    <div class="col-md-6 col-md-pull-6">
550     {{> nothing }}
551     <div class="panel-group" role="tablist">
552      {{#each groups}}
553       <div class="panel panel-default bench-panel">
554        <div class="panel-heading" role="tab" id="heading-{{@index}}">
555         <h4 class="panel-title">
556          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
557          {{groupName}}
558          <span class="stats pull-right">
559           {{> summary-icons groupStats}}
560           <span class="indicator-toggled glyphicon glyphicon-chevron-down text-grey"/>
561           <span class="indicator-untoggled glyphicon glyphicon-chevron-right text-grey"/>
562          </span>
563          </a>
564         </h4>
565        </div>
566
567        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
568         <div class="panel-body">
569          <table class="table table-condensed benchmark-table">
570           <thead>
571           <tr>
572           <th class="col-md-5">Benchmark name</th>
573           <th class="col-md-2 text-right">previous</th>
574           <th class="col-md-2 text-right">change</th>
575           <th class="col-md-2 text-right">now</th>
576           <th class="col-md-1 text-right"></th>
577           </tr>
578           </thead>
579           <tbody>
580            {{#each benchResults}}
581             <tr class="row-result row-{{changeType}}">
582             <td class="benchmark-name">
583              {{name}}
584              <a class="graph-link" title="Graphs" href="{{graphLink name ../../rev1.summary.hash ../../rev2.summary.hash}}">
585               <span class="glyphicon glyphicon-signal"/>
586              </a>
587             </td>
588             <td class="text-right">{{previous}}</td>
589             <td class="text-right">{{change}}</td>
590             <td class="text-right">{{value}}</td>
591             <td class="text-left">{{unit}}</td>
592             </tr>
593            {{/each}}
594           </tbody>
595          </table>
596         </div>
597        </div> 
598       </div>
599      {{/each}}
600     </div>
601    </div>
602   </div>
603 </script>
604
605 <script id="graph" type="text/x-handlebars-template">
606  {{> nav}}
607
608  <div class="container">
609  <h2>{{benchName}}</h2>
610
611  <div id="benchChart" style="width:100%; height:400px">
612  </div>
613
614  <p><button id="loadMore">Load older revisions</button></p>
615  </div>
616 </script>
617
618 </head>
619
620 <body>
621
622 <div id="main">
623 <div id="loading">
624 <p>
625 Loading...
626 </p>
627 <p>(If this does not disappear, then you do not have JavaScript enabled, or something else is broken.)</p>
628 </div>
629 </div>
630 </body>