{% extends 'intranet.html.twig' %}

{% block page_title %}Monitor{% endblock %}
{% block page_content %}

    <div class="dashboard">
        <div class="row">
            <div class="col-sm-12"><h4>General</h4></div>
            <div class="col-sm-3 disk-usage">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h2 class="message"></h2>
                        <p>Espacio libre en disco</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-save"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 log-size">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h2 class="message"></h2>
                        <p>Tamaño tabla event_log</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-table"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 task-failed">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h2 class="message"></h2>
                        <p>Tareas fallidas email exportación</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 export-orders">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h2 class="message"></h2>
                        <p>Albaranes export sin factura A4B</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12"><h4>Colas</h4></div>
            <div class="col-sm-3 count-queue">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h2 class="message"></h2>
                        <p>Mensajes en colas Rabbit</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-tasks"></i>
                    </div>
                    <a target="_blank" href="http://{{ ip }}:15672" class="small-box-footer">
                        Más información <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <div class="col-sm-3 count-queue-update">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h2 class="message"></h2>
                        <p>Mensajes en colas eventos trackings</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-tasks"></i>
                    </div>
                    <a target="_blank" href="http://{{ ip }}:15672" class="small-box-footer">
                        Más información <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <div class="col-sm-3 count-queue-notificate">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h2 class="message"></h2>
                        <p>Mensajes en cola de notificar trackings</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-tasks"></i>
                    </div>
                    <a target="_blank" href="http://{{ ip }}:15672" class="small-box-footer">
                        Más información <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-sm-12"><h4>Trackings</h4></div>
            <div id="tracking"></div>
        </div>
        <div class="row">
            <div class="col-sm-12"><h4>Logs</h4></div>
            <div class="col-sm-3 dir-log">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h2 class="message"></h2>
                        <p>Tamaño de directorio log</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-tasks"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12"><h4>Logs</h4></div>
            <div id="logs"></div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">
        $('.console').each(function (e) {
            $(this).scrollTop($(this).prop("scrollHeight"));
        });

        async function request(path) {
            const request = await fetch(path);
            return await request.json();
        }

        const showValues = (selector, text, classname) => {
            $('.' + selector).find('h2.message').text(text);
            $('.' + selector + ' div.small-box').removeClass('bg-gray').addClass(classname);
        }

        async function getDiskUsage() {

            const {free, free_percentage} = await request('{{ path('app_monitor_disk_usage') }}');
            const message = `${free} GB (${free_percentage} %)`;
            const bgClass = free_percentage < 16 ? 'bg-red' : free_percentage < 20 ? 'bg-orange' : 'bg-aqua'

            showValues('disk-usage', message, bgClass);
        }

        async function getLogSize() {

            const log_size = await request('{{ path('app_monitor_event_log_size') }}');
            const bgClass = log_size > 2 ? 'bg-red' : log_size > 1.2 ? 'bg-orange' : 'bg-aqua';

            showValues('log-size', log_size, bgClass);
        }

        async function getTaskFailed() {

            const task_failed = await request('{{ path('app_monitor_export_email_failed') }}');
            const bgClass = task_failed >= 3 ? 'bg-red' : task_failed >= 1 ? 'bg-orange' : 'bg-aqua';

            showValues('task-failed', task_failed, bgClass);
        }

        async function getExportOrders() {
            const export_orders = await request('{{ path('app_monitor_orders_without_invoice') }}');
            const bgClass = export_orders >= 5 ? 'bg-red' : export_orders >= 1 ? 'bg-orange' : 'bg-aqua';

            showValues('export-orders', export_orders, bgClass);
        }

        async function getCountQueue() {
            const count_queue = await request('{{ path('app_monitor_queue_count_messages') }}');
            const bgClass = count_queue > 2000 ? 'bg-red' : 'bg-aqua';

            showValues('count-queue', count_queue, bgClass);
        }

        async function getCountQueueUpdateTracking() {
            const count_queue = await request('{{ path('app_monitor_queue_count_update_tracking_messages') }}');
            const bgClass = count_queue > 2000 ? 'bg-red' : 'bg-aqua';

            showValues('count-queue-update', count_queue, bgClass);
        }

        async function getCountQueueNotificateTracking() {
            const count_queue = await request('{{ path('app_monitor_queue_count_notificate_tracking_messages') }}');
            const bgClass = count_queue > 100 ? 'bg-red' : 'bg-aqua';

            showValues('count-queue-notificate', count_queue, bgClass);
        }

        async function getLastTracking(){
            const view = await request('{{ path('app_monitor_last_tracking_events') }}');
            $("#tracking").html(view);
        }

        async function getDirLogSize() {
            const log_size = await request('{{ path('app_monitor_logs_dir_size') }}');
            const bgClass = log_size > 4000 ? 'bg-red' : 'bg-aqua';

            showValues('dir-log', log_size + ' MB', bgClass);
        }

        async function getLogs(){
            const view = await request('{{ path('app_monitor_logs') }}');
            $("#logs").html(view);
        }

        Promise.all([
            getDiskUsage(),
            getLogSize(),
            getTaskFailed(),
            getExportOrders(),
            getCountQueue(),
            getCountQueueUpdateTracking(),
            getCountQueueNotificateTracking(),
            getLastTracking(),
            getDirLogSize(),
            getLogs()
        ])

    </script>
{% endblock %}