summaryrefslogtreecommitdiff
path: root/web-app/static/index.html
blob: 9024e592a07b1cd1abdc27bc4ca46755c739eb2f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
  <link href='http://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css' rel='stylesheet' type='text/css'>

  <script type='text/javascript' src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type='text/javascript' src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
  <script type='text/javascript' src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

  <style>
   h1,h2,h3 { font-family: ‘Merriweather Sans’, Arial, serif; font-weight: 700; }
   BODY { font-family: ‘Merriweather Sans’, Arial, serif; font-weight: 400; }
  </style>

<script type="text/javascript">

$(function() {
   // get the set of categorization data
   $.getJSON("/results/all-categorization", function(data) {
      data['Branch'].forEach(function(value, index) {
         var branch = value['n.name'];
         data['OS'].forEach(function(value, index) {
            var distro = value['n.distro'];
            var version = value['n.version'];
            var div_name = branch + ":" + distro + ":" + version;
            
            $("<div>", {
               'id': div_name,
               css: { "height": "450px", "width": "90%" }
            }).appendTo($("#chartContainer"));
            $("<br>").appendTo($("#chartContainer"));

            create_chart(div_name, branch, distro, version, 60);
         });
      });
   });
});

function create_chart(div_name, branch, distro, version, max_results) {
   var div_name = branch + ":" + distro + ":" + version;

   $.getJSON( "/results/tempest?count=" + max_results + "&branch=" + branch + "&osdistro=" + distro + "&osversion=" + version, function(data) {
      var failureDataPoints = [];
      var skippedDataPoints = [];
      var passingDataPoints = [];
      
      $.each(data, function (index, value) {
         if (value['t.all_tests'] > 0) {
            failureDataPoints.unshift({label: value['t.lava_job'], y: value['t.failing_tests']});
            skippedDataPoints.unshift({label: value['t.lava_job'], y: value['t.skipped_tests']});
            passingDataPoints.unshift({label: value['t.lava_job'], y: value['t.passing_tests']});
         }
      });

      var chart = new CanvasJS.Chart(div_name,
         {
            title: {
              text: "Branch \"" + branch + "\" on \"" + distro + "/" + version + "\" (up to last " + max_results + " results)"
            },
            legend: {
               cursor: "pointer",
               itemclick: function (e) {
                  if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                     e.dataSeries.visible = false;
                  } else {
                     e.dataSeries.visible = true;
                  }
                  e.chart.render();
               }
            },
            axisY: {title: "# of Tests" },
            axisX: {title: "Test Job", prefix: "Job " }, 
            toolTip: { 
               content: function(e) {
                  var content;
                  content = e.entries[0].dataSeries.name + " <strong>"+ e.entries[0].dataPoint.y  ;
                  return content;
               }            
            },
            animationEnabled: true,
            zoomEnabled: true, 
            data: [
               {
                  name: "Skipped Tests", showInLegend: true,
                  type: "stackedColumn",
                  color: "rgba(54,158,173,.7)",
                  dataPoints: skippedDataPoints
               },
               {
                  name: "Failing Tests", showInLegend: true,
                  type: "stackedColumn",
                  color: "rgba(194,70,66,.7)",
                  dataPoints: failureDataPoints
               },
               {
                  name: "Passing Tests", showInLegend: true,
                  type: "stackedColumn",
                  color: "rgba(54,200,30,.7)",
                  dataPoints: passingDataPoints
               }              
            ]
         });

         chart.render();
   });
}

</script>


</head>
<body>
<img src="http://www.linaro.org/app/images/linaro-logo-web.png"/>
<h1>Linaro Openstack CI</h1>

<p>
Linaro runs Openstack Tempest on arm64 on a nighty schedule.  For more information on the hardware and test methodology, see <a href="https://wiki.linaro.org/OpenStack/OpenstackTempestCI">https://wiki.linaro.org/OpenStack/OpenstackTempestCI</a>.
</p>
<p>In the charts below, you can click on the data series labels in the chart legends to show/hide the series.</p>
<div id="chartContainer"></div>
</body>
</html>