diff options
| author |   chenjiankum <chenjiankun1@huawei.com> | 2016-10-12 16:01:39 +0800 |
|---|---|---|
| committer | chenjiankum <chenjiankun1@huawei.com> | 2016-10-12 17:28:32 +0800 |
| commit | 558d500782ddd935c59961f757dec052830a9524 (patch) | |
| tree | 7310b6e25fe62c53b3e2af23e3d1f1ad4ffcc088 /reporting/yardstick/template | |
| parent | baae6fe3223abd869d4de21e0c51fe44f6f6c846 (diff) | |
Add d3 graph presentation to yardstick reporting
JIRA: YARDSTICK-367
Change-Id: Ifa2cca1bdfc7d94a84758019d0b1693e09b46e47
Signed-off-by: chenjiankum <chenjiankun1@huawei.com>
Diffstat (limited to 'reporting/yardstick/template')
| -rw-r--r-- | reporting/yardstick/template/index-status-tmpl.html | 63 |
1 files changed, 55 insertions, 8 deletions
diff --git a/reporting/yardstick/template/index-status-tmpl.html b/reporting/yardstick/template/index-status-tmpl.html index 602ce8a..5a4dc34 100644 --- a/reporting/yardstick/template/index-status-tmpl.html +++ b/reporting/yardstick/template/index-status-tmpl.html @@ -3,9 +3,56 @@ <meta charset="utf-8"> <!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> - <link href="default.css" rel="stylesheet"> + <link href="../../../css/default.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> + <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> + <script type="text/javascript" src="../../../js/gauge.js"></script> + <script type="text/javascript" src="../../../js/trend.js"></script> + <script> + function onDocumentReady() { + // Gauge management + {% for scenario in scenario_results.keys() -%} + var gaugeScenario{{loop.index}} = gauge('#gaugeScenario{{loop.index}}'); + {%- endfor %} + // assign success rate to the gauge + function updateReadings() { + {% for scenario in scenario_results.keys() -%} + gaugeScenario{{loop.index}}.update({{scenario_results[scenario].getScorePercent()}}); + {%- endfor %} + } + updateReadings(); + } + + // trend line management + //d3.csv("./scenario_history.txt", function(data) { + d3.csv("./scenario_history.txt", function(data) { + // *************************************** + // Create the trend line + {% for scenario in scenario_results.keys() -%} + // for scenario {{scenario}} + // Filter results + var trend{{loop.index}} = data.filter(function(row) { + return row["scenario"]=="{{scenario}}" && row["installer"]=="{{installer}}"; + }) + // Parse the date + trend{{loop.index}}.forEach(function(d) { + d.date = parseDate(d.date); + d.score = +d.score + }); + // Draw the trend line + var mytrend = trend("#trend_svg{{loop.index}}",trend{{loop.index}}) + // **************************************** + {%- endfor %} + }); + if ( !window.isLoaded ) { + window.addEventListener("load", function() { + onDocumentReady(); + }, false); + } else { + onDocumentReady(); + } + </script> <script type="text/javascript"> $(document).ready(function (){ $(".btn-more").click(function() { @@ -18,10 +65,10 @@ <body> <div class="container"> <div class="masthead"> - <h3 class="text-muted">Yardstick status page ({{version}})</h3> + <h3 class="text-muted">Yardstick status page ({{version}}, {{date}})</h3> <nav> <ul class="nav nav-justified"> - <li class="active"><a href="index.html">Home</a></li> + <li class="active"><a href="http://testresults.opnfv.org/reporting/index.html">Home</a></li> <li><a href="index-status-apex.html">Apex</a></li> <li><a href="index-status-compass.html">Compass</a></li> <li><a href="index-status-fuel.html">Fuel</a></li> @@ -42,15 +89,15 @@ <tr> <th width="40%">Scenario</th> <th width="20%">Status</th> - <th width="20%">Last 4 Iterations</th> - <th width="20%">Last 10 Days</th> + <th width="20%">Trend</th> + <th width="10%">Last 4 Iterations</th> + <th width="10%">Last 10 Days</th> </tr> {% for scenario,result in scenario_results.iteritems() -%} <tr class="tr-ok"> <td>{{scenario}}</td> - <td> - <img src="../../img/gauge_{{ scenario_results[scenario].getStatus() }}.png"> - </td> + <td><div id="gaugeScenario{{loop.index}}"></div></td> + <td><div id="trend_svg{{loop.index}}"></div></td> <td>{{scenario_results[scenario].getFourDaysScore()}}</td> <td>{{scenario_results[scenario].getTenDaysScore()}}</td> </tr> |