network: bootstrap3 migration and bugfixes

cloud/settings/base.py

@@ -285,4 +285,6 @@ finally:
 
 TEST_RUNNER = 'django_nose.NoseTestSuiteRunner'
 
+CRISPY_TEMPLATE_PACK = 'bootstrap3'
+
 # vim: et sw=4 ai fenc=utf8 smarttab :

network/static/js/record-create.js → network/static/js/record.js

@@ -174,7 +174,14 @@ function validateForm() {
     
     // name
     record_name = $('#id_name').val()
-    if(!domain_re.test(record_name)) {
+    
+    if(!record_name) {
+        messages.push({                                                     
+            'message': gettext("You must specify a name!"),                    
+            'id': 'name'                                                    
+        });  
+    }
+    else if(!domain_re.test(record_name)) {
         text = gettext('%s - invalid domain name'),
         messages.push({
             'message': interpolate(text, [record_name]),
@@ -230,8 +237,8 @@ function resetForm() {
 // removes all error messages / classes
 function resetErrors() {
     // reset invalid inputs too
-    $('div[id^="div_id_"][class*="error"]').each(function() {
-        $(this).removeClass('error');
+    $('div[id^="div_id_"][class*="has-error"]').each(function() {
+        $(this).removeClass('has-error');
     });
 
     // remove the error messages
@@ -267,7 +274,7 @@ $(function() {
         $('#submit-id-submit').hide();
         $('#div_id_type .controls').append(
             //' <a id="type_next" onclick="type_next()" class="btn btn-info">Next</a>'
-            '<span id="type_next" class="help-inline"><strong>' + 
+            '<span id="type_next" class="help-block"><strong>' + 
             gettext('Specify a type!') + 
             '</strong></span>'    
         );
@@ -301,16 +308,16 @@ function type_next() {
 function appendMessage(type, messages, id) {
     $('#js_error').remove();
     resetErrors();
-    message = '<div id="js_error" style="display: none;" class="alert alert-' + type + ' alert-block"><ul>'
+    message = '<div id="js_error" style="display: none;" class="alert alert-danger"><ul>'
     for(var i = 0;i < messages.length; i++) {
         message += "<li>" +messages[i].message+ "</li>";
         if(messages[i].id) {            
-            $('#id_' + messages[i].id).closest('div[class="control-group"]').addClass("error");
+            $('#id_' + messages[i].id).closest('div[class="form-group"]').addClass("has-error");
         }
     }
 
     message +='</ul></div>';
-    $('.form-horizontal').before(message);
+    $('form').before(message);
     $('html, body').animate({ scrollTop: 0}, 'slow', function() {
         $('#js_error').fadeIn();   
     });
@@ -321,8 +328,8 @@ function appendMessage(type, messages, id) {
 // it also removes the help-inline span that shouldn't really appear
 $('* [id^="id_"]').focus(function() {
     id = "#div_" + $(this).prop('id');
-    if($(id).hasClass('error')) {
-        $(id).removeClass('error');
+    if($(id).hasClass('has-error')) {
+        $(id).removeClass('has-error');
         $('span[id="error_1_' + $(this).attr('id') + '"]').remove();
     }
 });

network/templates/network/base.html

@@ -9,13 +9,23 @@
     <title>{% block title %}Firewall GUI{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
+    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
     <style type="text/css">
     body {
       padding-top:40px;
     }
+
+    /* note: this doesn't really work */
+    a i:hover {
+        text-decoration: none;
+    }
+
+    footer {
+        margin-top: 40px;
+    }
     </style>
-    <link href="{% static "css/bootstrap-responsive.min.css" %}" rel="stylesheet">
 
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
@@ -26,21 +36,19 @@
   </head>
   <body>
     <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="brand" href="{% url network.index %}">CIRCLE Network</a>
-          <div class="nav-collapse collapse">
-            <ul class="nav">
+        <div class="navbar-header">  
+          <a class="navbar-brand" href="{% url network.index %}">CIRCLE Network</a>
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+        </div>
+        <div class="collapse navbar-collapse">
+            <ul class="nav navbar-nav">
              {% include "network/menu.html" %}
             </ul>
-          </div>
         </div>
-      </div>
     </div>
     {% block messages %}
     {% if messages %}
@@ -52,14 +60,18 @@
     {% endif %}
     {% endblock messages %}
     <div class="container">
-    {% block content %}
-    <div class="alert-block">This is an abstract base template.</div>
-    {% endblock %}
-    </div>
+        {% block content %}
+        <div class="alert-block">This is an abstract base template.</div>
+        {% endblock %}
+            <footer>
+                <p class="pull-right"><a href="#">Vissza az oldal tetejére</a></p>
+                <p>&copy; 2013 BME Közigazgatási Informatikai Központ
+            </footer>     
+    </div><!-- .container -->
+    
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="{% url network.js_catalog %}"></script>
-    <script src="{% static "js/bootstrap.min.js" %}"></script>
-    <script src="{% static "js/bootbox.min.js" %}"></script>
+    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
     <!--<script src="{% static "js/select2-3.4.0/select2.min.js" %}"></script>-->
     <script src="{% static "js/network.js" %}"></script>
     <script>

network/templates/network/blacklist-edit.html

@@ -6,9 +6,12 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
-  <h1>{{ form.ipv4.value }} <small>details of restriction</small></h1>
+<div class="page-header">
+    <h1>{{ form.ipv4.value }} <small>{{ form.type.value }}</small></h1>
+</div>
+<div class="row">
+    <div class="col-sm-4">
+        {% crispy form %}
+    </div>
 </div>
-
-{% crispy form %}
 {% endblock %}

network/templates/network/blacklist-list.html

@@ -5,7 +5,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>Blacklist <small></small></h1>
 </div>
 

network/templates/network/columns/color-desc.html

 {% load i18n %}
 {% load l10n %}
 
-<span style="color: #FF0000;">[{{ record.r_type }}]</span>    
+{# <span style="color: #FF0000;">[{{ record.r_type }}]</span> #}
 {% if record.direction == "1" %}{{ record.foreign_network }}{% else %}{{ record.r_type }}{% endif %}
 {#<span style="color: #0000FF;"> ▸ </span>#}
 <i class="icon-arrow-right"></i>

network/templates/network/columns/host-rule.html

@@ -11,10 +11,10 @@
 {% endif %}
 
 {% if record.extra %}
-    <span class="label label-inverse">{{ record.extra }}</span>
+    <span class="label label-default">{{ record.extra }}</span>
 {% endif %}
 
 {% if record.nat %}
-    <span class="label">NAT
+    <span class="label label-success">NAT
         [ {{ record.dport }} <i class="icon-arrow-right"></i> {{record.nat_dport}} ]</span>
 {% endif %}

network/templates/network/domain-edit.html

@@ -6,9 +6,13 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
-  <h1>{{ form.name.value }} <small>details of domain</small></h1>
+<div class="page-header">
+  <h1>{{ form.name.value }} <small></small></h1>
 </div>
 
-{% crispy form %}
+<div class="row">
+    <div class="col-sm-4">
+        {% crispy form %}
+    </div>
+</div>
 {% endblock %}

network/templates/network/domain-list.html

@@ -5,7 +5,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>Domains <small>list of all domains</small></h1>
 </div>
 

network/templates/network/group-edit.html

@@ -6,9 +6,13 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>{{ form.name.value }} <small>details of group</small></h1>
 </div>
 
-{% crispy form %}
+<div class="row">
+    <div class="col-sm-6">
+        {% crispy form %}
+    </div>
+</div>
 {% endblock %}

network/templates/network/group-list.html

@@ -5,7 +5,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>Host groups <small>list of all host groups</small></h1>
 </div>
 

network/templates/network/host-create.html

@@ -6,16 +6,17 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h2>Create a new host</h2>
 </div>
 
 <div class="row">
-  <div class="span8">
+  <div class="col-sm-8">
     {% crispy form %}
   </div>
-  <div class="span4">
-  </div><!-- span4 -->
+  <div class="col-sm-4">
+      Maybe some help text here?
+  </div><!-- col-sm-4 -->
 </div><!-- row -->
 
 {% endblock %}

network/templates/network/host-edit.html

@@ -6,48 +6,61 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>{{ form.hostname.value }} <small>details of host</small></h1>
 </div>
 
 
 <div class="row">
-  <div class="span8">
-    {% crispy form %}
-  </div>
-  <div class="span4">
-    <h3>Rules</h3>
-    {% render_table rule_list %}
-    
-    <h3>Groups</h3>
-    {% for group in group_rule_list %}
-        <div>
-            <h4 id="{{ group.pk }}_group_pk">{{ group.name }} 
-                <a href="{% url network.remove_host_group pk=host_pk group_pk=group.pk %}?from={{ request.path }}">
-                    <i class="icon-remove" style="vertical-align: middle;"></i></a>
-            <a href="{% url network.group group.pk %}">
-                <i class="icon-pencil" style="vertical-align: middle;"></i></a>
-            </h4>
-            {% render_table group.table %}
+    <div class="col-sm-8">
+        {% crispy form %}
+    </div>
+    <div class="col-sm-4">
+        <div class="page-header">
+            <h3>Rules</h3>
         </div>
-    {% endfor %}
-    
-    <h3>Add host group</h3>
+        {% if rule_list.data.data.count > 0 %}
+            {% render_table rule_list %}
+        {% else %}
+            No rules associated with this host!
+        {% endif %}
+        
+        <div class="page-header">
+            <h3>Groups</h3>
+        </div>
+        {% for group in group_rule_list %}
+            <div>
+                <h4 id="{{ group.pk }}_group_pk">{{ group.name }} 
+                    <a href="{% url network.remove_host_group pk=host_pk group_pk=group.pk %}?from={{ request.path }}">
+                        <i class="icon-remove" style="vertical-align: middle;"></i></a>
+                <a href="{% url network.group group.pk %}">
+                    <i class="icon-pencil" style="vertical-align: middle;"></i></a>
+                </h4>
+                {% render_table group.table %}
+            </div>
+        {% endfor %}
+
+    <div class="page-header">
+        <h3>Add host group</h3>
+    </div>
     {% if not_used_groups|length == 0 %}
       No more groups to add!
     {% else %}
-      <form action="{% url network.add_host_group pk=host_pk %}" method="POST">
+        <form action="{% url network.add_host_group pk=host_pk %}" method="POST">
         {% csrf_token %}
-        <div class="input-append">
-          <select name="group" id="add_group">
-            {% for rest in not_used_groups %}
-              <option value="{{ rest.pk }}">{{ rest }}</option>
-            {% endfor %}
-          </select>
-          <input type="submit" value="Add group" class="btn"></input>
-        </div><!-- input append -->
-      </form>
+            <div class="input-group">
+                <select name="group" id="add_group" class="form-control">
+                    {% for rest in not_used_groups %}
+                        <option value="{{ rest.pk }}">{{ rest }}</option>
+                    {% endfor %}
+                </select>
+                <div class="input-group-btn">
+                    <input type="submit" value="Add group" class="btn btn-default"></input>
+                </div>
+            </div><!-- input-group -->
+        </form>
     {% endif %}
-  </div><!-- span4 -->
+    </div><!-- col-sm-4 -->
 </div><!-- row -->
+
 {% endblock %}

network/templates/network/host-list.html

@@ -8,7 +8,7 @@
 <style>
 
 </style>
-<div class="page-heading">
+<div class="page-header">
     <h1>
         Hosts 
         <small>
@@ -18,7 +18,7 @@
     </h1>
 </div>
 
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" style="margin: 5px 0 20px 0;">
     <li class="disabled"><a href="#">Filter by vlans</a></li>
     <li {% if not request.GET.vlan %} class="active"{% endif %}><a href="{{ request.path }}">ALL</a></li>
     {% for vlan in vlans %}

network/templates/network/index.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 
-<div class="page-heading">
+<div class="page-header">
   <h1>Latest modifications</h1>
 </div>
 
@@ -23,15 +23,15 @@
         <td><a href="{{ l.link }}">{{ l.name }}</a></td>
         <td>{{ l.modified_at|timesince }}</td>
     </tr>
-{% endfor %}
+    {% endfor %}
 </table>
 
-<div class="page-heading">
+<div class="page-header">
   <h1>Dashboard <small>foo bar baz</small></h1>
 </div>
 
 <ul class="thumbnails">
-  <li class="span3">
+  <li class="col-sm-3">
     <div class="thumbnail">
       <p class="lead"><a href="{% url network.host_list %}">Hosts</a> are machines on the network.</p>
       <p>Proin mattis enim risus. Ut condimentum eu enim quis auctor. Duis lobortis sollicitudin lacus, scelerisque dictum arcu aliquam nec.</p>
@@ -39,7 +39,7 @@
       </p>
     </div>
   </li>
-  <li class="span3">
+  <li class="col-sm-3">
     <div class="thumbnail">
       <p class="lead">Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
       <p>Proin mattis enim risus. Ut condimentum eu enim quis auctor. Duis lobortis sollicitudin lacus, scelerisque dictum arcu aliquam nec.</p>
@@ -47,7 +47,7 @@
       </p>
     </div>
   </li>
-  <li class="span3">
+  <li class="col-sm-3">
     <div class="thumbnail">
       <p class="lead">Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
       <p>Proin mattis enim risus. Ut condimentum eu enim quis auctor. Duis lobortis sollicitudin lacus, scelerisque dictum arcu aliquam nec.</p>
@@ -55,7 +55,7 @@
       </p>
     </div>
   </li>
-  <li class="span3">
+  <li class="col-sm-3">
     <div class="thumbnail">
       <p class="lead">Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
       <p>Proin mattis enim risus. Ut condimentum eu enim quis auctor. Duis lobortis sollicitudin lacus, scelerisque dictum arcu aliquam nec.</p>
@@ -66,7 +66,7 @@
 </ul>
 
 <ul class="thumbnails">
-  <li class="span3">
+  <li class="col-sm-3">
     <div class="thumbnail">
       <p class="lead">Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
       <p>Proin mattis enim risus. Ut condimentum eu enim quis auctor. Duis lobortis sollicitudin lacus, scelerisque dictum arcu aliquam nec.</p>
@@ -74,7 +74,7 @@
       </p>
     </div>
   </li>
-  <li class="span3">
+  <li class="col-sm-3">
     <div class="thumbnail">
       <p class="lead">Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
       <p>Proin mattis enim risus. Ut condimentum eu enim quis auctor. Duis lobortis sollicitudin lacus, scelerisque dictum arcu aliquam nec.</p>
@@ -82,7 +82,7 @@
       </p>
     </div>
   </li>
-  <li class="span3">
+  <li class="col-sm-3">
     <div class="thumbnail">
       <p class="lead">Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
       <p>Proin mattis enim risus. Ut condimentum eu enim quis auctor. Duis lobortis sollicitudin lacus, scelerisque dictum arcu aliquam nec.</p>
@@ -90,7 +90,7 @@
       </p>
     </div>
   </li>
-  <li class="span3">
+  <li class="col-sm-3">
     <div class="thumbnail">
       <p class="lead">Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
       <p>Proin mattis enim risus. Ut condimentum eu enim quis auctor. Duis lobortis sollicitudin lacus, scelerisque dictum arcu aliquam nec.</p>

network/templates/network/record-create.html

@@ -6,20 +6,19 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h2>Create a new record</h2>
 </div>
 
-
 <div class="row">
-  <div class="span8">
+  <div class="col-sm-6">
     {% crispy form %}
   </div>
-  <div class="span4">
-  </div><!-- span4 -->
+  <div class="col-sm-4">
+  </div><!-- col-sm-4 -->
 </div><!-- row -->
 {% endblock %}
 {% block extra_etc %}                                                       
-<script src="{% static "js/record-create.js" %}"></script>                   
+<script src="{% static "js/record.js" %}"></script>                   
 {% endblock %}                                                              
 ~                       

network/templates/network/record-edit.html

@@ -6,12 +6,17 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>{{ fqdn }} <small>details of record</small></h1>
 </div>
 
-{% crispy form %}
+<div class="row">
+    <div class="col-sm-6">
+        {% crispy form %}
+    </div>
+</div>
 {% endblock %}
+
 {% block extra_etc %}                                                       
-<script src="{% static "js/record-create.js" %}"></script>                  
+<script src="{% static "js/record.js" %}"></script>                  
 {% endblock %}     

network/templates/network/record-list.html

@@ -5,7 +5,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
     <h1>
         Records
         <small>

network/templates/network/rule-edit.html

@@ -6,9 +6,17 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
-  <h1>{{ form.hostname.value }} <small>details of rule</small></h1>
+<div class="page-header">
+    <h3>
+        {% with rule as record %}
+            {% include "network/columns/host-rule.html" %}
+        {% endwith %}
+    </h3>
 </div>
 
-{% crispy form %}
+<div class="row">
+    <div class="col-sm-7">
+        {% crispy form %}
+    </div>
+</div>
 {% endblock %}

network/templates/network/rule-list.html

@@ -5,7 +5,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>Rules <small>list of all rules</small></h1>
 </div>
 

network/templates/network/vlan-edit.html

@@ -6,16 +6,16 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>{{ form.name.value }} <small>details of vlan</small></h1>
 </div>
 
 <div class="row">
-<div class="span8">
-{% crispy form %}
-</div>
-<div class="span4">
-{% render_table host_list %}
-</div>
+    <div class="col-sm-8">
+        {% crispy form %}
+    </div>
+    <div class="col-sm-4">
+        {% render_table host_list %}
+    </div>
 </div>
 {% endblock %}

network/templates/network/vlan-group-edit.html

@@ -6,9 +6,13 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>{{ form.name.value }} <small>details of vlan group</small></h1>
 </div>
 
-{% crispy form %}
+<div class="row">
+    <div class="col-sm-6">
+        {% crispy form %}
+    </div>
+</div>
 {% endblock %}

network/templates/network/vlan-group-list.html

@@ -5,7 +5,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
   <h1>Vlan groups <small>list of all vlan groups</small></h1>
 </div>
 

network/templates/network/vlan-list.html

@@ -5,7 +5,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="page-heading">
+<div class="page-header">
 <h1>Vlans <small>list of all vlans</small></h1>
 </div>
 

network/views.py

@@ -143,6 +143,18 @@ class HostDetail(UpdateView):
             self.object = self.get_object()
             return super(HostDetail, self).get(request, *args, **kwargs)
 
+    def post(self, request, *args, **kwargs):
+        pk = self.kwargs.get('pk')
+        # this is usually not None (well, with curl and whatnot it can be)
+        if pk:
+            groups = Host.objects.get(pk=pk).groups.all()
+            groups = [i.pk for i in groups]
+            # request.POST is immutable
+            post_copy = request.POST.copy()
+            post_copy.setlist('groups', groups)
+            request.POST = post_copy
+            return super(HostDetail, self).post(request, *args, **kwargs)
+
     def get_context_data(self, **kwargs):
         context = super(HostDetail, self).get_context_data(**kwargs)
         # own rules
@@ -225,6 +237,15 @@ class RuleDetail(UpdateView):
         if 'pk' in self.kwargs:
             return reverse_lazy('network.rule', kwargs=self.kwargs)
 
+    def get_context_data(self, **kwargs):
+        context = super(RuleDetail, self).get_context_data(**kwargs)
+
+        pk = self.kwargs.get('pk')
+        rule = Rule.objects.get(pk=pk)
+
+        context['rule'] = rule
+        return context
+
 
 class RuleDelete(DeleteView):
     model = Rule