Add gauge metrics for Functest reporting dashboard
[releng.git] / utils / test / reporting / functest / template / index-status-tmpl.html
1  <html>
2   <head>
3     <meta charset="utf-8">
4     <!-- Bootstrap core CSS -->
5     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
6     <link href="default.css" rel="stylesheet">
7     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
8     <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
9     <script type="text/javascript">
10     $(document).ready(function (){
11         $(".btn-more").click(function() {
12             $(this).hide();
13             $(this).parent().find(".panel-default").show();
14         });
15     })
16     </script>
17   </head>
18     <body>
19     <div class="container">
20       <div class="masthead">
21         <h3 class="text-muted">Functest status page ({{version}})</h3>
22         <nav>
23           <ul class="nav nav-justified">
24             <li class="active"><a href="http://testresults.opnfv.org/reporting/index.html">Home</a></li>
25             <li><a href="index-status-apex.html">Apex</a></li>
26             <li><a href="index-status-compass.html">Compass</a></li>
27             <li><a href="index-status-fuel.html">Fuel</a></li>
28             <li><a href="index-status-joid.html">Joid</a></li>
29           </ul>
30         </nav>
31       </div>
32 <div class="row">
33     <div class="col-md-1"></div>
34     <div class="col-md-10">
35         <div class="page-header">
36             <h2>{{installer}}</h2>
37         </div>
38
39         <div class="scenario-overview">
40             <div class="panel-heading"><h4><b>List of last scenarios ({{version}}) run over the last {{period}} days </b></h4></div>
41                 <table class="table">
42                     <tr>
43                         <th width="60%">Scenario</th>
44                         <th width="20%">Status</th>
45                         <th width="10%">Score</th>
46                         <th width="10%">Iteration</th>
47                     </tr>
48                         {% for scenario,iteration in scenario_stats.iteritems() -%}
49                             <tr class="tr-ok">
50                                 <td>{{scenario}}</td>
51                                 <td>{%if scenario_results[scenario].getScorePercent() < 8.3 -%}
52                                         <img src="../../img/gauge_0.png">
53                                     {%elif scenario_results[scenario].getScorePercent() < 16.7 -%}
54                                         <img src="../../img/gauge_8.3.png">
55                                     {%elif scenario_results[scenario].getScorePercent() < 25 -%}
56                                         <img src="../../img/gauge_16.7.png">
57                                     {%elif scenario_results[scenario].getScorePercent() < 33.3 -%}
58                                         <img src="../../img/gauge_25.png">
59                                     {%elif scenario_results[scenario].getScorePercent() < 41.7 -%}
60                                         <img src="../../img/gauge_33.3.png">
61                                     {%elif scenario_results[scenario].getScorePercent() < 50 -%}
62                                         <img src="../../img/gauge_41.7.png">
63                                     {%elif scenario_results[scenario].getScorePercent() < 58.3 -%}
64                                         <img src="../../img/gauge_50.png">
65                                     {%elif scenario_results[scenario].getScorePercent() < 66.7 -%}
66                                         <img src="../../img/gauge_58.3.png">
67                                     {%elif scenario_results[scenario].getScorePercent() < 75 -%}
68                                         <img src="../../img/gauge_66.7.png">
69                                     {%elif scenario_results[scenario].getScorePercent() < 83.3 -%}
70                                         <img src="../../img/gauge_75.png">
71                                     {%elif scenario_results[scenario].getScorePercent() < 91.7 -%}
72                                         <img src="../../img/gauge_83.3.png">
73                                     {%elif scenario_results[scenario].getScorePercent() < 100 -%}
74                                         <img src="../../img/gauge_91.7.png">
75                                     {%- else -%}
76                                         <img src="../../img/gauge_100.png">
77                                 {%- endif %}</td>
78                                 <td>{{scenario_results[scenario].getScore()}}</td>
79                                 <td>{{iteration}}</td>
80                             </tr>
81                             {%- endfor %}
82                         </table>
83         </div>
84
85
86         {% for scenario, iteration in scenario_stats.iteritems() -%}
87         <div class="scenario-part">
88             <div class="page-header">
89                 <h3><span class="glyphicon glyphicon-chevron-right"> <b>{{scenario}}</b></h3>
90             </div>
91                     <div class="panel panel-default">
92                     <div class="panel-heading">
93                         <span class="panel-header-item">
94                         </span>
95                     </div>
96                     <table class="table">
97                         <tr>
98                             {% for test in items[scenario] -%}
99                             <th>
100                             {% if test.getCriteria() > -1 -%}
101                             {{test.getDisplayName() }}
102                             {%- endif %}
103                             {% if test.getTier() > 3 -%}
104                             *
105                             {%- endif %}
106                              </th>
107                             {%- endfor %}
108                         </tr>
109                         <tr class="tr-weather-weather">
110                             {% for test in items[scenario] -%}
111                             {% if test.getCriteria() > 2 -%}
112                                 <td><img src="../../img/weather-clear.png"></td>
113                             {%- elif test.getCriteria() > 1 -%}
114                                 <td><img src="../../img/weather-few-clouds.png"></td>
115                             {%- elif test.getCriteria() > 0 -%}
116                                 <td><img src="../../img/weather-overcast.png"></td>
117                             {%- elif test.getCriteria() > -1 -%}
118                                 <td><img src="../../img/weather-storm.png"></td>
119                             {%- endif %}
120                             {%- endfor %}
121                         </tr>
122                     </table>
123                 </div>
124         </div>
125         {%- endfor %}
126     see <a href="https://wiki.opnfv.org/pages/viewpage.action?pageId=6828617">Functest scoring wiki page</a> for details on scenario scoring
127     </div>
128     <div class="col-md-1"></div>
129 </div>