<!DOCTYPE html>
{% load staticfiles %}
{% load template_tags %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Files_info {{ ctype }}-{{ service_type }}</title>
    <link href="https://yandex.st/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <link href="{% static 'css/navigation.css' %}" rel="stylesheet" />
    <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"></script>
</head>
<style>
    th {
        border: 1px solid lightblue;
        background-color: #e9f1f9;
    }
    td {
        border: 1px solid lightblue;
    }
    .main-selector {
        color: #0052a3;
        cursor:pointer;
    }
    .btn-main-link {
        background-color: #294c77;
    }
    .btn-main-link:after {
	    border-left-color: #294c77;
    }
    .page-title {
        color: #0052a3;
        cursor: pointer;
    }
    .service-link {
        color: black;
    }
</style>
<script type="text/javascript">

    let versions = {};
    const colors_variants = [
        '#90ee9066', '#add8e66b', '#fae95c52',
        '#ff980059', '#9c27b057', '#ffb2cc6e',
        '#cddc3966', '#00bcd452',
        '#a59f6f52', '#deb2a4c2', '#c3c79cf0',
        '#0000ff61', '#84c1b685', '#ffe3b97a'
    ];

    function colorize(fn) {
        if (!versions.hasOwnProperty(fn)) {
            alert('internal error: ' + fn);
            console.log(versions);
            return;
        }
        let colors = {};
        let cur_cnt = 0;
        for (let v in versions[fn]) {
            if (!versions[fn].hasOwnProperty(v) || v === 'cnt') { continue; }
            if (v === '') {
                colors[v] = '#cccbcb';
            } else {
                colors[v] = (cur_cnt < colors_variants.length) ? colors_variants[cur_cnt++] : 'blue';
            }
        }
        let els = document.getElementsByClassName('td-file');
        for (let i=0; i<els.length; ++i) {
            if (els[i].getAttribute('data-fn') === fn) {
                let v = els[i].innerText;
                els[i].style.backgroundColor = colors[v];
            }
        }
    }

    $(document).ready(function() {
        let els = document.getElementsByClassName('td-file');
        for (let i=0; i<els.length; ++i) {
            let fn = els[i].getAttribute('data-fn');
            let vers = els[i].innerText;
            if (!versions.hasOwnProperty(fn)) {
                versions[fn] = {};
            }
            if (!versions[fn].hasOwnProperty('cnt')) {
                versions[fn]['cnt'] = 0;
            }
            if (!versions[fn].hasOwnProperty(vers)) {
                versions[fn]['cnt']++;
                versions[fn][vers] = 1;
            } else {
                ++versions[fn][vers];
            }
        }
        let th_els = document.getElementsByClassName('th-file');
        for (let i=0; i<th_els.length; ++i) {
            let fn = th_els[i].getAttribute('data-fn');
            if (!versions.hasOwnProperty(fn)) { continue; }
            let cnt = versions[fn]['cnt'];
            let cnt_el = document.createElement('span');
            cnt_el.className = 'badge';
            cnt_el.style.cursor = 'pointer';
            cnt_el.innerHTML = cnt;
            cnt_el.onclick = function() { colorize(fn); };
            cnt_el.title = cnt + ' versions present:';
            for (let v in versions[fn]) {
                if (!versions[fn].hasOwnProperty(v) || v === 'cnt') { continue; }
                cnt_el.title += '\n' + (v === '' ? '(absent)' : v) + ': ' + versions[fn][v];
            }
            th_els[i].appendChild(cnt_el);
        }
    });
</script>
<body>
{% include "nav_ctype.html" %}
<div style="margin-bottom:2px">
    <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">Nanny info<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>
    <label>Ctype: </label>
    <span id="ctype_selector">{{ ctype }}</span><span class="caret"></span>
    <label>Service type: </label>
    <span class="dropdown"><span data-toggle="dropdown" class="main-selector"> {{ service_type }}</span><span class="caret"></span>
    <ul class="dropdown-menu">
        <li><a href="{% url 'nanny_info' %}?ctype={{ ctype }}&service_type=rtyserver">rtyserver</a></li>
        <li><a href="{% url 'nanny_info' %}?ctype={{ ctype }}&service_type=searchproxy">searchproxy</a></li>
        <li><a href="{% url 'nanny_info' %}?ctype={{ ctype }}&service_type=indexerproxy">indexerproxy</a></li>
        <li><a href="{% url 'nanny_info' %}?ctype={{ ctype }}&service_type=deploy_manager">deploy_manager</a></li>
    </ul>
    </span>
</div>
<table>
    <thead>
    <tr>
        <th>Service</th>
        <th>Nanny Service</th>
        <th>GenConf Group</th>
        {% for file in data.files %}
            <th class='th-file' data-fn="{{ file }}">{{ file }}</th>
        {% endfor %}
    </tr>
    </thead>
    <tbody>
    {% for s in data.services %}
    <tr>
        <td><a href="{% url 'deploy_page' %}?ctype={{ ctype }}&service={{ s.service }}" target="_blank" class="service-link">{{ s.service }}</a></td>
        <td>{% for tag in s.data.tags %}
            <a href="https://nanny.yandex-team.ru/ui/#/services/catalog/{{ tag }}/" target="_blank">
                {{ tag }}</a>
        {% endfor %}</td>
        <td>
            {% for group, grbs in s.data.groups.items %}
                {{ group }}
                <a href="https://gencfg.yandex-team.ru/trunk/groups/{{ group }}" target="_blank" style="float:right" title="trunk">
                        tr</a>
                {% for branch in grbs %}
                    <a href="https://gencfg.yandex-team.ru/{{ branch }}/groups/{{ group }}" target="_blank" style="float:right">
                        {{ branch }}</a>
                {% endfor %}
                <br>
            {% endfor %}
        </td>
        {% for file in data.files %}
            <td title="{{ s.data.files|get_td_title:file }}" data-fn = "{{ file }}" class="td-file">
                {% if s.data.files|get_item:file %}

                    {% if s.data.files|get_file_type:file == 'sandbox_files' %}
                        sb: <a href="https://sandbox.yandex-team.ru/task/{{ s.data.files|get_task_id:file }}/view"
                               target="_blank">{{ s.data.files|get_task_id:file }}</a>
                    {% else %}
                        {{ s.data.files|get_file_type:file }}
                    {% endif %}
                {% endif %}
            </td>
        {% endfor %}
    </tr>
    {% endfor %}
    </tbody>
</table>
</body>
</html>
