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

   1 {% extends "base.html" %}
   2 {% load i18n %}
   3
   4 {% block title %}
   5         {% if edit %}
   6                 {% trans "Edit Rule" %} {{form.data.name}}
   7         {% else %}
   8                 {% trans "Create new Rule" %}
   9         {% endif %}
  10 {% endblock %}
  11
  12 {% block breadcrumbs %}::
  13         {% if edit %}
  14                 {% trans "Edit rule" %} {{form.data.name}}
  15         {% else %}
  16         {% trans "Create rule" %}
  17         {% endif %}
  18                 {% endblock %}
  19 {% block extrahead %}
  20 <script>
  21         $(document).ready( function(){
  22
  23                 $("#id_sourceport").css('width', '100px').attr('size', '5');
  24                 $("#id_port").css('width', '100px').attr('size', '5');
  25                 $("#id_destinationport").css('width', '100px').attr('size', '5');
  26                 $('#id_then').attr("multiple", "");
  27                 $( "#id_expires" ).datepicker({ dateFormat: 'yy-mm-dd' , maxDate: '+10d', minDate: '+1d', changeMonth: false, changeYear: false }).datepicker( $.datepicker.regional[ "el" ] );
  28                 {% comment %}
  29                 $('#then_diag').dialog({
  30                         height: 220,
  31             width: 340,
  32                         modal: true,
  33                         autoOpen: false,
  34                         buttons: {
  35                 'Add': function() {
  36                         console.log($("#add_rl_form").serialize());
  37                         $.ajax({
  38                         url:"{% url add-rate-limit %}",
  39                         data:$("#add_rl_form").serialize(),
  40                         type: "POST",
  41                         cache: false,
  42                         success:function(data){
  43                                         try {
  44                                                 value = data.pk;
  45                                                 text = data.value;
  46                                                 $('#id_then').append($("<option></option>").attr("value",value).text(text));
  47                                                 $('#then_diag').dialog('close');
  48                                         }
  49                                         catch (exception) {
  50                                                 $('#then_diag').html(data);
  51                                         }
  52                                 }
  53                                 });
  54                 },
  55                 Cancel: function() {
  56                         $('#then_diag').dialog('close');
  57                 }
  58         }
  59                 });
  60                 {% endcomment %}
  61                 $('#port_diag').dialog({
  62                         height: 220,
  63             width: 340,
  64                         modal: true,
  65                         autoOpen: false,
  66                         buttons: {
  67                 'Add': function() {
  68                         $.ajax({
  69                         url:"{% url add-port %}",
  70                         data:$("#add_port_form").serialize(),
  71                         type: "POST",
  72                         cache: false,
  73                         success:function(data){
  74                                         try {
  75                                                 value = data.value;
  76                                                 text = data.text;
  77                                                 $('#id_port').append($("<option></option>").attr("value",value).text(text));
  78                                                 $('#id_destinationport').append($("<option></option>").attr("value",value).text(text));
  79                                                 $('#id_sourceport').append($("<option></option>").attr("value",value).text(text));
  80                                                 $('#port_diag').dialog('close');
  81                                         }
  82                                         catch (exception) {
  83                                                 $('#port_diag').html(data);
  84                                         }
  85                                 }
  86                                 });
  87                 },
  88                 Cancel: function() {
  89                         $('#port_diag').dialog('close');
  90                 }
  91         }
  92                 });
  93
  94                 {% comment %}
  95                 $("#new_then_actions").button({
  96             icons: {
  97                 primary: "ui-icon-plusthick"
  98             },
  99                         })
 100                         .click(function(){
 101                                 $.ajax({
 102                                         url: "{% url add-rate-limit %}",
 103                                         cache: false,
 104                                         success: function(data){
 105                                                 $("#then_diag").html(data);
 106                                         }
 107                                 });
 108                                 $('#then_diag').dialog('open');
 109                                 return false;
 110                         });
 111
 112                         {% endcomment %}
 113                         $(".new_port").button({
 114             icons: {
 115                 primary: "ui-icon-plusthick"
 116             },
 117                         })
 118                         .click(function(){
 119                                 $.ajax({
 120                                         url: "{% url add-port %}",
 121                                         cache: false,
 122                                         success: function(data){
 123                                                 $("#port_diag").html(data);
 124                                         }
 125                                 });
 126                                 $('#port_diag').dialog('open');
 127                                 return false;
 128                         });
 129
 130                 $("#portsacc").accordion({
 131                         collapsible: true,
 132                         active: false,
 133
 134                 });
 135
 136                 $("#applybutton").button();
 137
 138                 });
 139
 140 </script>
 141 {% endblock %}
 142 {% block content %}
 143 <style type="text/css">
 144 th {
 145         text-align: right;
 146         padding-right: 0.5em;
 147         vertical-align: top;
 148 }
 149
 150 .accord_wrapper{
 151         height: 452px !important;
 152 }
 153
 154 .help {
 155         font-style: italic;
 156
 157 }
 158 div.roundbox, #portsacc, #id_comments{
 159         -moz-border-radius: 5px; border-radius:5px; -webkit-border-radius: 5px;
 160         -moz-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA;
 161         background-color: #F4F4F4;
 162         border: 1px solid #FFFFFF;
 163         clear: both;
 164         float: left;
 165         margin: 5px 0 5px 100px;
 166         padding: 10px;
 167     width: 620px;
 168 }
 169 #rule_form_wrapper{
 170     margin: 15px auto;
 171     position: relative;
 172     text-align: center;
 173     width: 800px;
 174 }
 175
 176 #rule_form_container input:not([type="submit"]), #rule_form_container select {
 177     background: none repeat scroll 0 0 #FFFFFF;
 178     border: 1px solid #DDDDDD;
 179         -moz-border-radius: 3px; border-radius:3px; -webkit-border-radius: 3px;
 180     float: left;
 181     font-family: "Century Gothic",Helvetica,sans-serif;
 182     font-size: 13px;
 183     outline: medium none;
 184     padding: 5px;
 185     width: 180px;
 186 }
 187
 188 #id_comments {
 189     background: none repeat scroll 0 0 #FFFFFF;
 190     border: 1px solid #DDDDDD;
 191     border-radius: 3px 3px 3px 3px;
 192     float: left;
 193     font-family: "Century Gothic",Helvetica,sans-serif;
 194     font-size: 13px;
 195     outline: medium none;
 196     padding: 5px;
 197         width: 622px;
 198 }
 199
 200 #rule_form_container{
 201         -moz-border-radius: 10px 10px 10px 10px; border-radius:10px; -webkit-border-radius: 10px;
 202         -moz-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA;
 203         background-color: #F9F9F9;
 204         border: 2px solid #FFFFFF;
 205         overflow: hidden;
 206     width: 800px;
 207         }
 208 #rule_form_container div label {
 209     color: #666666;
 210     float: left;
 211     font-family: "Century Gothic",Helvetica,sans-serif;
 212     font-size: 15px;
 213     font-weight: bold;
 214     line-height: 26px;
 215     margin-right: 15px;
 216     text-align: right;
 217     text-shadow: 1px 1px 1px #FFFFFF;
 218     width: 180px;
 219 }
 220 #rule_form_container p.submit {
 221     background: none repeat scroll 0 0 transparent;
 222     border: medium none;
 223     box-shadow: none;
 224 }
 225
 226 </style>
 227 <div align="center" id="rule_form_wrapper">
 228     {% if edit %}<h3>{% trans "Edit rule" %}: {{form.data.name}}</h3>
 229     {% else %}<h3>{% trans "Apply for a new rule" %}</h3>
 230     {% endif %}
 231     <form method="POST">
 232         <div id="rule_form_container">
 233             {% csrf_token %}
 234             {% load unescape %}
 235             {% if form.non_field_errors %}
 236             <p class="error">
 237                 {{ form.non_field_errors|unescape}}
 238             </p>
 239             {% endif %}
 240             <fieldset {%  if edit %}  style="display:none;" {%  endif %}>
 241                 <legend>
 242                     {% trans "Rule Basic Info" %}
 243                 </legend>
 244                 <div class="roundbox">
 245                     {{ form.name.label_tag }}{{ form.name }}
 246                     <br>
 247                     {% if form.name.errors %}
 248                     <br>
 249                     <p class="error" style="clear:both;">
 250                         {{ form.name.errors|join:", " }}
 251                     </p>
 252                     {% endif %}
 253                     <br>
 254                     <p style="clear:both;">
 255                         A unique identifier will be added as a name_suffix
 256                     </p>
 257                 </div>
 258             </fieldset>
 259             <fieldset>
 260                 <legend>
 261                     {% trans "Rule Match Conditions" %}
 262                 </legend>
 263                 <input type="hidden" id="id_applier" name="applier" value="{{applier}}"/>
 264                 <div class="roundbox">
 265                     {{ form.source.label_tag }}{{ form.source }}<img src="/static/threat_source.png"/> {% if form.source.errors %}
 266                     <br>
 267                     <p class="error" style="clear:both;">
 268                         {{ form.source.errors|join:", " }}
 269                     </p>
 270                     {% endif %}
 271                     <br>
 272                     <p style="clear:both;">
 273                         {{ form.source.help_text }}
 274                     </p>
 275                 </div>
 276                 <div class="roundbox">
 277                     {{ form.destination.label_tag }}{{ form.destination }}<img src="/static/secure_destination.png"/> {% if form.destination.errors %}
 278                     <br>
 279                     <p class="error" style="clear:both;">
 280                         {{ form.destination.errors|join:", " }}
 281                     </p>
 282                     {% endif %}
 283                     <br>
 284                     <p style="clear:both;">
 285                         {{ form.destination.help_text }}
 286                     </p>
 287                 </div>
 288                                 <div class="roundbox">
 289                     {{ form.protocol.label_tag }}{{ form.protocol }}{% if form.protocol.errors %}
 290                     <br>
 291                     <p class="error" style="clear:both;">
 292                         {{ form.protocol.errors|join:", " }}
 293                     </p>
 294                     {% endif %}
 295                 </div>
 296                 <div id='portsacc'>
 297                 <h3 style="padding: 0.5em 0.5em 0.5em 0.7em;">Advanced Settings (Ports)</h3>
 298                 <div class='accord_wrapper' style="height: 452px !important;">
 299                     Select source/destination port(s), or select common port(s) for both source/destination
 300                     <table>
 301                     <tr>
 302                         <th>
 303                             {{ form.sourceport.label_tag }}
 304                         </th>
 305                         <td>
 306                             {{ form.sourceport }}&nbsp;&nbsp;
 307                             <button class="new_port">
 308                                 Port
 309                             </button>
 310                             <span class="error">{{ form.sourceport.errors|join:", " }}</span>
 311                         </td>
 312                     </tr>
 313                     <tr class="help">
 314                         <td>
 315                         </td>
 316                         <td>
 317                             {{ form.sourceport.help_text }}
 318                         </td>
 319                     </tr>
 320                     <tr>
 321                         <th>
 322                             {{ form.destinationport.label_tag }}
 323                         </th>
 324                         <td>
 325                             {{ form.destinationport }}&nbsp;&nbsp;
 326                             <button class="new_port">
 327                                 Port
 328                             </button>
 329                             <span class="error">{{ form.destinationport.errors|join:", " }}</span>
 330                         </td>
 331                     </tr>
 332                     <tr class="help">
 333                         <td>
 334                         </td>
 335                         <td>
 336                             {{ form.destinationport.help_text }}
 337                         </td>
 338                     </tr>
 339                     <tr>
 340                         <th>
 341                             {{ form.port.label_tag }}
 342                         </th>
 343                         <td>
 344                             {{ form.port }}&nbsp;&nbsp;
 345                             <button class="new_port">
 346                                 Port
 347                             </button>
 348                             <span class="error">{{ form.port.errors|join:", " }}</span>
 349                         </td>
 350                     </tr>
 351                     <tr class="help">
 352                         <td>
 353                         </td>
 354                         <td>
 355                             {{ form.port.help_text }}
 356                         </td>
 357                     </tr>
 358                 </div>
 359                 </table>
 360             </div>
 361             </fieldset>
 362             <fieldset>
 363                 <legend>
 364                     {% trans "Rule Actions" %}
 365                 </legend>
 366                 <div class="roundbox">
 367                     {{ form.then.label_tag }}{{ form.then }}{% comment %}&nbsp;&nbsp;
 368                     <button id="new_then_actions">
 369                         Rate-limit
 370                     </button>{% endcomment %}
 371                     {% if form.then.errors %}
 372                     <p class="error">
 373                         {{ form.then.errors|join:", " }}
 374                     </p>
 375                     {% endif %}
 376                 </div>
 377             </fieldset>
 378             <fieldset>
 379                 <legend>
 380                     {% trans "Expiration" %}
 381                 </legend>
 382                 <div class="roundbox">
 383                     {{ form.expires.label_tag }}{{ form.expires }}
 384                     {% if form.expires.errors %}
 385                     <br>
 386                     <p class="error">
 387                         {{ form.expires.errors|join:", " }}
 388                     </p>
 389                     {% endif %}
 390                 </div>
 391             </fieldset>
 392             <fieldset>
 393                 <legend>
 394                     {% trans "Use/Comments" %}
 395                 </legend>
 396                 {% blocktrans %}
 397                 <p class="roundbox">
 398                     Give a short description of the intended use of this rule, that justifies the parameter selection above. Feel free to include any additional comments.
 399                 </p>
 400                 {% endblocktrans %}
 401                 <p>
 402                     {{ form.comments }}
 403                     {% if form.errors %}
 404                     <br/>
 405                     <span class="error">{{ form.comments.errors|join:", " }}</span>{% endif %}
 406                 </p>
 407             </fieldset>
 408             <p>
 409                 <input type="submit" id="applybutton" value="{% trans "Apply" %}" />
 410             </p>
 411         </div>
 412     </form>
 413 </div>
 414 <div id="then_diag" title="Add new rate-limit value">
 415 </div>
 416 <div id="port_diag" title="Add new port">
 417 </div>
 418
 419 {% endblock %}