diff options
Diffstat (limited to 'utils/test/result_collection_api/tools/dashboard')
4 files changed, 224 insertions, 0 deletions
diff --git a/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.css b/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.css new file mode 100644 index 000000000..fc7f248b9 --- /dev/null +++ b/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.css @@ -0,0 +1,53 @@ +/* Page CSS*/
+body {
+ background-color:#000000;
+ font: 10px "Comic Sans MS" ;
+ color: orange;
+}
+#title {
+ font-size: 30px;
+}
+
+#tests {
+ font-size: 20px;
+ color: white;
+}
+
+#test_unit {
+ position: relative;
+ left: 200px;
+}
+
+/* Chart CSS */
+.chart {
+ border: 1px dashed orange;
+ margin: 5px;
+ padding: 2px;
+ width: 600px;
+ height:300px;
+ float:left;
+}
+
+/* Dygraph CSS */
+/* This applies to the title, x-axis label and y-axis label */
+#div_g .dygraph-label {
+ font-family: Arial, Helvetica, sans-serif;
+}
+/* This rule only applies to the chart title */
+#div_g .dygraph-title {
+ font-size: 12px;
+ color : orange;
+}
+ /* This rule only applies to the y-axis label */
+#div_g .dygraph-ylabel {
+ font-size: 10px;
+ color : orange;
+}
+
+/* Overrides dygraph-legend */
+.dygraph-legend {
+ font-size: 10px !important;
+ width: 400px !important;
+ text-align: left !important;
+ left: 200px !important;
+}
diff --git a/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.html b/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.html new file mode 100644 index 000000000..908624afe --- /dev/null +++ b/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.html @@ -0,0 +1,25 @@ +<!--
+##############################################################################
+# All rights reserved. This program and the accompanying materials
+# are made available under the terms of the Apache License, Version 2.0
+# which accompanies this distribution, and is available at
+# http://www.apache.org/licenses/LICENSE-2.0
+##############################################################################
+-->
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <title>OPNFV Functest</title>
+ <script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script>
+ <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+ <script type="text/javascript" src="opnfv_dashboard_tests_conf.json"></script>
+ <link rel="stylesheet" href="opnfv_dashboard_tests.css">
+ </head>
+ <body>
+ <div id="title">FuncTest</div>
+ <div id="tests"></div>
+ <script type="text/javascript" src="opnfv_dashboard_tests.js"></script>
+ </body>
+</html>
diff --git a/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.js b/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.js new file mode 100644 index 000000000..93c75c3cb --- /dev/null +++ b/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests.js @@ -0,0 +1,117 @@ +/*#############################################################################
+# All rights reserved. This program and the accompanying materials
+# are made available under the terms of the Apache License, Version 2.0
+# which accompanies this distribution, and is available at
+# http://www.apache.org/licenses/LICENSE-2.0
+##############################################################################
+*/
+
+// Function to sort data to be ordered according to the time
+function sortFunction(a,b){
+ var dateA = new Date(a.date).getTime();
+ var dateB = new Date(b.date).getTime();
+ return dateA > dateB ? 1 : -1;
+};
+
+// Function to format date according to JS
+function formatDate(inputDate){
+ var input=inputDate.slice(0,-7);
+ input=input.replace(' ','T');
+ input+='Z';
+ return new Date(Date.parse(input));
+}
+
+// Draw a single graph for a specific test for a specific installer
+function drawGraph(filename,installer,test_unit){
+ $.getJSON( filename, function(data) {
+ var serie=[];
+ index_test=0;
+ // find index mapping to the test_unit
+ for (var i=0;i<data.dashboard.length;i++)
+ if (data.dashboard[i].name==test_unit){index_test=i; break;}
+
+ // build the data according to dygraph
+ for (i=0;i<data.dashboard[index_test].data_set.length;i++) {
+ var d=[];
+ result=data.dashboard[index_test].data_set[i];
+ d.push(formatDate(result.x));
+
+ // push y data if available
+ var keys=Object.keys(result);
+ for (var y in opnfv_dashboard_ys)
+ if ($.inArray(opnfv_dashboard_ys[y], keys)!=-1) d.push(result[opnfv_dashboard_ys[y]]);
+ serie.push(d);
+ };
+
+ // sort by date/time
+ serie.sort(function(a,b){
+ return new Date(a[0]).getTime()-new Date(b[0]).getTime()
+ });
+
+ // Label management
+ var yLabel='';
+ if (test_unit.includes('nb'))
+ yLabel='number';
+ else if (test_unit.includes('duration'))
+ yLabel='seconds';
+ var labels=[];
+ labels.push('time');
+ var keys=Object.keys(data.dashboard[index_test].info);
+ for (var y in opnfv_dashboard_y_labels)
+ if ($.inArray(opnfv_dashboard_y_labels[y], keys)!=-1) labels.push(data.dashboard[index_test].info[opnfv_dashboard_y_labels[y]]);
+
+ // Draw the graph
+ g=new Dygraph(
+ document.getElementById(installer),
+ serie,
+ {
+ colors:[opnfv_dashboard_graph_color_ok, opnfv_dashboard_graph_color_nok, opnfv_dashboard_graph_color_other],
+ fillGraph:true,
+ legend:opnfv_dashboard_graph_legend,
+ title:installer,
+ titleHeight:opnfv_dashboard_graph_title_height,
+ ylabel:yLabel,
+ labelsDivStyles:{
+ 'text-align': opnfv_dashboard_graph_text_align,
+ 'background-color': opnfv_dashboard_graph_background_color
+ },
+ axisLabelColor:opnfv_dashboard_graph_axis_label_color,
+ labels:labels,
+ highlightSeriesOpts:{strokeWidth:opnfv_dashboard_graph_stroke_width},
+ stepPlot:true
+ }
+ );
+});
+}
+
+// function to generate all the graphs for all installers
+function drawGraphsSerie(project,test,test_unit) {
+ for (i=0;i<opnfv_dashboard_installers.length;i++){
+ var filename='./'+opnfv_dashboard_file_directory+'/'+project+'/'+opnfv_dashboard_file_prefix+project+'_'+test+'_'+opnfv_dashboard_installers[i]+opnfv_dashboard_file_suffix;
+ drawGraph(filename,opnfv_dashboard_installers[i],test_unit);
+ }
+}
+
+// generate text and buttons for each test and unit test
+var text_html='';
+for (var i in opnfv_dashboard_projects)
+ for (var project in opnfv_dashboard_projects[i])
+ for (var test in opnfv_dashboard_projects[i][project]){
+ text_html+=test+' ';
+ for (var t in opnfv_dashboard_projects[i][project][test]){
+ test_unit=opnfv_dashboard_projects[i][project][test][t];
+ text_html+='<button onClick="drawGraphsSerie(\''+project+'\',\''+test +'\',\''+test_unit+'\')">'+test_unit+'</button>';
+ }
+ text_html+='<br>';
+ }
+document.getElementById('tests').innerHTML=text_html;
+
+// debug
+console.log(text_html);
+
+// generate a div per installer (to host the graph)
+for (var i in opnfv_dashboard_installers){
+ var div_installer='<div class= "chart" id="'+opnfv_dashboard_installers[i]+'"/>'
+ var $newdiv=$(div_installer);
+ $("body").append($newdiv);
+}
diff --git a/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests_conf.json b/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests_conf.json new file mode 100644 index 000000000..07c1a5e85 --- /dev/null +++ b/utils/test/result_collection_api/tools/dashboard/opnfv_dashboard_tests_conf.json @@ -0,0 +1,29 @@ +var opnfv_dashboard_installers=['apex','compass','fuel','joid'];
+var opnfv_dashboard_projects=[
+ {
+ 'functest':{
+ 'tempest':['Tempest duration','Tempest nb tests/nb failures'],
+ 'vPing':['vPing duration'],
+ 'vPing_userdata':['vPing_userdata duration'],
+ 'vIMS':['vIMS nb tests passed/failed/skipped','vIMS orchestrator/VNF/test duration']
+ }
+ }
+];
+
+var opnfv_dashboard_file_directory='res';
+var opnfv_dashboard_file_prefix='res_';
+var opnfv_dashboard_file_suffix='.json';
+
+var opnfv_dashboard_ys=['y','y1','y2','y3'];
+var opnfv_dashboard_y_labels=['ylabel','y1label','y2label','y3label'];
+
+var opnfv_dashboard_graph_color_ok="#00FF00";
+var opnfv_dashboard_graph_color_nok="#FF0000";
+var opnfv_dashboard_graph_color_other="#0000FF";
+
+var opnfv_dashboard_graph_legend='always'; // legend print
+var opnfv_dashboard_graph_title_height=30; // height for the graph title
+var opnfv_dashboard_graph_stroke_width=5; // line stroke when mouse over
+var opnfv_dashboard_graph_axis_label_color='orange';
+var opnfv_dashboard_graph_text_align='right';
+var opnfv_dashboard_graph_background_color='transparent';
|