{% extends "base_status.html" %}

{% block title %}Business Process{% endblock %}
{% block smallheader %}view{% endblock %}
{% block largeheader %}Business Process{% endblock %}

{% block nav1 %}{{ block.super }}{% endblock %}
{% block nav2 %}<a href="{% url bi.views.index %}">Business Process</a>{% endblock %}

{% load adagiostags %}

{% block content %}
    <style>
        .centralized_dashboard {
            width:  600px;
            margin-left: auto;
            margin-right: auto;

        }
        .bold {
            font-weight: bold;
        }
        .status_ok, .status_0 {
            color: #339966;
        }
        .status_warning, .status_1 {
            color: #f29d50;
        }

            /* line 297, /data/octostatus/app/assets/styles/basics.scss */
        .status_critical, .status_2 {
            color: #cc3300;
        }
        h4.dashboard_header {
            margin-top: 40px;

            margin-bottom: 10px;
        }
        .top-margin {
            margin-top: 20px;
        }

        /* Shamelessly stolen from github

/* line 186, /data/octostatus/app/assets/styles/basics.scss */
        #services {
            margin: 0 0 36px;
            border: 1px solid #e8e8e8;
            border-radius: 3px;
        }
            /* line 191, /data/octostatus/app/assets/styles/basics.scss */
        #services .service {
            padding: 8px 12px;
            overflow: hidden;
        }
            /* line 195, /data/octostatus/app/assets/styles/basics.scss */
        #services .service .name {
            float: left;
        }
            /* line 199, /data/octostatus/app/assets/styles/basics.scss */
        #services .service .status {
            float: right;
            font-weight: bold;
        }
            /* line 205, /data/octostatus/app/assets/styles/basics.scss */
        #services .service + .service {
            border-top: 1px solid #efefef;
        }

    </style>
    <style>
        /* Graphs list */
        .graph_row {
            margin: 0 0 2px;
            border: 1px solid #e8e8e8;
            border-radius: 3px;
            padding: 8px 12px;
            overflow: hidden;

        }
        .graph_notes {
            width: 150px;
            float: left;

        }
        .graph_image {
            float: right;
        }
        .graph_last_value {
            font-weight: bold;
        }
        #objecttab {
            margin-bottom: 40px;
        }


    </style>

    {% include "snippets/business_process_view_snippet.html" %}
{% endblock %}



{% block view_buttons %}{% endblock %}
{% block action_buttons %}{% endblock %}
{% block toolbar %}{% endblock %}



{% block footer %}
    {{ block.super }}
    <script src="{% url home %}rest/status.js"></script>
    <script>
        // When graphs link is clicked, simulate a click on 25hours tab as well
        $(document).ready(function() {
            $('#25hours').click();


            //
            function querystring(key) {
                var re=new RegExp('(?:\\?|&)'+key+'=(.*?)(?=&|$)','gi');
                var r=[], m;
                while ((m=re.exec(document.location.search)) != null) r.push(m[1]);
                return r;
            }
            var dom_id;
            var doms_to_hide = querystring('hide');
            for (i in doms_to_hide) {
                dom_id = '#' + doms_to_hide[i];
                $(dom_id).hide();
            }

        });

        // Load graphs when you click a new timeperiod under graphs tab
        $('#graphs_ul').click(function(event){
            var anchor = event.target.href.split('#')[1];
            var title = event.target.text;
            my_element = document.getElementById(anchor);


            if (my_element.childElementCount == 0) {
                spinner = document.createElement( 'img');
                spinner.setAttribute("src", "{% url media path="select2/spinner.gif" %}");
                my_element.appendChild( spinner );
                var url = '{% url bi.views.graphs_json bp.name %}';
                $.getJSON(url)
                        .done( function(data) {
                            $.each(data, function(i, item) {
                                        if (item['title'] == title) {
                                            graph_row = document.createElement( 'div');
                                            graph_row.setAttribute("class", "graph_row");

                                            div_notes = document.createElement('div');
                                            div_notes.setAttribute("class", "graph_notes");
                                            div_notes.textContent = item['notes'];
                                            graph_row.appendChild( div_notes );

                                            div_last_value = document.createElement('div');
                                            div_last_value.setAttribute("class", "graph_last_value");
                                            div_last_value.textContent = item['last_value'];
                                            div_notes.appendChild( div_last_value );

                                            new_img = document.createElement( 'img');
                                            new_img.setAttribute("title", item['notes']);
                                            new_img.setAttribute("class", 'graph_image');
                                            new_img.setAttribute("src", "{% url pnp.views.pnp 'image' %}?" + item['image_url'] + "&graph_width=350&graph_height=30");
                                            graph_row.appendChild( new_img );

                                            my_element.appendChild( graph_row );
                                        }
                                    }
                            )

                        })
                        .fail( function() {
                            console.log('failed to fetch info from pnp4nagios');
                        })
                        .always( function() {
                            spinner.setAttribute('class', 'hide');
                        });
            }

        });
    </script>
{% endblock %}

