mirror of
https://github.com/netdata/netdata.git
synced 2025-04-28 14:42:31 +00:00
Issue 4582 (Show alternate urls in my-netdata menu) (#4590)
* Wip #4582 * CSS fix * Work on new my-menu layout, wip * Render alternate urls * Toggle alternates * Aesthetics * Integrated in the menu * Fixes #4582 * Handle some exceptional cases * Visible expand icon #4582 * Minor * Support for 'mirrored hosts' * Better separator * Cleanup * Minor * Cleanup * Refactored netdataRegistryCallback to keep Codacy happy Even though I do not agree with the `===` warning. We need to disable this. * Fixed issue with hosts * Minor improvement for multiline * Clip alternate urls to avoid wrapping * Show section descriptions #4582 * More aesthetic improvements * Show demo-servers if list empty, aesthetic improvements * Cleanup * Fix for codacy warning * Improved UI, shows ulrs for all agents * Cleanup * Customize colors for white theme * Add cache-buster to url to js/css urls * Minor * Improvements to avoid hitting the scrollbar * Finetuning
This commit is contained in:
George Moschovitis
Costa Tsaousis
parent
562f1b8453
commit
a29b433526
3 changed files with 300 additions and 137 deletions
web/gui
|
|
@ -13,7 +13,7 @@
|
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="author" content="costa@tsaousis.gr">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="main.css">
|
||||
<link rel="stylesheet" type="text/css" href="main.css?v=2">
|
||||
|
||||
<!-- <link rel="shortcut icon" href="images/seo-performance-multi-size.ico"> -->
|
||||
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<meta name="twitter:description" content="Unparalleled insights, in real-time, of everything happening on your Linux systems and applications, with stunning, interactive web dashboards and powerful performance and health alarms." />
|
||||
<meta name="twitter:image" content="https://cloud.githubusercontent.com/assets/2662304/14092712/93b039ea-f551-11e5-822c-beadbf2b2a2e.gif" />
|
||||
|
||||
<script src="main.js"></script>
|
||||
<script src="main.js?v=2"></script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target="#sidebar" data-offset="100">
|
||||
|
|
@ -76,20 +76,8 @@
|
|||
<ul class="nav navbar-nav">
|
||||
<li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
|
||||
<ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu" id="myNetdataDropdownUL">
|
||||
<div class="row">
|
||||
<div class="col-sm-6" style="width: 85%; padding-right: 0;">
|
||||
<ul id="mynetdata_servers" class="multi-column-dropdown">
|
||||
<li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 hidden-xs" style="width: 15%; padding-left: 0;">
|
||||
<ul id="mynetdata_actions1" class="multi-column-dropdown">
|
||||
<li style="color: #999;"> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -264,7 +264,7 @@ body.modal-open {
|
|||
}
|
||||
|
||||
.multi-column-dropdown li a {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
line-height: 1.428571429;
|
||||
white-space: normal;
|
||||
|
|
@ -531,3 +531,83 @@ body.modal-open {
|
|||
opacity: .2;
|
||||
transition: 0s
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
#my-netdata-dropdown-content a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .info-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .agent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .agent-item:hover {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .agent-item a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .agent-item > :first-child {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .agent-item > :last-child {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .agent-item :nth-child(2) {
|
||||
min-width: 420px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.agent-item--separated {
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.agent-item--alternate a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .agent-alternate-urls.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content hr {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid #333;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* white theme overrides */
|
||||
|
||||
#my-netdata-dropdown-content.theme-white hr {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content.theme-white .agent-item:hover {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content.theme-white a {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content.theme-white a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
|||
335
web/gui/main.js
335
web/gui/main.js
|
|
@ -259,7 +259,7 @@ var urlOptions = {
|
|||
|
||||
$('.highlight-tooltip').tooltip({
|
||||
html: true,
|
||||
delay: {show: 500, hide: 0},
|
||||
delay: { show: 500, hide: 0 },
|
||||
container: 'body'
|
||||
});
|
||||
}
|
||||
|
|
@ -464,121 +464,216 @@ function saveObjectToClient(data, filename) {
|
|||
// --------------------------------------------------------------------
|
||||
// registry call back to render my-netdata menu
|
||||
|
||||
var netdataRegistryCallback = function (machines_array) {
|
||||
var el = '';
|
||||
var a1 = '';
|
||||
var found = 0, hosted = 0;
|
||||
var len, i, url, hostname, icon;
|
||||
function toggleExpandIcon(svgEl) {
|
||||
if (svgEl.getAttribute('data-icon') === 'caret-down') {
|
||||
svgEl.setAttribute('data-icon', 'caret-up');
|
||||
} else {
|
||||
svgEl.setAttribute('data-icon', 'caret-down');
|
||||
}
|
||||
}
|
||||
|
||||
if (options.hosts.length > 1) {
|
||||
// there are mirrored hosts here
|
||||
function toggleAgentItem(e, guid) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
el += '<li><a href="#" onClick="return false;" style="color: #666;" target="_blank">databases available on this host</a></li>';
|
||||
a1 += '<li><a href="#" onClick="return false;"><i class="fas fa-info-circle" style="color: #666;"></i></a></li>';
|
||||
toggleExpandIcon(e.currentTarget.children[0]);
|
||||
|
||||
var base = document.location.origin.toString() + document.location.pathname.toString();
|
||||
if (base.endsWith("/host/" + options.hostname + "/")) {
|
||||
base = base.substring(0, base.length - ("/host/" + options.hostname + "/").toString().length);
|
||||
}
|
||||
const el = document.querySelector(`.agent-alternate-urls.agent-${guid}`);
|
||||
if (el) {
|
||||
el.classList.toggle('collapsed');
|
||||
}
|
||||
}
|
||||
|
||||
if (base.endsWith("/")) {
|
||||
base = base.substring(0, base.length - 1);
|
||||
}
|
||||
// TODO: consider renaming to `truncateString`
|
||||
|
||||
var master = options.hosts[0].hostname;
|
||||
var sorted = options.hosts.sort(function (a, b) {
|
||||
if (a.hostname === master) {
|
||||
return -1;
|
||||
}
|
||||
return naturalSortCompare(a.hostname, b.hostname);
|
||||
});
|
||||
|
||||
i = 0;
|
||||
len = sorted.length;
|
||||
while (len--) {
|
||||
hostname = sorted[i].hostname;
|
||||
if (hostname === master) {
|
||||
url = base + "/";
|
||||
icon = "home";
|
||||
}
|
||||
else {
|
||||
url = base + "/host/" + hostname + "/";
|
||||
icon = "window-restore";
|
||||
}
|
||||
|
||||
el += '<li id="registry_server_hosted_' + len.toString() + '"><a class="registry_link" href="' + url + '#" onClick="return gotoHostedModalHandler(\'' + url + '\');">' + hostname + '</a></li>';
|
||||
a1 += '<li id="registry_action_hosted_' + len.toString() + '"><a class="registry_link" href="' + url + '#" onClick="return gotoHostedModalHandler(\'' + url + '\');"><i class="fas fa-' + icon + '" style="color: #999;"></i></a></li>';
|
||||
hosted++;
|
||||
i++;
|
||||
}
|
||||
|
||||
el += '<li role="separator" class="divider"></li>';
|
||||
a1 += '<li role="separator" class="divider"></li>';
|
||||
/// Enforces a maximum string length while retaining the prefix and the postfix of
|
||||
/// the string.
|
||||
function clipString(str, maxLength) {
|
||||
if (str.length <= maxLength) {
|
||||
return str;
|
||||
}
|
||||
|
||||
if (machines_array === null) {
|
||||
var ret = loadLocalStorage("registryCallback");
|
||||
if (typeof ret !== 'undefined' && ret !== null) {
|
||||
machines_array = JSON.parse(ret);
|
||||
const spanLength = Math.floor((maxLength - 3) / 2);
|
||||
return `${str.substring(0, spanLength)}...${str.substring(str.length - spanLength)}`;
|
||||
}
|
||||
|
||||
// When you stream metrics from netdata to netdata, the recieving netdata now
|
||||
// has multiple host databases. It's own, and multiple mirrored. Mirrored databases
|
||||
// can be accessed with <http://localhost:19999/host/NAME/>
|
||||
function renderStreamedHosts(options) {
|
||||
let html = `<div class="info-item">Databases streamed to this agent</div>`;
|
||||
|
||||
var base = document.location.origin.toString() + document.location.pathname.toString();
|
||||
if (base.endsWith("/host/" + options.hostname + "/")) {
|
||||
base = base.substring(0, base.length - ("/host/" + options.hostname + "/").toString().length);
|
||||
}
|
||||
|
||||
if (base.endsWith("/")) {
|
||||
base = base.substring(0, base.length - 1);
|
||||
}
|
||||
|
||||
var master = options.hosts[0].hostname;
|
||||
var sorted = options.hosts.sort(function (a, b) {
|
||||
if (a.hostname === master) {
|
||||
return -1;
|
||||
}
|
||||
return naturalSortCompare(a.hostname, b.hostname);
|
||||
});
|
||||
|
||||
for (const s of sorted) {
|
||||
let url, icon;
|
||||
const hostname = s.hostname;
|
||||
|
||||
if (hostname === master) {
|
||||
url = `base${'/'}`;
|
||||
icon = 'home';
|
||||
} else {
|
||||
url = `${base}/host/${hostname}/`;
|
||||
icon = 'window-restore';
|
||||
}
|
||||
|
||||
html += (
|
||||
`<div class="agent-item">
|
||||
<a class="registry_link" href="${url}#" onClick="return gotoHostedModalHandler('${url}');">
|
||||
<i class="fas fa-${icon}" style="color: #999;"></i>
|
||||
</a>
|
||||
<a class="registry_link" href="${url}#" onClick="return gotoHostedModalHandler('${url}');">${hostname}</a>
|
||||
<div></div>
|
||||
</div>`
|
||||
)
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderMachines(machinesArray) {
|
||||
let html = `<div class="info-item">My netdata agents</div>`;
|
||||
|
||||
if (machinesArray === null) {
|
||||
let ret = loadLocalStorage("registryCallback");
|
||||
if (ret) {
|
||||
machinesArray = JSON.parse(ret);
|
||||
console.log("failed to contact the registry - loaded registry data from browser local storage");
|
||||
}
|
||||
}
|
||||
|
||||
if (machines_array) {
|
||||
saveLocalStorage("registryCallback", JSON.stringify(machines_array));
|
||||
let found = false;
|
||||
|
||||
var machines = machines_array.sort(function (a, b) {
|
||||
if (machinesArray) {
|
||||
saveLocalStorage("registryCallback", JSON.stringify(machinesArray));
|
||||
|
||||
var machines = machinesArray.sort(function (a, b) {
|
||||
return naturalSortCompare(a.name, b.name);
|
||||
});
|
||||
|
||||
i = 0;
|
||||
len = machines.length;
|
||||
while (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="fas fa-trash" style="color: #999;"></i></a></li>';
|
||||
for (const machine of machines) {
|
||||
found = true;
|
||||
|
||||
const alternateUrlItems = (
|
||||
`<div class="agent-alternate-urls agent-${machine.guid} collapsed">
|
||||
${machine.alternate_urls.reduce(
|
||||
(str, url) => str + (
|
||||
`<div class="agent-item agent-item--alternate">
|
||||
<div></div>
|
||||
<a href="${url}" title="${url}">${clipString(url, 64)}</a>
|
||||
<a href="#" onclick="deleteRegistryModalHandler('${machine.guid}', '${machine.name}', '${url}'); return false;">
|
||||
<i class="fas fa-trash" style="color: #777;"></i>
|
||||
</a>
|
||||
</div>`
|
||||
),
|
||||
''
|
||||
)}
|
||||
</div>`
|
||||
)
|
||||
|
||||
html += (
|
||||
`<div class="agent-item agent-${machine.guid}">
|
||||
<i class="fas fa-chart-bar" color: #fff"></i>
|
||||
<span>
|
||||
<a class="registry_link" href="${machine.url}#" onClick="return gotoServerModalHandler('${machine.guid}');">${machine.name}</a>
|
||||
</span>
|
||||
<a href="#" onClick="toggleAgentItem(event, '${machine.guid}');">
|
||||
<i class="fas fa-caret-down" style="color: #999"></i>
|
||||
</a>
|
||||
</div>
|
||||
${alternateUrlItems}`
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (!found) {
|
||||
if (machines) {
|
||||
el += '<li><a href="https://github.com/netdata/netdata/tree/master/registry#netdata-registry" style="color: #666;" target="_blank">your netdata server list is empty...</a></li>';
|
||||
html += (
|
||||
`<div class="info-item">
|
||||
<a href="https://github.com/netdata/netdata/tree/master/registry#netdata-registry" target="_blank">Your netdata server list is empty</a>
|
||||
</div>`
|
||||
)
|
||||
} else {
|
||||
el += '<li><a href="https://github.com/netdata/netdata/tree/master/registry#netdata-registry" style="color: #666;" target="_blank">failed to contact the registry...</a></li>';
|
||||
el += '<li></li>';
|
||||
html += (
|
||||
`<div class="info-item">
|
||||
<a href="https://github.com/netdata/netdata/tree/master/registry#netdata-registry" target="_blank">Failed to contact the registry</a>
|
||||
</div>`
|
||||
)
|
||||
}
|
||||
|
||||
a1 += '<li><a href="#" onClick="return false;"> </a></li>';
|
||||
html += `<hr />`;
|
||||
html += `<div class="info-item">Demo netdata agents</div>`;
|
||||
|
||||
el += '<li role="separator" class="divider"></li>' +
|
||||
'<li><a href="//london.netdata.rocks/default.html">UK - London (DigitalOcean.com)</a></li>' +
|
||||
'<li><a href="//newyork.netdata.rocks/default.html">US - New York (DigitalOcean.com)</a></li>' +
|
||||
'<li><a href="//sanfrancisco.netdata.rocks/default.html">US - San Francisco (DigitalOcean.com)</a></li>' +
|
||||
'<li><a href="//atlanta.netdata.rocks/default.html">US - Atlanta (CDN77.com)</a></li>' +
|
||||
'<li><a href="//frankfurt.netdata.rocks/default.html">Germany - Frankfurt (DigitalOcean.com)</a></li>' +
|
||||
'<li><a href="//toronto.netdata.rocks/default.html">Canada - Toronto (DigitalOcean.com)</a></li>' +
|
||||
'<li><a href="//singapore.netdata.rocks/default.html">Japan - Singapore (DigitalOcean.com)</a></li>' +
|
||||
'<li><a href="//bangalore.netdata.rocks/default.html">India - Bangalore (DigitalOcean.com)</a></li>';
|
||||
a1 += '<li role="separator" class="divider"></li>' +
|
||||
'<li><a href="#"> </a></li>' +
|
||||
'<li><a href="#"> </a></li>' +
|
||||
'<li><a href="#"> </a></li>' +
|
||||
'<li><a href="#"> </a></li>' +
|
||||
'<li><a href="#"> </a></li>' +
|
||||
'<li><a href="#"> </a></li>' +
|
||||
'<li><a href="#"> </a></li>' +
|
||||
'<li><a href="#"> </a></li>';
|
||||
const demoServers = [
|
||||
{url: "//london.netdata.rocks/default.html", title: "UK - London (DigitalOcean.com)"},
|
||||
{url: "//newyork.netdata.rocks/default.html", title: "US - New York (DigitalOcean.com)"},
|
||||
{url: "//sanfrancisco.netdata.rocks/default.html", title: "US - San Francisco (DigitalOcean.com)"},
|
||||
{url: "//atlanta.netdata.rocks/default.html", title: "US - Atlanta (CDN77.com)"},
|
||||
{url: "//frankfurt.netdata.rocks/default.html", title: "Germany - Frankfurt (DigitalOcean.com)"},
|
||||
{url: "//toronto.netdata.rocks/default.html", title: "Canada - Toronto (DigitalOcean.com)"},
|
||||
{url: "//singapore.netdata.rocks/default.html", title: "Japan - Singapore (DigitalOcean.com)"},
|
||||
{url: "//bangalore.netdata.rocks/default.html", title: "India - Bangalore (DigitalOcean.com)"},
|
||||
|
||||
]
|
||||
|
||||
for (const server of demoServers) {
|
||||
html += (
|
||||
`<div class="agent-item">
|
||||
<i class="fas fa-chart-bar" color: #fff"></i>
|
||||
<a href="${server.url}">${server.title}</a>
|
||||
<div></div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
el += '<li role="separator" class="divider"></li>';
|
||||
a1 += '<li role="separator" class="divider"></li>';
|
||||
return html;
|
||||
}
|
||||
|
||||
el += '<li><a href="https://github.com/netdata/netdata/tree/master/registry#netdata-registry" style="color: #999;" target="_blank">What is this?</a></li>';
|
||||
a1 += '<li><a href="#" style="color: #999;" onclick="switchRegistryModalHandler(); return false;"><i class="fas fa-cog" style="color: #999;"></i></a></li>';
|
||||
// Populates the my-netdata menu.
|
||||
function netdataRegistryCallback(machinesArray) {
|
||||
let html = '';
|
||||
|
||||
document.getElementById('mynetdata_servers').innerHTML = el;
|
||||
document.getElementById('mynetdata_servers2').innerHTML = el;
|
||||
document.getElementById('mynetdata_actions1').innerHTML = a1;
|
||||
if (options.hosts.length > 1) {
|
||||
html += renderStreamedHosts(options) + `<hr />`;
|
||||
}
|
||||
|
||||
html += renderMachines(machinesArray);
|
||||
|
||||
html += (
|
||||
`<hr />
|
||||
<div class="agent-item">
|
||||
<i class="fas fa-cog""></i>
|
||||
<a href="#" onclick="switchRegistryModalHandler(); return false;">Switch Identity</a>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="agent-item">
|
||||
<i class="fas fa-question-circle""></i>
|
||||
<a href="https://github.com/netdata/netdata/tree/master/registry#netdata-registry" target="_blank">What is this?</a>
|
||||
<div></div>
|
||||
</div>`
|
||||
)
|
||||
|
||||
const el = document.getElementById('my-netdata-dropdown-content')
|
||||
el.classList.add(`theme-${netdataTheme}`);
|
||||
el.innerHTML = html;
|
||||
|
||||
gotoServerInit();
|
||||
};
|
||||
|
|
@ -881,7 +976,7 @@ function scrollToId(hash) {
|
|||
var offset = $('#' + hash).offset();
|
||||
if (typeof offset !== 'undefined') {
|
||||
//console.log('scrolling to ' + hash + ' at ' + offset.top.toString());
|
||||
$('html, body').animate({scrollTop: offset.top - 30}, 0);
|
||||
$('html, body').animate({ scrollTop: offset.top - 30 }, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -933,7 +1028,7 @@ var netdataDashboard = {
|
|||
}
|
||||
|
||||
if (typeof this.sparklines_registry[key] === 'undefined') {
|
||||
this.sparklines_registry[key] = {count: 1};
|
||||
this.sparklines_registry[key] = { count: 1 };
|
||||
} else {
|
||||
this.sparklines_registry[key].count++;
|
||||
}
|
||||
|
|
@ -1533,7 +1628,7 @@ function renderPage(menus, data) {
|
|||
|
||||
sidebar += '<li class="" style="padding-top:15px;"><a href="https://github.com/netdata/netdata/wiki/Add-more-charts-to-netdata" target="_blank"><i class="fas fa-plus"></i> add more charts</a></li>';
|
||||
sidebar += '<li class=""><a href="https://github.com/netdata/netdata/wiki/Add-more-alarms-to-netdata" target="_blank"><i class="fas fa-plus"></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 ' + NETDATA.seconds4human(data.update_every * data.history, {space: ' '}) + ' 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 ' + NETDATA.seconds4human(data.update_every * data.history, { space: ' ' }) + ' 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;
|
||||
|
|
@ -1650,7 +1745,7 @@ function loadJs(url, callback) {
|
|||
url: url,
|
||||
cache: true,
|
||||
dataType: "script",
|
||||
xhrFields: {withCredentials: true} // required for the cookie
|
||||
xhrFields: { withCredentials: true } // required for the cookie
|
||||
})
|
||||
.fail(function () {
|
||||
alert('Cannot load required JS library: ' + url);
|
||||
|
|
@ -1757,8 +1852,8 @@ function alarmsUpdateModal() {
|
|||
if (data === null) {
|
||||
document.getElementById('alarms_active').innerHTML =
|
||||
document.getElementById('alarms_all').innerHTML =
|
||||
document.getElementById('alarms_log').innerHTML =
|
||||
'failed to load alarm data!';
|
||||
document.getElementById('alarms_log').innerHTML =
|
||||
'failed to load alarm data!';
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -1808,7 +1903,7 @@ function alarmsUpdateModal() {
|
|||
|
||||
return '<code>' + alarm.lookup_method + '</code> '
|
||||
+ dimensions + ', of chart <code>' + alarm.chart + '</code>'
|
||||
+ ', starting <code>' + NETDATA.seconds4human(alarm.lookup_after + alarm.lookup_before, {space: ' '}) + '</code> and up to <code>' + NETDATA.seconds4human(alarm.lookup_before, {space: ' '}) + '</code>'
|
||||
+ ', starting <code>' + NETDATA.seconds4human(alarm.lookup_after + alarm.lookup_before, { space: ' ' }) + '</code> and up to <code>' + NETDATA.seconds4human(alarm.lookup_before, { space: ' ' }) + '</code>'
|
||||
+ ((alarm.lookup_options) ? (', with options <code>' + alarm.lookup_options.replace(/ /g, ', ') + '</code>') : '')
|
||||
+ '.';
|
||||
}
|
||||
|
|
@ -1885,9 +1980,9 @@ function alarmsUpdateModal() {
|
|||
}
|
||||
|
||||
html += '<tr><td width="10%" style="text-align:right">check every</td><td>' + NETDATA.seconds4human(alarm.update_every, {
|
||||
space: ' ',
|
||||
negative_suffix: ''
|
||||
}) + '</td></tr>'
|
||||
space: ' ',
|
||||
negative_suffix: ''
|
||||
}) + '</td></tr>'
|
||||
+ ((has_alarm === true) ? ('<tr><td width="10%" style="text-align:right">execute</td><td><span style="font-family: monospace;">' + alarm.exec + '</span>' + delay + '</td></tr>') : '')
|
||||
+ '<tr><td width="10%" style="text-align:right">source</td><td><span style="font-family: monospace;">' + alarm.source + '</span></td></tr>'
|
||||
+ '</table></td></tr>';
|
||||
|
|
@ -1932,7 +2027,7 @@ function alarmsUpdateModal() {
|
|||
// not found - this should never happen!
|
||||
if (typeof chart === 'undefined') {
|
||||
console.log('WARNING: alarm ' + x + ' is linked to chart ' + alarm.chart + ', which is not found in the list of chart got from the server.');
|
||||
chart = {priority: 9999999};
|
||||
chart = { priority: 9999999 };
|
||||
}
|
||||
else if (typeof chart.menu !== 'undefined' && typeof chart.submenu !== 'undefined')
|
||||
// the family based on the chart
|
||||
|
|
@ -2069,16 +2164,16 @@ function alarmsUpdateModal() {
|
|||
|
||||
switch (row.status) {
|
||||
case 'CRITICAL':
|
||||
return {classes: 'danger'};
|
||||
return { classes: 'danger' };
|
||||
break;
|
||||
case 'WARNING':
|
||||
return {classes: 'warning'};
|
||||
return { classes: 'warning' };
|
||||
break;
|
||||
case 'UNDEFINED':
|
||||
return {classes: 'info'};
|
||||
return { classes: 'info' };
|
||||
break;
|
||||
case 'CLEAR':
|
||||
return {classes: 'success'};
|
||||
return { classes: 'success' };
|
||||
break;
|
||||
}
|
||||
return {};
|
||||
|
|
@ -2266,7 +2361,7 @@ function alarmsUpdateModal() {
|
|||
formatter: function (value, row, index) {
|
||||
void (row);
|
||||
void (index);
|
||||
return NETDATA.seconds4human(value, {negative_suffix: '', space: ' ', now: 'no time'});
|
||||
return NETDATA.seconds4human(value, { negative_suffix: '', space: ' ', now: 'no time' });
|
||||
},
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
|
|
@ -2280,7 +2375,7 @@ function alarmsUpdateModal() {
|
|||
formatter: function (value, row, index) {
|
||||
void (row);
|
||||
void (index);
|
||||
return NETDATA.seconds4human(value, {negative_suffix: '', space: ' ', now: 'no time'});
|
||||
return NETDATA.seconds4human(value, { negative_suffix: '', space: ' ', now: 'no time' });
|
||||
},
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
|
|
@ -2412,7 +2507,7 @@ function alarmsUpdateModal() {
|
|||
void (row);
|
||||
void (index);
|
||||
|
||||
return NETDATA.seconds4human(value, {negative_suffix: '', space: ' ', now: 'no time'});
|
||||
return NETDATA.seconds4human(value, { negative_suffix: '', space: ' ', now: 'no time' });
|
||||
},
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
|
|
@ -2632,7 +2727,7 @@ function getNetdataCommitId(force, callback) {
|
|||
url: 'version.txt',
|
||||
async: true,
|
||||
cache: false,
|
||||
xhrFields: {withCredentials: true} // required for the cookie
|
||||
xhrFields: { withCredentials: true } // required for the cookie
|
||||
})
|
||||
.done(function (data) {
|
||||
data = data.replace(/(\r\n|\n|\r| |\t)/gm, "");
|
||||
|
|
@ -2883,7 +2978,7 @@ var snapshotOptions = {
|
|||
bytes_per_point_disk: 1.9,
|
||||
|
||||
compress: function (s) {
|
||||
return btoa(pako.deflate(s, {to: 'string'}));
|
||||
return btoa(pako.deflate(s, { to: 'string' }));
|
||||
},
|
||||
|
||||
compressed_length: function (s) {
|
||||
|
|
@ -2891,7 +2986,7 @@ var snapshotOptions = {
|
|||
},
|
||||
|
||||
uncompress: function (s) {
|
||||
return pako.inflate(atob(s), {to: 'string'});
|
||||
return pako.inflate(atob(s), { to: 'string' });
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -2900,7 +2995,7 @@ var snapshotOptions = {
|
|||
bytes_per_point_disk: 3.2,
|
||||
|
||||
compress: function (s) {
|
||||
return pako.deflate(s, {to: 'string'});
|
||||
return pako.deflate(s, { to: 'string' });
|
||||
},
|
||||
|
||||
compressed_length: function (s) {
|
||||
|
|
@ -2908,7 +3003,7 @@ var snapshotOptions = {
|
|||
},
|
||||
|
||||
uncompress: function (s) {
|
||||
return pako.inflate(s, {to: 'string'});
|
||||
return pako.inflate(s, { to: 'string' });
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -3709,7 +3804,7 @@ function enableTooltipsAndPopovers() {
|
|||
animated: 'fade',
|
||||
trigger: 'hover',
|
||||
html: true,
|
||||
delay: {show: 500, hide: 0},
|
||||
delay: { show: 500, hide: 0 },
|
||||
container: 'body'
|
||||
});
|
||||
$('[data-toggle="popover"]').popover();
|
||||
|
|
@ -3788,7 +3883,7 @@ function runOnceOnDashboardWithjQuery() {
|
|||
|
||||
// scroll to the position we had open before the modal
|
||||
$('html, body')
|
||||
.animate({scrollTop: scrollPos}, 0);
|
||||
.animate({ scrollTop: scrollPos }, 0);
|
||||
|
||||
// unpause netdata, if we paused it
|
||||
if (netdata_paused_on_modal === true) {
|
||||
|
|
@ -3888,7 +3983,7 @@ function runOnceOnDashboardWithjQuery() {
|
|||
// ------------------------------------------------------------------------
|
||||
// my-netdata menu
|
||||
|
||||
Ps.initialize(document.getElementById('myNetdataDropdownUL'), {
|
||||
Ps.initialize(document.getElementById('my-netdata-dropdown-content'), {
|
||||
wheelSpeed: 1,
|
||||
wheelPropagation: false,
|
||||
swipePropagation: false,
|
||||
|
|
@ -3913,7 +4008,7 @@ function runOnceOnDashboardWithjQuery() {
|
|||
});
|
||||
})
|
||||
.on('shown.bs.dropdown', function () {
|
||||
Ps.update(document.getElementById('myNetdataDropdownUL'));
|
||||
Ps.update(document.getElementById('my-netdata-dropdown-content'));
|
||||
})
|
||||
.on('hidden.bs.dropdown', function () {
|
||||
NETDATA.unpause();
|
||||
|
|
@ -3945,8 +4040,8 @@ function runOnceOnDashboardWithjQuery() {
|
|||
.on('hidden.bs.modal', function () {
|
||||
document.getElementById('alarms_active').innerHTML =
|
||||
document.getElementById('alarms_all').innerHTML =
|
||||
document.getElementById('alarms_log').innerHTML =
|
||||
'loading...';
|
||||
document.getElementById('alarms_log').innerHTML =
|
||||
'loading...';
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
|
@ -3996,7 +4091,7 @@ function runOnceOnDashboardWithjQuery() {
|
|||
if ($this.hasClass('less')) {
|
||||
$this.removeClass('less');
|
||||
$this.html(config.moreText);
|
||||
$this.parent().prev().animate({'height': '0' + '%'}, 0, function () {
|
||||
$this.parent().prev().animate({ 'height': '0' + '%' }, 0, function () {
|
||||
$this.parent().prev().prev().show();
|
||||
}).hide(0, function () {
|
||||
config.onLess();
|
||||
|
|
@ -4005,7 +4100,7 @@ function runOnceOnDashboardWithjQuery() {
|
|||
} else {
|
||||
$this.addClass('less');
|
||||
$this.html(config.lessText);
|
||||
$this.parent().prev().animate({'height': '100' + '%'}, 0, function () {
|
||||
$this.parent().prev().animate({ 'height': '100' + '%' }, 0, function () {
|
||||
$this.parent().prev().prev().hide();
|
||||
}).show(0, function () {
|
||||
config.onMore();
|
||||
|
|
@ -4169,7 +4264,7 @@ function finalizePage() {
|
|||
|
||||
NETDATA.onresizeCallback = function () {
|
||||
Ps.update(document.getElementById('sidebar'));
|
||||
Ps.update(document.getElementById('myNetdataDropdownUL'));
|
||||
Ps.update(document.getElementById('my-netdata-dropdown-content'));
|
||||
};
|
||||
NETDATA.onresizeCallback();
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue