cleanup code, title support for web pages, hostname shown, minor fixes
Costa Tsaousis (ktsaou) committed
Mar 29, 2014 at 23:52 UTC
dff0985ea1bd4bf4bd5335e2e610dbac1366368d
3 files changed
+72
-37
netdata.c
+6
@@ -348,6 +348,8 @@ struct rrd_stats {
348
349
char type[RRD_STATS_NAME_MAX + 1];
350
351
+ char hostname[RRD_STATS_NAME_MAX + 1];
352
+
353
size_t entries;
354
size_t current_entry;
355
// size_t last_entry;
@@ -414,6 +416,9 @@ RRD_STATS *rrd_stats_create(const char *id, const char *name, unsigned long entr
416
else strncpy(st->userpriority, st->name, RRD_STATS_NAME_MAX);
417
st->userpriority[RRD_STATS_NAME_MAX] = '\0';
418
419
+ if(gethostname(st->hostname, RRD_STATS_NAME_MAX) == -1)
420
+ error("Cannot get hostname.");
421
+
422
st->entries = entries;
423
st->current_entry = 0;
424
// st->last_entry = 0;
@@ -614,6 +619,7 @@ size_t rrd_stats_one_json(RRD_STATS *st, char *options, char *buffer, size_t len
619
i += sprintf(&buffer[i], "\t\t\t\"userpriority\" : \"%s\",\n", st->userpriority);
620
i += sprintf(&buffer[i], "\t\t\t\"envtitle\" : \"%s\",\n", st->envtitle);
621
i += sprintf(&buffer[i], "\t\t\t\"envpriority\" : \"%s\",\n", st->envpriority);
622
+ i += sprintf(&buffer[i], "\t\t\t\"hostname\" : \"%s\",\n", st->hostname);
623
i += sprintf(&buffer[i], "\t\t\t\"vtitle\" : \"%s\",\n", st->vtitle);
624
i += sprintf(&buffer[i], "\t\t\t\"url\" : \"/data/%s/%s\",\n", st->name, options?options:"");
625
i += sprintf(&buffer[i], "\t\t\t\"entries\" : %ld,\n", st->entries);
web/index.html
+60
-36
@@ -59,6 +59,8 @@
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
+ document.getElementById('maingraph_title').innerHTML = " <b> " + mainchart.title + " </b> (as " + mainchart.group_method + " of every " + (mainchart.group * mainchart.update_every) + " seconds)";
63
+
64
refreshChart(mainchart);
65
showMainGraph();
66
}
@@ -93,22 +95,15 @@
95
}
96
97
var go_thumbs = 0;
98
+ var go_main = 0;
99
function drawCharts() {
100
var now = new Date().getTime();
101
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;
102
+ myChartsRefreshInternal(mycharts.length);
103
};
104
105
+ // load the charts from the server
106
+ // generate html for the thumbgraphs to support them
107
function initCharts() {
108
var width = thumbWidth();
109
var height = 200;
@@ -131,8 +126,11 @@
126
}
127
mycharts.sort(chartssort);
128
129
+ document.getElementById('hostname_id').innerHTML = mycharts[0].hostname;
130
+ document.title = mycharts[0].hostname;
131
+
132
// create an array for grouping all same-type graphs together
135
- var html = new Array();
133
+ var categories = new Array();
134
$.each(mycharts, function(i, c) {
135
c.thumbnail = false;
136
c.last_updated = 0;
@@ -182,61 +180,70 @@
180
var j;
181
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>";
182
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++;
183
+ // find the categories object for this type
184
+ for(j = 0; j < categories.length ;j++) {
185
+ if(categories[j].name == c.type) {
186
+ categories[j].html += h;
187
+ categories[j].count++;
188
break;
189
}
190
}
191
194
- if(j == html.length) {
192
+ if(j == categories.length) {
193
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});
194
+ categories.push({name: c.type, title: c.category, description: t, priority: 0, count: 1, html: h});
195
}
196
}
197
});
198
201
- $.each(html, function(i, a) {
199
+ $.each(categories, function(i, a) {
200
if(a.name == "net") a.priority = 1;
201
else if(a.name == "tc") a.priority = 2;
202
else if(a.name == "disk") a.priority = 3;
203
else a.priority = 4;
204
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>";
205
+ a.html = "<tr><td><ol class=\"breadcrumb graphs\"><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>";
206
});
207
210
- function htmlsort(a, b) {
208
+ function categoriessort(a, b) {
209
if(a.priority < b.priority) return -1;
210
return 1;
211
}
214
- html.sort(htmlsort);
212
+ categories.sort(categoriessort);
213
214
// combine all the htmls into one
217
- var allhtml = "<table width=\"100%\">";
218
- $.each(html, function(i, a) {
219
- allhtml += a.html;
215
+ var allcategories = "<table width=\"100%\">";
216
+ $.each(categories, function(i, a) {
217
+ allcategories += a.html;
218
});
221
- allhtml += "</table>";
219
+ allcategories += "</table>";
220
223
- scroll.innerHTML = allhtml;
221
+ scroll.innerHTML = allcategories;
222
showThumbGraphs();
223
};
224
225
var last_mini = 0;
228
- function myChartsRefresh() {
226
+ function myChartsRefreshInternal(howmany) {
227
+ var ot = go_thumbs;
228
+ var om = go_main;
229
+
230
+ go_thumbs = 0;
231
+ go_main = 0;
232
+
233
var now = new Date().getTime();
234
231
- if(mainchart && (now - mainchart.last_updated) >= mainchart.chart_update_every) {
235
+ // refresh the main chart
236
+ if(om && mainchart && (now - mainchart.last_updated) >= mainchart.chart_update_every) {
237
refreshChart(mainchart);
238
mainchart.last_updated = now;
239
}
240
+ go_main = om;
241
236
- if(mycharts.length == 0 || !go_thumbs) return;
242
+ // refresh a few of the thumbcharts
243
+ if(mycharts.length == 0 || !ot) return;
244
245
// refresh the mini charts
239
- var wanted = 1;
246
+ var wanted = howmany;
247
var did = 0;
248
var count = mycharts.length - 1;
249
while(did < wanted && count >= 0) {
@@ -256,23 +263,38 @@
263
did++;
264
mycharts[last_mini].needs_refresh = false;
265
}
266
+
267
+ go_thumbs = ot;
268
+ }
269
+
270
+ function myChartsRefresh() {
271
+ myChartsRefreshInternal(1);
272
}
273
274
setInterval(myChartsRefresh, 500);
275
276
window.onresize = function(event) {
277
+ var ot = go_thumbs;
278
+ var om = go_main;
279
+
280
go_thumbs = 0;
281
+ go_main = 0;
282
+
283
resizeCharts();
284
drawCharts();
267
- go_thumbs = 1;
285
+
286
+ go_thumbs = ot;
287
+ go_main = om;
288
};
289
290
function showMainGraph() {
291
if(!mainchart) return;
292
273
- go_thumbs = 0;
293
document.getElementById('maingraph_container').style.display = 'block';
294
document.getElementById('thumbgraphs_container').style.display = 'none';
295
+
296
+ go_thumbs = 0;
297
+ go_main = 1;
298
}
299
300
function showThumbGraphs() {
@@ -283,7 +305,9 @@
305
if(mainchart.chart) mainchart.chart.clearChart();
306
mainchart = null;
307
}
308
+
309
go_thumbs = 1;
310
+ go_main = 0;
311
}
312
313
</script>
@@ -299,7 +323,7 @@
323
<span class="icon-bar"></span>
324
<span class="icon-bar"></span>
325
</button>
302
- <a class="navbar-brand" href="#">NetData</a>
326
+ <a class="navbar-brand" href="#" id="hostname_id">NetData</a>
327
</div>
328
<div class="collapse navbar-collapse">
329
<ul class="nav navbar-nav">
@@ -314,7 +338,7 @@
338
339
<div class="container graphs" id="maingraph_container"">
340
<table>
317
- <tr><td><ol class="breadcrumb"><li class="active"><a id="maingraph_title" href="#maingraph"><b> Maingraph </b></a></li></ol></td></tr>
341
+ <tr><td><ol class="breadcrumb graphs"><li class="active"><a id="maingraph_title" href="#maingraph"><b> Maingraph </b></a></li></ol></td></tr>
342
<tr><td>
343
<div class="maingraph">
344
<table>
web/theme.css
+6
-1
@@ -33,4 +33,9 @@ body {
33
34
.container.graphs {
35
width: 95%;
36
-}
\ No newline at end of file
36
+}
37
+
38
+.breadcrumb.graphs {
39
+ margin-top: 10px;
40
+ margin-bottom: 10px;
41
+}