code.grnet.gr Git - flowspy/blob - templates/user_routes.html

   1 {% extends "b3theme/base.html" %}
   2 {% load i18n %}
   3 {% block extrahead %}
   4 <link href="{{STATIC_URL}}b3theme/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
   5 {% endblock %}
   6 {% block pagejsbodttom %}
   7
   8 <script type="text/javascript" src="{{STATIC_URL}}js/jquery.dataTables.js"></script>
   9 <script type="text/javascript" src="{{STATIC_URL}}js/datatables_bootstrap.js"></script>
  10
  11
  12 {% endblock %}
  13 {% block title %}{% trans "My rules" %}{% endblock %}
  14 {% block contentplaceholder %}
  15 {% csrf_token %}
  16     <div class="row">
  17         <div class="col-md-12">
  18             <h1 class="page-header">{% trans "My rules" %} </h1>
  19         </div>
  20         <!-- /.col-lg-12 -->
  21     </div>
  22
  23
  24 <div class="row">
  25         <div class="col-md-10">
  26                 <div class="panel panel-primary">
  27                 <div class="panel-heading"> <i class="fa fa-shield"></i> Firewall Rules
  28                 </div>
  29
  30 <div class="panel-body">
  31
  32
  33                     <div class="table-responsive">
  34                         <table class="table table-striped table-bordered" id="routes_table">
  35 <thead>
  36 <tr>
  37         <th>Id</th>
  38         <th>{% trans "Name" %}</th>
  39         <th>{% trans "Match" %}</th>
  40         <th style="text-align: center;">{% trans "Then" %}</th>
  41         <th style="text-align: center; ">{% trans "Status" %}</th>
  42         <th style="text-align: center;">{% trans "Applier" %}</th>
  43         <th style="text-align: center;">{% trans "Expires" %}</th>
  44         <th style="text-align: center;">{% trans "Response" %}</th>
  45         <th style="text-align: center;">{% trans "Actions" %}</th>
  46 </tr>
  47 </thead>
  48
  49 <tbody>
  50 </tbody>
  51 </table>
  52 </div></div>
  53 </div></div>
  54
  55
  56                    <div class="col-md-2">
  57                         <div class="panel panel-default">
  58                         <div class="panel-heading">
  59                             <i class="fa fa-tags"></i> {% trans "Shortcuts" %}
  60                         </div>
  61                         <!-- /.panel-heading -->
  62 <div class="panel-body">
  63                                 <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>
  64                                 <a class="btn btn-sm btn-outline btn-info"  href="{% url user-profile %}"><i class="fa fa-user"></i> {% trans "My Profile" %}</a>
  65                         </div>
  66                         <!-- /.panel-body -->
  67                     </div>
  68                     <!-- /.panel -->
  69
  70                         <div class="chat-panel panel panel-info">
  71                         <div class="panel-heading">
  72                             <i class="fa fa-comment fa-fw"></i> Live status
  73                         </div>
  74                         <!-- /.panel-heading -->
  75 <div class="panel-body">
  76         {% include "polldash.html" %}
  77                         </div>
  78                         <!-- /.panel-body -->
  79                     </div>
  80                     <!-- /.panel -->
  81                         </div>
  82 </div>
  83
  84
  85 {% endblock %}
  86
  87 {% block pagejsbottom %}
  88     <script src="{{STATIC_URL}}js/dataTableslatest/jquery.dataTables.min.js"></script>
  89     <script src="{{STATIC_URL}}js/dataTableslatest/dataTables.bootstrap.js"></script>
  90     {% if user.is_authenticated %}
  91 <script type="text/javascript" src="{% url load-js 'poller' %}"></script>
  92 {% endif %}
  93
  94 <script type="text/javascript">
  95 var filterbtns = '<div class="btn-group col-centered">\
  96     <button type="button" class="btn btn-outline btn-sm btn-success" name="status_filter" value="ACTIVE" id="show_active">ACTIVE</button>\
  97     <button type="button" class="btn btn-outline btn-sm btn-info" name="status_filter" value="PENDING" id="show_pending">PENDING</button>\
  98     <button type="button" class="btn btn-outline btn-sm btn-warning" name="status_filter" value="ERROR" id="show_error">ERROR</button>\
  99     <button type="button" class="btn btn-outline btn-sm btn-default" name="status_filter" value="DEACTIVATED" id="show_deactivated">DEACTIVATED</button>\
 100     </div>';
 101
 102
 103 $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
 104 {
 105     // DataTables 1.10 compatibility - if 1.10 then versionCheck exists.
 106     // 1.10s API has ajax reloading built in, so we use those abilities
 107     // directly.
 108     if ( $.fn.dataTable.versionCheck ) {
 109         var api = new $.fn.dataTable.Api( oSettings );
 110
 111         if ( sNewSource ) {
 112             api.ajax.url( sNewSource ).load( fnCallback, !bStandingRedraw );
 113         }
 114         else {
 115             api.ajax.reload( fnCallback, !bStandingRedraw );
 116         }
 117         return;
 118     }
 119
 120     if ( sNewSource !== undefined && sNewSource !== null ) {
 121         oSettings.sAjaxSource = sNewSource;
 122     }
 123
 124     // Server-side processing should just call fnDraw
 125     if ( oSettings.oFeatures.bServerSide ) {
 126         this.fnDraw();
 127         return;
 128     }
 129
 130     this.oApi._fnProcessingDisplay( oSettings, true );
 131     var that = this;
 132     var iStart = oSettings._iDisplayStart;
 133     var aData = [];
 134
 135     this.oApi._fnServerParams( oSettings, aData );
 136
 137     oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
 138         /* Clear the old information from the table */
 139         that.oApi._fnClearTable( oSettings );
 140
 141         /* Got the data - add it to the table */
 142         var aData =  (oSettings.sAjaxDataProp !== "") ?
 143             that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;
 144
 145         for ( var i=0 ; i<aData.length ; i++ )
 146         {
 147             that.oApi._fnAddData( oSettings, aData[i] );
 148         }
 149
 150         oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
 151
 152         that.fnDraw();
 153
 154         if ( bStandingRedraw === true )
 155         {
 156             oSettings._iDisplayStart = iStart;
 157             that.oApi._fnCalculateEnd( oSettings );
 158             that.fnDraw( false );
 159         }
 160
 161         that.oApi._fnProcessingDisplay( oSettings, false );
 162
 163         /* Callback user function - for event handlers etc */
 164         if ( typeof fnCallback == 'function' && fnCallback !== null )
 165         {
 166             fnCallback( oSettings );
 167         }
 168     }, oSettings );
 169 };
 170 var oTable;
 171 var start;
 172 var end;
 173 var oldhtml;
 174 var last_element = false;
 175 var refreshUrl = "{% url group-routes-ajax %}";
 176 $(document).ready( function(){
 177
 178
 179
 180     oTable = $('#routes_table').dataTable( {
 181         "bPaginate": true,
 182         "bFilter": true,
 183         "bAutoWidth": true,
 184         "aLengthMenu" : [
 185             [5, 15, 20, -1],
 186             [5, 15, 20, "All"]
 187         ],
 188         "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>>",
 189         "iDisplayLength": 20,
 190         "bProcessing": true,
 191         "sAjaxSource": refreshUrl,
 192         "bDeferRender": true,
 193          "fnInitComplete": function(oSettings, json) {
 194                 oTable.fnSetColumnVis( 0,false );
 195                 update_size();
 196
 197                 $('body').on('click', '.revertbutton', function () {
 198                 var my = $(this);
 199                 my.parent().html(oldhtml);
 200                 last_element = false;
 201                 return false;
 202             });
 203             $('body').on('click', ".del_buttonpre", function(){
 204                 var my = $(this);
 205                 if (last_element != false){
 206                         last_element.html(oldhtml);
 207                 }
 208                 oldhtml = my.parent().html();
 209                 last_element = my.parent();
 210                 var routename = $(this).data("routename");
 211                                 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>'
 212                                 var back = '<a href="#" class="revertbutton btn btn-sm btn-info"><i class="fa fa-undo"></i></a>';
 213                 my.parent().html(back+" "+btn);
 214                 return false;
 215             });
 216
 217             $('body').on('click', ".del_button", function(){
 218                 last_element = false;
 219                 var my = $(this);
 220                 my.html('Deactivating...')
 221                                 var routename = $(this).data("routename");
 222                                 var delurl = "{% url delete-route 'route_placeholder'%}".replace('route_placeholder', routename.toString());
 223                                 $.ajax({
 224                                 type: 'POST',
 225                                 url: delurl,
 226                                 cache: false,
 227                                 success: function(data) {
 228                          oTable.fnReloadAjax(refreshUrl);
 229                                 }
 230                         });
 231                                 return false;
 232                         });
 233           },
 234         "aoColumns":[
 235                      {"mData":"id", "bSearchable": false,"bSortable": false, "bvisible":false},
 236                      {"mData":"name", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 237                      "mRender": function (data, type, full) {
 238                         if (full.comments !== null) {
 239                             if (!full.comments.trim()) {
 240                                return '<small>'+data+'</small>';
 241                             }
 242                             return '<a rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" title='+full.comments+'><small>'+data+'</small>'
 243                         } else {
 244                             return 'No comments'
 245                         }
 246                      }
 247                      },
 248                      {"mData":"match", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 249                      "mRender": function (data, type, full) {
 250                         return '<small>'+data+'</small>';
 251                      }
 252                      },
 253                      {"mData":"then", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 254                      "mRender": function (data, type, full) {
 255                         return '<small>'+data+'</small>';
 256                      }
 257                      },
 258                      {"mData":"status", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 259                      "mRender": function (data, type, full) {
 260                         var status = data;
 261                         if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" || status == "OUTOFSYNC"){
 262                                 if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" ){
 263                                         return '<span class="label label-default">DEACTIVATED</span>';
 264                                 }
 265                                 else
 266                                 {
 267                                         if (status == "OUTOFSYNC"){
 268                                                 return '<span class="label label-danger">ERROR</span>';
 269                                         }
 270                                         else{
 271                                                 return status;
 272                                         }
 273                                 }
 274                         }
 275                         else{
 276                                 if (status == 'ACTIVE'){
 277                                         return '<span class="label label-success">'+status+'</span>';
 278                                 }
 279                                 else{
 280                                         if (status == 'PENDING'){
 281                                                 return '<span class="label label-info">'+status+'</span>';
 282                                         }
 283                                         else{
 284                                                 return '<span class="label label-danger">'+status+'</span>';
 285                                         }
 286                                 }
 287                         }
 288                      }
 289                      },
 290                      {"mData":"applier", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 291                      "mRender": function (data, type, full) {
 292                         return '<small>'+data+' ('+full.peer+')</small>';
 293                      }
 294                      },
 295                      {"mData":"expires", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 296                      "mRender": function (data, type, full) {
 297                         return '<small>'+data+'</small>';
 298                      }},
 299                      {"mData":"response", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 300                      "mRender": function (data, type, full) {
 301                         status = full.status;
 302                         toolt = '<a rel="tooltip" href="#" data-toggle="tooltip" data-placement="top"';
 303                                 if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" || status == "OUTOFSYNC"){
 304                                         if (status == "INACTIVE" ){
 305                                                 title = "{% trans 'Deactivated by user' %}";
 306                                         }
 307                                         if (status == "ADMININACTIVE" ){
 308                                                 title = "{% trans 'Deactivated by administrator' %}";
 309                                         }
 310                                         if (status == "EXPIRED" ){
 311                                                 title = "{% trans 'Deactivated due to expiration' %}";
 312                                         }
 313                                         if (status == "OUTOFSYNC" ){
 314                                                 title = "{% trans 'Syncronization error. Configuration in device differs from rule' %}";
 315                                         }
 316                                         return toolt+" title=\""+title+"\">"+"<small>{% trans 'Rule expired' %}</small>"+"</a>";
 317                                 }
 318                                 if (status == "PENDING"){
 319                                                 return '<img src="{{STATIC_URL}}dots.gif">';
 320                                         }
 321                                 return "<small>"+full.response+"</small>";
 322
 323                      }
 324                      },
 325                      {"mData":"comments", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 326                       "mRender": function (data, type, full) {
 327                      status = full.status;
 328                      btn = '';
 329                      editurl = "{% url edit-route 'routename'  %}".replace('routename', full.name.toString());
 330                      if (status == "ACTIVE" ){
 331                         btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline">{% trans "Edit" %}</a>';
 332                                         btn = btn + ' <button class="del_buttonpre btn-warning btn btn-sm btn-outline" id="'+full.name+'" data-routename="'+full.name+'">{% trans "Deactivate" %}</button>';
 333                      }
 334                      if (status == 'EXPIRED' || status == 'ADMININACTIVE' || status == 'INACTIVE' ){
 335                         btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Reactivate" %}</a>';
 336                      }
 337                      if (status == "OUTOFSYNC" ){
 338                         btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Resync" %}</a>';
 339                      }
 340                      if (status == "ERROR" ){
 341                         btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Fix it!" %}</a>';
 342                      }
 343                      return btn;
 344                      },
 345                     }
 346
 347          ]
 348 } );
 349 $('#filterplaceholder').html(filterbtns);
 350
 351
 352
 353     $('body').on('click', 'button[name="status_filter"]', function(){
 354         var reg_exp = '';
 355         var checkboxs = document.getElementsByName('status_filter');
 356         $(this).button('toggle');
 357         for (var i = 0, inp; inp = checkboxs[i]; i++) {
 358             if (inp.type.toLowerCase() == 'button' && $(inp).hasClass('active')) {
 359                 reg_exp = reg_exp + inp.value + '|';
 360             }
 361         }
 362         //passing an empty string will result in no filter
 363         //thus, it must be set to something that will not exist in the column
 364         if (reg_exp == '') {
 365             reg_exp = '|'
 366         }
 367         oTable.fnFilter(reg_exp.slice(0, -1), 4, true, false, false);
 368         console.log(reg_exp.slice(0, -1))
 369         return false;
 370     });
 371
 372   $(window).resize(function() {
 373     clearTimeout(window.refresh_size);
 374     window.refresh_size = setTimeout(function() { update_size(); }, 250);
 375   });
 376
 377 var update_size = function() {
 378     $(oTable).css({ width: $(oTable).parent().width() });
 379     pw=$(oTable).parent().width();
 380     tw=$(oTable).width();
 381     if (tw>pw){
 382                 oTable.fnSetColumnVis( 7,false );
 383                 oTable.fnSetColumnVis( 5,false );
 384     }else{
 385         oTable.fnSetColumnVis( 7,true );
 386         oTable.fnSetColumnVis( 5,true );
 387     }
 388     oTable.fnAdjustColumnSizing();
 389   }
 390
 391 $("body").tooltip({ selector: '[data-toggle="tooltip"]' });
 392 });
 393 </script>
 394 <style type="text/css">
 395
 396
 397         .dl-horizontal dt {
 398     width: 70px;
 399 }
 400 .dl-horizontal dd {
 401     margin-left: 90px;
 402 }
 403
 404 th{
 405         font-size: 12px;
 406 }
 407 </style>
 408
 409 {% endblock %}
 410