-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
122 lines (115 loc) · 3.85 KB
/
index.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
<!DOCTYPE html>
<html ng-app="MtrApp">
<head>
<meta charset="utf-8" />
<title>Websocket-based interface to MTR</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style type="text/css">
.table-very-condensed {
margin-bottom: 0;
}
.table-very-condensed > tbody > tr > th {
font-size: smaller;
vertical-align: middle;
color: #777;
white-space: nowrap;
padding: 2px 5px;
}
.table-very-condensed > tbody > tr > td {
padding: 2px 5px;
}
.table-very-condensed > tbody > tr > td:first-child {
text-align: right;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://cdn.rawgit.com/gdi2290/angular-websocket/v1.0.8/angular-websocket.min.js"></script>
<section ng-controller="SomeController">
<form class="form-inline" ng-submit="submit(hostname, protocol, version, dns)">
<table class="table table-very-condensed">
<tr>
<th> </th>
<th>
<input type="text" class="form-control" id="hostname" placeholder="Type hostname here." ng-model="hostname" style="width:100%;" autofocus required>
</th>
<th colspan="6">
<select class="form-control" ng-model="protocol">
<option value="ICMP" selected>ICMP</option>
<option value="TCP">TCP SYN</option>
<option value="UDP">UDP</option>
</select>
<select class="form-control" ng-model="version">
<option value="" selected>IPv4 or IPv6</option>
<option value="4">IPv4</option>
<option value="6">IPv6</option>
</select>
<label class="checkbox-inline">
<input type="checkbox" value="dns" ng-model="dns" checked> Use DNS
</label>
<button type="submit" class="btn btn-default">Trace</button>
</th>
</tr>
<tr>
<th> </th>
<th>Hostname</th>
<th>Loss</th>
<th>Received</th>
<th>Sent</th>
<th>Min</th>
<th>Avg</th>
<th>Max</th>
</tr>
<tr ng-repeat="line in mtr.response track by $index|orderBy:'0'">
<td ng-repeat="col in line track by $index">{{ col }}</td>
</tr>
</table>
</form>
</section>
<script>
angular.module('MtrApp', ['ngWebSocket'])
.factory('mtr', function($websocket) {
var response = new Array(30);
var ws = {close: function(message) {}};
var methods = {
response: response,
trace: function(message) {
ws.close();
for (var i=0; i<response.length; i++) {
response[i] = [];
}
var url = new URL('/mtr', window.location.href);
url.protocol = url.protocol.replace('http', 'ws');
ws = $websocket(url.href);
ws.onMessage(function(message) {
var data = JSON.parse(message.data);
if (angular.isArray(data)) {
response[data[0]] = data;
} else {
// error message
response[0] = [0, data];
}
});
ws.send(message);
}
};
return methods;
})
.controller('SomeController', function($scope, mtr) {
$scope.mtr = mtr;
$scope.protocol = 'ICMP';
$scope.dns = true;
$scope.submit = function(hostname, protocol, version, dns) {
// if (!hostname) { return; }
mtr.trace(JSON.stringify({
hostname: hostname,
protocol: protocol,
version: version,
no_dns: !dns
}));
};
});
</script>
</body>
</html>