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 id='portsacc'>
 289                 <h3 style="padding: 0.5em 0.5em 0.5em 0.7em;">Advanced Settings (Ports)</h3>
 290                 <div class='accord_wrapper' style="height: 452px !important;">
 291                     Select source/destination port(s), or select common port(s) for both source/destination
 292                     <table>
 293                     <tr>
 294                         <th>
 295                             {{ form.sourceport.label_tag }}
 296                         </th>
 297                         <td>
 298                             {{ form.sourceport }}&nbsp;&nbsp;
 299                             <button class="new_port">
 300                                 Port
 301                             </button>
 302                             <span class="error">{{ form.sourceport.errors|join:", " }}</span>
 303                         </td>
 304                     </tr>
 305                     <tr class="help">
 306                         <td>
 307                         </td>
 308                         <td>
 309                             {{ form.sourceport.help_text }}
 310                         </td>
 311                     </tr>
 312                     <tr>
 313                         <th>
 314                             {{ form.destinationport.label_tag }}
 315                         </th>
 316                         <td>
 317                             {{ form.destinationport }}&nbsp;&nbsp;
 318                             <button class="new_port">
 319                                 Port
 320                             </button>
 321                             <span class="error">{{ form.destinationport.errors|join:", " }}</span>
 322                         </td>
 323                     </tr>
 324                     <tr class="help">
 325                         <td>
 326                         </td>
 327                         <td>
 328                             {{ form.destinationport.help_text }}
 329                         </td>
 330                     </tr>
 331                     <tr>
 332                         <th>
 333                             {{ form.port.label_tag }}
 334                         </th>
 335                         <td>
 336                             {{ form.port }}&nbsp;&nbsp;
 337                             <button class="new_port">
 338                                 Port
 339                             </button>
 340                             <span class="error">{{ form.port.errors|join:", " }}</span>
 341                         </td>
 342                     </tr>
 343                     <tr class="help">
 344                         <td>
 345                         </td>
 346                         <td>
 347                             {{ form.port.help_text }}
 348                         </td>
 349                     </tr>
 350                 </div>
 351                 </table>
 352             </div>
 353             </fieldset>
 354             <fieldset>
 355                 <legend>
 356                     {% trans "Rule Actions" %}
 357                 </legend>
 358                 <div class="roundbox">
 359                     {{ form.then.label_tag }}{{ form.then }}{% comment %}&nbsp;&nbsp;
 360                     <button id="new_then_actions">
 361                         Rate-limit
 362                     </button>{% endcomment %}
 363                     {% if form.then.errors %}
 364                     <p class="error">
 365                         {{ form.then.errors|join:", " }}
 366                     </p>
 367                     {% endif %}
 368                 </div>
 369             </fieldset>
 370             <fieldset>
 371                 <legend>
 372                     {% trans "Expiration" %}
 373                 </legend>
 374                 <div class="roundbox">
 375                     {{ form.expires.label_tag }}{{ form.expires }}
 376                     {% if form.expires.errors %}
 377                     <br>
 378                     <p class="error">
 379                         {{ form.expires.errors|join:", " }}
 380                     </p>
 381                     {% endif %}
 382                 </div>
 383             </fieldset>
 384             <fieldset>
 385                 <legend>
 386                     {% trans "Use/Comments" %}
 387                 </legend>
 388                 {% blocktrans %}
 389                 <p class="roundbox">
 390                     Give a short description of the intended use of this rule, that justifies the parameter selection above. Feel free to include any additional comments.
 391                 </p>
 392                 {% endblocktrans %}
 393                 <p>
 394                     {{ form.comments }}
 395                     {% if form.errors %}
 396                     <br/>
 397                     <span class="error">{{ form.comments.errors|join:", " }}</span>{% endif %}
 398                 </p>
 399             </fieldset>
 400             <p>
 401                 <input type="submit" id="applybutton" value="{% trans "Apply" %}" />
 402             </p>
 403         </div>
 404     </form>
 405 </div>
 406 <div id="then_diag" title="Add new rate-limit value">
 407 </div>
 408 <div id="port_diag" title="Add new port">
 409 </div>
 410
 411 {% endblock %}