summaryrefslogtreecommitdiffstats
path: root/web/gui/dash-example.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2021-05-19 12:33:38 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2021-05-19 12:33:59 +0000
commit1ee0c09c5742557e037df5421ca62abddb90ae22 (patch)
tree71c0fa48bb6d31d036c9badd7e038527f90d1a73 /web/gui/dash-example.html
parentReleasing debian version 1.30.1-1. (diff)
downloadnetdata-1ee0c09c5742557e037df5421ca62abddb90ae22.tar.xz
netdata-1ee0c09c5742557e037df5421ca62abddb90ae22.zip
Merging upstream version 1.31.0.
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.html1028
1 files changed, 0 insertions, 1028 deletions
diff --git a/web/gui/dash-example.html b/web/gui/dash-example.html
deleted file mode 100644
index b1ff1af82..000000000
--- a/web/gui/dash-example.html
+++ /dev/null
@@ -1,1028 +0,0 @@
-<!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;&#xFE0E;</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)'>&#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) {
- /*
- * 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.sort();
- }
- }
-
- 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 onclick="return dash.scroll_to_host_stats(' + "'" + hostname + "'" + ')" href="#' + hostname + '"><h2>' + hostname + '</h2></a></div>');
-
- $template.clone().removeClass('template').attr('id', hostname).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);
- }
-
- scroll_to_host_stats (hostname) {
- event.preventDefault();
- $('#dash').scrollLeft(document.getElementById(hostname).offsetLeft - $('#' + hostname).width());
-
- // Prevent regular event from happening
- return false;
- }
-
- 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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-06 10:29:27 +0000