<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>
</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/>
+ 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="NETDATA.resetOptions(); return false;">here</a>.</small>
+ 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>
+
+ <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
},
'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': {
+ ' 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();
projects / netdata.git / blobdiff