<style>
- /* prevent body from hidding under the navbar */
+ /* prevent body from hiding under the navbar */
body {
padding-top: 50px;
}
</script>
<!-- load the dashboard manager - it will do the rest -->
- <script type="text/javascript" src="dashboard.js?v27"></script>
+ <script type="text/javascript" src="dashboard.js?v34"></script>
</head>
<body data-spy="scroll" data-target="#sidebar">
</button>
<a href="/" class="navbar-brand" id="hostname">netdata</a>
</div>
+ <nav id="demosites_nav" class="collapse navbar-collapse navbar-left" role="navigation">
+ <ul class="nav navbar-nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">demo sites <strong class="caret"></strong></a>
+ <ul class="dropdown-menu scrollable-menu inpagemenu" role="menu">
+ <li id="demo_eu"><a href="//netdata1.firehol.org?nowelcome">EU - London (DigitalOcean.com)</a></li>
+ <li id="demo_us"><a href="//netdata2.firehol.org?nowelcome">US - Atlanta (CDN77.com)</a></li>
+ <li id="demo_gr"><a href="//netdata3.firehol.org?nowelcome">EU - Greece</a></li>
+ <li role="separator" class="divider"></li>
+ <li id="demo_tv"><a href="tv.html">TV Dashboard for 2 servers</a></li>
+ <li id="demosites"><a href="demosites.html">Dashboard for monitoring netdata demo sites</a></li>
+ </ul>
+ </li>
+ </ul>
+ </nav>
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<ul class="nav navbar-nav">
<li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
</div>
<div class="modal-body">
<div class="p">
- <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> is the fastest way to visualize metrics. It is a resource efficient, highly optimized system for collecting and visualizing any type of realtime timeseries data, from CPU usage, disk activity, SQL queries, API calls, web site visitors, etc.
+ <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> is the fastest way to visualize metrics. It is a resource efficient, highly optimized system for collecting and visualizing any type of real-time time series data, from CPU usage, disk activity, SQL queries, API calls, web site visitors, etc.
</div>
<div class="p">
<b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> tries to visualize the truth of <b>now</b>, in its <b>greatest detail</b>, so that you can get insights of what is happening now and what just happened, on your systems and applications.
While pressing the shift key, click on the contents of a chart and move the mouse to select an area, to zoom in. The other charts will follow too. Zooming is performed in two phases:
<ul>
<li>The already loaded chart contents are zoomed (low resolution)</li>
- <li>New data are transfered from the netdata server, to refresh the chart with possibly more detail.</li>
+ <li>New data are transferred from the netdata server, to refresh the chart with possibly more detail.</li>
</ul>
Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
</div>
<hr/>
<div class="p">
<h4>Legend Operations</h4>
- Click on the label or value of a dimension, will select / unselect this dimension.
+ Click on the label or value of a dimension, will select / un-select this dimension.
<br/>
- You can press any of the SHIFT or CONTROL keys and then click on legend labels or values, to select / unselect multiple dimensions.
+ You can press any of the SHIFT or CONTROL keys and then click on legend labels or values, to select / un-select multiple dimensions.
</div>
</div>
<div role="tabpanel" class="tab-pane" id="help_touch">
<hr/>
<div class="p">
<h4>Legend Operations</h4>
- Tap on the label or value of a dimension, will select / unselect this dimension.
+ Tap on the label or value of a dimension, will select / un-select this dimension.
</div>
</div>
</div>
<input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
</td>
<td class="option-info"><strong>Which dimensions to show?</strong><br/>
- <small>When set to <b>Non Zero</b>, dimensions that have all their values (within the current view) set to zero will not be transfered from the netdata server (except if all dimensions of the chart are zero, in which case this setting does nothing - all dimensions are transfered and shown). When set to <b>All</b>, all dimensions will always be shown. Set it to <b>Non Zero</b> to lower the data transfered between netdata and your browser, lower the CPU requirements of your browser (fewer lines to draw) and increase the focus on the legends (fewer entries at the legends).</small>
+ <small>When set to <b>Non Zero</b>, dimensions that have all their values (within the current view) set to zero will not be transferred from the netdata server (except if all dimensions of the chart are zero, in which case this setting does nothing - all dimensions are transferred and shown). When set to <b>All</b>, all dimensions will always be shown. Set it to <b>Non Zero</b> to lower the data transferred between netdata and your browser, lower the CPU requirements of your browser (fewer lines to draw) and increase the focus on the legends (fewer entries at the legends).</small>
</td>
</tr>
<tr class="option-row">
<div class="form-group">
<table>
<tr class="option-row">
- <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequencial" data-width="110px"></td>
+ <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequential" data-width="110px"></td>
<td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
- <small>When set to <b>parallel</b>, visible charts are refreshed in parallel (all queries are sent to netdata server in parallel) and are rendered asynchronously. When set to <b>sequencial</b> charts are refreshed one after another. Set it to parallel if your browser can cope with it (most modern browsers do), set it to sequencial if you work on an older/slower computer.</small>
+ <small>When set to <b>parallel</b>, visible charts are refreshed in parallel (all queries are sent to netdata server in parallel) and are rendered asynchronously. When set to <b>sequential</b> charts are refreshed one after another. Set it to parallel if your browser can cope with it (most modern browsers do), set it to sequential if you work on an older/slower computer.</small>
</td>
</tr>
<tr class="option-row" id="concurrent_refreshes_row">
<script>
-var demo_hostname = 'netdata.firehol.org';
-// var demo_hostname = 'box';
+var this_is_demo = null;
+function isdemo() {
+ if(this_is_demo !== null) return this_is_demo;
+ this_is_demo = false;
+
+ try {
+ if(typeof document.location.hostname === 'string') {
+ if(document.location.hostname === 'netdata.firehol.org' || document.location.hostname === 'netdata1.firehol.org') {
+ document.getElementById("demo_eu").className = "active";
+ this_is_demo = true;
+ }
+ else if(document.location.hostname === 'netdata2.firehol.org') {
+ document.getElementById("demo_us").className = "active";
+ this_is_demo = true;
+ }
+ else if(document.location.hostname === 'netdata3.firehol.org') {
+ document.getElementById("demo_gr").className = "active";
+ this_is_demo = true;
+ }
+ }
+
+ if(!this_is_demo)
+ document.getElementById("demosites_nav").style.visibility = "hidden";
+ }
+ catch(error) {
+ ;
+ }
-if(document.location.hostname === demo_hostname) {
+ return this_is_demo;
+}
+
+if(isdemo()) {
document.getElementById('masthead').style.display = 'block';
}
'apps': {
title: 'Applications',
- info: 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internaly builds a process tree (much like <code>ps fax</code> does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported).<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning childs continiously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited childs of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealisting utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
+ info: 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internally builds a process tree (much like <code>ps fax</code> does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported).<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
height: 1.5
},
'users': {
title: 'Users',
- info: 'Per user statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning childs continiously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited childs of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealisting utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
+ info: 'Per user statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
height: 1.5
},
'groups': {
title: 'User Groups',
- info: 'Per user group statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user group.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning childs continiously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited childs of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealisting utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
+ info: 'Per user group statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user group.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
height: 1.5
},
title: 'Example Charts',
info: undefined
},
+
+ 'cgroup': {
+ title: 'Container',
+ info: undefined
+ },
+
+ 'mysql': {
+ title: 'MySQL',
+ info: undefined
+ },
+
+ 'named': {
+ title: 'named',
+ info: undefined
+ },
};
var submenuData = {
'system.idlejitter': {
colors: '#5555AA',
- info: 'Idle jitter is calculated by netdata. A thread is spawned that requests to sleep for a few microseconds. When the system wakes it up, it measures how many microseconds have passed. The difference between the requested and the actual duration of the sleep, is the <b>idle jitter</b>. This number is useful in realtime environments, where CPU jitter can affect the quality of the service (like VoIP media gateways).'
+ info: 'Idle jitter is calculated by netdata. A thread is spawned that requests to sleep for a few microseconds. When the system wakes it up, it measures how many microseconds have passed. The difference between the requested and the actual duration of the sleep, is the <b>idle jitter</b>. This number is useful in real-time environments, where CPU jitter can affect the quality of the service (like VoIP media gateways).'
},
'system.ipv4': {
return def;
}
-function menuTitle(menu) {
- return anyAttribute(menuData, 'title', menu, menu);
+function menuTitle(chart) {
+ if(typeof chart.menu_pattern !== 'undefined') {
+ return anyAttribute(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
+ + ': ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
+ }
+
+ return anyAttribute(menuData, 'title', chart.menu, chart.menu);
}
function menuInfo(menu) {
chart.menu = tmp;
break;
+ case 'mysql':
+ case 'named':
+ case 'cgroup':
+ chart.menu = chart.type;
+ chart.menu_pattern = tmp;
+ break;
+
case 'tc':
chart.menu = tmp;
- // find the interface name from the name
- if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family)
- options.submenu_names[chart.family] = chart.name.split('.')[1].split('_')[0];
+ // find a name for this device from fireqos info
+ // we strip '_(in|out)' or '(in|out)_'
+ if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family) {
+ var n = chart.name.split('.')[1];
+ if(n.endsWith('_in'))
+ options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_in'));
+ else if(n.endsWith('_out'))
+ options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_out'));
+ else if(n.startsWith('in_'))
+ options.submenu_names[chart.family] = n.slice(3, n.length);
+ else if(n.startsWith('out_'))
+ options.submenu_names[chart.family] = n.slice(4, n.length);
+ }
// increase the priority of IFB devices
+ // to have inbound appear before outbound
if(chart.id.match(/.*-ifb$/))
chart.priority--;
function name2id(s) {
return s
- .replace(' ', '_')
- .replace('(', '_')
- .replace(')', '_')
- .replace('.', '_')
- .replace('/', '_');
+ .replace(/ /g, '_')
+ .replace(/\(/g, '_')
+ .replace(/\)/g, '_')
+ .replace(/\./g, '_')
+ .replace(/\//g, '_');
}
function headMain(charts, duration) {
// generate an entry at the main menu
- sidebar += '<li class=""><a href="#' +
menu + '">' + menus[menu].title + '</a><ul class="nav">';
+ sidebar += '<li class=""><a href="#' +
name2id(menu) + '">' + menus[menu].title + '</a><ul class="nav">';
html += '<div role="section"><div role="sectionhead"><h1 id="' + menu + '" role="heading">' + menus[menu].title + '</h1></div><div id="' + menu + '" role="document">';
if(menus[menu].info !== null)
menus[charts[c].menu] = {
priority: charts[c].priority,
submenus: {},
- title: menuTitle(charts[c].menu),
+ title: menuTitle(charts[c]),
info: menuInfo(charts[c].menu),
height: menuHeight(charts[c].menu, options.chartsHeight)
};
menus[charts[c].menu].submenus[charts[c].submenu].charts.push(charts[c]);
}
+ // propagate the descriptive subname given to QoS
+ // to all the other submenus with the same name
for(var m in menus) {
for(var s in menus[m].submenus) {
// set the family using a name
// the Dom elements are initially zero-sized
NETDATA.parseDom();
- var before = 0, after = 0;
+ var before = 0, after = 0, nowelcome = 0;
after = getUrlParameter('force_after_ms');
before = getUrlParameter('force_before_ms');
+ nowelcome = (getUrlParameter('nowelcome') === true)?true:false;
- if(before > 0 && after > 0)
+ if(before > 0 && after > 0) {
+ nowelcome = true;
NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
+ }
// let it run (update the charts)
NETDATA.unpause();
/* activate bootstrap sidebar (affix) */
$('#sidebar').affix({
offset: {
- top: (document.location.hostname === demo_hostname)?150:0,
+ top: (isdemo())?150:0,
bottom: 0
}
});
// this has to be the last
// it reloads the page
$('#netdata_theme_control').change(function() {
- if(setTheme($(this).prop('checked')?'slate':'default'))
+ if(setTheme($(this).prop('checked')?'slate':'white'))
location.reload();
});
- if(document.location.hostname === demo_hostname) {
+ if(!nowelcome && isdemo()) {
setTimeout(function() {
$('#welcomeModal').modal();
}, 1000);
projects / netdata.git / blobdiff