/src/honeynet_web/honeywall/templates/index.html

{% extends "base.html" %}

{% block stylesheets %}
    <link href = "{{ STATIC_URL }}css/index.css" rel = "stylesheet" type = "text/css">
{% endblock %}

{% block top_row %}
    <div class = "span3">
        <img src = "{{ STATIC_URL }}logo1.png" />
    </div>

    <div class = "span9">
        <div id = "plot">
        </div>
    </div>
{% endblock %}

{% block bottom_row %}
    <!--Tabs-->
    <ul class = "nav nav-tabs">
        <li class = "active">
            <a href = "#attack_tab" data-toggle = "tab">Attacks</a>
        </li>
        <li>
            <a href = "#traffic_analysis_tab" data-toggle = "tab">Traffic Analysis</a>
        </li>
    </ul>

    <!--Tab contents-->
    <div class = "tab-content">
        <!--Attacks tab contents-->

        <div class = "tab-pane active" id = "attack_tab">
            <form class = "form-search" id = "attack_filter">
                <label id = "form_label" style = "width: 5%">Filter: </label>
                <input id = "form_entry" style = "width: 70%" type = "text" value = "" />
                <button style = "width: 10%" class = "btn" data-bind = "click: filter_button">Apply</button>
                <button style = "width: 10%" class = "btn" data-bind = "click: clear_button">Clear</button>
            </form>

            <table id = "table_header">
                <thead>
                    <tr>
                        <th id = "aid">ID</th>
                        <th id = "attack_type">Attack Type</th>
                        <th id = "start_time">Start Time</th>
                        <th id = "end_time">End Time</th>
                        <th id = "source_ip">Source IP</th>
                        <th id = "destination_ip">Destination IP</th>
                        <th id = "score">Score</th>
                        <th id = "scroll_space"></th>
                    </tr>
                </thead>
            </table>
            <div id = "table_holder">
                <table id = "main_table" class = "table">
                    <tbody data-bind = "foreach: attacks">
                        <tr data-bind = "attr: { href: link, id: level }, click: $parent.row_click">
                            <td id = "aid" data-bind = "text: aid"></td>
                            <td id = "attack_type"data-bind = "text: attackType"></td>
                            <td id = "start_time" data-bind = "text: startTime"></td>
                            <td id = "end_time" data-bind = "text: endTime"></td>
                            <td id = "source_ip" data-bind = "text: sourceIp"></td>
                            <td id = "destination_ip" data-bind = "text: destinationIp"></td>
                            <td id = "score" data-bind = "text: score"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <ul class="pager">
                <li class="previous">
                    <a href="#" data-bind="click: get_previous, visible: previousPage">&larr; Newer</a>
                </li>
                <li class="next">
                    <a href="#" data-bind="click: get_next, visible: nextPage">Older &rarr;</a>
                </li>
            </ul>
        </div>

        <!--Traffic Analysis tab contents-->
        <div class = "tab-pane" id = "traffic_analysis_tab">
            <table id = "secondary_table" class = "table">
                <thead>
                    <tr>
                        <th id = "type">Attack Type</th>
                        <th id = "last">Last Occurrence</th>
                        <th id = "avg">Average Score</th>
                        <th id = "high">High Score</th>
                        <th id = "perAttack">% of Attacks</th>
                        <th id = "perTraffic">% of Traffic</th>
                        <th id = "perFalse">% of False Positives</th>
                    </tr>
                </thead>
                <tbody data-bind = "foreach: traffics">
                    <tr>
                        <td id = "type" data-bind = "text: attackType"></td>
                        <td id = "last" data-bind = "text: lastOccurrence"></td>
                        <td id = "avg" data-bind = "text: averageScore"></td>
                        <td id = "high" data-bind = "text: highScore"></td>
                        <td id = "perAttack" data-bind = "text: perAttack"></td>
                        <td id = "perTraffic" data-bind = "text: perTraffic"></td>
                        <td id = "perFalse" data-bind = "text: perFalsePositives"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div> <!-- tab content -->
{% endblock %}

{% block javascript %}
    <!-- For flot-->
    <script src = "{{ STATIC_URL }}flot/jquery.flot.js"></script>
    <script src = "{{ STATIC_URL }}flot/jquery.flot.resize.js"></script>

    <!-- For knockout -->
    <script src = "{{ STATIC_URL }}js/knockout-2.0.0.js"></script>

    <!-- index.js -->
    <script src="{{ STATIC_URL }}js/index.js"></script>
{% endblock %}