stand alone dynamic web site
Costa Tsaousis (ktsaou) committed
Mar 29, 2014 at 22:39 UTC
b6f7ff78413592cbc6c20299790ee061e7830e61
1 file changed
+335
web/index.html
new
+335
@@ -0,0 +1,335 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
+ <meta charset="utf-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <meta name="description" content="">
9
+ <meta name="author" content="costa@tsaousis.gr">
10
+
11
+ <title>NetData</title>
12
+
13
+ <!-- Google AJAX API -->
14
+ <script type="text/javascript" src="https://www.google.com/jsapi"></script>
15
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
16
+
17
+ <!-- Bootstrap -->
18
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
19
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
20
+ <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
21
+ <link href="/file/theme.css" rel="stylesheet">
22
+
23
+ <!-- NetData -->
24
+ <script type="text/javascript" src="/file/netdata.js"></script>
25
+ <script type="text/javascript">
26
+
27
+ // Set a callback to run when the Google Visualization API is loaded.
28
+ google.setOnLoadCallback(drawCharts);
29
+
30
+ var mycharts = new Array();
31
+ var mainchart;
32
+
33
+ function mainChart(c) {
34
+ if(mainchart && mainchart.chart) mainchart.chart.clearChart();
35
+
36
+ mainchart = $.extend(true, {}, c);
37
+
38
+ mainchart.chart = null;
39
+ mainchart.width = Math.round(((window.innerWidth * 0.95) - 50) / 1);
40
+ mainchart.height = window.innerHeight - 200;
41
+ mainchart.thumbnail = false;
42
+ mainchart.group = 5;
43
+ mainchart.group_method = "max";
44
+ mainchart.div = 'maingraph';
45
+ mainchart.last_updated = 0;
46
+ mainchart.explorer = false;
47
+
48
+ if(mainchart.type == "tc") {
49
+ mainchart.group = 15;
50
+ mainchart.group_method = "average";
51
+ }
52
+
53
+ // calculate the time to refresh each chart
54
+ mainchart.chart_update_every = mainchart.group * 1000; // milliseconds
55
+
56
+ // calculate how many point to show for each chart
57
+ mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
58
+
59
+ // show max 10 mins of data
60
+ if(mainchart.points_to_show * mainchart.group > 1200) mainchart.points_to_show = 1200 / mainchart.group;
61
+
62
+ refreshChart(mainchart);
63
+ showMainGraph();
64
+ }
65
+
66
+ function setMainChart(i) {
67
+ mainChart(mycharts[i]);
68
+ }
69
+
70
+ function thumbWidth() {
71
+ var items = Math.round(((window.innerWidth * 0.95) - 50) / 400);
72
+ if(items < 1) items = 1;
73
+
74
+ var width = Math.round(((window.innerWidth * 0.95) - 50) / items) - 1;
75
+ console.log("window = " + ((window.innerWidth * 0.95) - 50) + ", items = " + items + ", width = " + width);
76
+
77
+ return width;
78
+ }
79
+
80
+ function resizeCharts() {
81
+ if(mainchart) {
82
+ mainchart.width = Math.round(((window.innerWidth * 0.95) - 50) / 1);
83
+ mainchart.height = window.innerHeight - 200;
84
+ }
85
+
86
+ var width = thumbWidth();
87
+ $.each(mycharts, function(i, c) {
88
+ if(c.enabled) {
89
+ c.width = width;
90
+ c.needs_refresh = true;
91
+ }
92
+ });
93
+ }
94
+
95
+ var go_thumbs = 0;
96
+ function drawCharts() {
97
+ var now = new Date().getTime();
98
+
99
+ go_thumbs = 0;
100
+ $.each(mycharts, function(i, c) {
101
+ if(c.enabled && c.needs_refresh) {
102
+ refreshChart(c);
103
+ c.needs_refresh = false;
104
+ c.last_updated = now;
105
+ }
106
+ });
107
+
108
+ if(mainchart) refreshChart(mainchart);
109
+ go_thumbs = 1;
110
+ };
111
+
112
+ function initCharts() {
113
+ var width = thumbWidth();
114
+ var height = 200;
115
+
116
+ mycharts = loadCharts();
117
+ if(mycharts == null || mycharts.length == 0) {
118
+ alert("Cannot load data from server.");
119
+ return;
120
+ }
121
+
122
+ var scroll = document.getElementById("graphs");
123
+ if(!scroll) {
124
+ alert("Cannot find the scroller");
125
+ return;
126
+ }
127
+
128
+ function chartssort(a, b) {
129
+ if(a.userpriority < b.userpriority) return -1;
130
+ return 1;
131
+ }
132
+ mycharts.sort(chartssort);
133
+
134
+ // create an array for grouping all same-type graphs together
135
+ var html = new Array();
136
+ $.each(mycharts, function(i, c) {
137
+ c.thumbnail = false;
138
+ c.last_updated = 0;
139
+ c.width = width;
140
+ c.height = height;
141
+ c.enabled = true;
142
+ c.needs_refresh = true;
143
+
144
+ if(c.userpriority == "IGNORE") c.enabled = false;
145
+ if(c.usertitle) c.title = c.usertitle;
146
+
147
+ if(c.type == "tc") {
148
+ c.category = "Quality of Service"
149
+ c.group = 30;
150
+ c.group_method = "average";
151
+ }
152
+ else if(c.type == "net") {
153
+ c.category = "Network Traffic"
154
+ c.group = 10;
155
+ c.group_method = "max";
156
+
157
+ if((c.id.substring(c.id.length - 4, c.id.length) == "-ifb") ||
158
+ c.id == "net.lo")
159
+ c.enabled = false;
160
+ }
161
+ else if(c.type == "disk") {
162
+ c.category = "Disk I/O"
163
+ c.group = 20;
164
+ c.group_method = "max";
165
+ }
166
+ else {
167
+ c.category = "Unknown"
168
+ c.group = 60;
169
+ c.group_method = "max";
170
+ }
171
+
172
+ // calculate the time to refresh each chart
173
+ c.chart_update_every = c.group * 1000; // milliseconds
174
+
175
+ // calculate how many point to show for each chart
176
+ c.points_to_show = Math.round(c.entries / c.group) - 1;
177
+
178
+ // show max 10 mins of data
179
+ if(c.points_to_show * c.group > 600) c.points_to_show = 600 / c.group;
180
+
181
+ if(c.enabled) {
182
+ var j;
183
+ var h = "<div class=\"thumbgraph\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + c.name + "</div></td></tr><tr><td align=\"center\"><div class=\"btn-group-xs\"><button type=\"button\" class=\"btn btn-default\" onclick=\"setMainChart(" + i +");\"> select " + c.name + " for zoom </button></div></td></tr></table></div>";
184
+
185
+ // find the html object for this type
186
+ for(j = 0; j < html.length ;j++) {
187
+ if(html[j].name == c.type) {
188
+ html[j].html += h;
189
+ html[j].count++;
190
+ break;
191
+ }
192
+ }
193
+
194
+ if(j == html.length) {
195
+ var t = "(as " + c.group_method + " every " + (c.group*c.update_every) + " seconds)";
196
+ html.push({name: c.type, title: c.category, description: t, priority: 0, count: 1, html: h});
197
+ }
198
+ }
199
+ });
200
+
201
+ $.each(html, function(i, a) {
202
+ if(a.name == "net") a.priority = 1;
203
+ else if(a.name == "tc") a.priority = 2;
204
+ else if(a.name == "disk") a.priority = 3;
205
+ else a.priority = 4;
206
+
207
+ a.html = "<tr><td><ol class=\"breadcrumb\"><li class=\"active\"><a id=\"" + a.type + "\" href=\"#" + a.type + "\"><b>" + a.title + "</b> " + a.description + " </a></li></ol></td></tr><tr><td><div class=\"thumbgraphs\">" + a.html + "</td></tr>";
208
+ });
209
+
210
+ function htmlsort(a, b) {
211
+ if(a.priority < b.priority) return -1;
212
+ return 1;
213
+ }
214
+ html.sort(htmlsort);
215
+
216
+ // combine all the htmls into one
217
+ var allhtml = "<table width=\"100%\">";
218
+ $.each(html, function(i, a) {
219
+ allhtml += a.html;
220
+ });
221
+ allhtml += "</table>";
222
+
223
+ scroll.innerHTML = allhtml;
224
+ showThumbGraphs();
225
+ };
226
+
227
+ var last_mini = 0;
228
+ function myChartsRefresh() {
229
+ var now = new Date().getTime();
230
+
231
+ if(mainchart && (now - mainchart.last_updated) >= mainchart.chart_update_every) {
232
+ refreshChart(mainchart);
233
+ mainchart.last_updated = now;
234
+ }
235
+
236
+ if(mycharts.length == 0 || !go_thumbs) return;
237
+
238
+ // refresh the mini charts
239
+ var wanted = 1;
240
+ var did = 0;
241
+ var count = mycharts.length - 1;
242
+ while(did < wanted && count >= 0) {
243
+ count--;
244
+ last_mini++;
245
+ if(last_mini >= mycharts.length) last_mini = 0;
246
+
247
+ if(!mycharts[last_mini].enabled) continue;
248
+ if(!mycharts[last_mini].needs_refresh && now - mycharts[last_mini].last_updated < mycharts[last_mini].chart_update_every) continue;
249
+
250
+ if(mycharts[last_mini].chart != null)
251
+ if(mycharts[last_mini].chart.getSelection()[0]) continue;
252
+
253
+ refreshChart(mycharts[last_mini]);
254
+ mycharts[last_mini].last_updated = now;
255
+
256
+ did++;
257
+ mycharts[last_mini].needs_refresh = false;
258
+ }
259
+ }
260
+
261
+ setInterval(myChartsRefresh, 500);
262
+
263
+ window.onresize = function(event) {
264
+ go_thumbs = 0;
265
+ resizeCharts();
266
+ drawCharts();
267
+ go_thumbs = 1;
268
+ };
269
+
270
+ function showMainGraph() {
271
+ if(!mainchart) return;
272
+
273
+ go_thumbs = 0;
274
+ document.getElementById('maingraph_container').style.display = 'block';
275
+ document.getElementById('thumbgraphs_container').style.display = 'none';
276
+ }
277
+
278
+ function showThumbGraphs() {
279
+ document.getElementById('maingraph_container').style.display = 'none';
280
+ document.getElementById('thumbgraphs_container').style.display = 'block';
281
+
282
+ if(mainchart) {
283
+ if(mainchart.chart) mainchart.chart.clearChart();
284
+ mainchart = null;
285
+ }
286
+ go_thumbs = 1;
287
+ }
288
+
289
+ </script>
290
+</head>
291
+
292
+<body role="document">
293
+ <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
294
+ <div class="container">
295
+ <div class="navbar-header">
296
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
297
+ <span class="sr-only">Toggle navigation</span>
298
+ <span class="icon-bar"></span>
299
+ <span class="icon-bar"></span>
300
+ <span class="icon-bar"></span>
301
+ </button>
302
+ <a class="navbar-brand" href="#">NetData</a>
303
+ </div>
304
+ <div class="collapse navbar-collapse">
305
+ <ul class="nav navbar-nav">
306
+ <li class="active"><a href="#">Home</a></li>
307
+ <li><a href="#net">net</a></li>
308
+ <li><a href="#tc">tc</a></li>
309
+ <li><a href="#disk">disk</a></li>
310
+ </ul>
311
+ </div><!--/.nav-collapse -->
312
+ </div>
313
+ </div>
314
+
315
+ <div class="container graphs" id="maingraph_container"">
316
+ <table>
317
+ <tr><td><ol class="breadcrumb"><li class="active"><a id="maingraph_title" href="#maingraph"><b> Maingraph </b></a></li></ol></td></tr>
318
+ <tr><td>
319
+ <div class="maingraph">
320
+ <table>
321
+ <tr><td><div class="maingraph" id="maingraph"></div></td></tr>
322
+ <tr><td align="center"><div class="btn-group"><button type="button" onclick="showThumbGraphs();" class="btn btn-default"> close main graph </button></div></td></tr>
323
+ </table>
324
+ </div><!-- /.maingraph -->
325
+ </td></tr>
326
+ </table>
327
+ </div>
328
+
329
+ <div class="container graphs" id="thumbgraphs_container">
330
+ <div class="allgraphs" id="graphs">
331
+ </div>
332
+ </div>
333
+
334
+ <script type="text/javascript">initCharts();</script>
335
+</html>