{% extends 'admin/change_list.html' %}
{% load i18n humanize static %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'taskmonitor/css/admin.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'taskmonitor/css/reports.css' %}">
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script src="{% static 'taskmonitor/vendor/highcharts/highcharts.js' %}"></script>
    <script src="{% static 'taskmonitor/js/hc_dark_theme.js' %}"></script>
{% endblock %}

{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
        &rsaquo; <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
        &rsaquo; <a href="{% url 'admin:taskmonitor_tasklog_changelist' %}">{{ cl.opts.verbose_name_plural|capfirst }}</a>
        &rsaquo; {{ title }}
    </div>
{% endblock %}

{% block content_title %}
    <h1>
        {{ title }}
        <span class="float-right">
        <a href="{% url 'taskmonitor:admin_taskmonitor_reports_recalculation' %}"><input type="button" value="Recalc now"></a>
        {% if debug_mode %}
            <a href="{% url 'taskmonitor:admin_taskmonitor_reports_clear_cache' %}"><input type="button" value="Clear cache"></a>
        {% endif %}
        </span>
    </h1>
    <br class="clear">
{% endblock %}

{% block content %}

    <div id="content-main">

        <div class="module" id="changelist">

            <div id="changelist-filter">

                <h2>Contents</h2>

                <h3>All tasks</h3>
                <ul>
                    <li class="selected"><a class="tabLinks" href="#" onclick="openTab(event, 'task-runs-by-state')" id="defaultTab">Task runs by state</a></li>
                    <li><a class="tabLinks" href="#" onclick="openTab(event, 'task-runs-by-app')">Task runs by app</a></li>
                    <li><a class="tabLinks" href="#" onclick="openTab(event, 'task-througput')">Task througput</a></li>
                </ul>
                <h3>Top tasks</h3>
                <ul>
                    <li><a class="tabLinks" href="#" onclick="openTab(event, 'top-tasks-by-runs')">Top tasks by runs</a></li>
                    <li><a class="tabLinks" href="#" onclick="openTab(event, 'top-tasks-by-runtime')">Top tasks by runtime</a></li>
                    <li><a class="tabLinks" href="#" onclick="openTab(event, 'top-failed-tasks')">Top tasks by failed runs</a></li>
                    <li><a class="tabLinks" href="#" onclick="openTab(event, 'top-retried-tasks')">Top tasks by retried runs</a></li>
                </ul>
            </div>

            <div class="changelist-form-container">
                <div id="task-runs-by-state" class="tabContent">
                    <h2>Task runs by state</h2>
                    {% include "admin/taskmonitor/tasklog/report_piechart_partial.html" with data=task_totals_by_state %}
                </div>

                <div id="task-througput" class="tabContent">
                    <h2>Throughput in task executions per minute</h2>
                    {% include "admin/taskmonitor/tasklog/report_table_partial.html" with rows=tasks_throughput disable_percent=True %}
                </div>

                <div id="task-runs-by-app" class="tabContent">
                    <h2>Task runs by app</h2>
                    {% include "admin/taskmonitor/tasklog/report_piechart_partial.html" with data=task_runs_per_app %}
                </div>

                <div id="top-tasks-by-runs" class="tabContent">
                    <h2>Top {{ MAX_TOP }} tasks by runs</h2>
                    {% include "admin/taskmonitor/tasklog/report_barchart_partial.html" with data=tasks_top_runs %}
                </div>

                <div id="top-tasks-by-runtime" class="tabContent">
                    <h2>Top {{ MAX_TOP }} tasks by instance runtime in seconds</h2>
                    {% include "admin/taskmonitor/tasklog/report_barchart_partial.html" with data=tasks_top_runtime %}
                </div>

                <div id="top-failed-tasks" class="tabContent">
                    <h2>Top {{ MAX_TOP }} tasks by failed runs</h2>
                    {% include "admin/taskmonitor/tasklog/report_barchart_partial.html" with data=tasks_top_failed %}
                </div>

                <div id="top-retried-tasks" class="tabContent">
                    <h2>Top {{ MAX_TOP }} tasks by retried runs</h2>
                    {% include "admin/taskmonitor/tasklog/report_barchart_partial.html" with data=tasks_top_retried %}
                </div>

                <br>
                <p>
                    Total of {% if total_runs > 1000000 %}{{ total_runs|intword }}{% else %}{{ total_runs|intcomma }}{% endif %} task logs spanning {{ youngest_date|timeuntil:oldest_date }} with a cumulative runtime of {{ total_runtime_date|timesince }}.
                    This data is cached. Last updated {{ last_update_at|naturaltime }}.
                    All data of this app is stored for a maxmimum of {{ data_max_age }} hours.
                </p>
            </div>


        </div>

    </div>

    <script>
        function openTab(evt, tabName) {
            // Get all elements with class="tabContent" and hide them
            let tabContent = document.getElementsByClassName("tabContent");
            for (let i = 0; i < tabContent.length; i++) {
                tabContent[i].style.display = "none";
            }

            // Get all elements with class="tabLinks" and remove the class "active"
            let tabLinks = document.getElementsByClassName("tabLinks");
            for (let i = 0; i < tabLinks.length; i++) {
                tabLinks[i].className = tabLinks[i].className.replace(" active", "");
                tabLinks[i].parentElement.className = tabLinks[i].parentElement.className.replace("selected", "");

            }

            // Show the current tab, and add an "active" class to the button that opened the tab
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
            evt.currentTarget.parentNode.className += " selected";
        }

        document.getElementById("defaultTab").click();

    </script>

{% endblock %}
