<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Saas Sla {{ ctype }}</title>
    <link href="https://yandex.st/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <link href="{% static 'css/navigation.css' %}" rel="stylesheet" />
</head>
<script src="https://yandex.st/jquery/2.0.3/jquery.min.js"></script>
<script src="https://yandex.st/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>

<style>
    tr:hover {
        background-color: #fbfae6;
    }
    td:hover {
        border: 1px solid #a7dfa7;
    }
    td {
        padding: 3px;
    }
    .ctplink {
        padding-right: 20px;
    }
    .user-link {
        display: inline-block;
    }
    .user-link:first-letter {
        color:red;
    }
    .btn-main-link {
        background-color: #d9c568;
    }
    .btn-main-link:after {
        border-left-color: #d9c568;
    }
    .ctype-current {
        background-color: lightgoldenrodyellow;
    }
    .page-title {
        color: #826b00;
        cursor: pointer;
    }
    .service-link {
        color: black;
    }
</style>
<script type="text/javascript">
    $.getScript('//yastatic.net/staff-card/_/staff-card.min.js', function () {
        try {
            split_big_numbers();
        } catch(err) { console.log(err); }
        let user_els = document.getElementsByClassName('user-link');
        for (let i=0; i<user_els.length; ++i) {
            new StaffCard(user_els[i], user_els[i].getAttribute('data-login'));
        }
    });

    function split_big_number(el) {
        let dv = el.getAttribute('data-value');
        let new_val = dv;
        if (dv.length > 3) {
            let npts = dv.length / 3;
           // console.log('val=' + dv + 'parts=' + npts);
            new_val = '';
            for (let i=0; i<npts; ++i) {
                new_val = dv.slice(-3*(i+1), (i ? - 3*i : dv.length)) + (i ? '&nbsp' + new_val : '');
            }
        }
        el.innerHTML =new_val;
    }

    function split_big_numbers() {
        let user_els = document.getElementsByClassName('big-number');
        for (let i=0; i<user_els.length; ++i) {
            split_big_number(user_els[i]);
        }
    }

    function cell_click(cell_id) {
        let el = document.getElementById(cell_id);
        if (el.getAttribute('conteteditable') === 'true') {
            return;
        }
        el.setAttribute('contenteditable', 'true');
        el.innerText = el.getAttribute('data-value');
    }

    function gather_info(service) {
        console.log('service ' + service);
    }

    function send_sla() {
        console.log('would send');
    }
</script>
<body>
<button class="btn-main-link"><a href="{% url 'main' %}" class="main-link">SAAS</a></button>
<span class="dropdown"><span class="page-title" data-toggle="dropdown">SLA<span class="caret"></span></span>
        <ul id="nav-screens-menu" class="dropdown-menu">
            <li><a href="{% url 'sla_info' %}?ctype={{ ctype }}">SLA</a></li>
            <li><a href="{% url 'cluster_map' %}?ctype={{ ctype }}">Cluster map</a></li>
            <li><a href="{% url 'nanny_info' %}?ctype={{ ctype }}">Nanny info</a></li>
        </ul></span>
{% for ct in ctypes %}
    <a href="{% url 'sla_info' %}?ctype={{ ct }}"
       class="ctplink{% if ctype == ct %} ctype-current{% endif %}">{{ ct }}</a>
{% endfor %}

<table>
    <thead><tr style="border-top: 2px solid #fbeba0;border-bottom: 2px solid #fbeba0">
        <th>Service</th>
        <th>Owners</th>
        <th>Responsibles</th>
        <th>ABC user</th>
        <th>ABC quota</th>
        <th>Ticket</th>
        <th style="text-align:right">Max Docs</th>
        <th style="text-align:right">Search RPS</th>
        <th style="text-align:right">Search RPS Planned</th>
        <th style="text-align:right">Index RPS</th>
        <th style="text-align:right">Total index size, bytes</th>
        <th style="text-align:center">Search q99, ms</th>
        <th style="text-align:center">Search q999, ms</th>
        <th style="text-align:center">Unanswers 5min warn, %</th>
        <th style="text-align:center">Unanswers 5min crit, %</th>
        <th style="text-align:center">Service weight</th>
        <th style="text-align:center">Ferryman</th>
    </tr></thead>
    {% for service, sla in data.items %}
        <tr>
            <td><a href="{% url 'service_info' %}?ctype={{ ctype }}&service={{ service }}" class="service-link">{{ service }}</a></td>
            <td title="Owners">{% for owner in sla.owners %}
                <a href="https://staff.yandex-team.ru/{{ owner }}" data-login="{{ owner }}" class="user-link" target="_blank">{{ owner }}</a> {% endfor %}</td>
            <td title="Responsibles">{% for resp in sla.responsibles %}
                <a href="https://staff.yandex-team.ru/{{ resp }}" data-login="{{ resp }}" class="user-link" target="_blank">{{ resp }}</a> {% endfor %}</td>
        <td><a href="https://abc.yandex-team.ru/services/{{ sla.abc_user_service }}"
               target="_blank" style="text-decoration:none">
            {{ sla.abc_user_service }}</a></td>
        <td><a href="https://abc.yandex-team.ru/services/{{ sla.abc_quota_service }}"
               target="_blank" style="text-decoration:none">
            {{ sla.abc_quota_service }}</a></td>
        <td><a href="https://st.yandex-team.ru/{{ sla.ticket }}"
               target="_blank" style="text-decoration:none">
            {{ sla.ticket }}</a></td>
        <td id="{{ service }}-maxdocs" title="Max Docs" class="big-number" style="text-align:right"
            ondblclick="cell_click('{{ service }}-maxdocs')" data-prev-value="{{ sla.maxdocs }}" data-value="{{ sla.maxdocs }}">{{ sla.maxdocs }}</td>
        <td title="Search RPS" style="text-align:right">{{ sla.search_rps }}</td>
        <td title="Search RPS Planned" style="text-align:right">{{ sla.search_rps_planned }}</td>
        <td title="Index RPS" style="text-align:right">{{ sla.index_rps }}</td>
        <td title="Total index size, bytes" class="big-number"
            style="text-align:right" data-prev-value="{{ sla.total_index_size_bytes }}" data-value="{{ sla.total_index_size_bytes }}">{{ sla.total_index_size_bytes }}</td>
        <td title="Search q99, ms" style="text-align:center">{{ sla.search_q_99_ms }}</td>
        <td title="Search q999, ms" style="text-align:center">{{ sla.search_q_999_ms }}</td>
        <td title="Unanswers 5min warn, %" style="text-align:center">{{ sla.unanswers_5min_perc_warn }}</td>
        <td title="Unanswers 5min crit, %" style="text-align:center">{{ sla.unanswers_5min_perc_crit }}</td>
        <td title="Service weight" style="text-align:center">{{ sla.service_weight }}</td>
        <td title="Ferryman" style="text-align:center">
            {% for ferryman in sla.ferrymans %}
                <a href="https://nanny.yandex-team.ru/ui/#/services/catalog/{{ ferryman }}"
               target="_blank" style="text-decoration:none">{{ ferryman }}</a>{% endfor %}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>
