<script>
enqueLists.push([{
    res: 'emergency_mode',
    widgetName: "AdminSystemOverview",
    cb: function(data) {
        //console.log(data);
        var txt = (data.widget_data > 0 ? "Emergency Mode" : "Ok");
        var col = (data.widget_data > 0 ? "#FFC200" : "#000");
        $("#admin_system_overview_lazy_items_list").prepend('<li>[% c.loc('Applications') %] <strong style="color:' + col + '">' + txt + '</strong></li>');
    }
},
{
    res: 'overall_status',
    widgetName: "AdminSystemOverview",
    cb: function(data) {
        //console.log(data);
        var txt = data.widget_data.text;
        var cls = data.widget_data.class;
        var problems = data.widget_data.problems;
        $("#admin_system_overview_lazy_loading").remove();
        $("#admin_system_overview_lazy_items_header").append(
            '<div class="plan-price">' +
                '<span class="' + cls + '">&#9702;</span>' +
                '<span class="term"></span>' +
            '</div>');
        $("#admin_system_overview_lazy_items_list").prepend(
            '<li>[% c.loc('Status') %]: <strong id="status_text"></strong></li>'
        );
        if (problems) {
            $("#status_text").append(
                '<a data-toggle="modal" href="#statistics_modal">' + txt + '</a>'
            );
        }
        else{
            $("#status_text").append(txt);
        }
        for (var type in problems) {
            var last_host = "none";
            $("#statistics_modal_content").append( "<h2>" + type + " problems detected</h2>" );
            $.each( problems[type], function( i, problem ) {
                if (type == "node" && last_host != problem.host) {
                    $("#statistics_modal_content").append( "<h3>node " + problem.host + " in cluster blade " + problem.blade + "</p>" );
                    last_host = problem.host;
                }
                $("#statistics_modal_content").append( "<p> service " + problem.service + ": " + problem.error + " </p>" );
            });
        }
    }
}]);
</script>

<div class="plan-container">
    <div class="plan">
        <div class="plan-header" id="admin_system_overview_lazy_items_header">
            <div class="plan-title">[% c.loc('System Status') %]</div>
            <div class="plan-price widget-loading" id="admin_system_overview_lazy_loading"><span>&#9702;</span><span class="term">processing ...</span></div>
        </div>
        <div class="plan-features">
            <ul id="admin_system_overview_lazy_items_list">
            </ul>
        </div>
        <div class="plan-actions">
            <a href="/grafana/d/system-statistics?ngcp_grafana_admin=no" class="btn">[% c.loc('View Statistics') %]</a>
        </div>
    </div>
</div>

<div id="statistics_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="statistics_modal_label" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="statistics_modal_label">Messages</h3>
  </div>
  <div id="statistics_modal_content" class="modal-body">
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>
[% # vim: set tabstop=4 syntax=html expandtab: -%]
