59036ef81b7ca5d11150c817f4f142d671b9060a
[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-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="{{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     <div class="panel-group" role="tablist">
213      {{#each benchGroups}}
214       <div class="panel panel-default">
215        <div class="panel-heading" role="tab" id="heading-{{@index}}">
216         <h4 class="panel-title">
217          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
218          {{groupName}}
219          </a>
220         </h4>
221        </div>
222
223        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
224         <div class="panel-body">
225          <table class="table table-condensed benchmark-table">
226           <thead>
227           <tr>
228            <th class="col-md-6">Benchmark name</th>
229           </tr>
230           </thead>
231           <tbody>
232            {{#each groupMembers}}
233             <tr>
234             <td class="benchmark-name">
235              {{this}}
236              <a class="graph-link" title="Graphs" href="{{graphLink this}}">
237               <span class="glyphicon glyphicon-signal"/>
238              </a>
239             </td>
240             </tr>
241            {{/each}}
242           </tbody>
243          </table>
244         </div>
245        </div> 
246       </div>
247      {{/each}}
248     </div>
249    </div>
250 </script>
251
252 <script id="index" type="text/x-handlebars-template">
253  {{> nav}}
254  <div class="container">
255   <h1>Recent commits</h1>
256   {{> summary-list (recentCommits revisions)}}
257  </div>
258  <div class="container">
259   <p class="text-center">
260     <a href="{{allLink}}">view older commits...</a>
261   </p>
262  </div>
263 </script>
264
265 <script id="complete" type="text/x-handlebars-template">
266  {{> nav}}
267  <div class="container">
268   <h1>All commits</h1>
269   {{> summary-list (allCommits revisions)}}
270  </div>
271 </script>
272
273
274 <script id="revision" type="text/x-handlebars-template">
275  {{> nav}}
276
277  <div class="container">
278   <div class="row">
279    <div class="col-md-6 col-md-push-6">
280     {{#if rev.summary}}
281     <h2>
282      Commit {{shortRev rev.summary.hash}}
283     </h2>
284     <p>
285     {{#if rev.summary.parents}}
286     Displaying changes since:  
287     {{#with (lookup rev.summary.parents 0)}}
288       <a href="{{revisionLink this}}"><code>{{shortRev this}}</code></a> – 
289       <a href="{{diffLink this ../rev.summary.hash}}">View diff</a>
290     {{/with}} –
291     {{#logLink rev.summary.hash }}
292       <a href="{{link}}">View buildlog</a> –
293     {{/logLink}}
294       {{> summary-icons rev.summary.stats }}
295     {{else}}
296     No parent commit found.
297     {{/if}}
298     </p> 
299     <pre>{{rev.gitLog}}</pre>
300     {{/if}}
301    </div>
302
303    <div class="col-md-6 col-md-pull-6">
304     {{> nothing }}
305     <div class="panel-group" role="tablist">
306      {{#each groups}}
307       <div class="panel panel-default bench-panel">
308        <div class="panel-heading" role="tab" id="heading-{{@index}}">
309         <h4 class="panel-title">
310          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
311          {{groupName}}
312          <span class="stats pull-right">
313           {{> summary-icons groupStats}}
314           <span class="indicator-toggled glyphicon glyphicon-chevron-down text-grey"/>
315           <span class="indicator-untoggled glyphicon glyphicon-chevron-right text-grey"/>
316          </span>
317          </a>
318         </h4>
319        </div>
320
321        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
322         <div class="panel-body">
323          <table class="table table-condensed benchmark-table">
324           <thead>
325           <tr>
326           <th class="col-md-6">Benchmark name</th>
327           <th class="col-md-2 text-right">previous</th>
328           <th class="col-md-2 text-right">change</th>
329           <th class="col-md-2 text-right">now</th>
330           </tr>
331           </thead>
332           <tbody>
333            {{#each benchResults}}
334             <tr class="row-result row-{{changeType}}">
335             <td class="benchmark-name">
336              {{name}}
337              <a class="graph-link" title="Graphs" href="{{graphLink name ../../rev.summary.hash}}">
338               <span class="glyphicon glyphicon-signal"/>
339              </a>
340             </td>
341             <td class="text-right">{{previous}}</td>
342             <td class="text-right">{{change}}</td>
343             <td class="text-right">{{value}}</td>
344             </tr>
345            {{/each}}
346           </tbody>
347          </table>
348         </div>
349        </div> 
350       </div>
351      {{/each}}
352     </div>
353    </div>
354   </div>
355 </script>
356
357 <script id="graph" type="text/x-handlebars-template">
358  {{> nav}}
359
360  <div class="container">
361  <h2>{{benchName}}</h2>
362
363  <div id="benchChart" style="width:100%; height:400px">
364  </div>
365
366  <p><button id="loadMore">Load older revisions</button></p>
367  </div>
368 </script>
369
370 <script id="compare" type="text/x-handlebars-template">
371  {{> nav}}
372
373  <div class="container">
374   <div class="row">
375    <div class="col-md-6 col-md-push-6">
376     {{#if rev1.summary}}{{#if rev2.summary}}
377     <h2>
378      Comparing
379       <code>{{shortRev rev1.summary.hash}}</code>..<code>{{shortRev rev2.summary.hash}}</code>
380     </h2>
381     <p>
382      Parents:
383      {{#each rev1.summary.parents}}
384       <a href="{{compareLink this ../rev2.summary.hash}}">{{shortRev this}}</a>
385      {{/each}}</br>
386       <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/>
387      <strong>{{ rev1.summary.gitSubject }}</strong><br/>
388      {{#logLink rev1.summary.hash }}
389       <a href="{{link}}">buildlog</a>
390      {{/logLink}}
391     </p>
392     <p class="text-center">
393       ⁞<br/>
394       <a href="{{diffLink rev1.summary.hash rev2.summary.hash}}">View diff</a><br/>
395       ⁞
396     </p>
397     <p>
398      Parents:
399      {{#each rev2.summary.parents}}
400       <a href="{{compareLink ../rev1.summary.hash this}}">{{shortRev this}}</a>
401      {{/each}}</br>
402      <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/>
403      <strong>{{ rev2.summary.gitSubject }}</strong><br/>
404      {{#logLink rev2.summary.hash }}
405       <a href="{{link}}">buildlog</a>
406      {{/logLink}}
407     </p>
408     {{/if}} {{/if}}
409    </div>
410
411    <div class="col-md-6 col-md-pull-6">
412     {{> nothing }}
413     <div class="panel-group" role="tablist">
414      {{#each groups}}
415       <div class="panel panel-default bench-panel">
416        <div class="panel-heading" role="tab" id="heading-{{@index}}">
417         <h4 class="panel-title">
418          <a class="accordion-toggle" data-toggle="collapse" href="#table-{{@index}}">
419          {{groupName}}
420          <span class="stats pull-right">
421           {{> summary-icons groupStats}}
422           <span class="indicator-toggled glyphicon glyphicon-chevron-down text-grey"/>
423           <span class="indicator-untoggled glyphicon glyphicon-chevron-right text-grey"/>
424          </span>
425          </a>
426         </h4>
427        </div>
428
429        <div id="table-{{@index}}" class="panel-collapse collapse in" role="tabpanel">
430         <div class="panel-body">
431          <table class="table table-condensed benchmark-table">
432           <thead>
433           <tr>
434           <th class="col-md-6">Benchmark name</th>
435           <th class="col-md-2 text-right">previous</th>
436           <th class="col-md-2 text-right">change</th>
437           <th class="col-md-2 text-right">now</th>
438           </tr>
439           </thead>
440           <tbody>
441            {{#each benchResults}}
442             <tr class="row-result row-{{changeType}}">
443             <td class="benchmark-name">
444              {{name}}
445              <a class="graph-link" title="Graphs" href="{{graphLink name ../../rev1.summary.hash ../../rev2.summary.hash}}">
446               <span class="glyphicon glyphicon-signal"/>
447              </a>
448             </td>
449             <td class="text-right">{{previous}}</td>
450             <td class="text-right">{{change}}</td>
451             <td class="text-right">{{value}}</td>
452             </tr>
453            {{/each}}
454           </tbody>
455          </table>
456         </div>
457        </div> 
458       </div>
459      {{/each}}
460     </div>
461    </div>
462   </div>
463 </script>
464
465 <script id="graph" type="text/x-handlebars-template">
466  {{> nav}}
467
468  <div class="container">
469  <h2>{{benchName}}</h2>
470
471  <div id="benchChart" style="width:100%; height:400px">
472  </div>
473
474  <p><button id="loadMore">Load older revisions</button></p>
475  </div>
476 </script>
477
478 </head>
479
480 <body>
481
482 <div id="main">
483 <div id="loading">
484 <p>
485 Loading...
486 </p>
487 <p>(If this does not disappear, then you do not have JavaScript enabled, or something else is broken.)</p>
488 </div>
489 </div>
490 </body>