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

   1 {% extends "base.html" %}
   2 {% load i18n %}
   3 {% block extrahead %}
   4 {% if user.is_authenticated %}
   5 <script type="text/javascript" src="{% url load-js 'poller' %}"></script>
   6 {% endif %}
   7 <script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
   8 <script type="text/javascript">
   9         $(document).ready( function(){
  10                 $("#hid_mid").val('');
  11                 $('#dialog').dialog({
  12                         height: 220,
  13             width: 300,
  14                         modal: true,
  15                         autoOpen: false,
  16                         buttons: {
  17                 'Delete': function() {
  18                 route = $('#route_to_delete').text();
  19                 route_url_id = '#del_route_'+route;
  20                 url = $(route_url_id).attr('href');
  21                         $.ajax({
  22                         url: url ,
  23                         cache: false,
  24                         success: function(data) {
  25                                 $('#dialog').dialog('close');
  26                                 window.setTimeout('location.reload()', 1000);
  27                           }
  28                 });
  29                 },
  30                 Cancel: function() {
  31                         $('#dialog').dialog('close');
  32                 },
  33
  34
  35         },
  36         close: function() {
  37         update_val = $("#hid_mid").val();
  38                 if (update_val == 'UPDATED'){
  39                         $("#hid_mid").val('');
  40                         window.setTimeout('location.reload()', 500);
  41                 }
  42     }
  43                 });
  44                 $('#console').dialog({
  45                         height: 250,
  46             width: 800,
  47                         modal: true,
  48                         autoOpen: false,
  49                         close: function() {
  50                         update_val = $("#hid_mid").val();
  51                                 if (update_val == 'UPDATED'){
  52                                         $("#hid_mid").val('');
  53                                         window.setTimeout('location.reload()', 500);
  54                                 }
  55                     }
  56                 });
  57
  58                 $('#routes_table').dataTable( {
  59                         "bJQueryUI": true,
  60                         "aoColumns": [
  61                                 {"bVisible": false, "bSearchable": false,"bSortable": false },
  62                                 {"bSearchable": true,"bSortable": true},
  63                                 {"bSearchable": true,"bSortable": true},
  64                                 {"bSearchable": true,"bSortable": true},
  65                                 {"bSearchable": true,"bSortable": true},
  66                                 {"bSearchable": true,"bSortable": true},
  67                                 {"bSearchable": true,"bSortable": true},
  68                                 {"bSearchable": true,"bSortable": true},
  69                                 {"bVisible": true, "bSearchable": false,"bSortable": false}
  70                         ],
  71                          "aaSorting": [[0,'desc']],
  72                         "oLanguage": {
  73                                 "sLengthMenu": '{% trans "Display" %} <select><option value="25">25</option><option value="50">50</option><option value="-1">{% trans "All" %}</option></select> rules'
  74                         },
  75                         "iDisplayLength": 25,
  76         } );
  77         $( ".button_place #routebutton" ).button({
  78             icons: {
  79                 primary: "ui-icon-circle-plus"
  80             },
  81                         });
  82                 $( " .edit_button" ).button({
  83             icons: {
  84                 primary: "ui-icon-wrench"
  85             },
  86                         });
  87                 $( " .del_button" ).button({
  88             icons: {
  89                 primary: "ui-icon-circle-close"
  90             },
  91                         })
  92                         .click(function(){
  93                                 $('#dialog').dialog('open');
  94                                 return false;
  95                         });
  96                 $("#consolebutton").button({
  97             icons: {
  98                 primary: "ui-icon-image"
  99             },
 100                         })
 101                         .click(function(){
 102                                 $("#consolebutton").stop().stop();
 103                                 $("#consolebutton").css('color', '#555555');
 104                                 $('#console').dialog('open');
 105                                 return false;
 106                         });
 107
 108                 $(".expiresclass").tooltip();
 109
 110                 });
 111
 112 function delete_route(route){
 113         route_name = route;
 114         $('#route_to_delete').text(route_name);
 115         return false;
 116 }
 117
 118
 119
 120 </script>
 121 <style type="text/css">
 122         #console {
 123                 background: none repeat scroll 0 0 #36102a !important;
 124                 color: #edeae8 !important;
 125                 font-family: monospace !important;
 126         }
 127         .message {
 128                 font-family: monospace !important;
 129         }
 130         .tooltip {
 131         display:none;
 132         background:transparent url(/static/black_arrow.png);
 133         font-size:12px;
 134         height:70px;
 135         width:160px;
 136         padding:25px;
 137         color:#fff;
 138 }
 139
 140 </style>
 141 {% endblock %}
 142 {% block title %}{% trans "My rules" %}{% endblock %}
 143 {% block content %}
 144 <div style="float:left">
 145         <h3 style="margin-top: 0px;">{% trans "My rules" %}</h3>
 146 </div>
 147 <div class='button_place' style="float:right">
 148         <button id="consolebutton">Console</button> <a href="{% url add-route %}" id="routebutton">Add Rule</a>
 149 </div>
 150 <table class="display" width="100%" id="routes_table">
 151 <thead>
 152 <tr>
 153         <th>Id</th>
 154         <th>{% trans "Name" %}</th>
 155         <th>{% trans "Match" %}</th>
 156         <th style="text-align: center;">{% trans "Then" %}</th>
 157         <th style="text-align: center; ">{% trans "Status" %}</th>
 158         {% comment %}<th style="text-align: center;">{% trans "Details" %}</th>{% endcomment %}
 159         <th style="text-align: center;">{% trans "Applier" %}</th>
 160         <th style="text-align: center;">{% trans "Expires" %}</th>
 161         <th style="text-align: center;">{% trans "Response" %}</th>
 162         <th style="text-align: center; width:180px;">{% trans "Actions" %}</th>
 163 </tr>
 164 </thead>
 165
 166 <tbody>
 167 {% for route in routes %}
 168
 169 <tr {% ifequal route.status 'ACTIVE' %} class="GradeA" {% else %} class="GradeX" {% endifequal %}>
 170         <td>{{ route.pk }}</td>
 171         <td>{{ route.name }}</td>
 172         <td>{{ route.get_match|safe|escape }}</td>
 173         <td style="text-align: center;">{{route.get_then|safe|escape}}</td>
 174         <td style="text-align: center; ">
 175                 <span
 176                 {% if route.days_to_expire %}
 177                 class="expiresclass"
 178                 style="border-bottom:2px dashed red;"
 179         title="Expires {% ifequal route.days_to_expire '0' %}today{% else%}in {{route.days_to_expire}} day{{ route.days_to_expire|pluralize }}{% endifequal %}"
 180                 {% endif %}>{{route.status}}
 181                 </span>
 182         </td>
 183         {% comment %}<td style="text-align: center;">{{ route.response }}</td>{% endcomment %}
 184         <td style="text-align: center;">{{ route.applier }}</td>
 185         <td style="text-align: center;">{{ route.expires }}</td>
 186         <td style="text-align: center;">{{ route.response }}</td>
 187         <td style="text-align: center; width:180px;">
 188                 {% ifequal route.status 'ACTIVE' %}
 189                 <a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">Edit</a>
 190                 <button class="del_button" id="{{route.name}}" onclick="javascript:delete_route(this.id)">Del</button>
 191                 <a href="{% url delete-route route.name %}" style="display:none" id="del_route_{{route.name}}"></a>
 192                 {% else %}
 193                 {% ifequal route.status 'INACTIVE' %}
 194                 <a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">Reactivate</a>
 195                 {% else %}
 196                 {% ifequal route.status 'OUTOFSYNC' %}
 197                 <a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">ReSync</a>
 198                 {% else %}
 199                 -
 200                 {% endifequal %}
 201                 {% endifequal %}
 202                 {% endifequal %}
 203                 </td>
 204 </tr>
 205
 206 {% endfor %}
 207 </tbody>
 208 </table>
 209
 210 <div id="dialog" title="Delete Route">
 211                 <p>You are about to delete rule <strong><span id="route_to_delete"></span></strong></p>
 212                 <p>Deleting the rule will automatically remove the configuration from the network and mark this route as inactive.</p>
 213                 <p>Are you sure you want to proceed?</p>
 214 </div>
 215 <div id="console" title="Console">
 216                                         {% include "poll.html" %}
 217 </div>
 218 {% endblock %}