SMusatov
/
netdata
mirror of https://github.com/netdata/netdata.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020
							<!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;
            }
        }

        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>