-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmeasurements.html
153 lines (138 loc) · 6.66 KB
/
measurements.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<title>Proddle - Measurements</title>
<link rel="stylesheet" type="text/css" href="css/map.css" />
<link rel="stylesheet" type="text/css" href="css/measurements.css" />
<link rel="stylesheet" type="text/css" href="css/proddle.css" />
<link rel="stylesheet" type="text/css" href="css/report-table.css" />
<style>
.resultlink {
text-decoration: underline;
}
</style>
<script src="js/proddle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<?php
include 'php/header.php';
?>
<div id="center">
<div id="usage">
<h3>Usage</h3>
<p>
This page is used to view measurements for a particular
domain. The text area should be populated by the domain
name (ex. google.com). The select menu presents durations
over which to view the data.
</p>
<p>
Clicking on a measurement row in the measurements table
will display specific information about that measurement.
</p>
</div>
<div id="searchbar">
Domain: <input type="text" id="domain" value="google.com" />
<select id="duration">
<option value="1">1 Day</option>
<option value="7">1 Week</option>
<option value="31">1 Month</option>
</select>
<input type="button" value="GO" onclick="updatePage();" />
</div>
</br>
<div id="map"></div>
</br>
<div class="wrapper">
<caption><b>Measurements Collected By Proddle</b></caption>
<div id="measurementsScroll" class="scroll">
<table id="measurementsTable" class="report">
<thead>
<th>Timestamp</th>
<th>Vantage</th>
<th>Measurement</th>
<th>Domain</th>
<th>Status</th>
</thead>
<tbody id="measurementsBody">
</tbody>
</table>
</div>
</div>
</br>
<p>
This product includes GeoLite2 data created by MaxMind, available from
<a href="http://www.maxmind.com">http://www.maxmind.com</a>.
</p>
</div>
<script>
var map;
var infoWindow;
var markers = [];
var markerInfo = new Map();
function initMap() {
infoWindow = new google.maps.InfoWindow;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat:0, lng: 0},
zoom: 2
});
}
function resetPage() {
document.getElementById('measurementsBody').innerHTML = '';
for (var i=0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
markerInfo.clear();
}
function updatePage() {
resetPage();
var domain = document.getElementById('domain').value;
var duration = document.getElementById('duration');
var measurementsBody = document.getElementById('measurementsBody');
//query measurements_report.html
$.get({
url: 'measurements_report.html?duration=' + duration.options[duration.selectedIndex].value + '&domain=' + domain,
dataType: 'json',
success: function(data) {
for (var i=0; i < data.result.length; i++) {
var measurement = data.result[i];
var coordinate = data.coordinates[i];
//add data to table
var tr = measurementsBody.insertRow();
tr.onclick = createClickHandler(measurement);
var timestamp = new Date(measurement.timestamp * 1000);
tr.insertCell().appendChild(document.createTextNode(formatDate(timestamp)));
tr.insertCell().appendChild(document.createTextNode(measurement.vantage_hostname + ' (' + measurement.vantage_ip_address + ')'));
tr.insertCell().appendChild(document.createTextNode(measurement.measurement_class));
tr.insertCell().appendChild(document.createTextNode(measurement.measurement_domain));
if (measurement.measurement_error_message != null) {
tr.insertCell().appendChild(document.createTextNode('down'));
} else if (measurement.internal_error_message != null) {
tr.insertCell().appendChild(document.createTextNode('unknown'));
} else {
tr.insertCell().appendChild(document.createTextNode('up'));
}
//add markers
if (measurement.primary_ip_address != null && coordinate.domain != null) {
addMarker(measurement.measurement_domain, measurement.primary_ip_address, coordinate.domain.latitude, coordinate.domain.longitude, COLOR.BLUE, markerInfo, markers);
}
if (measurement.vantage_ip_address != null && coordinate.vantage != null) {
addMarker(measurement.vantage_hostname, measurement.vantage_ip_address, coordinate.vantage.latitude, coordinate.vantage.longitude, COLOR.RED, markerInfo, markers);
}
}
plotMarkers(markerInfo, markers);
}
});
}
function createClickHandler(measurement) {
return function() {
alert(JSON.stringify(measurement, null, 4));
};
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeCkjmEFtZ0Wuu6muxH6-4RF6f-pzE3qc&callback=initMap"
async defer></script>
</body>
</html>