browser history is preserved while scrolling and navigating the dashboard; current position is propagated between registry servers; middle mouse button working on registry servers
Costa Tsaousis (ktsaou) committed
Jun 9, 2016 at 00:56 UTC
dfcdde046dd09cbafcef7ca104db7c32a41fe0da
1 file changed
+60
-25
web/index.html
+60
-25
@@ -390,7 +390,7 @@
390
while(len--) {
391
var u = machines[len];
392
found++;
393
- el += '<li id="registry_server_' + u.guid + '"><a href="#" onClick="return gotoServerModalHandler(\'' + u.guid + '\');">' + u.name + '</a></li>';
393
+ el += '<li id="registry_server_' + u.guid + '"><a class="registry_link" href="#" onClick="return gotoServerModalHandler(\'' + u.guid + '\');">' + u.name + '</a></li>';
394
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>';
395
}
396
}
@@ -422,6 +422,8 @@
422
document.getElementById('mynetdata_servers').innerHTML = el;
423
document.getElementById('mynetdata_servers2').innerHTML = el;
424
document.getElementById('mynetdata_actions1').innerHTML = a1;
425
+
426
+ gotoServerInit();
427
};
428
429
</script>
@@ -1019,6 +1021,8 @@ if(isdemo()) {
1021
document.getElementById('masthead').style.display = 'block';
1022
}
1023
var gotoServerValidateRemaining = 0;
1024
+var gotoServerMiddleClick = false;
1025
+var gotoServerStop = false;
1026
function gotoServerValidateUrl(id, guid, url) {
1027
var penaldy = 0;
1028
if(document.location.toString().startsWith('http://') && url.toString().startsWith('https://'))
@@ -1028,25 +1032,41 @@ function gotoServerValidateUrl(id, guid, url) {
1032
1033
setTimeout(function() {
1034
document.getElementById('gotoServerList').innerHTML += '<tr><td style="padding-left: 20px;"><a href="' + url + '" target="_blank">' + url + '</a></td><td style="padding-left: 30px;"><code id="' + guid + '-' + id + '-status">checking...</code></td></tr>';
1035
+
1036
NETDATA.registry.hello(url, function(data) {
1037
if (data) {
1033
- console.log('OK ' + id + ' URL: ' + url);
1038
+ // console.log('OK ' + id + ' URL: ' + url);
1039
document.getElementById(guid + '-' + id + '-status').innerHTML = "OK";
1035
- document.location = url;
1040
+ var hash = document.location.hash || '';
1041
+
1042
+ if(!gotoServerStop) {
1043
+ gotoServerStop = true;
1044
+
1045
+ if(gotoServerMiddleClick) {
1046
+ window.open(url + hash, '_blank');
1047
+ gotoServerMiddleClick = false;
1048
+ document.getElementById('gotoServerResponse').innerHTML = '<b>Opening new window to ' + NETDATA.registry.machines[guid].name + '<br/><a href="' + url + hash + '">' + url + hash + '</a></b><br/>(check your pop-up blocker if it fails)';
1049
+ }
1050
+ else
1051
+ document.location = url + hash;
1052
+ }
1053
}
1054
else {
1055
document.getElementById(guid + '-' + id + '-status').innerHTML = "failed!";
1056
gotoServerValidateRemaining--;
1040
- if(gotoServerValidateRemaining <= 0)
1057
+ if(gotoServerValidateRemaining <= 0) {
1058
+ gotoServerMiddleClick = false;
1059
document.getElementById('gotoServerResponse').innerHTML = '<b>Sorry! I cannot find any operational URL for this server</b>';
1060
+ }
1061
}
1062
});
1063
}, (id * 50) + penaldy);
1064
}
1065
1066
function gotoServerModalHandler(guid) {
1048
- console.log('goto server: ' + guid);
1067
+ // console.log('goto server: ' + guid);
1068
1069
+ gotoServerStop = false;
1070
var len = NETDATA.registry.machines[guid].alternate_urls.length;
1071
1072
document.getElementById('gotoServerResponse').innerHTML = '';
@@ -1061,6 +1081,17 @@ function gotoServerModalHandler(guid) {
1081
return false;
1082
}
1083
1084
+function gotoServerInit() {
1085
+ $(".registry_link").on('click', function(e) {
1086
+ if(e.which == 2) {
1087
+ e.preventDefault();
1088
+ gotoServerMiddleClick = true;
1089
+ }
1090
+ else
1091
+ gotoServerMiddleClick = false;
1092
+ });
1093
+}
1094
+
1095
function switchRegistryModalHandler() {
1096
document.getElementById('switchRegistryPersonGUID').value = NETDATA.registry.person_guid;
1097
document.getElementById('switchRegistryURL').innerHTML = NETDATA.registry.server;
@@ -1124,7 +1155,7 @@ var options = {
1155
chartsPerRow: 0,
1156
chartsMinWidth: 1450,
1157
chartsHeight: 180,
1127
- sparklinesHeight: 60
1158
+ sparklinesHeight: 60,
1159
};
1160
1161
// generate a sparkline
@@ -1184,6 +1215,21 @@ function sortObjectByPriority(object) {
1215
return sorted;
1216
}
1217
1218
+
1219
+// ----------------------------------------------------------------------------
1220
+// scroll to a section, without changing the browser history
1221
+
1222
+function scrollToId(hash) {
1223
+ if(hash && hash != '') {
1224
+ var offset = $('#' + hash).offset();
1225
+ if(typeof offset !== 'undefined')
1226
+ $('html, body').animate({ scrollTop: offset.top }, 0);
1227
+ }
1228
+
1229
+ // we must return false to prevent the default action
1230
+ return false;
1231
+}
1232
+
1233
// ----------------------------------------------------------------------------
1234
1235
function gaugeChart(title, width, dimensions, colors) {
@@ -1953,7 +1999,7 @@ function renderPage(menus, data) {
1999
// generate an entry at the main menu
2000
2001
var menuid = name2id(menu);
1956
- sidebar += '<li class=""><a href="#' + menuid + '">' + menus[menu].title + '</a><ul class="nav">';
2002
+ sidebar += '<li class=""><a href="#' + menuid + '" onClick="return scrollToId(\'' + menuid + '\');">' + menus[menu].title + '</a><ul class="nav">';
2003
html += '<div role="section"><div role="sectionhead"><h1 id="' + menuid + '" role="heading">' + menus[menu].title + '</h1></div><div id="menu_' + menuid + '" role="document">';
2004
2005
if(menus[menu].info !== null)
@@ -1973,7 +2019,7 @@ function renderPage(menus, data) {
2019
2020
// generate an entry at the submenu
2021
var submenuid = name2id(menu + '_' + submenu);
1976
- sidebar += '<li class><a href="#' + submenuid + '">' + menus[menu].submenus[submenu].title + '</a></li>';
2022
+ sidebar += '<li class><a href="#' + submenuid + '" onClick="return scrollToId(\'' + submenuid + '\');">' + menus[menu].submenus[submenu].title + '</a></li>';
2023
shtml += '<div class="netdata-group-container" id="submenu_' + submenuid + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + submenuid + '" class="netdata-chart-alignment" role="heading">' + menus[menu].submenus[submenu].title + '</h2>';
2024
2025
if(menus[menu].submenus[submenu].info !== null)
@@ -2091,7 +2137,7 @@ function downloadAllCharts(netdata_url) {
2137
options.hostname = data.hostname;
2138
document.getElementById('hostname').innerHTML = options.hostname;
2139
document.getElementById('hostname').href = NETDATA.serverDefault;
2094
- document.title = options.hostname + ' dashboard';
2140
+ document.title = options.hostname + ' netdata dashboard';
2141
2142
renderChartsAndMenu(data);
2143
@@ -2397,14 +2443,7 @@ function finalizePage() {
2443
NETDATA.unpause();
2444
2445
// check if we have to jump to a specific section
2400
- var hash = location.hash.replace('#','');
2401
- if(hash != '') {
2402
- // Clear the hash in the URL
2403
- // location.hash = ''; // delete front "//" if you want to change the address bar
2404
- var offset = $(location.hash).offset();
2405
- if(typeof offset !== 'undefined')
2406
- $('html, body').animate({ scrollTop: offset.top }, 0);
2407
- }
2446
+ scrollToId(location.hash.replace('#',''));
2447
2448
/* activate bootstrap sidebar (affix) */
2449
$('#sidebar').affix({
@@ -2427,19 +2466,15 @@ function finalizePage() {
2466
offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
2467
});
2468
2430
- $('#sidebar').on('activate.bs.scrollspy', function (e)
2431
- {
2469
+ // change the URL based on the current position of the screen
2470
+ $('#sidebar').on('activate.bs.scrollspy', function (e) {
2471
var el = $(e.target);
2433
- if (el.find('ul').size() == 0)
2434
- {
2435
- var href = el.find('a').attr('href');
2436
- history.pushState(null, document.title, href);
2437
- };
2472
+ if(el.find('ul').size() == 0)
2473
+ history.replaceState(null, document.title, el.find('a').attr('href'));
2474
});
2475
2476
document.getElementById('footer').style.display = 'block';
2477
2442
-
2478
var update_options_modal = function() {
2479
// console.log('update_options_modal');
2480