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.trim()) {
 239                                                    return '<small>'+data+'</small>';
 240                                                 }
 241                                                 return '<a rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" title='+full.comments+'><small>'+data+'</small>'
 242                      }
 243                      },
 244                      {"mData":"match", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 245                      "mRender": function (data, type, full) {
 246                         return '<small>'+data+'</small>';
 247                      }
 248                      },
 249                      {"mData":"then", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 250                      "mRender": function (data, type, full) {
 251                         return '<small>'+data+'</small>';
 252                      }
 253                      },
 254                      {"mData":"status", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 255                      "mRender": function (data, type, full) {
 256                         var status = data;
 257                         if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" || status == "OUTOFSYNC"){
 258                                 if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" ){
 259                                         return '<span class="label label-default">DEACTIVATED</span>';
 260                                 }
 261                                 else
 262                                 {
 263                                         if (status == "OUTOFSYNC"){
 264                                                 return '<span class="label label-danger">ERROR</span>';
 265                                         }
 266                                         else{
 267                                                 return status;
 268                                         }
 269                                 }
 270                         }
 271                         else{
 272                                 if (status == 'ACTIVE'){
 273                                         return '<span class="label label-success">'+status+'</span>';
 274                                 }
 275                                 else{
 276                                         if (status == 'PENDING'){
 277                                                 return '<span class="label label-info">'+status+'</span>';
 278                                         }
 279                                         else{
 280                                                 return '<span class="label label-danger">'+status+'</span>';
 281                                         }
 282                                 }
 283                         }
 284                      }
 285                      },
 286                      {"mData":"applier", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 287                      "mRender": function (data, type, full) {
 288                         return '<small>'+data+'</small>';
 289                      }
 290                      },
 291                      {"mData":"expires", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 292                      "mRender": function (data, type, full) {
 293                         return '<small>'+data+'</small>';
 294                      }},
 295                      {"mData":"response", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 296                      "mRender": function (data, type, full) {
 297                         status = full.status;
 298                         toolt = '<a rel="tooltip" href="#" data-toggle="tooltip" data-placement="top"';
 299                                 if (status == "EXPIRED" ||status == "ADMININACTIVE" || status == "INACTIVE" || status == "OUTOFSYNC"){
 300                                         if (status == "INACTIVE" ){
 301                                                 title = "{% trans 'Deactivated by user' %}";
 302                                         }
 303                                         if (status == "ADMININACTIVE" ){
 304                                                 title = "{% trans 'Deactivated by administrator' %}";
 305                                         }
 306                                         if (status == "EXPIRED" ){
 307                                                 title = "{% trans 'Deactivated due to expiration' %}";
 308                                         }
 309                                         if (status == "OUTOFSYNC" ){
 310                                                 title = "{% trans 'Syncronization error. Configuration in device differs from rule' %}";
 311                                         }
 312                                         return toolt+" title=\""+title+"\">"+"<small>{% trans 'Rule expired' %}</small>"+"</a>";
 313                                 }
 314                                 if (status == "PENDING"){
 315                                                 return '<img src="{{STATIC_URL}}dots.gif">';
 316                                         }
 317                                 return "<small>"+full.response+"</small>";
 318
 319                      }
 320                      },
 321                      {"mData":"comments", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,
 322                       "mRender": function (data, type, full) {
 323                      status = full.status;
 324                      btn = '';
 325                      editurl = "{% url edit-route 'routename'  %}".replace('routename', full.name.toString());
 326                      if (status == "ACTIVE" ){
 327                         btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline">{% trans "Edit" %}</a>';
 328                                         btn = btn + ' <button class="del_buttonpre btn-warning btn btn-sm btn-outline" id="'+full.name+'" data-routename="'+full.name+'">{% trans "Deactivate" %}</button>';
 329                      }
 330                      if (status == 'EXPIRED' || status == 'ADMININACTIVE' || status == 'INACTIVE' ){
 331                         btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Reactivate" %}</a>';
 332                      }
 333                      if (status == "OUTOFSYNC" ){
 334                         btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Resync" %}</a>';
 335                      }
 336                      if (status == "ERROR" ){
 337                         btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Fix it!" %}</a>';
 338                      }
 339                      return btn;
 340                      },
 341                     }
 342
 343          ]
 344 } );
 345 $('#filterplaceholder').html(filterbtns);
 346
 347
 348
 349     $('body').on('click', 'button[name="status_filter"]', function(){
 350         var reg_exp = '';
 351         var checkboxs = document.getElementsByName('status_filter');
 352         $(this).button('toggle');
 353         for (var i = 0, inp; inp = checkboxs[i]; i++) {
 354             if (inp.type.toLowerCase() == 'button' && $(inp).hasClass('active')) {
 355                 reg_exp = reg_exp + inp.value + '|';
 356             }
 357         }
 358         //passing an empty string will result in no filter
 359         //thus, it must be set to something that will not exist in the column
 360         if (reg_exp == '') {
 361             reg_exp = '|'
 362         }
 363         oTable.fnFilter(reg_exp.slice(0, -1), 4, true, false, false);
 364         console.log(reg_exp.slice(0, -1))
 365         return false;
 366     });
 367
 368   $(window).resize(function() {
 369     clearTimeout(window.refresh_size);
 370     window.refresh_size = setTimeout(function() { update_size(); }, 250);
 371   });
 372
 373 var update_size = function() {
 374     $(oTable).css({ width: $(oTable).parent().width() });
 375     pw=$(oTable).parent().width();
 376     tw=$(oTable).width();
 377     if (tw>pw){
 378                 oTable.fnSetColumnVis( 7,false );
 379                 oTable.fnSetColumnVis( 5,false );
 380     }else{
 381         oTable.fnSetColumnVis( 7,true );
 382         oTable.fnSetColumnVis( 5,true );
 383     }
 384     oTable.fnAdjustColumnSizing();
 385   }
 386
 387 $("body").tooltip({ selector: '[data-toggle="tooltip"]' });
 388 });
 389 </script>
 390 <style type="text/css">
 391
 392
 393         .dl-horizontal dt {
 394     width: 70px;
 395 }
 396 .dl-horizontal dd {
 397     margin-left: 90px;
 398 }
 399
 400 th{
 401         font-size: 12px;
 402 }
 403 </style>
 404
 405 {% endblock %}
 406