Firewall on Demand

{% extends "b3theme/base.html" %}

{% load i18n %}

{% block extrahead %}

<link href="{{STATIC_URL}}b3theme/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

{% endblock %}

{% block pagejsbodttom %}

<script type="text/javascript" src="{{STATIC_URL}}js/jquery.dataTables.js"></script>

<script type="text/javascript" src="{{STATIC_URL}}js/datatables_bootstrap.js"></script>

{% endblock %}

{% block title %}{% trans "My rules" %}{% endblock %}

{% block contentplaceholder %}

{% csrf_token %}

    <div class="row">

        <div class="col-md-12">

            <h1 class="page-header">{% trans "My rules" %} </h1>

        </div>

        <!-- /.col-lg-12 -->

    </div>

<div class="row">

        <div class="col-md-10">

                <div class="panel panel-primary">

                <div class="panel-heading"> <i class="fa fa-shield"></i> Firewall Rules

                </div>

<div class="panel-body">

                    <div class="table-responsive">

                            <table class="table table-striped table-bordered" id="routes_table">

<thead>

<tr>

        <th>Id</th>

        <th>{% trans "Name" %}</th>

        <th>{% trans "Match" %}</th>

        <th style="text-align: center;">{% trans "Then" %}</th>

        <th style="text-align: center; ">{% trans "Status" %}</th>

        <th style="text-align: center;">{% trans "Applier" %}</th>

        <th style="text-align: center;">{% trans "Expires" %}</th>

        <th style="text-align: center;">{% trans "Response" %}</th>

        <th style="text-align: center;">{% trans "Actions" %}</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div></div>

</div></div>

                   <div class="col-md-2">

                        <div class="panel panel-default">

                        <div class="panel-heading">

                            <i class="fa fa-tags"></i> {% trans "Shortcuts" %}

                        </div>

                        <!-- /.panel-heading -->

<div class="panel-body">

                                <a class="btn btn-sm btn-outline btn-success" id="routebutton" href="{% url add-route %}"><i class="fa fa-plus-circle"></i> {% trans "Add Rule" %}</a>

                                <a class="btn btn-sm btn-outline btn-info"  href="{% url user-profile %}"><i class="fa fa-user"></i> {% trans "My Profile" %}</a>

                        </div>

                        <!-- /.panel-body -->

                    </div>

                    <!-- /.panel -->

                        <div class="chat-panel panel panel-info">

                        <div class="panel-heading">

                            <i class="fa fa-comment fa-fw"></i> Live status

                        </div>

                        <!-- /.panel-heading -->

<div class="panel-body">

        {% include "polldash.html" %}

                        </div>

                        <!-- /.panel-body -->

                    </div>

                    <!-- /.panel -->

                        </div>

</div>

{% endblock %}

{% block pagejsbottom %}

    <script src="{{STATIC_URL}}js/dataTableslatest/jquery.dataTables.min.js"></script>

    <script src="{{STATIC_URL}}js/dataTableslatest/dataTables.bootstrap.js"></script>

    {% if user.is_authenticated %}

<script type="text/javascript" src="{% url load-js 'poller' %}"></script>

{% endif %}

<script type="text/javascript">

var filterbtns = '<div class="btn-group col-centered">\

    <button type="button" class="btn btn-outline btn-sm btn-success" name="status_filter" value="ACTIVE" id="show_active">ACTIVE</button>\

    <button type="button" class="btn btn-outline btn-sm btn-info" name="status_filter" value="PENDING" id="show_pending">PENDING</button>\

    <button type="button" class="btn btn-outline btn-sm btn-warning" name="status_filter" value="ERROR" id="show_error">ERROR</button>\

    <button type="button" class="btn btn-outline btn-sm btn-default" name="status_filter" value="DEACTIVATED" id="show_deactivated">DEACTIVATED</button>\

    </div>';

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )

{

    // DataTables 1.10 compatibility - if 1.10 then versionCheck exists.

    // 1.10s API has ajax reloading built in, so we use those abilities

    // directly.

    if ( $.fn.dataTable.versionCheck ) {

        var api = new $.fn.dataTable.Api( oSettings );

        if ( sNewSource ) {

            api.ajax.url( sNewSource ).load( fnCallback, !bStandingRedraw );

        }

        else {

            api.ajax.reload( fnCallback, !bStandingRedraw );

        }

        return;

    }

    if ( sNewSource !== undefined && sNewSource !== null ) {

        oSettings.sAjaxSource = sNewSource;

    }

    // Server-side processing should just call fnDraw

    if ( oSettings.oFeatures.bServerSide ) {

        this.fnDraw();

        return;

    }

    this.oApi._fnProcessingDisplay( oSettings, true );

    var that = this;

    var iStart = oSettings._iDisplayStart;

    var aData = [];

    this.oApi._fnServerParams( oSettings, aData );

    oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {

        /* Clear the old information from the table */

        that.oApi._fnClearTable( oSettings );

        /* Got the data - add it to the table */

        var aData =  (oSettings.sAjaxDataProp !== "") ?

            that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

        for ( var i=0 ; i<aData.length ; i++ )

        {

            that.oApi._fnAddData( oSettings, aData[i] );

        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

        that.fnDraw();

        if ( bStandingRedraw === true )

        {

            oSettings._iDisplayStart = iStart;

            that.oApi._fnCalculateEnd( oSettings );

            that.fnDraw( false );

        }

        that.oApi._fnProcessingDisplay( oSettings, false );

        /* Callback user function - for event handlers etc */

        if ( typeof fnCallback == 'function' && fnCallback !== null )

        {

            fnCallback( oSettings );

        }

    }, oSettings );

};

var oTable;

var start;

var end;

var oldhtml;

var last_element = false;

var refreshUrl = "{% url group-routes-ajax %}";

$(document).ready( function(){

    oTable = $('#routes_table').dataTable( {

        "bPaginate": true,

        "bFilter": true,

        "bAutoWidth": true,

        "aLengthMenu" : [

            [5, 15, 20, -1],

            [5, 15, 20, "All"]

        ],

        "sDom": "<'row'<'col-xs-4'l><'col-xs-4'<'#filterplaceholder'>><'col-xs-4'f>><'row'<'col-xs-6'i><'col-xs-6'p>>tr<'row'<'col-xs-6'i><'col-xs-6'p>>",

        "iDisplayLength": 20,

        "bProcessing": true,

        "sAjaxSource": refreshUrl,

        "bDeferRender": true,

         "fnInitComplete": function(oSettings, json) {

                 oTable.fnSetColumnVis( 0,false );

                 update_size();

                  $('body').on('click', '.revertbutton', function () {

                    var my = $(this);

                    my.parent().html(oldhtml);

                    last_element = false;

                    return false;

            });

            $('body').on('click', ".del_buttonpre", function(){

                    var my = $(this);

                    if (last_element != false){

                            last_element.html(oldhtml);

                    }

                    oldhtml = my.parent().html();

                    last_element = my.parent();

                    var routename = $(this).data("routename");

                                var btn = '<a href="#" data-toggle="tooltip" title="This will deactivate your rule"  data-routename="'+routename+'" class="del_button btn btn-sm btn-warning"> {% trans "Deactivate" %}</a>'

                                var back = '<a href="#" class="revertbutton btn btn-sm btn-info"><i class="fa fa-undo"></i></a>';

                    my.parent().html(back+" "+btn);

                    return false;

            });

            $('body').on('click', ".del_button", function(){

                    last_element = false;

                    var my = $(this);

                    my.html('Deactivating...')

                                var routename = $(this).data("routename");

                                var delurl = "{% url delete-route 'route_placeholder'%}".replace('route_placeholder', routename.toString());

                                $.ajax({

                                type: 'POST',

                                url: delurl,

                                cache: false,

                                success: function(data) {

                             oTable.fnReloadAjax(refreshUrl);

                                }

                            });

                                return false;

                        });

          },

        "aoColumns":[

                     {"mData":"id", "bSearchable": false,"bSortable": false, "bvisible":false},

                     {"mData":"name", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                        if (full.comments !== null) {

                            if (!full.comments.trim()) {

                               return '<small>'+data+'</small>';

                            }

                            return '<a rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" title='+full.comments+'><small>'+data+'</small>'

                        } else {

                            return 'No comments'

                        }

                     }

                     },

                     {"mData":"match", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                             return '<small>'+data+'</small>';

                     }

                     },

                     {"mData":"then", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                             return '<small>'+data+'</small>';

                     }

                     },

                     {"mData":"status", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                             var status = data;

                             if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" || status == "OUTOFSYNC"){

                                     if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" ){

                                             return '<span class="label label-default">DEACTIVATED</span>';

                                     }

                                     else

                                     {

                                             if (status == "OUTOFSYNC"){

                                                     return '<span class="label label-danger">ERROR</span>';

                                             }

                                             else{

                                                     return status;

                                             }

                                     }

                             }

                             else{

                                     if (status == 'ACTIVE'){

                                             return '<span class="label label-success">'+status+'</span>';

                                     }

                                     else{

                                             if (status == 'PENDING'){

                                                     return '<span class="label label-info">'+status+'</span>';

                                             }

                                             else{

                                                     return '<span class="label label-danger">'+status+'</span>';

                                             }

                                     }

                             }

                     }

                     },

                     {"mData":"applier", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                             return '<small>'+data+' ('+full.peer+')</small>';

                     }

                     },

                     {"mData":"expires", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                             return '<small>'+data+'</small>';

                     }},

                     {"mData":"response", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                             status = full.status;

                             toolt = '<a rel="tooltip" href="#" data-toggle="tooltip" data-placement="top"';

                                        if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" || status == "OUTOFSYNC"){

                                             if (status == "INACTIVE" ){

                                                     title = "{% trans 'Deactivated by user' %}";

                                             }

                                             if (status == "ADMININACTIVE" ){

                                                     title = "{% trans 'Deactivated by administrator' %}";

                                             }

                                             if (status == "EXPIRED" ){

                                                     title = "{% trans 'Deactivated due to expiration' %}";

                                             }

                                             if (status == "OUTOFSYNC" ){

                                                     title = "{% trans 'Syncronization error. Configuration in device differs from rule' %}";

                                             }

                                             return toolt+" title=\""+title+"\">"+"<small>{% trans 'Rule expired' %}</small>"+"</a>";

                                     }

                                     if (status == "PENDING"){

                                                     return '<img src="{{STATIC_URL}}dots.gif">';

                                             }

                                     return "<small>"+full.response+"</small>";

                     }

                     },

                     {"mData":"comments", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                      "mRender": function (data, type, full) {

                     status = full.status;

                     btn = '';

                     editurl = "{% url edit-route 'routename'  %}".replace('routename', full.name.toString());

                     if (status == "ACTIVE" ){

                             btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline">{% trans "Edit" %}</a>';

                                        btn = btn + ' <button class="del_buttonpre btn-warning btn btn-sm btn-outline" id="'+full.name+'" data-routename="'+full.name+'">{% trans "Deactivate" %}</button>';

                     }

                     if (status == 'EXPIRED' || status == 'ADMININACTIVE' || status == 'INACTIVE' ){

                             btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Reactivate" %}</a>';

                     }

                     if (status == "OUTOFSYNC" ){

                             btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Resync" %}</a>';

                     }

                     if (status == "ERROR" ){

                             btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Fix it!" %}</a>';

                     }

                     return btn;

                     },

                    }

         ]

} );

$('#filterplaceholder').html(filterbtns);

    $('body').on('click', 'button[name="status_filter"]', function(){

            var reg_exp = '';

        var checkboxs = document.getElementsByName('status_filter');

        $(this).button('toggle');

        for (var i = 0, inp; inp = checkboxs[i]; i++) {

            if (inp.type.toLowerCase() == 'button' && $(inp).hasClass('active')) {

                reg_exp = reg_exp + inp.value + '|';

            }

        }

        //passing an empty string will result in no filter

        //thus, it must be set to something that will not exist in the column

        if (reg_exp == '') {

            reg_exp = '|'

        }

        oTable.fnFilter(reg_exp.slice(0, -1), 4, true, false, false);

        console.log(reg_exp.slice(0, -1))

        return false;

    });

  $(window).resize(function() {

    clearTimeout(window.refresh_size);

    window.refresh_size = setTimeout(function() { update_size(); }, 250);

  });

var update_size = function() {

    $(oTable).css({ width: $(oTable).parent().width() });

    pw=$(oTable).parent().width();

    tw=$(oTable).width();

    if (tw>pw){

                oTable.fnSetColumnVis( 7,false );

                oTable.fnSetColumnVis( 5,false );

    }else{

            oTable.fnSetColumnVis( 7,true );

            oTable.fnSetColumnVis( 5,true );

    }

    oTable.fnAdjustColumnSizing();

  }

$("body").tooltip({ selector: '[data-toggle="tooltip"]' });

});

</script>

<style type="text/css">

        .dl-horizontal dt {

    width: 70px;

}

.dl-horizontal dd {

    margin-left: 90px;

}

th{

        font-size: 12px;

}

</style>

{% endblock %}