summaryrefslogtreecommitdiffstats
path: root/web/gui/dash-example.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2019-09-13 05:05:16 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2019-09-13 05:05:16 +0000
commit8f5d8f3de6cae180af37917ef978a4affc2cd464 (patch)
tree4bfe1abc6d19c2dd635d1b83cc0e73d0aa6904ac /web/gui/dash-example.html
parentAdding upstream version 1.17.0. (diff)
downloadnetdata-8f5d8f3de6cae180af37917ef978a4affc2cd464.tar.xz
netdata-8f5d8f3de6cae180af37917ef978a4affc2cd464.zip
Adding upstream version 1.17.1.upstream/1.17.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'web/gui/dash-example.html')
-rw-r--r--web/gui/dash-example.html1015
1 files changed, 1015 insertions, 0 deletions
diff --git a/web/gui/dash-example.html b/web/gui/dash-example.html
new file mode 100644
index 000000000..55cd6400c
--- /dev/null
+++ b/web/gui/dash-example.html
@@ -0,0 +1,1015 @@
+<!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()">&rsaquo;</div>
+ <span class="alarm-count"></span>
+ <h1>Alarms</h1>
+ <div class="alarm-host-list"></div>
+ <div class="settings-button" onclick="dash.reorder_hosts()">&#9881;</div>
+ </div>
+ <div id="dash">
+ <div class="netdata-host-stats-container template">
+ <div class="drag-anchor"></div>
+ <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="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)'>&#8595;</div>")
+ .append("<div class='picknsort-item-up' data-index='" + index + "' onclick='picknsort.shift_up(this)'>&#8593;</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) {
+ 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;
+ $("<style>")
+ .prop("type", "text/css")
+ .html(`
+#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);
+}
+ `).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.link_base_url;
+ this.netdata_info;
+ 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;
+ }
+
+ .drag-anchor {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 2em;
+ background: #111;
+
+ }
+
+ .netdata-host-name {
+ font-size: 3em;
+ color: #FFF;
+ text-align: center;
+ white-space: nowrap;
+ }
+
+ .netdata-host-stats-container {
+ position: relative;
+ margin: 0 1em;
+ padding: 3em 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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 11:12:24 +0000