utils/test/result_collection_api/tools/dashboard/js/opnfv_dashboard_tests.js

   1 /*#############################################################################\r
   2 # All rights reserved. This program and the accompanying materials\r
   3 # are made available under the terms of the Apache License, Version 2.0\r
   4 # which accompanies this distribution, and is available at\r
   5 # http://www.apache.org/licenses/LICENSE-2.0\r
   6 ##############################################################################\r
   7 */\r
   8 \r
   9 // Function to format date according to JS\r
  10 function format_date(inputDate){\r
  11     var input = inputDate.slice(0,-7);\r
  12     input=input.replace(' ','T');\r
  13     input+='Z';\r
  14     return new Date(Date.parse(input));\r
  15 }\r
  16 \r
  17 // Draw a single graph for a specific test for a specific installer\r
  18 function draw_graph_per_scenario_per_installer (filename, installer, scenario, test_unit){\r
  19     $.getJSON(filename, function(data) {\r
  20     var serie = [];\r
  21     index_test = 0;\r
  22     // find index mapping to the test_unit\r
  23     for (var i=0; i<data.dashboard.length; i++)\r
  24         if (data.dashboard[i].name==test_unit){\r
  25                index_test=i;\r
  26            break;\r
  27         }\r
  28 \r
  29     // build the data according to dygraph\r
  30     for (i=0; i<data.dashboard[index_test].data_set.length; i++) {\r
  31         var d = [];\r
  32         result = data.dashboard[index_test].data_set[i];\r
  33         d.push(format_date(result.x));\r
  34 \r
  35         // push y data if available\r
  36         var keys = Object.keys(result);\r
  37         for (var y in opnfv_dashboard_ys)\r
  38            if ($.inArray(opnfv_dashboard_ys[y], keys)!=-1) d.push(result[opnfv_dashboard_ys[y]]);\r
  39                serie.push(d);\r
  40     };\r
  41 \r
  42     // sort by date/time\r
  43     serie.sort(function(a,b){\r
  44         return new Date(a[0]).getTime()-new Date(b[0]).getTime()\r
  45     });\r
  46 \r
  47     // Label management\r
  48     var yLabel = '';\r
  49     if (test_unit.includes('nb'))\r
  50         yLabel = 'number';\r
  51     else if (test_unit.includes('duration'))\r
  52         yLabel = 'seconds';\r
  53     var labels = [];\r
  54     labels.push('time');\r
  55     var keys = Object.keys(data.dashboard[index_test].info);\r
  56     for (var y in opnfv_dashboard_y_labels)\r
  57         if ($.inArray(opnfv_dashboard_y_labels[y], keys)!=-1) labels.push(data.dashboard[index_test].info[opnfv_dashboard_y_labels[y]]);\r
  58 \r
  59     // Draw the graph\r
  60     g=new Dygraph(\r
  61         document.getElementById(scenario),\r
  62         serie,\r
  63         {\r
  64             colors: [opnfv_dashboard_graph_color_ok, opnfv_dashboard_graph_color_nok, opnfv_dashboard_graph_color_other],\r
  65             fillGraph: true,\r
  66             legend: opnfv_dashboard_graph_legend,\r
  67             title: scenario,\r
  68             titleHeight: opnfv_dashboard_graph_title_height,\r
  69             ylabel: yLabel,\r
  70             labelsDivStyles: {\r
  71                 'text-align': opnfv_dashboard_graph_text_align,\r
  72                 'background-color': opnfv_dashboard_graph_background_color\r
  73             },\r
  74             axisLabelColor: opnfv_dashboard_graph_axis_label_color,\r
  75             labels: labels,\r
  76             highlightSeriesOpts: {strokeWidth: opnfv_dashboard_graph_stroke_width},\r
  77             stepPlot: true\r
  78         }\r
  79     );\r
  80 });\r
  81 }\r
  82 \r
  83 // function to generate all the graphs for all installers\r
  84 function draw_graphs_all_scenarios_per_installer () {\r
  85     installer = opnfv_dashboard_installer;\r
  86     project = opnfv_dashboard_project;\r
  87     test = opnfv_dashboard_test;\r
  88     test_unit = opnfv_dashboard_test_unit;\r
  89 \r
  90     if (installer.length==0){\r
  91         alert ('select an installer');\r
  92         return;\r
  93     }\r
  94     if (test.length==0){\r
  95         alert ('select a test case');\r
  96         return;\r
  97     }\r
  98     for (i=0; i<opnfv_dashboard_installers_scenarios[installer].length; i++){\r
  99         var filename = './' + opnfv_dashboard_file_directory + '/' + installer + '/' + project + '/' + opnfv_dashboard_file_prefix + project+'_'+test+'_'+opnfv_dashboard_installers_scenarios[installer][i]+opnfv_dashboard_file_suffix;\r
 100         console.log(filename);\r
 101         draw_graph_per_scenario_per_installer(filename, installer, opnfv_dashboard_installers_scenarios[installer][i], test_unit);\r
 102     }\r
 103 }\r
 104 \r
 105 function on_testcase_draw_graph(test, test_unit){\r
 106     opnfv_dashboard_test = test;\r
 107     opnfv_dashboard_test_unit = test_unit;\r
 108     show_divs(opnfv_dashboard_installer);\r
 109     draw_graphs_all_scenarios_per_installer();\r
 110     $("#testcase_selected").html(test_unit);\r
 111 }\r
 112 \r
 113 function on_installer_draw_graph(installer){\r
 114    opnfv_dashboard_installer = installer;\r
 115    show_installers(installer);\r
 116    show_divs(installer);\r
 117    draw_graphs_all_scenarios_per_installer ();\r
 118 }\r
 119 \r
 120 // generate test case selection\r
 121 function show_testcases(){\r
 122     var html_testcases = '<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select a test case';\r
 123     html_testcases += '<span class="caret"></span></button>';\r
 124     html_testcases += '<ul class="dropdown-menu">';\r
 125 \r
 126     var family_testcases = Object.keys(opnfv_dashboard_testcases)\r
 127     for (var i in family_testcases){\r
 128         html_testcases += '<li class="dropdown-header">' + family_testcases[i] + '</li>';\r
 129         var testcase = family_testcases[i];\r
 130         family_tests = Object.keys(opnfv_dashboard_testcases[testcase]);\r
 131         for (var j in family_tests){\r
 132             var test = family_tests[j];\r
 133             family_tests_units = Object.keys(opnfv_dashboard_testcases[testcase][test]);\r
 134             for (var k in family_tests_units){\r
 135                 test_unit = opnfv_dashboard_testcases[testcase][test][k];\r
 136                 html_testcases += '<li><a href="#"  onClick="on_testcase_draw_graph(\''+ test +'\',\''+test_unit +'\')">' + opnfv_dashboard_testcases[testcase][test][k] + '</a></li>';\r
 137             }\r
 138         }\r
 139     }\r
 140     html_testcases+='</ul>';\r
 141     $("#testcase").html(html_testcases);\r
 142 }\r
 143 \r
 144 // generate installers buttons\r
 145 function show_installers(active_installer)\r
 146 {\r
 147     var html_installers = '';\r
 148     html_installers += '<ul class="nav nav-pills">';\r
 149     for (var i in opnfv_dashboard_installers)\r
 150         if (opnfv_dashboard_installers[i]==active_installer)\r
 151             html_installers += '<li class="active"><a href="#" onClick="on_installer_draw_graph(\''+opnfv_dashboard_installers[i]+'\')">'+opnfv_dashboard_installers[i]+'</a></li>';         \r
 152                 else\r
 153                     html_installers += '<li><a href="#" onClick="on_installer_draw_graph(\''+opnfv_dashboard_installers[i]+'\')">'+opnfv_dashboard_installers[i]+'</a></li>';\r
 154     html_installers += '</ul>';\r
 155     $("#installers").html(html_installers);\r
 156 }\r
 157 \r
 158 // generate a div per installer (to host the graph)\r
 159 function show_divs(installer){\r
 160   $("#graphs").remove();\r
 161   $("body").append('<div id="graphs">');\r
 162   for (var i in opnfv_dashboard_installers_scenarios[installer]){\r
 163     var div_scenario = '<div class= "chart" id="' + opnfv_dashboard_installers_scenarios[installer][i] + '"/>';\r
 164 console.log(div_scenario);\r
 165     var $newdiv = $(div_scenario);\r
 166 \r
 167     $("#graphs").append($newdiv);\r
 168   }\r
 169 }\r
 170 \r
 171 // generate HTML menus and buttons\r
 172 $( document ).ready(function(){\r
 173   show_installers('');\r
 174   show_testcases();\r
 175   console.log( "ready!" );\r
 176 });\r