diff options
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 186 |
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/> <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/> <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 recovery <code>' + seconds4human(alarm.delay_down_duration, { negative_suffix: '' }) + '</code>, '; } } - if(alarm.delay_multiplier != 1.0) { + if(alarm.delay_multiplier !== 1.0) { delay += 'multiplied by <code>' + alarm.delay_multiplier.toString() + '</code>'; delay += ', up to <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> |