9ca7eb3893c680783cfaaaeaf230a9a6fa9f2e35
[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
15 <script src="js/flot/jquery.flot.min.js"></script>
16 <script src="js/flot/jquery.flot.resize.min.js"></script>
17
18 <link rel="stylesheet" href="js/bootstrap/dist/css/bootstrap.min.css">
19 <link rel="stylesheet" href="js/bootstrap/dist/css/bootstrap-theme.min.css">
20 <script src="js/bootstrap/dist/js/bootstrap.min.js"></script>
21
22
23 <script type="text/javascript" src="js/gipeda.js"></script>
24
25 <style type="text/css">
26 html {
27     overflow-y:scroll;
28 }
29
30 .panel-heading .accordion-toggle .indicator-untoggled {
31     display: none;
32     color: grey;
33     padding-left: 1em;
34 }
35 .panel-heading .accordion-toggle .indicator-toggled {
36     display: inline;
37     color: grey;
38     padding-left: 1em;
39 }
40 .panel-heading .accordion-toggle.collapsed .indicator-untoggled {
41     display: inline;
42 }
43 .panel-heading .accordion-toggle.collapsed .indicator-toggled {
44     display: none;
45 }
46
47 .summary-row-collapsed {
48     display:none;
49 }
50
51 .benchmark-table {
52     margin-bottom: 0px;
53 }
54
55 /* Trying to visualize collapsed rows */
56 .summary-table {
57     border-collapse:collapse; 
58     
59 }
60 .summary-table .summary-row-collapsed + .summary-row td {
61     border-top: 4px dotted #DDD;
62
63 }
64 /* Couldn’t make it to work easily
65 .summary-row-collapsed td {
66     background-color:grey;
67     padding:1px;
68     border: 0px;
69     height:1px !important;
70     line-height:0px;
71     padding:0px !important;
72     overflow:hidden !important;
73 }
74 */
75
76 /* Order matters! */
77 .summary-improvement , .row-Improvement {
78     background-color: #dff0d8;
79 }
80 .summary-regression, .row-Regression {
81     background-color: #fcf8e3;
82 }
83
84 .benchmark-name a.graph-link {
85     visibility:hidden;
86 }
87 .benchmark-name:hover a.graph-link {
88     visibility:visible;
89 }
90
91 </style>
92
93 <script id="nothing" type="text/x-handlebars-template">
94   <div class="jumbotron nothing-to-see" style="display:none">
95    <p>Nothing selected... try the buttons in the top right corner.</p>
96   </div>
97 </script>
98
99 <script id="nav"  type="text/x-handlebars-template">
100  <nav class="navbar navbar-default">
101   <div class="container">
102
103     <!-- Inspired by http://stackoverflow.com/a/22978968/946226 -->
104     <!-- Title -->
105     <div class="navbar-header pull-left">
106       <a class="navbar-brand" href="#">{{ settings.title }}</a>
107     </div>
108
109     <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
110     <div class="navbar-header pull-right">
111       <p class="navbar-text nav-loading pull-left">Loading data...</p>
112
113       <ul class="nav pull-left">
114        <li class="pull-left">
115         <div class="btn-group" role="group">
116          <button type="button" class="btn btn-default navbar-btn active benchSelector" id="show-improvements" title="Show improvements">
117           <!-- <span class="glyphicon glyphicon-plus text-success"></span> -->
118           <span class="text-success" style="font-weight:bold">+</span>
119          </button>
120          <button type="button" class="btn btn-default navbar-btn benchSelector" id="show-boring" title="Show unchanged">
121           <span style="font-weight:bold">=</span>
122          </button>
123          <button type="button" class="btn btn-default navbar-btn active benchSelector" id="show-regressions" title="Show regressions">
124           <!-- <span class="glyphicon glyphicon-minus text-warning"></span> -->
125           <span class="text-warning" style="font-weight:bold">-</span>
126          </button>
127         </div>
128        </li>
129       </ul>
130
131       <!-- Required bootstrap placeholder for the collapsed menu -->
132       <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>
133     </div>
134
135     <!-- The Collapsing items            navbar-left or navbar-right -->
136     <div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
137       <ul class="nav navbar-nav pull-right">
138       <!--                      pull-right keeps the drop-down in line -->
139         <li><a href="{{indexLink}}">Revisions</a></li>
140         <!-- <li><a href="{{allLink}}">All</a></li> -->
141         <!-- <li><a href="{{revisionLink latest}}">Reports</a></li> -->
142         <li><a href="{{graphIndexLink}}">Graphs</a></li>
143       </ul>
144
145     </div>
146   </div>
147  </nav>
148 </script>
149
150 <script id="summary-icons"  type="text/x-handlebars-template">
151   <span title="{{id summaryDesc}}">
152   <span>
153    {{totalCount}}
154    <span class="glyphicon glyphicon-stats"></span>
155   </span>
156   <span>
157    {{improvementCount}}
158    <span class="glyphicon glyphicon-plus text-success"></span>
159   </span>
160   <span>
161    {{regressionCount}}
162    <span class="glyphicon glyphicon-minus text-warning"></span>
163   </span>
164   </span>
165 </script>
166
167 <script id="summary-list"  type="text/x-handlebars-template">
168   {{> nothing }}
169   <table class="table summary-table">
170    {{#each this}}
171    {{#with summary}}
172     <tr
173      class="
174        summary-row
175        {{#if stats.improvementCount}}summary-improvement{{/if}}
176        {{#if stats.regressionCount}}summary-regression{{/if}}
177      ">
178      <td class="col-md-2 text-right">
179        <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate gitDate}}</abbrv>
180      </td>
181      <td class="col-md-1">
182       <a href="{{revisionLink hash}}">
183         <code>{{shortRev hash}}</code>
184       </a>
185      </td>
186      <td class="col-md-7">
187        {{ gitSubject }}
188      </td>
189      <td class="col-md-2 text-right">
190       {{> summary-icons stats}}
191      </td>
192     </tr>
193    {{/with}}
194    {{/each}}
195   </table>
196 </script>
197
198 <script id="revTooltip" type="text/x-handlebars-template">
199  <a href="{{revisionLink hash}}"><code>{{shortRev hash}}</code></a>:
200  {{ value }}<br/>
201  {{ humanDate gitDate}}<br/>
202  {{ gitSubject }}</br>
203  {{> summary-icons stats}}
204 </script>
205
206 <script id="graphIndex" type="text/x-handlebars-template">
207  {{> nav}}
208  <div class="container">
209   <h1>Benchmarks</h1>
210  </div>
211  <div class="container">
212     {{> nothing }}
213     <div class="panel-group" role="tablist">
214      {{#each benchGroups}}
215       <div class="panel panel-default graph-list-panel">
216        <div class="panel-heading" role="tab" id="heading-{{@index}}">
217         <h4 class="panel-title">
218          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
219          {{groupName}}
220          </a>
221         </h4>
222        </div>
223
224        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
225         <div class="panel-body">
226          <table class="table table-condensed benchmark-table">
227           <thead>
228           <tr>
229            <th class="col-md-6">Benchmark name</th>
230           </tr>
231           </thead>
232           <tbody>
233            {{#each groupMembers}}
234             <tr class="
235               summary-row
236               {{#with (lookup ../../graphSummaries this)}}
237                {{#if improvements}}summary-improvement{{/if}}
238                {{#if regressions}}summary-regression{{/if}}
239               {{/with}}
240               "
241             >
242              <td class="benchmark-name">
243               {{this}}
244               <a class="graph-link" title="Graphs" href="{{graphLink this}}">
245                <span class="glyphicon glyphicon-signal"/>
246               </a>
247              </td>
248              <td class="col-md-2 text-right">
249               {{#with (lookup ../../graphSummaries this)}}
250                <span>
251                 {{improvements}}
252                 <span class="glyphicon glyphicon-plus text-success"></span>
253                </span>
254                <span>
255                 {{regressions}}
256                 <span class="glyphicon glyphicon-minus text-warning"></span>
257                </span>
258               {{/with}}
259              </td>
260             </tr>
261            {{/each}}
262           </tbody>
263          </table>
264         </div>
265        </div> 
266       </div>
267      {{/each}}
268     </div>
269    </div>
270 </script>
271
272 <script id="index" type="text/x-handlebars-template">
273  {{> nav}}
274  <div class="container">
275   <h1>Recent commits</h1>
276   {{> summary-list (recentCommits revisions)}}
277  </div>
278  <div class="container">
279   <p class="text-center">
280     <a href="{{allLink}}">view older commits...</a>
281   </p>
282  </div>
283 </script>
284
285 <script id="complete" type="text/x-handlebars-template">
286  {{> nav}}
287  <div class="container">
288   <h1>All commits</h1>
289   {{> summary-list (allCommits revisions)}}
290  </div>
291 </script>
292
293
294 <script id="revision" type="text/x-handlebars-template">
295  {{> nav}}
296
297  <div class="container">
298   <div class="row">
299    <div class="col-md-6 col-md-push-6">
300     {{#if rev.summary}}
301     <h2>
302      Commit {{shortRev rev.summary.hash}}
303     </h2>
304     <p>
305     {{#if rev.summary.parents}}
306     Displaying changes since:  
307     {{#with (lookup rev.summary.parents 0)}}
308       <a href="{{revisionLink this}}"><code>{{shortRev this}}</code></a> – 
309       <a href="{{diffLink this ../rev.summary.hash}}">View diff</a>
310     {{/with}} –
311     {{#logLink rev.summary.hash }}
312       <a href="{{link}}">View buildlog</a> –
313     {{/logLink}}
314       {{> summary-icons rev.summary.stats }}
315     {{else}}
316     No parent commit found.
317     {{/if}}
318     </p> 
319     <pre>{{rev.gitLog}}</pre>
320     {{/if}}
321    </div>
322
323    <div class="col-md-6 col-md-pull-6">
324     {{> nothing }}
325     <div class="panel-group" role="tablist">
326      {{#each groups}}
327       <div class="panel panel-default bench-panel">
328        <div class="panel-heading" role="tab" id="heading-{{@index}}">
329         <h4 class="panel-title">
330          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
331          {{groupName}}
332          <span class="stats pull-right">
333           {{> summary-icons groupStats}}
334           <span class="indicator-toggled glyphicon glyphicon-chevron-down text-grey"/>
335           <span class="indicator-untoggled glyphicon glyphicon-chevron-right text-grey"/>
336          </span>
337          </a>
338         </h4>
339        </div>
340
341        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
342         <div class="panel-body">
343          <table class="table table-condensed benchmark-table">
344           <thead>
345           <tr>
346           <th class="col-md-6">Benchmark name</th>
347           <th class="col-md-2 text-right">previous</th>
348           <th class="col-md-2 text-right">change</th>
349           <th class="col-md-2 text-right">now</th>
350           </tr>
351           </thead>
352           <tbody>
353            {{#each benchResults}}
354             <tr class="row-result row-{{changeType}}">
355             <td class="benchmark-name">
356              {{name}}
357              <a class="graph-link" title="Graphs" href="{{graphLink name ../../rev.summary.hash}}">
358               <span class="glyphicon glyphicon-signal"/>
359              </a>
360             </td>
361             <td class="text-right">{{previous}}</td>
362             <td class="text-right">{{change}}</td>
363             <td class="text-right">{{value}}</td>
364             </tr>
365            {{/each}}
366           </tbody>
367          </table>
368         </div>
369        </div> 
370       </div>
371      {{/each}}
372     </div>
373    </div>
374   </div>
375 </script>
376
377 <script id="graph" type="text/x-handlebars-template">
378  {{> nav}}
379
380  <div class="container">
381  <h2>{{benchName}}</h2>
382
383  <div id="benchChart" style="width:100%; height:400px">
384  </div>
385
386 </script>
387
388 <script id="compare" type="text/x-handlebars-template">
389  {{> nav}}
390
391  <div class="container">
392   <div class="row">
393    <div class="col-md-6 col-md-push-6">
394     {{#if rev1.summary}}{{#if rev2.summary}}
395     <h2>
396      Comparing
397       <code>{{shortRev rev1.summary.hash}}</code>..<code>{{shortRev rev2.summary.hash}}</code>
398     </h2>
399     <p>
400      Parents:
401      {{#each rev1.summary.parents}}
402       <a href="{{compareLink this ../rev2.summary.hash}}">{{shortRev this}}</a>
403      {{/each}}</br>
404       <a href="{{revisionLink rev1.summary.hash}}"><code>{{shortRev rev1.summary.hash}}</code></a> <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate rev1.summary.gitDate}}</abbrv>:<br/>
405      <strong>{{ rev1.summary.gitSubject }}</strong><br/>
406      {{#logLink rev1.summary.hash }}
407       <a href="{{link}}">buildlog</a>
408      {{/logLink}}
409     </p>
410     <p class="text-center">
411       ⁞<br/>
412       <a href="{{diffLink rev1.summary.hash rev2.summary.hash}}">View diff</a><br/>
413       ⁞
414     </p>
415     <p>
416      Parents:
417      {{#each rev2.summary.parents}}
418       <a href="{{compareLink ../rev1.summary.hash this}}">{{shortRev this}}</a>
419      {{/each}}</br>
420      <a href="{{revisionLink rev2.summary.hash}}"><code>{{shortRev rev2.summary.hash}}</code></a> <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate rev2.summary.gitDate}}</abbrv>:<br/>
421      <strong>{{ rev2.summary.gitSubject }}</strong><br/>
422      {{#logLink rev2.summary.hash }}
423       <a href="{{link}}">buildlog</a>
424      {{/logLink}}
425     </p>
426     {{/if}} {{/if}}
427    </div>
428
429    <div class="col-md-6 col-md-pull-6">
430     {{> nothing }}
431     <div class="panel-group" role="tablist">
432      {{#each groups}}
433       <div class="panel panel-default bench-panel">
434        <div class="panel-heading" role="tab" id="heading-{{@index}}">
435         <h4 class="panel-title">
436          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
437          {{groupName}}
438          <span class="stats pull-right">
439           {{> summary-icons groupStats}}
440           <span class="indicator-toggled glyphicon glyphicon-chevron-down text-grey"/>
441           <span class="indicator-untoggled glyphicon glyphicon-chevron-right text-grey"/>
442          </span>
443          </a>
444         </h4>
445        </div>
446
447        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
448         <div class="panel-body">
449          <table class="table table-condensed benchmark-table">
450           <thead>
451           <tr>
452           <th class="col-md-6">Benchmark name</th>
453           <th class="col-md-2 text-right">previous</th>
454           <th class="col-md-2 text-right">change</th>
455           <th class="col-md-2 text-right">now</th>
456           </tr>
457           </thead>
458           <tbody>
459            {{#each benchResults}}
460             <tr class="row-result row-{{changeType}}">
461             <td class="benchmark-name">
462              {{name}}
463              <a class="graph-link" title="Graphs" href="{{graphLink name ../../rev1.summary.hash ../../rev2.summary.hash}}">
464               <span class="glyphicon glyphicon-signal"/>
465              </a>
466             </td>
467             <td class="text-right">{{previous}}</td>
468             <td class="text-right">{{change}}</td>
469             <td class="text-right">{{value}}</td>
470             </tr>
471            {{/each}}
472           </tbody>
473          </table>
474         </div>
475        </div> 
476       </div>
477      {{/each}}
478     </div>
479    </div>
480   </div>
481 </script>
482
483 <script id="graph" type="text/x-handlebars-template">
484  {{> nav}}
485
486  <div class="container">
487  <h2>{{benchName}}</h2>
488
489  <div id="benchChart" style="width:100%; height:400px">
490  </div>
491
492  <p><button id="loadMore">Load older revisions</button></p>
493  </div>
494 </script>
495
496 </head>
497
498 <body>
499
500 <div id="main">
501 <div id="loading">
502 <p>
503 Loading...
504 </p>
505 <p>(If this does not disappear, then you do not have JavaScript enabled, or something else is broken.)</p>
506 </div>
507 </div>
508 </body>