{% extends "base.html" %}

{% set active_page = "Info" %}

{% block head %}
    <meta http-equiv="refresh" content="20" />
    <script>
        function change_button(button_id) {
            element = document.getElementById(button_id);
            if (element.classList.contains("fa-caret-down")) {
                element.classList.remove("fa-caret-down");
                element.classList.add("fa-caret-up");
            } else {
                element.classList.remove("fa-caret-up");
                element.classList.add("fa-caret-down");
            }
        }
    </script>
{% endblock %}

{% macro mem_label(component) %}
    {{ component['system']['memory_used'] | number_format }} / {{ component['system']['memory_total'] | number_format }}
{% endmacro %}

{% macro disk_label(component) %}
    {{ component['system']['disk_used'] | number_format }} / {{ component['system']['disk_total'] | number_format }}
{% endmacro %}

{% macro icon_tooltip_desk(icon, tooltip, icon_class=None) %}
    {% set icon_class = icon_class if icon_class else 'fas' %}
    <td class="align-middle text-center" style="width: 30px;" data-toggle="tooltip" data-placement="bottom" title="{{ tooltip }}">
        <i class="{{ icon_class }} fa-{{ icon }}"></i>
    </td>
{% endmacro %}

{% macro component_card(component, backend=False) %}
    <div class="card m-2" style="width: 430px;">
        <div class="card-body">
            <h5 class="card-title">{{ component['name'] }} status</h5>
            <h6 class="card-subtitle mb-2 {% if component['status'] == 'offline'%}text-danger{% else %}text-success{% endif %}">
                {{ component['status'] }}
            </h6>
            <table class="table table-borderless mb-0">
                <tr>
                    {{ icon_tooltip_desk('linux', 'Operating system', icon_class='fab') }}
                    <td>{{ component['platform']['os'] }}</td>
                    {{ icon_tooltip_desk('python', 'Python version', icon_class='fab') }}
                    <td>{{ component['platform']['python'] }}</td>
                    {{ icon_tooltip_desk('code-branch', 'FACT version') }}
                    <td>{{ component['platform']['fact_version'] }}</td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('microchip', 'CPU status') }}
                    <td colspan="5">{{ component['system']['cpu_cores'] }} cores ({{ component['system']['virtual_cpu_cores'] }} threads) @ {{ component['system']['cpu_percentage'] | nice_number }}%</td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('memory', 'Memory status') }}
                    <td colspan="5" class="align-middle">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar text-center {% if component['system']['memory_percent'] > 80.0 %}bg-warning{% endif %}" role="progressbar" style="width: {{ component['system']['memory_percent'] }}%">
                                {% if component['system']['memory_percent'] >= 50.0 %}{{ mem_label(component) }}{% endif %}
                            </div>
                            &nbsp;&nbsp;{% if component['system']['memory_percent'] < 50.0 %}{{ mem_label(component) }}{% endif %}
                        </div>
                    </td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('hdd', 'Disk status') }}
                    <td colspan="5" class="align-middle">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar text-center {% if component['system']['disk_percent'] > 80.0 %}bg-warning{% endif %}" role="progressbar" style="width: {{ component['system']['disk_percent'] }}%">
                                {% if component['system']['disk_percent'] >= 50.0 %}{{ disk_label(component) }}{% endif %}
                            </div>
                            &nbsp;&nbsp;{% if component['system']['disk_percent'] < 50.0 %}{{ disk_label(component) }}{% endif %}
                        </div>
                    </td>
                </tr>
                {% if backend %}
                    <tr>
                        {% set unpacking_class = "text-warning" if component['unpacking']['unpacking_queue'] > 500 else "" %}
                        {{ icon_tooltip_desk('box-open', 'Pending items for extraction') }}
                        <td colspan="5" class="{{ unpacking_class }}">{{ component['unpacking']['unpacking_queue'] | nice_number }}</td>
                    </tr>
                {% endif %}
            </table>
       </div>
    </div>
{% endmacro %}

{% macro plugin_card(plugin_name, plugin_data) %}
    {% set description, _, __, version, dependencies, blacklist, whitelist, threads = analysis_plugin_info[plugin_name] %}
    <div class="card m-2" style="width: 430px;">
        <div class="card-body">
            <h5 class="card-title">{{ plugin_name }}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{ version }}</h6>
            <table class="table table-borderless">
                <tr>
                    {{ icon_tooltip_desk('align-justify', 'Concurrent threads') }}
                    <td style="width: 46px;">{{ threads }}</td>
                    <td style="width: 30px;" data-toggle="tooltip" data-placement="bottom" title="Currently processing">
                        {% set span_class = " fa-spin" if plugin_data['active'] else "" %}
                        {% set span_style = "color: green" if plugin_data['active'] else "color: darkgrey" %}
                        {% set span_style = "color: yellow" if plugin_data.queue > 150 else span_style %}
                        <i class="fas fa-cog{{ span_class }}" style="{{ span_style }}"></i>
                    </td>
                    <td style="width: 46px; {{ span_style }}">
                        {{ plugin_data.active | nice_number }}
                    </td>
                    <td style="width: 30px;" data-toggle="tooltip" data-placement="bottom" title="Pending tasks">
                        {% set span_style = "color: black" if plugin_data['queue'] else "color: darkgrey" %}
                        <i class="fas fa-sign-in-alt" style="{{ span_style }}"></i>
                    </td>
                    <td style="{{ span_style }}">
                        {{ plugin_data.queue | nice_number }}
                    </td>
                </tr>
            </table>

            <div class="collapse m-0 p-0 mt-3" id="{{ plugin_name }}">
                <span class="card-text">
                    {{ description }}
                </span>
                <table class="table table-borderless mb-0">
                    <tr>
                        {{ icon_tooltip_desk('project-diagram', 'Plugin dependecies') }}
                        <td>{{ dependencies | list_group_collapse | safe}}</td>
                    </tr>
                    <tr>
                        {{ icon_tooltip_desk('flag', 'Blacklisted file types') }}
                        <td>{{ blacklist | list_group_collapse | safe }}</td>
                    </tr>
                    <tr>
                        {{ icon_tooltip_desk('flag', 'Whitelisted file types', icon_class='far') }}
                        <td>{{ whitelist | list_group_collapse | safe }}</td>
                    </tr>
                </table>
            </div>

            {% set button_id = "bt-" + plugin_name %}
            <button class="btn btn-outline-secondary btn-sm btn-block mt-3" data-toggle="collapse" data-target="#{{ plugin_name }}" onclick="change_button('{{ button_id }}')">
                <i id="{{ button_id }}" class="fas fa-caret-down"></i>
            </button>

        </div>
    </div>
{% endmacro %}

{% block body %}

<div class="row justify-content-center mt-4">
    {% for component in status %}
        {% if component and component['platform'] and component['system'] %}
            {{ component_card(component, backend=component['analysis']) }}
		{% endif %}
	{% endfor %}
</div>

<!-- Current Analyses -->
{% for component in status %}
    {% if component and component['analysis'] %}
        {% set current_analyses = component['analysis']['current_analyses'] %}
        {% set recently_finished_analyses = component['analysis']['recently_finished_analyses'] %}
        {% if current_analyses or recently_finished_analyses %}
            <div class="row justify-content-center">
                <div class="card m-2" style="width: 430px;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center" style="width: 100%">
                            <h5 class="card-title">Currently analyzed firmware</h5>
                            <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#currentAnalysesLegend" style="margin-top: -15px; margin-right: -5px">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="list-group list-group-flush">
                            {% for firmware_uid, data in current_analyses.items() %}
                                <div class="list-group-item border-top-0 clickable" onclick="location.href='/analysis/{{ firmware_uid }}/ro/{{ firmware_uid }}'">
                                    {{ firmware_uid | replace_uid_with_hid | safe }}
                                    <div class="progress mt-2" style="height: 20px;">
                                        {% set current_analysis_progress = data.analyzed_count / data.total_count %}
                                        <div class="progress-bar progress-bar-striped progress-bar-animated text-center" role="progressbar" style="width: {{ current_analysis_progress * 100 }}%">
                                            {% if current_analysis_progress >= 0.5 %}
                                                {{ data.analyzed_count }} / {{ data.total_count }} (Elapsed: {{ data.start_time | remaining_time | format_duration }})
                                            {% endif %}
                                        </div>
                                        {% set current_unpacking_progress = (data.unpacked_count - data.analyzed_count) / data.total_count %}
                                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning text-center" role="progressbar" style="width: {{ current_unpacking_progress * 100 }}%"></div>
                                        {% if current_analysis_progress < 0.5 %}
                                            <div class="justify-content-center d-flex w-100">{{ data.analyzed_count }} / {{ data.total_count }} (Elapsed: {{ data.start_time | remaining_time | format_duration }})</div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                            {% for firmware_uid, data in recently_finished_analyses.items() %}
                                <div class="list-group-item border-top-0 clickable" onclick="location.href='/analysis/{{ firmware_uid }}/ro/{{ firmware_uid }}'">
                                    {{ firmware_uid | replace_uid_with_hid | safe }}
                                    <div class="progress mt-2" style="height: 20px;">
                                        <div class="progress-bar progress-bar-striped bg-success text-center" role="progressbar" style="width: 100%">
                                            {{ data.total_files_count }} / {{ data.total_files_count }} (Finished in: {{ data.duration | round(0) | int | format_duration }})
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endif %}
{% endfor %}


<div class="modal" id="currentAnalysesLegend"  tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-question-circle" aria-hidden="true"></i> Currently Analyzed Firmware</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="progress mt-2" style="height: 20px; padding-bottom: 0;">
                    <div class="justify-content-center d-flex w-100">analyzed files / total files (elapsed time)</div>
                </div>
                <div class="progress mt-2" style="height: 20px; padding-bottom: 0;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated text-center" role="progressbar" style="width: 40%">
                        Analysis Progress
                    </div>
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning text-center" role="progressbar" style="width: 40%">
                        Unpacking Progress
                    </div>
                </div>
                <div class="progress mt-2" style="height: 20px;">
                    <div class="progress-bar progress-bar-striped bg-success text-center" role="progressbar" style="width: 100%">
                        Finished Analysis
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% for component in status %}
    {% if component and component['analysis'] %}
        <div class="row justify-content-center my-3">
            <div style="width: 430px;" class="border-secondary border-top border-bottom align-middle">
                <h5 class="d-flex justify-content-center mb-0 p-2">Analysis Plugins</h5>
            </div>
        </div>
        <div class="row justify-content-center">
            {% for plugin_name, plugin_data in component['analysis']['plugins'].items() | sort %}
                {% if "dummy" not in plugin_name %}  {# {% if plugin != "analysis_main_scheduler" %} #}
                    {{ plugin_card(plugin_name, plugin_data) }}
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
{% endfor %}

{% endblock %}