<meta name="author" content="costa@tsaousis.gr">
<link rel="shortcut icon" href="images/seo-performance-multi-size.ico">
-
+
<link rel="apple-touch-icon" href="images/seo-performance-72.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/seo-performance-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/seo-performance-114.png">
position: relative;
z-index: -2;
}
- h1:before, h2:before {
- display: block;
- content: " ";
+ h1:before, h2:before {
+ display: block;
+ content: " ";
margin-top: -70px;
height: 70px;
- visibility: hidden;
+ visibility: hidden;
}
.p {
}
.chart-message {
- display: block;
+ display: block;
margin-top: 10px;
}
<!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
<!-- <script> netdataServer = "http://box:19999"; </script> -->
+ <!-- check which theme to use -->
+ <script>
+ function loadLocalStorage(name) {
+ var ret = null;
+
+ try {
+ if(typeof Storage !== "undefined" && typeof localStorage === 'object')
+ ret = localStorage.getItem(name);
+ }
+ catch(error) {
+ ;
+ }
+
+ if(typeof ret === 'undefined' || ret === null)
+ return null;
+
+ return ret;
+ }
+
+ function saveLocalStorage(name, value) {
+ try {
+ if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
+ localStorage.setItem(name, value.toString());
+ return true;
+ }
+ }
+ catch(error) {
+ ;
+ }
+
+ return false;
+ }
+
+ function getTheme(def) {
+ var ret = loadLocalStorage('netdataTheme');
+ if(typeof ret === 'undefined' || ret === null || ret === 'undefined')
+ return def;
+ else
+ return ret;
+ }
+ var netdataTheme = getTheme('slate');
+
+ function setTheme(theme) {
+ return saveLocalStorage('netdataTheme', theme);
+ }
+ </script>
+
<!-- load the dashboard manager - it will do the rest -->
- <script>var netdataTheme = 'slate';</script>
- <script type="text/javascript" src="dashboard.js?v25"></script>
+ <script type="text/javascript" src="dashboard.js?v26"></script>
</head>
<body data-spy="scroll" data-target="#sidebar">
<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>
<li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
+ <li id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal"><i class="fa fa-cloud-download"></i> update</a></li>
<!-- <li><a href="old/" class="btn" target="_blank"><i class="fa fa-step-backward"></i> old dashboard</a></li> -->
<li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
<!-- <li><a href="#sec">Visualize</a></li>
<i class="fa fa-circle"></i> <a href="http://D3js.org/" target="_blank">D3</a>,
<i class="fa fa-copyright"></i> Copyright 2015, Mike Bostock, <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">BSD License</a>
+ <i class="fa fa-circle"></i> <a href="https://github.com/broofa/node-int64" target="_blank">node-int64</a>,
+ <i class="fa fa-copyright"></i> Copyright 2014, Robert Kieffer, <a href="https://github.com/broofa/node-int64/blob/master/LICENSE" target="_blank">MIT License</a>
+
</small>
</div>
</div>
</div>
<hr/>
<div class="p">
- <h4>Trag Chart Contents</h4>
- Trag the contents of a chart to pan it horizontally.
+ <h4>Drag Chart Contents</h4>
+ Drag the contents of a chart to pan it horizontally.
<br/>
All the charts will follow soon after you let the chart alone (this little delay is by design: it speeds up your browser and lets you focus on what you are exploring).
<br/>
</div>
<hr/>
<div class="p">
- <h4>SHIFT + Trag</h4>
- While pressing the shift key, select with the mouse and area of a chart, to zoom in. The other charts will follow too. Zooming is performed in two phases:
+ <h4>SHIFT + Drag</h4>
+ 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>
<h4>Legend Operations</h4>
Click on the label or value of a dimension, will select / unselect this dimension.
<br/>
- You can press any of the shift or control keys and the 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 / unselect multiple dimensions.
</div>
</div>
<div role="tabpanel" class="tab-pane" id="help_touch">
</div>
<hr/>
<div class="p">
- <h4>Trag Chart Contents</h4>
- Touch and Trag the contents of a chart to pan it horizontally.
+ <h4>Drag Chart Contents</h4>
+ Touch and Drag the contents of a chart to pan it horizontally.
<br/>
All the charts will follow soon after you let the chart alone (this little delay is by design: it speeds up your browser and lets you focus on what you are exploring).
<br/>
</div>
<div class="modal-body">
<center>
- <small style="color: #BBBBBB;">Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
+ <small style="color: #BBBBBB;">These are browser settings. Each viewer has its own. They do not affect the operation of your netdata server.
<br/>
- To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="NETDATA.resetOptions(); return false;">here</a>.</small>
+ Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
+ <br/>
+ To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="resetDashboardOptions(); return false;">here</a>.</small>
</center>
<div style="padding: 10px;"></div>
<form id="optionsForm" method="get" class="form-horizontal">
<div class="form-group">
<table>
+ <tr class="option-row">
+ <td class="option-control"><input id="netdata_theme_control" type="checkbox" checked data-toggle="toggle" data-offstyle="danger" data-onstyle="success" data-on="Dark" data-off="White" data-width="110px"></td>
+ <td class="option-info"><strong>Which theme to use?</strong><br/>
+ <small>Netdata comes with two themes: <b>Dark</b> (the default) and <b>White</b>.</small>
+ </td>
+ </tr>
<tr class="option-row">
<td class="option-control"><input id="pan_and_zoom_data_padding" type="checkbox" checked data-toggle="toggle" data-on="Pad" data-off="Don't Pad" data-width="110px"></td>
<td class="option-info"><strong>Enable data padding when panning and zooming?</strong><br/>
</div>
</div>
-</body>
-</html>
+
+ <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+ <h4 class="modal-title" id="updateModalLabel">Update Check</h4>
+ </div>
+ <div class="modal-body">
+ Your netdata version: <b><code><span id="netdataVersion">Unknown</span></code></b>
+ <br/>
+ <div style="padding: 10px;"></div>
+ <div id="versionCheckLog">Not checked yet. Please press the Check Now button.</div>
+ </div>
+ <div class="modal-footer">
+ <a href="#" onclick="notifyForUpdate(true);" type="button" class="btn btn-default">Check Now</a>
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
<script>
var demo_hostname = 'netdata.firehol.org';
function gaugeChart(title, width, dimensions, colors) {
if(typeof colors === 'undefined')
colors = '';
-
+
if(typeof dimensions === 'undefined')
dimensions = '';
-
+
return '<div data-netdata="CHART_UNIQUE_ID"'
+ ' data-dimensions="' + dimensions + '"'
+ ' data-chart-library="gauge"'
info: undefined
},
+ 'ipv6': {
+ title: 'IPv6 Networking',
+ info: undefined
+ },
+
'ipvs': {
title: 'IP Virtual Server',
info: undefined
info: 'System processes, read from <code>/proc/stat</code>. <b>Blocked</b> are processes that are willing to execute but they cannot, e.g. because they wait for disk activity.'
},
+ 'system.active_processes': {
+ info: 'All system active processes, read from <code>/proc/loadavg</code>.'
+ },
+
'system.ctxt': {
info: '<a href="https://en.wikipedia.org/wiki/Context_switch" target="_blank">Context Switches</a>, read from <code>/proc/stat</code>, is the switching of the CPU from one process, task or thread to another. If there are many processes or threads willing to execute and very few CPU cores available to handle them, the system is making more context switching to balance the CPU resources among them. The whole process is computationally intensive. The more the context switches, the slower the system gets.'
},
},
'system.ipv4': {
- info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>. This includes <code>lo</code> device traffic.'
+ info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>.'
+ },
+
+ 'system.ipv6': {
+ info: 'Total IPv6 Traffic, read from <code>/proc/net/snmp6</code>.'
},
'system.ram': {
info: 'System swap memory, read from <code>/proc/meminfo</code>.'
},
+ 'mem.ksm_savings': {
+ heads: [
+ gaugeChart('Saved', '12%', 'savings', '#0099CC')
+ ]
+ },
+
+ 'mem.ksm_ratios': {
+ heads: [
+ function(id) {
+ return '<div data-netdata="' + id + '"'
+ + ' data-gauge-max-value="100"'
+ + ' data-chart-library="gauge"'
+ + ' data-title="Savings"'
+ + ' data-units="percentage %"'
+ + ' data-gauge-adjust="width"'
+ + ' data-width="12%"'
+ + ' data-before="0"'
+ + ' data-after="-CHART_DURATION"'
+ + ' data-points="CHART_DURATION"'
+ + ' role="application"></div>';
+ }
+ ]
+ },
+
'mem.committed': {
colors: NETDATA.colors[3]
},
},
'disk.backlog': {
- colors: '#CCCC00'
+ colors: '#0099CC'
},
'disk.io': {
+ ' data-points="' + duration.toString() + '"'
+ ' role="application"></div>';
}
+ else if(typeof charts['system.ipv6'] !== 'undefined') {
+ head += '<div 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-before="0"'
+ + ' data-after="-' + duration.toString() + '"'
+ + ' data-points="' + duration.toString() + '"'
+ + ' role="application"></div>';
+
+ head += '<div 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-before="0"'
+ + ' data-after="-' + duration.toString() + '"'
+ + ' data-points="' + duration.toString() + '"'
+ + ' role="application"></div>';
+ }
if(typeof charts['system.ram'] !== 'undefined')
head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
height: menuHeight(charts[c].menu, options.chartsHeight)
};
}
-
+
if(charts[c].priority < menus[charts[c].menu].priority)
menus[charts[c].menu].priority = charts[c].priority;
height: submenuHeight(charts[c].menu, charts[c].submenu, menus[charts[c].menu].height)
};
}
-
+
if(charts[c].priority < menus[charts[c].menu].submenus[charts[c].submenu].priority)
menus[charts[c].menu].submenus[charts[c].submenu].priority = charts[c].priority;
document.getElementById('hostname').innerHTML = options.hostname;
document.getElementById('hostname').href = NETDATA.serverDefault;
document.title = options.hostname + ' dashboard';
-
+
renderChartsAndMenu(data);
// prepare our DOM
// ----------------------------------------------------------------------------
+function versionLog(msg) {
+ document.getElementById('versionCheckLog').innerHTML = msg;
+}
+
+function getNetdataVersion(callback) {
+ versionLog('Downloading installed version info from netdata...');
+
+ $.ajax({
+ url: 'version.txt',
+ async: true,
+ cache: false
+ })
+ .done(function(data) {
+ data = data.replace(/(\r\n|\n|\r)/gm,"")
+ console.log(data.length);
+ versionLog('Installed version of netdata is ' + data);
+ document.getElementById('netdataVersion').innerHTML = data;
+ callback(data);
+ })
+ .fail(function() {
+ versionLog('Failed to download installed version info from netdata!');
+ callback(null);
+ });
+}
+
+function getGithubLatestCommit(callback) {
+ versionLog('Downloading latest version info from github...');
+
+ $.ajax({
+ url: 'https://api.github.com/repos/firehol/netdata/commits',
+ async: true,
+ cache: false
+ })
+ .done(function(data) {
+ versionLog('Latest version info from github is ' + data[0].sha);
+ callback(data[0].sha);
+ })
+ .fail(function() {
+ versionLog('Failed to download installed version info from github!');
+ callback(null);
+ });
+}
+
+function checkForUpdate(callback) {
+ getNetdataVersion(function(sha1) {
+ if(sha1 === null) callback(null, null);
+
+ getGithubLatestCommit(function(sha2) {
+ callback(sha1, sha2);
+ });
+ });
+
+ return null;
+}
+
+var updateBlinkCounter = 0;
+function notifyForUpdate(force) {
+ var now = new Date().getTime();
+
+ if(typeof force === 'undefined' || force !== true) {
+ var last = loadLocalStorage('last_update_check');
+
+ if(typeof last === 'string')
+ last = parseInt(last);
+ else
+ last = 0;
+
+ if(now - last < 3600000 * 8) {
+ // no need to check it - too soon
+ return;
+ }
+ }
+
+ checkForUpdate(function(sha1, sha2) {
+ var save = false;
+
+ if(sha1 === null) {
+ save = false;
+ versionLog('<p><big>Failed to get your netdata version!</big></p>');
+ }
+ else if(sha2 === null) {
+ save = false;
+ versionLog('<p><big>Failed to get the latest version from github.</big></p>');
+ }
+ else if(sha1 === sha2) {
+ save = true;
+ versionLog('<p><big>You already have the latest version of netdata!</big></p>');
+ }
+ else {
+ save = true;
+ var compare = 'https://github.com/firehol/netdata/compare/' + sha1.toString() + '...' + sha2.toString();
+
+ versionLog('<p><big><strong>You don\'t have the latest version of netdata!</strong></big></p><p>Latest version: ' + sha2.toString() + '</p><p><a href="' + compare + '" target="_blank">Click here for the changes log</a> since your installed version, and<br/><a href="https://github.com/firehol/netdata/wiki/Updating-Netdata" target="_blank">click here for directions on updating</a> your netdata installation.</p><p>We suggest to review the changes log for new features you may be interested, or important bug fixes you may need.<br/>Keeping your netdata updated is generally a good idea.</p>');
+
+ function updateButtonBlink() {
+ updateBlinkCounter--;
+ if(updateBlinkCounter > 0)
+ $('#updateButton').fadeOut(500).fadeIn(500, updateButtonBlink);
+ }
+
+ if(updateBlinkCounter === 0) {
+ updateBlinkCounter = 300;
+ updateButtonBlink();
+ }
+ }
+
+ if(save)
+ saveLocalStorage('last_update_check', now.toString());
+ });
+}
+
+// ----------------------------------------------------------------------------
+
function finalizePage() {
// resize all charts - without starting the background thread
// this has to be done while NETDATA is paused
$('#sidebar').on('affixed.bs.affix', function() {
$(this).removeAttr('style');
});
-
+
/* activate bootstrap scrollspy (needed for sidebar) */
$(document.body).scrollspy({
target: '#sidebar',
}
}
+ var theme_sync_option = function(option) {
+ var self = $('#' + option);
+
+ self.bootstrapToggle(netdataTheme === 'slate'?'on':'off');
+ }
+
sync_option('eliminate_zero_dimensions');
sync_option('destroy_on_hide');
sync_option('parallel_refresher');
sync_option('stop_updates_when_focus_is_lost');
sync_option('smooth_plot');
sync_option('pan_and_zoom_data_padding');
+ theme_sync_option('netdata_theme_control');
if(NETDATA.getOption('parallel_refresher') === false) {
$('#concurrent_refreshes_row').hide();
$('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
$('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
$('#pan_and_zoom_data_padding').change(function() { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
-
- if(document.location.hostname === demo_hostname)
+
+ // this has to be the last
+ // it reloads the page
+ $('#netdata_theme_control').change(function() {
+ if(setTheme($(this).prop('checked')?'slate':'default'))
+ location.reload();
+ });
+
+ if(document.location.hostname === demo_hostname) {
setTimeout(function() {
$('#welcomeModal').modal();
}, 1000);
+ }
+ else
+ notifyForUpdate();
+}
+
+function resetDashboardOptions() {
+ NETDATA.resetOptions();
+ if(setTheme('slate'))
+ location.reload();
}
downloadAllCharts();
</script>
+
+</body>
+</html>
projects / netdata.git / blobdiff