summaryrefslogtreecommitdiffstats
path: root/web/index.html
diff options
context:
space:
mode:
authorLennart Weller <lhw@ring0.de>2017-07-27 09:55:47 +0000
committerLennart Weller <lhw@ring0.de>2017-07-27 09:55:47 +0000
commita133c9c3b637b1dbe7b5b053f7e2572c1950cead (patch)
tree2207939a88e96bca329457f40a9d9d18ab659dc1 /web/index.html
parentNew upstream version 1.6.0+dfsg (diff)
downloadnetdata-a133c9c3b637b1dbe7b5b053f7e2572c1950cead.tar.xz
netdata-a133c9c3b637b1dbe7b5b053f7e2572c1950cead.zip
New upstream version 1.7.0+dfsgupstream/1.7.0+dfsg
Diffstat (limited to 'web/index.html')
-rw-r--r--web/index.html186
1 files changed, 126 insertions, 60 deletions
diff --git a/web/index.html b/web/index.html
index 250dbfed3..be944e34d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -592,6 +592,43 @@
}
// --------------------------------------------------------------------
+ // natural sorting
+ // http://www.davekoelle.com/files/alphanum.js - LGPL
+
+ function naturalSortChunkify(t) {
+ var tz = [];
+ var x = 0, y = -1, n = 0, i, j;
+
+ while (i = (j = t.charAt(x++)).charCodeAt(0)) {
+ var m = (i === 46 || (i >= 48 && i <= 57));
+ if (m !== n) {
+ tz[++y] = "";
+ n = m;
+ }
+ tz[y] += j;
+ }
+
+ return tz;
+ }
+
+ function naturalSortCompare(a, b) {
+ var aa = naturalSortChunkify(a.toLowerCase());
+ var bb = naturalSortChunkify(b.toLowerCase());
+
+ for (var x = 0; aa[x] && bb[x]; x++) {
+ if (aa[x] !== bb[x]) {
+ var c = Number(aa[x]), d = Number(bb[x]);
+ if (c.toString() === aa[x] && d.toString() === bb[x])
+ return c - d;
+ else
+ return (aa[x] > bb[x]) ? 1 : -1;
+ }
+ }
+
+ return aa.length - bb.length;
+ }
+
+ // --------------------------------------------------------------------
// registry call back to render my-netdata menu
var netdataRegistryCallback = function(machines_array) {
@@ -616,16 +653,14 @@
var master = options.hosts[0].hostname;
var sorted = options.hosts.sort(function(a, b) {
if(a.hostname === master) return -1;
- if(a.hostname === b.hostname) return 0;
- else if(a.hostname > b.hostname) return 1;
- return -1;
+ return naturalSortCompare(a.hostname, b.hostname);
});
i = 0;
len = sorted.length;
while(len--) {
hostname = sorted[i].hostname;
- if(hostname == master) {
+ if(hostname === master) {
url = base + "/";
icon = "home";
}
@@ -656,14 +691,13 @@
saveLocalStorage("registryCallback", JSON.stringify(machines_array));
var machines = machines_array.sort(function (a, b) {
- if (a.name > b.name) return -1;
- if (a.name < b.name) return 1;
- return 0;
+ return naturalSortCompare(a.name, b.name);
});
+ i = 0;
len = machines.length;
while(len--) {
- var u = machines[len];
+ var u = machines[i++];
found++;
el += '<li id="registry_server_' + u.guid + '"><a class="registry_link" href="' + u.url + '" onClick="return gotoServerModalHandler(\'' + u.guid + '\');">' + u.name + '</a></li>';
a1 += '<li id="registry_action_' + u.guid + '"><a href="#" onclick="deleteRegistryModalHandler(\'' + u.guid + '\',\'' + u.name + '\',\'' + u.url + '\'); return false;"><i class="fa fa-trash-o" aria-hidden="true" style="color: #999;"></i></a></li>';
@@ -936,6 +970,8 @@
};
function chartsPerRow(total) {
+ void(total);
+
if(options.chartsPerRow === 0) {
return 1;
//var width = Math.floor(total / options.chartsMinWidth);
@@ -948,8 +984,7 @@
function prioritySort(a, b) {
if(a.priority < b.priority) return -1;
if(a.priority > b.priority) return 1;
- if(a.name < b.name) return -1;
- return 1;
+ return naturalSortCompare(a.name, b.name);
}
function sortObjectByPriority(object) {
@@ -968,8 +1003,7 @@
sorted.sort(function(a, b) {
if(idx[a].priority < idx[b].priority) return -1;
if(idx[a].priority > idx[b].priority) return 1;
- if(a < b) return -1;
- return 1;
+ return naturalSortCompare(a, b);
});
return sorted;
@@ -980,10 +1014,10 @@
// scroll to a section, without changing the browser history
function scrollToId(hash) {
- if(hash && hash != '' && document.getElementById(hash) !== null) {
+ if(hash && hash !== '' && document.getElementById(hash) !== null) {
var offset = $('#' + hash).offset();
if(typeof offset !== 'undefined')
- $('html, body').animate({ scrollTop: offset.top }, 0);
+ $('html, body').animate({ scrollTop: offset.top - 30 }, 0);
}
// we must return false to prevent the default action
@@ -1035,7 +1069,7 @@
key = key + '.' + this.sparklines_registry[key].count;
- return prefix + '<div data-netdata="' + chart + '" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dimensions="' + dimension + '" data-show-value-of-' + dimension + '-at="' + key + '"></div> (<span id="' + key + '" style="display: inline-block; min-width: 50px; text-align: right;">X</span>' + units + ')' + suffix;
+ return prefix + '<div class="netdata-container" data-netdata="' + chart + '" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dimensions="' + dimension + '" data-show-value-of-' + dimension + '-at="' + key + '"></div> (<span id="' + key + '" style="display: inline-block; min-width: 50px; text-align: right;">X</span>' + units + ')' + suffix;
},
gaugeChart: function(title, width, dimensions, colors) {
@@ -1045,7 +1079,7 @@
if(typeof dimensions === 'undefined')
dimensions = '';
- return '<div data-netdata="CHART_UNIQUE_ID"'
+ return '<div class="netdata-container" data-netdata="CHART_UNIQUE_ID"'
+ ' data-dimensions="' + dimensions + '"'
+ ' data-chart-library="gauge"'
+ ' data-gauge-adjust="width"'
@@ -1164,6 +1198,7 @@
case 'ap':
case 'net':
case 'disk':
+ case 'statsd':
chart.menu = tmp;
break;
@@ -1191,6 +1226,14 @@
chart.menu_pattern = 'cgroup';
break;
+ case 'go':
+ chart.menu = chart.type;
+ if(parts.length > 2 && parts[1] === 'expvar')
+ chart.menu_pattern = tmp + '_' + parts[1];
+ else if(parts.length > 1)
+ chart.menu_pattern = tmp;
+ break;
+
case 'isc':
chart.menu = chart.type;
if(parts.length > 2 && parts[1] === 'dhcpd')
@@ -1260,14 +1303,14 @@
var head = '';
if(typeof charts['system.swap'] !== 'undefined')
- head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.swap"'
+ ' data-dimensions="used"'
+ ' data-append-options="percentage"'
+ ' data-chart-library="easypiechart"'
+ ' data-title="Used Swap"'
+ ' data-units="%"'
+ ' data-easypiechart-max-value="100"'
- + ' data-width="8%"'
+ + ' data-width="9%"'
+ ' data-before="0"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
@@ -1275,21 +1318,21 @@
+ ' role="application"></div>';
if(typeof charts['system.io'] !== 'undefined') {
- head += '<div style="margin-right: 10px;" data-netdata="system.io"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.io"'
+ ' data-dimensions="in"'
+ ' data-chart-library="easypiechart"'
+ ' data-title="Disk Read"'
- + ' data-width="10%"'
+ + ' data-width="11%"'
+ ' data-before="0"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
+ ' role="application"></div>';
- head += '<div style="margin-right: 10px;" data-netdata="system.io"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.io"'
+ ' data-dimensions="out"'
+ ' data-chart-library="easypiechart"'
+ ' data-title="Disk Write"'
- + ' data-width="10%"'
+ + ' data-width="11%"'
+ ' data-before="0"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
@@ -1297,56 +1340,56 @@
}
if(typeof charts['system.cpu'] !== 'undefined')
- head += '<div data-netdata="system.cpu"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.cpu"'
+ ' data-chart-library="gauge"'
+ ' data-title="CPU"'
+ ' data-units="%"'
+ ' data-gauge-max-value="100"'
- + ' data-width="18%"'
+ + ' data-width="20%"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
+ ' data-colors="' + NETDATA.colors[12] + '"'
+ ' role="application"></div>';
if(typeof charts['system.ipv4'] !== 'undefined') {
- head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ipv4"'
+ ' data-dimensions="received"'
+ ' data-chart-library="easypiechart"'
+ ' data-title="IPv4 Inbound"'
- + ' data-width="10%"'
+ + ' data-width="11%"'
+ ' data-before="0"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
+ ' role="application"></div>';
- head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ipv4"'
+ ' data-dimensions="sent"'
+ ' data-chart-library="easypiechart"'
+ ' data-title="IPv4 Outbound"'
- + ' data-width="10%"'
+ + ' data-width="11%"'
+ ' data-before="0"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
+ ' role="application"></div>';
}
else if(typeof charts['system.ipv6'] !== 'undefined') {
- head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ipv6"'
+ ' data-dimensions="received"'
+ ' data-chart-library="easypiechart"'
+ ' data-title="IPv6 Inbound"'
+ ' data-units="kbps"'
- + ' data-width="10%"'
+ + ' data-width="11%"'
+ ' data-before="0"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
+ ' role="application"></div>';
- head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ipv6"'
+ ' data-dimensions="sent"'
+ ' data-chart-library="easypiechart"'
+ ' data-title="IPv6 Outbound"'
+ ' data-units="kbps"'
- + ' data-width="10%"'
+ + ' data-width="11%"'
+ ' data-before="0"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
@@ -1354,14 +1397,14 @@
}
if(typeof charts['system.ram'] !== 'undefined')
- head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ram"'
+ ' data-dimensions="used|buffers|active|wired"' // active and wired are FreeBSD stats
+ ' data-append-options="percentage"'
+ ' data-chart-library="easypiechart"'
+ ' data-title="Used RAM"'
+ ' data-units="%"'
+ ' data-easypiechart-max-value="100"'
- + ' data-width="8%"'
+ + ' data-width="9%"'
+ ' data-after="-' + duration.toString() + '"'
+ ' data-points="' + duration.toString() + '"'
+ ' data-colors="' + NETDATA.colors[7] + '"'
@@ -1446,8 +1489,24 @@
mhead += generateHeadCharts('mainheads', chart, duration);
head += generateHeadCharts('heads', chart, duration);
+ function chartCommonMin(family, context, units) {
+ var x = netdataDashboard.anyAttribute(netdataDashboard.context, 'commonMin', context, undefined);
+ if(typeof x !== 'undefined')
+ return ' data-common-min="' + family + '/' + context + '/' + units + '"';
+ else
+ return '';
+ }
+
+ function chartCommonMax(family, context, units) {
+ var x = netdataDashboard.anyAttribute(netdataDashboard.context, 'commonMax', context, undefined);
+ if(typeof x !== 'undefined')
+ return ' data-common-max="' + family + '/' + context + '/' + units + '"';
+ else
+ return '';
+ }
+
// generate the chart
- chtml += netdataDashboard.contextInfo(chart.context) + '<div id="chart_' + NETDATA.name2id(chart.id) + '" data-netdata="' + chart.id + '"'
+ chtml += netdataDashboard.contextInfo(chart.context) + '<div class="netdata-container" id="chart_' + NETDATA.name2id(chart.id) + '" data-netdata="' + chart.id + '"'
+ ' data-width="' + pcent_width.toString() + '%"'
+ ' data-height="' + netdataDashboard.contextHeight(chart.context, options.chartsHeight).toString() + 'px"'
+ ' data-dygraph-valuerange="' + netdataDashboard.contextValueRange(chart.context) + '"'
@@ -1455,6 +1514,8 @@
+ ' data-after="-' + duration.toString() + '"'
+ ' data-id="' + NETDATA.name2id(options.hostname + '/' + chart.id) + '"'
+ ' data-colors="' + netdataDashboard.anyAttribute(netdataDashboard.context, 'colors', chart.context, '') + '"'
+ + chartCommonMin(chart.family, chart.context, chart.units)
+ + chartCommonMax(chart.family, chart.context, chart.units)
+ ' role="application"></div>';
// console.log(' \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context + ' height: ' + menus[menu].submenus[submenu].height);
@@ -1471,7 +1532,7 @@
sidebar += '<li class="" style="padding-top:15px;"><a href="https://github.com/firehol/netdata/wiki/Add-more-charts-to-netdata" target="_blank"><i class="fa fa-plus" aria-hidden="true"></i> add more charts</a></li>';
sidebar += '<li class=""><a href="https://github.com/firehol/netdata/wiki/Add-more-alarms-to-netdata" target="_blank"><i class="fa fa-plus" aria-hidden="true"></i> add more alarms</a></li>';
- sidebar += '<li class="" style="margin:20px;color:#666;"><small>netdata on <b>' + data.hostname.toString() + '</b>, collects every ' + ((data.update_every == 1)?'second':data.update_every.toString() + ' seconds') + ' <b>' + data.dimensions_count.toLocaleString() + '</b> metrics, presented as <b>' + data.charts_count.toLocaleString() + '</b> charts and monitored by <b>' + data.alarms_count.toLocaleString() + '</b> alarms, using ' + Math.round(data.rrd_memory_bytes / 1024 / 1024).toLocaleString() + ' MB of memory for ' + seconds4human(data.update_every * data.history) + ' of real-time history.<br/>&nbsp;<br/><b>netdata</b><br/>v' + data.version.toString() +'</small></li>';
+ sidebar += '<li class="" style="margin:20px;color:#666;"><small>netdata on <b>' + data.hostname.toString() + '</b>, collects every ' + ((data.update_every === 1)?'second':data.update_every.toString() + ' seconds') + ' <b>' + data.dimensions_count.toLocaleString() + '</b> metrics, presented as <b>' + data.charts_count.toLocaleString() + '</b> charts and monitored by <b>' + data.alarms_count.toLocaleString() + '</b> alarms, using ' + Math.round(data.rrd_memory_bytes / 1024 / 1024).toLocaleString() + ' MB of memory for ' + seconds4human(data.update_every * data.history) + ' of real-time history.<br/>&nbsp;<br/><b>netdata</b><br/>v' + data.version.toString() +'</small></li>';
sidebar += '</ul>';
div.innerHTML = html;
document.getElementById('sidebar').innerHTML = sidebar;
@@ -1619,7 +1680,7 @@
var t = new Date(timestamp * 1000);
var now = new Date();
- if(t.toDateString() == now.toDateString())
+ if(t.toDateString() === now.toDateString())
return t.toLocaleTimeString();
return t.toLocaleDateString() + space + t.toLocaleTimeString();
@@ -1676,8 +1737,8 @@
}
var delay = '';
- if((alarm.delay_up_duration > 0 || alarm.delay_down_duration > 0) && alarm.delay_multiplier != 0 && alarm.delay_max_duration > 0) {
- if(alarm.delay_up_duration == alarm.delay_down_duration) {
+ if((alarm.delay_up_duration > 0 || alarm.delay_down_duration > 0) && alarm.delay_multiplier !== 0 && alarm.delay_max_duration > 0) {
+ if(alarm.delay_up_duration === alarm.delay_down_duration) {
delay += '<small><br/>hysteresis ' + seconds4human(alarm.delay_up_duration, { negative_suffix: '' });
}
else {
@@ -1689,7 +1750,7 @@
delay += 'on&nbsp;recovery&nbsp;<code>' + seconds4human(alarm.delay_down_duration, { negative_suffix: '' }) + '</code>, ';
}
}
- if(alarm.delay_multiplier != 1.0) {
+ if(alarm.delay_multiplier !== 1.0) {
delay += 'multiplied&nbsp;by&nbsp;<code>' + alarm.delay_multiplier.toString() + '</code>';
delay += ',&nbsp;up&nbsp;to&nbsp;<code>' + seconds4human(alarm.delay_max_duration, { negative_suffix: '' }) + '</code>';
}
@@ -1762,15 +1823,16 @@
// sort the families, like the dashboard menu does
var families_sorted = families_sort.sort(function (a, b) {
- if (a.priority > b.priority) return -1;
- if (a.priority < b.priority) return 1;
- return 0;
+ if (a.priority < b.priority) return -1;
+ if (a.priority > b.priority) return 1;
+ return naturalSortCompare(a.name, b.name);
});
+ var i = 0;
var fc = 0;
var len = families_sorted.length;
while(len--) {
- family = families_sorted[len].name;
+ family = families_sorted[i++].name;
var active_family_added = false;
var expanded = 'true';
var collapsed = '';
@@ -2253,7 +2315,7 @@
if(hours > 1) txt += hours.toString() + options.space + options.hours;
else if(hours === 1) txt += hours.toString() + options.space + options.hour;
- if(hours > 0 && minutes > 0 && seconds == 0)
+ if(hours > 0 && minutes > 0 && seconds === 0)
txt += options.space + options.and + options.space;
else if(hours > 0 && minutes > 0 && seconds > 0)
txt += ',' + options.space;
@@ -2293,7 +2355,7 @@
options.version = data.version;
netdataDashboard.os = data.os;
- if(typeof data.hosts != 'undefined')
+ if(typeof data.hosts !=='undefined')
options.hosts = data.hosts;
// update the dashboard hostname
@@ -2328,7 +2390,7 @@
netdata_url = NETDATA.serverDefault;
// initialize clickable alarms
- NETDATA.alarms.chart_div_offset = 100;
+ NETDATA.alarms.chart_div_offset = -50;
NETDATA.alarms.chart_div_id_prefix = 'chart_';
NETDATA.alarms.chart_div_animation_duration = 0;
@@ -2337,7 +2399,7 @@
// download all the charts the server knows
NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
- if(data != null) {
+ if(data !== null) {
if(typeof data.custom_info !== 'undefined' && data.custom_info !== "") {
loadJs(data.custom_info, function () {
$.extend(true, netdataDashboard, customDashboard);
@@ -2362,7 +2424,7 @@
var s = options.version.split('-');
if(s.length !== 3) return null;
- if(s[2][0] == 'g') {
+ if(s[2][0] === 'g') {
var v = s[2].split('_')[0].substring(1, 8);
if(v.length === 7) {
versionLog('Installed git commit id of netdata is ' + v);
@@ -2566,17 +2628,17 @@
var tagName = null;
for (var i = 0, r = 0; r <= config.showChars; i++) {
- if (content[i] == '<' && !inTag) {
+ if (content[i] === '<' && !inTag) {
inTag = true;
// This could be "tag" or "/tag"
tagName = content.substring(i + 1, content.indexOf('>', i));
// If its a closing tag
- if (tagName[0] == '/') {
+ if (tagName[0] === '/') {
- if (tagName != '/' + openTags[0]) {
+ if (tagName !== ('/' + openTags[0])) {
config.errMsg = 'ERROR en HTML: the top of the stack should be the tag that closes';
} else {
openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
@@ -2584,12 +2646,12 @@
} else {
// There are some nasty tags that don't have a close tag like <br/>
- if (tagName.toLowerCase() != 'br') {
+ if (tagName.toLowerCase() !== 'br') {
openTags.unshift(tagName); // Add to start the name of the tag that opens
}
}
}
- if (inTag && content[i] == '>') {
+ if (inTag && content[i] === '>') {
inTag = false;
}
@@ -2668,17 +2730,21 @@
});
/* activate bootstrap scrollspy (needed for sidebar) */
+ var scrollspyOffset = $(window).height() / 5;
+ if(scrollspyOffset > 200) scrollspyOffset = 200;
+ if(scrollspyOffset < 50) scrollspyOffset = 50;
$(document.body).scrollspy({
target: '#sidebar',
- offset: $(window).height() / 5 // controls the diff of the <hX> element to the top, to select it
+ offset: scrollspyOffset // controls the diff of the <hX> element to the top, to select it
});
// change the URL based on the current position of the screen
$sidebar.on('activate.bs.scrollspy', function (e) {
- // console.log(e);
+ //console.log(e);
var el = $(e.target);
- //if(el.find('ul').size() == 0) {
+ //if(el.find('ul').size() === 0) {
var hash = el.find('a').attr('href');
+ // console.log(hash);
if(typeof hash === 'string' && hash.substring(0, 1) === '#' && urlOptions.hash.startsWith(hash + '_submenu_') === false) {
urlOptions.hash = hash;
//console.log(urlOptions.hash);
@@ -2895,7 +2961,7 @@
});
NETDATA.requiredJs.push({
- url: NETDATA.serverDefault + 'dashboard_info.js?v20170308-1',
+ url: NETDATA.serverDefault + 'dashboard_info.js?v20170530-1',
async: false,
isAlreadyLoaded: function() { return false; }
});
@@ -2993,7 +3059,7 @@
<b>Hover</b> on them too!
</div>
<div class="col-md-6">
- <div data-netdata="system.intr" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dygraph-type="line" data-dygraph-strokewidth="3" data-dygraph-smooth="true" data-dygraph-highlightcirclesize="6" data-after="-90" data-height="60px" data-colors="#C66"></div>
+ <div class="netdata-container" data-netdata="system.intr" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dygraph-type="line" data-dygraph-strokewidth="3" data-dygraph-smooth="true" data-dygraph-highlightcirclesize="6" data-after="-90" data-height="60px" data-colors="#C66"></div>
</div>
</div>
</div>
@@ -3523,4 +3589,4 @@
</div>
</body>
</html>
-<script type="text/javascript" src="dashboard.js?v20170211-2"></script>
+<script type="text/javascript" src="dashboard.js?v20170715-1"></script>