{% extends "base.html" %}

{% set active_page = "Info" %}

{% block head %}
    <script type="text/javascript" src="{{ url_for('static', filename='js/system_health.js') }}"></script>
    <script>
        setInterval(updateSystemHealth, 5000);
        updateSystemHealth();
    </script>
    <style>
        .progress {
            color: white;
            background-color: darkgray;
        }
    </style>
{% endblock %}

{% 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) %}
    <div class="card m-2" style="width: 430px;">
        <div class="card-body">
            <h5 class="card-title">{{ component }} status</h5>
            <h6 class="card-subtitle mb-2" id="{{ component }}-status">
                unknown
            </h6>
            <table class="table table-borderless mb-0">
                <tr>
                    {{ icon_tooltip_desk('linux', 'Operating system', icon_class='fab') }}
                    <td id="{{ component }}-os"></td>
                    {{ icon_tooltip_desk('python', 'Python version', icon_class='fab') }}
                    <td id="{{ component }}-python"></td>
                    {{ icon_tooltip_desk('code-branch', 'FACT version') }}
                    <td id="{{ component }}-version"></td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('microchip', 'CPU status') }}
                    <td colspan="5" id="{{ component }}-cpu"></td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('memory', 'Memory status') }}
                    <td colspan="5" class="align-middle">
                        <div class="progress" style="height: 20px;" id="{{ component }}-memory"></div>
                    </td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('hdd', 'Disk status') }}
                    <td colspan="5" class="align-middle">
                        <div class="progress" style="height: 20px;" id="{{ component }}-disk"></div>
                    </td>
                </tr>
                {% if component == "backend" %}
                    <tr>
                        {{ icon_tooltip_desk('box-open', 'Pending items for extraction') }}
                        <td colspan="5" id="backend-unpacking-queue"></td>
                    </tr>
                {% endif %}
            </table>
       </div>
    </div>
{% endmacro %}

{% macro plugin_card(plugin_name) %}
    {% 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">
                        <i class="fas fa-cog" style="color: darkgrey" id="{{ plugin_name }}-active-indicator"></i>
                    </td>
                    <td style="width: 46px;" id="{{ plugin_name }}-active"></td>
                    <td style="width: 30px;" data-toggle="tooltip" data-placement="bottom" title="Pending tasks">
                        <i class="fas fa-sign-in-alt" style="color: darkgrey" id="{{ plugin_name }}-queue-indicator"></i>
                    </td>
                    <td id="{{ plugin_name }}-queue"></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 dependencies') }}
                        <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 ["frontend", "backend" ,"database"] %}
        {{ component_card(component) }}
	{% endfor %}
</div>

<!-- Current 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 id="current-analyses">
                <!-- Filled with JavaScript -->
            </div>
        </div>
    </div>
</div>



<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>


{% if analysis_plugin_info %}
    <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 in analysis_plugin_info | sort %}
            {% if plugin_name != "unpacker" %}
                {{ plugin_card(plugin_name) }}
            {% endif %}
        {% endfor %}
    </div>
{% endif %}

{% endblock %}