<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> </head> <body> <div id="alarms" class="collapsed"> <div class="alarm-collapse-button" onclick="dash.toggle_alarm_collapse()">›</div> <span class="alarm-count"></span> <h1>Alarms</h1> <div class="alarm-host-list"></div> <div class="settings-button" onclick="dash.reorder_hosts()">⚙︎</div> </div> <div id="dash"> <div class="netdata-host-stats-container template"> <div class="netdata-host-name">host</div> <div class="netdata-host-stats"> <div class="dash-graph" data-dash-netdata="system.cpu" data-dygraph-valuerange="[0, 100]"> </div> <div class="dash-graph" data-dash-netdata="system.load"> </div> <div class="dash-graph" data-dash-netdata="system.ram"> </div> <div class="dash-graph" data-dash-netdata="disk_space._"> </div> <div class="dash-graph" data-dash-netdata="system.net"> </div> <div class="dash-graph" data-dash-netdata="system.processes"> </div> <div class="dash-graph" data-dash-netdata="apps.cpu"> </div> <div class="dash-graph" data-dash-netdata="apps.mem"> </div> <div class="dash-charts"> <div class="dash-chart" data-dash-netdata="system.io" data-dimensions="in" data-title="Disk Read" data-common-units="dash.io"> </div> <div class="dash-chart" data-dash-netdata="system.io" data-dimensions="out" data-title="Disk Write" data-common-units="dash.io"> </div> <div class="dash-chart" data-dash-netdata="system.cpu" data-chart-library="gauge" data-title="CPU" data-units="%" data-gauge-max-value="100" data-colors="#22AA99" data-gauge-stroke-color="#373B40"> </div> <div class="dash-chart" data-dash-netdata="system.net" data-dimensions="received" data-title="Net Inbound" data-common-units="dash.net"> </div> <div class="dash-chart" data-dash-netdata="system.net" data-dimensions="sent" data-title="Net Outbound" data-common-units="dash.net"> </div> <div class="dash-chart" data-dash-netdata="system.ram" data-dimensions="used|buffers|active|wired" data-append-options="percentage" data-title="Used RAM" data-units="%" data-easypiechart-max-value="100" data-colors="#EE9911"> </div> </div> </div> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"> </script> <script type="text/javascript"> class PickNSort { // PickNSort.js constructor (dark) { this.items = []; this.callback = function (output, disabled) { console.log(output, disabled) }; this.reset = function () { this.items = [] }; this.last_output = { enabled: [], disabled: [] } this.add_css_to_page(dark); } create_modal () { $("<div></div>", { id: "picknsort-container" }).appendTo('body'); $("<div></div>", { id: 'picknsort-window' }).appendTo('#picknsort-container'); $("<div></div>", { id: "picknsort-close-button", text: '\u2573' }).appendTo('#picknsort-window'); $("<div></div>", { id: "picknsort-item-list" }).appendTo('#picknsort-window') $("<div></div>", { text: "Apply", id: "picknsort-apply-button" }).appendTo('#picknsort-window'); $("<div></div>", { text: "Reset", id: "picknsort-reset-button" }).appendTo('#picknsort-window'); $('#picknsort-close-button').click(function () { picknsort.destroy_modal(); picknsort.callback(null, null); }); $('#picknsort-apply-button').click(function () { picknsort.apply(); }); $('#picknsort-reset-button').click(function () { picknsort.reset(); }); } destroy_modal () { $('#picknsort-container').remove(); } populate_list () { this.clear_list(); for (var i=0, len=this.items.length; i<len; i++) { this.draw_item(i); } } draw_item (index) { var item = this.items[index]; var $item = $("<div></div>").addClass("picknsort-item"); var $checkbox= $("<div></div>").addClass('picknsort-item-checkbox-wrapper'); $("<input>", { type: "checkbox", checked: item.enabled }).addClass('picknsort-item-checkbox') .appendTo($checkbox); var $value = $("<div></div>", { text: item.value }).addClass("picknsort-item-value"); var $nav = $("<div></div>").addClass("picknsort-item-nav") .append("<div class='picknsort-item-down' data-index='" + index + "' onclick='picknsort.shift_down(this)'>↓</div>") .append("<div class='picknsort-item-up' data-index='" + index + "' onclick='picknsort.shift_up(this)'>↑</div>"); $item.append($checkbox).append($value).append($nav).appendTo('#picknsort-item-list'); } clear_list () { $('#picknsort-item-list').html(''); } popup (callback, reset, options={}) { this.callback = callback || this.callback; this.reset = reset || this.reset; if (!options.enabled) { options.enabled = this.last_output.enabled; } if (!options.disabled) { options.disabled = this.last_output.disabled; } this.parse_items(options.enabled, options.disabled); if (this.items.length) { this.create_modal(); this.populate_list(); } } parse_items (enabled, disabled) { this.items = []; for (var i=0, len=enabled.length; i<len; i++) { this.items.push({ value: enabled[i], enabled: true }); } for (var i=0, len=disabled.length; i<len; i++) { this.items.push({ value: disabled[i], enabled: false }); } } shift_down (el) { var index = $(el).data('index'); if (index === this.items.length - 1) { return; } var temp = this.items[index]; this.items[index] = this.items[index + 1]; this.items[index + 1] = temp; this.move_element_down(index); } shift_up (el) { var index = $(el).data('index'); if (index === 0) { return; } var temp = this.items[index]; this.items[index] = this.items[index - 1]; this.items[index - 1] = temp; this.move_element_up(index); } move_element_up (index) { var $src = $('.picknsort-item:eq(' + index + ')'); var $dest = $('.picknsort-item:eq(' + (index-1) + ')'); $src.insertBefore($dest); // Update data-index $src.find('.picknsort-item-down, .picknsort-item-up').data("index", index-1); $dest.find('.picknsort-item-down, .picknsort-item-up').data("index", index); } move_element_down (index) { var $src = $('.picknsort-item:eq(' + index + ')'); var $dest = $('.picknsort-item:eq(' + (index+1) + ')'); $src.insertAfter($dest); // Update data-index $src.find('.picknsort-item-down, .picknsort-item-up').data("index", index+1); $dest.find('.picknsort-item-down, .picknsort-item-up').data("index", index); } apply () { var out = []; for (var i=0, len=this.items.length; i<len; i++) { out.push(this.items[i].value); } var disabled = []; $('input.picknsort-item-checkbox:not(:checked)').each(function (elindex) { var itemindex = $('input.picknsort-item-checkbox').index($(this)); // Adjust for deleted elements var spliceindex = itemindex - (1 * elindex); var del = out.splice(spliceindex, 1); disabled.push(del[0]); }); this.callback(out, disabled); this.last_output = { enabled: out, disabled: disabled } this.destroy_modal(); } add_css_to_page (dark) { /* * TUTORIAL: Change your theme colors here. Not sure how well it will work... */ var light_theme = { windowbg: "#FFF", itembg: "#F4F4F4", itemcolor: "#535353" } var dark_theme = { windowbg: "#444", itembg: "#333", itemcolor: "#DBDBDB" } var current_theme = (dark) ? dark_theme : light_theme; var css_string = ` #picknsort-container { position: fixed; z-index: 9999 !important; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); } #picknsort-window { max-height: 90vh; width: 40em; background: ${current_theme.windowbg}; position: absolute; top: 5em; left: calc(50% - 20em); padding: 2em; padding-top: 4em; } #picknsort-close-button { position: absolute; top: 1em; font-size: 1.5em; color: #666; right: 1em; cursor: pointer; } #picknsort-item-list { max-height: 60vh; overflow-y: scroll; margin-bottom: 1em; } #picknsort-apply-button, #picknsort-reset-button { text-align: center; font-size: 1.5em; padding: 1em; background: rgb(106, 232, 165); font-weight: bold; color: #FFF; cursor: pointer; margin-top: 1em; } #picknsort-reset-button { background: #CCC; } .picknsort-item { padding: 1em; border-top: solid 1px #CCC; margin-bottom: 1em; position: relative; background: ${current_theme.itembg}; color: ${current_theme.itemcolor} } .picknsort-item-checkbox-wrapper { position: absolute; top: 0; left: 0; bottom: 0; width: 3em; text-align: center; } .picknsort-item-checkbox { transform: scale(1.5); margin-top: 1.3em !important; } .picknsort-item-value { margin-left: 3em; } .picknsort-item-nav { font-size: 2em; position: absolute; right: 0; top: 0; bottom: 0; color: #CCC; cursor: pointer; } .picknsort-item-down, .picknsort-item-up { display: inline-block; padding: 0em 0.5em; height: calc(100% - 0.2em); } ` // End multiline string $("<style>") .prop("type", "text/css") .html(css_string).appendTo("head"); } } </script> <script type="text/javascript"> // Dash JS function picknsort_setup () { if (localStorage.getItem('netdata_ordered_hosts')) { picknsort.last_output = JSON.parse(localStorage.getItem('netdata_ordered_hosts')); } else { picknsort.last_output = { enabled: dash.netdata_info.mirrored_hosts, disabled: [] } } } class Dash { constructor (base_url, link_base_url) { this.base_url = base_url; // URL of netdata host, with port this.link_base_url = link_base_url || base_url; // Reverse proxy URL (Optional) this.current_alarms = {}; this.new_alarms = {}; this.first_build = true; /* * TUTORIAL: Change your graph/chart dimensions here. Host columns will automatically adjust. * Charts are square! Their width is the same as their height. */ this.options = { graph_width: '40em', graph_height: '20em', chart_width: '10em' // Charts are square }; this.init(); } reorder_hosts () { picknsort.popup(dash.update_ordered_hosts, dash.find_new_hosts); } get_enabled_hosts () { try { return JSON.parse(localStorage.getItem('netdata_ordered_hosts')).enabled } catch (e) { return this.netdata_info.mirrored_hosts; } } get_ordered_hosts () { try { return JSON.parse(localStorage.getItem('netdata_ordered_hosts')); } catch (e) { return null; } } set_ordered_hosts (hosts) { localStorage.setItem('netdata_ordered_hosts', JSON.stringify(hosts)); location.reload(); } update_ordered_hosts (enabled, disabled) { if (enabled === null && disabled === null) { return; } dash.set_ordered_hosts({ enabled: enabled, disabled: disabled }); } find_new_hosts () { var newhosts = dash.netdata_info.mirrored_hosts.slice(); var currenthosts = dash.get_ordered_hosts(); for (var i=0,len=currenthosts.enabled.length; i<len; i++) { var found = newhosts.indexOf(currenthosts.enabled[i]); if (found > -1) { newhosts.splice(found, 1); } else { currenthosts.enabled.splice(i, 1); } } for (var i=0,len=currenthosts.disabled.length; i<len; i++) { var found = newhosts.indexOf(currenthosts.disabled[i]); if (found > -1) { newhosts.splice(found, 1); } else { currenthosts.enabled.splice(i, 1); } } for (var i=0,len=newhosts.length; i<len; i++) { currenthosts.enabled.push(newhosts[i]); } dash.set_ordered_hosts(currenthosts); } get_host_url (hostname, link) { var base = ( link ) ? this.link_base_url : this.base_url; return (hostname) ? base + '/host/' + hostname : base; } get_api_url (hostname) { return this.get_host_url(hostname) + '/api/v1' } init () { var that = this; $.get(this.get_api_url() + '/info', function (data) { that.netdata_info = data; picknsort_setup() that.build(); }); } digest () { this.fetch_active_alarms(); this.fix_layout_errors(); } build () { // Fix vertically misaligned stats on load error $('.dash-graph').css({ height: this.options.graph_height, width: this.options.graph_width }); $('.dash-chart').css({ height: this.options.chart_width, // Charts are square width: this.options.chart_width }); // Fix chart alignment $('.netdata-host-stats-container').css({ width: 'calc(' + this.options.graph_width + ' + (2 * ' + $('.netdata-host-stats-container').css('padding-left') + '))' }); var $template = $('.netdata-host-stats-container').first(); var hosts = this.get_enabled_hosts(); for (var i=0, len=hosts.length; i<len; i++) { var hostname = hosts[i]; $('#alarms .alarm-host-list').append('<div class="host-alarms ' + hostname + '"><a target="_blank" href="' + this.get_host_url(hostname, true) + '/"><h2>' + hostname + '</h2></a></div>'); $template.clone().removeClass('template').appendTo('#dash'); var $newest = $('.netdata-host-stats-container').last(); this.build_stats($newest, hostname); } if (this.first_build === true) { this.remove_template_elements(); this.first_build = false; } } build_stats ($hoststats, hostname) { var that = this; $hoststats.find('.netdata-host-stats .dash-graph').each(function () { that.build_graph($(this), hostname); }); $hoststats.find('.netdata-host-stats .dash-chart').each(function () { that.build_chart($(this), hostname); }); $hoststats.find('.netdata-host-name').html('<a target="_blank" href="' + that.get_host_url(hostname, true) + '/">' + hostname + '</a>'); } build_graph ($wrapper, hostname) { var that = this; var $graph = $('<div>', { // Defaults 'data-netdata': $wrapper.attr('data-dash-netdata'), 'data-host': that.get_host_url(hostname), 'data-before': '0', 'data-after': '-540', 'role': 'application', 'data-width': that.options.graph_width, 'data-height': that.options.graph_height }); $.each($wrapper[0].attributes, function (key, node) { if ( node.name.match(/^data-(?!dash).*/ ) ) { $graph.attr(node.name, node.value); } }); $graph.appendTo($wrapper); } build_chart ($wrapper, hostname) { var that = this; var $graph = $('<div>', { // Defaults 'data-netdata': $wrapper.attr('data-dash-netdata'), 'data-host': that.get_host_url(hostname), 'data-before': '0', 'data-after': '-540', 'data-points': '540', 'role': 'application', 'data-width': that.options.chart_width, 'data-title': ' ', 'data-easypiechart-trackcolor': "#373B40", 'data-chart-library': 'easypiechart' }) $.each($wrapper[0].attributes, function (key, node) { if ( node.name.match(/^data-(?!dash).*/ ) ) { $graph.attr(node.name, node.value); } }); $graph.appendTo($wrapper); } all_alarms_are_warnings () { var out = true; $.each(this.current_alarms, function (host, alarms) { if (out === false) { return false; // Maximum efficiency } $.each(alarms, function (name, data) { if (data.status != "WARNING") { out = false; return false; } }); }); return out; } update_alarm_count () { console.log(this.all_alarms_are_warnings()); var count = $('img.alarm-badge').length; $('.alarm-count').text($('img.alarm-badge').length); $('.alarm-count').removeClass('no-alarms warnings-only'); if ( count === 0 ) { $('.alarm-count').addClass('no-alarms'); return } if (this.all_alarms_are_warnings()) { $('.alarm-count').addClass('warnings-only'); } } fetch_active_alarms () { var that = this; console.log("Getting alarms..."); var hosts = this.get_enabled_hosts(); for (var i=0, len=hosts.length; i<len; i++) { var hostname = hosts[i]; $.get(this.get_api_url(hostname) + '/alarms', function (data) { that.new_alarms[ data.hostname ] = data.alarms; if ( Object.keys(that.new_alarms).length === len ) { // All responses received if ( that.check_new_current_alarms() ) { console.log("No alarm changes detected... Refreshing images."); that.new_alarms = {}; that.refresh_alarm_images(); return; } that.current_alarms = that.new_alarms; that.new_alarms = {}; that.draw_alarms(); that.update_alarm_count(); } }); } } toggle_alarm_collapse () { $('#alarms').toggleClass('collapsed'); } check_new_current_alarms () { // Create arrays of property names var a = this.current_alarms; var b = this.new_alarms; var aProps = Object.keys(a); var bProps = Object.keys(b); // If number of properties is different, // objects are not equivalent if (aProps.length != bProps.length) { return false; } for (var i = 0; i < aProps.length; i++) { var propName = aProps[i]; var aa = a[propName]; var aaProps = Object.keys(aa); var bb = b[propName]; var bbProps = Object.keys(bb); if (aaProps.length != bbProps.length) { return false; } for (var n = 0, len=aaProps.length; i < len; i++) { if ( bb[aaProps[n]] === undefined ) { return false; } } } // If we made it this far, objects // are considered equivalent return true; } refresh_alarm_images () { // Use Math.random() to "reload" the image $('.alarm-badge').each(function () { var old_src = $(this).attr('src').replace(/&rand=.*/g, ""); $(this).attr('src', old_src + "&rand=" + Math.random()); }); } draw_alarms () { var that = this; console.log("Drawing...", that.current_alarms); $.each(that.current_alarms, function(hostname, alarms) { $('#alarms .host-alarms.' + hostname + ' .alarm-badge').remove(); $.each(alarms, function (index, alarm) { that.draw_alarm(hostname, alarm); }) }); } draw_alarm (hostname, alarm) { var queryStr = '/badge.svg?alarm=' + alarm.name + '&chart=' + alarm.chart $('<img />', { src: this.get_api_url(hostname) + queryStr, class: 'alarm-badge' }).appendTo($('#alarms .host-alarms.' + hostname)); } remove_template_elements () { $('.netdata-host-stats-container').first().remove(); } fix_layout_errors () { $('.dash-graph:contains("chart not found")').html('<div class="loading-error">Not found</div>'); $('.dash-chart:contains("chart not found")').html('<div class="loading-error">Not found</div>'); } } /* * TUTORIAL: Change this to the URL of your netdata host * If you use netdata behind a reverse proxy, add a second parameter for the reverse proxy url like so: * new Dash('http://localhost:19999', 'https://my-domain.com/stats'); */ var dash = new Dash('http://localhost:19999'); var picknsort = new PickNSort(true); // Import dashboard.js $.getScript(dash.base_url + '/dashboard.js', function() { console.log("Loaded dashboard.js"); setTimeout(function () { $('#alarms').css("visibility", "visible"); }, 400); }); setInterval(function () { dash.digest(); }, 6 * 1000); </script> <style type="text/css"> body { background-color: #272b30; } a, a:hover { color: #AAA !important; } #dash { overflow: scroll; width: 100vw; white-space: nowrap; height: 100vh; } #alarms { display: block; z-index: 9999; position: fixed; right: 0; top: 0; bottom: 0; background-color: #111; width: 23em; padding: 1em; color: #AAA; box-shadow: 0 0 3em #060606; border: solid 1px #2d2d2d; visibility: hidden; } #alarms h1 { text-align: center; margin: 0; margin-bottom: 0.5em; margin-top: -0.1em; font-size: 2em; } #alarms h2 { font-size: 1.5em; } #alarms .alarm-collapse-button { position: absolute; top: 0; left: 0; width: 0.9em; height: 0.9em; font-size: 4em; line-height: 0.8; background: #111; text-align: center; cursor: default; } #alarms .alarm-collapse-button:hover { background: #000; } #alarms.collapsed { width: 4em; } #alarms.collapsed .alarm-collapse-button { position: fixed; left: auto; right: 0; top: 0; bottom: 0; width: 4em; height: 100vh; opacity: 0; z-index: 9999; } #alarms.collapsed h1 { transform: rotate(-90deg); position: absolute; left: -9.1em; top: 4em; width: 20em; } #alarms .alarm-host-list { margin-top: 1em; height: 100%; overflow-y: scroll; scrollbar-width: thin; } #alarms.collapsed .alarm-host-list { display: none; } #alarms .host-alarms { background: #1d1d1d; margin-bottom: 1em; padding: 0.2em 1em; padding-bottom: 1.5em; border-top: 1px solid; position: relative; } .host-alarms a:last-child:after { position: absolute; display: block; content: 'no alarms'; width: 6em; height: 1em; right: 0; top: 2em; color: #646464; } #alarms .host-alarms img.alarm-badge { margin: .25em; height: 1.2em; } #alarms .alarm-count { width: 1.5em; height: 1.5em; text-align: center; position: absolute; right: 0.5em; top: 0.5em; font-size: 1.5em; background: #6f1515; border-radius: 50%; } #alarms .alarm-count:empty { background: #333; } #alarms .no-alarms { background: #156f15; color: rgba(0,0,0,0); } #alarms .warnings-only { background: #f48041; color: #EEE; } .settings-button { position: absolute; bottom: 0; right: 0; font-size: 3em; width: 1.3em; height: 1.3em; z-index: 9999; text-align: center; line-height: 1.2; cursor: default; } .settings-button:hover { background: #424242; } .netdata-host-name { font-size: 3em; color: #FFF; text-align: center; white-space: nowrap; background: inherit; position: sticky; top: 0; z-index: 9998; box-shadow: 0 0.5em 1em #232323; margin-bottom: 0.5em; border-bottom: solid 0.1em #AAA; } .netdata-host-stats-container { position: relative; margin: 0 1em; padding: 1em 2em; display: inline-block; text-align: center; color: #CCC; background: #232323; } .netdata-host-stats-container:last-of-type { margin-right: 27em; } .netdata-host-stats { } .netdata-message { } .dash-graph { margin-bottom: 1em; } .netdata-legend-resize-handler { display: none } .dash-charts { white-space: normal; margin: 2em 0; } .dash-chart { display: inline-block; vertical-align: top; } .easyPieChartLabel { color: #FFF; } .loading-error { padding-top: 2em; font-size: 2em; } .netdata-legend-value, .netdata-legend-toolbox, .netdata-legend-toolbox-button, .netdata-legend-resize-handler { background: initial; } </style> </html>