crashreports/templates/crashreports/hiccup_stats2.html - tools/hiccup/hiccup-server - Gitiles

 {# Load the tag library #}
 {% load bootstrap3 %}

 <!DOCTYPE html>
 {# Load CSS and JavaScript #}
 {% bootstrap_css %}
 <script src="/static/crashreports/jquery-latest.min.js"></script>

 {% bootstrap_javascript %}
 <!-- Material Design fonts -->
 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="/static/crashreports/css/bootstrap-material-design.min.css" charset="utf-8" >
 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/ripples.min.css">
 <link rel="stylesheet" type="text/css" href="/static/crashreports/css/ripples.min.css" charset="utf-8" >

 <!-- Bootstrap -->
 <link rel="stylesheet" type="text/css" href="/static/crashreports/style.css" charset="utf-8" >

 <script src="/static/crashreports/js/material.js"></script>


 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

 {# Display django.contrib.messages as Bootstrap alerts #}
 {% bootstrap_messages %}

    <div class="container">

      <div class="navbar navbar-warning">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:void(0)">Hiccup</a>
          </div>
          <div class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="javascript:void(0)">Statistics</a></li>
              <li><a href="/hiccup/admin/">Admin Area</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">{{ request.user }}
                  <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="/hiccup/admin/logout/">Logout</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>

     <h1> 1.7.1 Beta/Office Stats </h1>

     <div class="row" style="height:300px">
       <div class="col-md-4">
         <div id = "probable_crashes" class="panel chart"> </div>
       </div>
       <div class="col-md-4">
         <div id = "fingerprints" class="panel chart"> </div>
       </div>
       <div class="col-md-4">
         <div id = "SMPL" class="panel chart"> </div>
       </div>
     </div>

     <div class="row">
         <div class="col-md-12">
         <div class="panel">
        <div id = "reports_per_day" class="line_chart"> </div>
       </div>
     </div>

     <script>
     $.material.init()
     // Load the Visualization API and the corechart package.
     google.charts.load('current', {'packages':['corechart','line']});

     // Set a callback to run when the Google Visualization API is loaded.
     google.charts.setOnLoadCallback(drawChart);

     function aggregate_build_fingerprints(data) {
       totals = {}
       data = filter_1_7_1(data)
       for (var entry in data) {
         key = data[entry].build_fingerprint
         if (!totals[key]) {
           totals[key] = 0;
         }
         totals[key] += 1;
       }
       ret = []
       for (var entry in totals) {
         ret.push([entry, totals[entry]])
       }
       return ret;
     }

     function aggregate_uuid(data) {
       data = filter_1_7_1(data)
       totals = {}
       for (var entry in data) {
         if (!totals[data[entry].uuid]) {
           console.log(data[entry].uuid);
           totals[data[entry].uuid] = 0;
         }
         totals[data[entry].uuid] += 1;
       }
       ret = []
       for (var entry in totals) {
         ret.push([entry, totals[entry]])
       }
       return ret;
     }

     function aggregate_uuid(data) {
       data = filter_1_7_1(data)
       totals = {}
       for (var entry in data) {
         if (!totals[data[entry].uuid]) {
           totals[data[entry].uuid] = 0;
         }
         totals[data[entry].uuid] += 1;
       }
       ret = []
       for (var entry in totals) {
         ret.push([entry, totals[entry]])
       }
       return ret;
     }

     function get_distribution(data) {
       data = filter_1_7_1(data)
       totals = {}
       fingerprint_count = {}
       for (var entry in data) {
         if (!totals[data[entry].uuid]) {
           fingerprint = data[entry].build_fingerprint
           totals[data[entry].uuid] = 0;
           console.log(data[entry].uuid)
           if (!fingerprint_count[fingerprint]) {
             fingerprint_count[fingerprint] = 0;
           }
           fingerprint_count[fingerprint] += 1;
         }
         totals[data[entry].uuid] += 1;
       }
       ret = []
       for (var entry in fingerprint_count) {
         ret.push([entry, fingerprint_count[entry]])
       }
       console.log(ret);
       return ret;
     }

     function filter_1_7_1(data) {
       ret = {}
       for (var entry in data) {
         if (!data[entry].build_fingerprint.startsWith('Fairphone/FP2/FP2:5.1/FP2/r4275.1_FP2_gms65_HICCUP_1.7.1')) {
           continue;
         }
         if (data[entry].build_fingerprint.includes("a:user")) {
           data[entry].build_fingerprint = "1.7.1a";
         } else {
           data[entry].build_fingerprint = "1.7.1"
         }
         ret[entry]=data[entry];
       }
       return ret;
     }

     function filter_ping_reports(data) {
       ret = {}
       for (var entry in data) {
         if (!data[entry].report_type=="CRASH_REPORT") {
           continue;
         }
         ret[entry]=data[entry];
       }
       return ret;
     }

     function aggregate_SMPL(data) {
       totals = {}
       data = filter_1_7_1(data)
       for (var entry in data) {
         key = ""
         if (data[entry].power_on_reason.includes("SMPL")) {
           key = "SMPL";
         } else if (data[entry].boot_reason.includes("keyboard")) {
           key = "Crash";
         } else {
           continue;
         }
         if (!totals[key]) {
           console.log(data[entry].build_fingerprint);
           totals[key] = 0;
         }
         totals[key] += 1;
       }
       ret = []
       for (var entry in totals) {
         ret.push([entry, totals[entry]])
       }
       return ret;
     }

     function drawChart() {
       drawChartFromDate("2016-09-09","");
     }

     function drawChartFromDate(startDate,endDate) {
       drawChartReportPerDay("/hiccup/crashreports_per_day/","Reports per Day", 'reports_per_day')
       drawChartFingerprints("/hiccup/crashreports/?format=json&report_type=CRASH_REPORT&start_date="+startDate+"&end_date="+endDate+"&boot_reason=keyboard+power+on", "Probable Crashes", 'probable_crashes', aggregate_build_fingerprints);
       drawChartFingerprints("/hiccup/crashreports/?format=json&start_date="+startDate+"&end_date="+endDate, "Build Distribution", 'fingerprints', get_distribution);
       drawChartFingerprints("/hiccup/crashreports/?format=json&report_type=CRASH_REPORT&start_date="+startDate+"&end_date="+endDate, "SMPL or Crash", 'SMPL', aggregate_SMPL);
     }

     function drawChartReportPerDay(url, title, element) {
       $.getJSON( url, function( json_response ) {
         var options = {
           title: title,
           curveType: 'function',
           legend: { position: 'bottom' },
         };
         var chart = new google.charts.Line(document.getElementById(element));
         var data = new google.visualization.DataTable();
         reformated_array = json_response.map(function(obj){
             return [new Date(obj.date), obj.count];
         })
         data.addColumn('date', 'Date');
         data.addColumn('number', 'Number of Crashreports');
         data.addRows(reformated_array);
         chart.draw(data,  google.charts.Line.convertOptions(options));
       });
     }

     function drawChartFingerprints(url, title, element, aggregate_function) {
       $.getJSON( url, function( data ) {
         var totals_fingerprint = aggregate_function(data);
         var options = {
           title: title,
           pieHole: 0.4,
           legend: { position: 'bottom' }
         };
         var chart = new google.visualization.PieChart(document.getElementById(element));
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Build Fingerprint');
         data.addColumn('number', 'Number of Crashreports');
         data.addRows(totals_fingerprint);
         chart.draw(data, options);
       });
     }

   function drawUuidHistogram(url, title, element) {
     $.getJSON( url, function( data ) {
       var totals_fingerprint = aggregate_uuid(data);
       var options = {
         title: title,
         pieHole: 0.4,
         legend: { position: 'bottom' }
       };
       var chart = new google.visualization.Histogram(document.getElementById(element));
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Build Fingerprint');
       data.addColumn('number', 'Number of Crashreports');
       data.addRows(totals_fingerprint);
       chart.draw(data, options);
     });
    }
 </script>
	{# Load the tag library #}
	{% load bootstrap3 %}

	<!DOCTYPE html>
	{# Load CSS and JavaScript #}
	{% bootstrap_css %}
	<script src="/static/crashreports/jquery-latest.min.js"></script>

	{% bootstrap_javascript %}
	<!-- Material Design fonts -->
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

	<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/static/crashreports/css/bootstrap-material-design.min.css" charset="utf-8" >
	<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/ripples.min.css">
	<link rel="stylesheet" type="text/css" href="/static/crashreports/css/ripples.min.css" charset="utf-8" >

	<!-- Bootstrap -->
	<link rel="stylesheet" type="text/css" href="/static/crashreports/style.css" charset="utf-8" >

	<script src="/static/crashreports/js/material.js"></script>


	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

	{# Display django.contrib.messages as Bootstrap alerts #}
	{% bootstrap_messages %}

	<div class="container">

	<div class="navbar navbar-warning">
	<div class="container-fluid">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="javascript:void(0)">Hiccup</a>
	</div>
	<div class="navbar-collapse collapse navbar-responsive-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="javascript:void(0)">Statistics</a></li>
	<li><a href="/hiccup/admin/">Admin Area</a></li>
	</ul>
	<ul class="nav navbar-nav navbar-right">
	<li class="dropdown">
	<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">{{ request.user }}
	<b class="caret"></b></a>
	<ul class="dropdown-menu">
	<li><a href="/hiccup/admin/logout/">Logout</a></li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</div>

	<h1> 1.7.1 Beta/Office Stats </h1>

	<div class="row" style="height:300px">
	<div class="col-md-4">
	<div id = "probable_crashes" class="panel chart"> </div>
	</div>
	<div class="col-md-4">
	<div id = "fingerprints" class="panel chart"> </div>
	</div>
	<div class="col-md-4">
	<div id = "SMPL" class="panel chart"> </div>
	</div>
	</div>

	<div class="row">
	<div class="col-md-12">
	<div class="panel">
	<div id = "reports_per_day" class="line_chart"> </div>
	</div>
	</div>

	<script>
	$.material.init()
	// Load the Visualization API and the corechart package.
	google.charts.load('current', {'packages':['corechart','line']});

	// Set a callback to run when the Google Visualization API is loaded.
	google.charts.setOnLoadCallback(drawChart);

	function aggregate_build_fingerprints(data) {
	totals = {}
	data = filter_1_7_1(data)
	for (var entry in data) {
	key = data[entry].build_fingerprint
	if (!totals[key]) {
	totals[key] = 0;
	}
	totals[key] += 1;
	}
	ret = []
	for (var entry in totals) {
	ret.push([entry, totals[entry]])
	}
	return ret;
	}

	function aggregate_uuid(data) {
	data = filter_1_7_1(data)
	totals = {}
	for (var entry in data) {
	if (!totals[data[entry].uuid]) {
	console.log(data[entry].uuid);
	totals[data[entry].uuid] = 0;
	}
	totals[data[entry].uuid] += 1;
	}
	ret = []
	for (var entry in totals) {
	ret.push([entry, totals[entry]])
	}
	return ret;
	}

	function aggregate_uuid(data) {
	data = filter_1_7_1(data)
	totals = {}
	for (var entry in data) {
	if (!totals[data[entry].uuid]) {
	totals[data[entry].uuid] = 0;
	}
	totals[data[entry].uuid] += 1;
	}
	ret = []
	for (var entry in totals) {
	ret.push([entry, totals[entry]])
	}
	return ret;
	}

	function get_distribution(data) {
	data = filter_1_7_1(data)
	totals = {}
	fingerprint_count = {}
	for (var entry in data) {
	if (!totals[data[entry].uuid]) {
	fingerprint = data[entry].build_fingerprint
	totals[data[entry].uuid] = 0;
	console.log(data[entry].uuid)
	if (!fingerprint_count[fingerprint]) {
	fingerprint_count[fingerprint] = 0;
	}
	fingerprint_count[fingerprint] += 1;
	}
	totals[data[entry].uuid] += 1;
	}
	ret = []
	for (var entry in fingerprint_count) {
	ret.push([entry, fingerprint_count[entry]])
	}
	console.log(ret);
	return ret;
	}

	function filter_1_7_1(data) {
	ret = {}
	for (var entry in data) {
	if (!data[entry].build_fingerprint.startsWith('Fairphone/FP2/FP2:5.1/FP2/r4275.1_FP2_gms65_HICCUP_1.7.1')) {
	continue;
	}
	if (data[entry].build_fingerprint.includes("a:user")) {
	data[entry].build_fingerprint = "1.7.1a";
	} else {
	data[entry].build_fingerprint = "1.7.1"
	}
	ret[entry]=data[entry];
	}
	return ret;
	}

	function filter_ping_reports(data) {
	ret = {}
	for (var entry in data) {
	if (!data[entry].report_type=="CRASH_REPORT") {
	continue;
	}
	ret[entry]=data[entry];
	}
	return ret;
	}

	function aggregate_SMPL(data) {
	totals = {}
	data = filter_1_7_1(data)
	for (var entry in data) {
	key = ""
	if (data[entry].power_on_reason.includes("SMPL")) {
	key = "SMPL";
	} else if (data[entry].boot_reason.includes("keyboard")) {
	key = "Crash";
	} else {
	continue;
	}
	if (!totals[key]) {
	console.log(data[entry].build_fingerprint);
	totals[key] = 0;
	}
	totals[key] += 1;
	}
	ret = []
	for (var entry in totals) {
	ret.push([entry, totals[entry]])
	}
	return ret;
	}

	function drawChart() {
	drawChartFromDate("2016-09-09","");
	}

	function drawChartFromDate(startDate,endDate) {
	drawChartReportPerDay("/hiccup/crashreports_per_day/","Reports per Day", 'reports_per_day')
	drawChartFingerprints("/hiccup/crashreports/?format=json&report_type=CRASH_REPORT&start_date="+startDate+"&end_date="+endDate+"&boot_reason=keyboard+power+on", "Probable Crashes", 'probable_crashes', aggregate_build_fingerprints);
	drawChartFingerprints("/hiccup/crashreports/?format=json&start_date="+startDate+"&end_date="+endDate, "Build Distribution", 'fingerprints', get_distribution);
	drawChartFingerprints("/hiccup/crashreports/?format=json&report_type=CRASH_REPORT&start_date="+startDate+"&end_date="+endDate, "SMPL or Crash", 'SMPL', aggregate_SMPL);
	}

	function drawChartReportPerDay(url, title, element) {
	$.getJSON( url, function( json_response ) {
	var options = {
	title: title,
	curveType: 'function',
	legend: { position: 'bottom' },
	};
	var chart = new google.charts.Line(document.getElementById(element));
	var data = new google.visualization.DataTable();
	reformated_array = json_response.map(function(obj){
	return [new Date(obj.date), obj.count];
	})
	data.addColumn('date', 'Date');
	data.addColumn('number', 'Number of Crashreports');
	data.addRows(reformated_array);
	chart.draw(data, google.charts.Line.convertOptions(options));
	});
	}

	function drawChartFingerprints(url, title, element, aggregate_function) {
	$.getJSON( url, function( data ) {
	var totals_fingerprint = aggregate_function(data);
	var options = {
	title: title,
	pieHole: 0.4,
	legend: { position: 'bottom' }
	};
	var chart = new google.visualization.PieChart(document.getElementById(element));
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Build Fingerprint');
	data.addColumn('number', 'Number of Crashreports');
	data.addRows(totals_fingerprint);
	chart.draw(data, options);
	});
	}

	function drawUuidHistogram(url, title, element) {
	$.getJSON( url, function( data ) {
	var totals_fingerprint = aggregate_uuid(data);
	var options = {
	title: title,
	pieHole: 0.4,
	legend: { position: 'bottom' }
	};
	var chart = new google.visualization.Histogram(document.getElementById(element));
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Build Fingerprint');
	data.addColumn('number', 'Number of Crashreports');
	data.addRows(totals_fingerprint);
	chart.draw(data, options);
	});
	}
	</script>