-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (126 loc) · 4.94 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
123
124
125
126
127
128
129
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Proxy Dashboard ({match-percent}% match)</title>
<meta property="og:type" content="website" />
<meta property="og:url" content="http://{host}/" />
<meta property="og:title" content="Proxy Dashboard ({match-percent}% match)" />
<meta property="og:image" content="{og-image}" />
<style type="text/css">
body { background: #000; color: #aaa; font-family: Helvetica, Arial, san-serif; margin: 0; padding-top: 2em; }
table { margin: 20px auto; }
h1 { text-align: center; }
a { color: #666; }
a:visited { color: #444; }
button { border: solid 1px #666; background: #333; color: #666; cursor: pointer; }
button:hover { border: solid 1px green; background: #333; color: green; }
button.active { border: solid 1px green; background: #333; color: green; }
header { position: fixed; top: 0; border-bottom: solid 1px #333; z-index: 1000; margin: 0; padding: 5px; width: 100%; background: #111; }
header form { float: right; padding-right: 20px; }
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
var percentMode = true;
var init = function() {
$('#percentMode').on('click', function () {
if (percentMode) return;
percentMode = true;
$(this).addClass('active');
$('#absoluteMode').removeClass('active');
loadCharts();
});
$('#absoluteMode').on('click', function () {
if (!percentMode) return;
percentMode = false;
$(this).addClass('active');
$('#percentMode').removeClass('active');
loadCharts();
});
loadCharts();
};
google.setOnLoadCallback(init);
setInterval(loadCharts, 60*1000);
var toPercent = function (data) {
return _(data).map(function (row) {
return [
row[0],
_.isNumber(row[1]) ? row[1] / (row[1] + row[2]) * 100 : row[1],
_.isNumber(row[1]) ? 100 : row[2]
];
});
};
function loadCharts() {
$.get('/urls', function (data) {
var top = JSON.parse(data);
$('#urls tbody').empty();
$(top).each(function(index, element){
$('#urls tbody').append('<tr><td>'+(index+1)+'</td><td>'+element[1]+' ('+element[2]+'%)</td><td><a href="/search?for='+encodeURIComponent(element[0])+'">'+_.escape(element[0])+'</a></td></tr>');
})
});
$.get('/minutes', function (data) {
var raw = JSON.parse(data)
var chartData = google.visualization.arrayToDataTable(percentMode ? toPercent(raw) : raw);
var options = {
title: 'Requests by Minute (past 24 hours)',
titleTextStyle: { color: '#aaa' },
isStacked: !percentMode,
colors: ['green', 'grey'],
backgroundColor: '#000',
hAxis: { slantedText: true, slantedTextAngle: 90, textStyle: { color: '#aaa' } },
legend: { textStyle: { color: '#aaa' } }
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_minutes'));
chart.draw(chartData, options);
});
$.get('/hours', function(data) {
var raw = JSON.parse(data)
var chartData = google.visualization.arrayToDataTable(percentMode ? toPercent(raw) : raw);
var options = {
title: 'Requests by Hour (past 7 days)',
titleTextStyle: { color: '#aaa' },
isStacked: !percentMode,
colors: ['green', 'grey'],
backgroundColor: '#000',
hAxis: { slantedText: true, slantedTextAngle: 90, textStyle: { color: '#aaa' } },
legend: { textStyle: { color: '#aaa' } }
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_hours'));
chart.draw(chartData, options);
});
$.get('/days', function(data) {
var raw = JSON.parse(data)
var chartData = google.visualization.arrayToDataTable(percentMode ? toPercent(raw) : raw);
var options = {
title: 'Requests by Day (all time)',
titleTextStyle: { color: '#aaa' },
isStacked: !percentMode,
colors: ['green', 'grey'],
backgroundColor: '#000',
hAxis: { slantedText: true, slantedTextAngle: 90, textStyle: { color: '#aaa' } },
legend: { textStyle: { color: '#aaa' } }
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_days'));
chart.draw(chartData, options);
});
}
</script>
</head>
<body>
<header>graph mode: <button id="percentMode" class="active">Percent</button> <button id="absoluteMode">Absolute</button>
<form method="GET" action="/search">
search: <input type="text" name="for">
</form>
</header>
<!--<h1><span id="progress">??%</span> Complete</h1>-->
<table id="urls">
<thead><tr><th>Rank</th><th>Diffs</th><th>Top Problem URLs (last 5 minutes)</th></tr></thead>
<tbody></tbody>
</table>
<div id="chart_days" style="height: 500px;"></div>
<div id="chart_hours" style="height: 500px;"></div>
<div id="chart_minutes" style="height: 500px;"></div>
</body>
</html>