dashboard: list groups, group users

circle/dashboard/static/dashboard/dashboard.css

@@ -114,6 +114,10 @@ body {
   min-height: 20em;
 }
 
+#group-detail-panel .panel-body {
+  min-height: 20em;
+}
+
 :link i:before:hover {
   text-decoration: none !important;
 }
@@ -166,19 +170,20 @@ body {
 }
 
 #vm-details-rename, #vm-details-rename *, #vm-details-h1-name, #vm-list-rename, #vm-list-rename *,
-#node-details-rename, #node-details-rename *, #node-details-h1-name, #node-list-rename, #node-list-rename * {
+#node-details-rename, #node-details-rename *, #node-details-h1-name, #node-list-rename, #node-list-rename *#group-details-rename, #group-details-rename *, #group-details-h1-name, #group-list-rename, #group-list-rename * {
+ 
   display: inline;
 }
 
-#vm-details-rename, #vm-list-rename, #node-details-rename, #node-list-rename {
+#vm-details-rename, #vm-list-rename, #node-details-rename, #node-list-rename, #group-details-rename, #group-list-rename {
   display: none;
 }
 
-#vm-details-rename-name, #node-details-rename-name {
+#vm-details-rename-name, #node-details-rename-name, #group-details-rename-name {
   max-width: 160px;
 }
 
-#vm-list-rename-name, #node-list-rename-name {
+#vm-list-rename-name, #node-list-rename-name, #group-list-rename-name {
   max-width: 100px;
 }
 

circle/dashboard/static/dashboard/group-list.js

+var ctrlDown, shiftDown = false;
+var ctrlKey = 17;
+var shiftKey = 16;
+var selected = [];
+
+$(function() {
+  $(document).keydown(function(e) {
+    if (e.keyCode == ctrlKey) ctrlDown = true;
+    if (e.keyCode == shiftKey) shiftDown = true;
+  }).keyup(function(e) {
+    if (e.keyCode == ctrlKey) ctrlDown = false;
+    if (e.keyCode == shiftKey) shiftDown = false;
+  });
+
+  $('.group-list-table tbody').find('tr').mousedown(function() {
+    var retval = true;
+    if (ctrlDown) {
+      setRowColor($(this));
+      if(!$(this).hasClass('group-list-selected')) {
+        selected.splice(selected.indexOf($(this).index()), 1);
+      } else {
+        selected.push($(this).index());
+      }
+      retval = false;
+    } else if(shiftDown) {
+      if(selected.length > 0) {
+        start = selected[selected.length - 1] + 1;
+        end = $(this).index();
+
+        if(start > end) {
+          var tmp = start - 1; start = end; end = tmp - 1;
+        }
+
+        for(var i = start; i <= end; i++) {
+          if(selected.indexOf(i) < 0) {
+            selected.push(i);
+            setRowColor($('.group-list-table tbody tr').eq(i));
+            }
+        }
+      }
+      retval = false;
+    } else {
+      $('.group-list-selected').removeClass('group-list-selected');
+      $(this).addClass('group-list-selected');
+      selected = [$(this).index()];
+    }
+
+    // reset btn disables
+    $('.group-list-table tbody tr .btn').attr('disabled', false);
+    // show/hide group controls
+    if(selected.length > 1) {
+      $('.group-list-group-control a').attr('disabled', false);
+      for(var i = 0; i < selected.length; i++) {
+        $('.group-list-table tbody tr').eq(selected[i]).find('.btn').attr('disabled', true);
+      }
+    } else {
+      $('.group-list-group-control a').attr('disabled', true);
+    }
+    return retval;
+  });
+
+  $('#group-list-group-migrate').click(function() {
+    console.log(collectIds(selected));
+  });
+
+
+  $('tbody a').mousedown(function(e) {
+    // parent tr doesn't get selected when clicked
+    e.stopPropagation();
+    });
+
+  $('tbody a').click(function(e) {
+    // browser doesn't jump to top when clicked the buttons
+      
+      if(!$(this).hasClass('real-link')) {
+      return false;
+    }
+  });
+
+  
+  /* rename */
+  $("#group-list-rename-button, .group-details-rename-button").click(function() {
+    $("#group-list-column-name", $(this).closest("tr")).hide();
+    $("#group-list-rename", $(this).closest("tr")).css('display', 'inline');
+  });
+
+  /* rename ajax */
+  $('.group-list-rename-submit').click(function() {
+    var row = $(this).closest("tr")
+    var name = $('#group-list-rename-name', row).val();
+    var url = '/dashboard/group/' + row.children("td:first-child").text().replace(" ", "") + '/';
+    $.ajax({
+      method: 'POST',
+      url: url,
+      data: {'new_name': name},
+      headers: {"X-CSRFToken": getCookie('csrftoken')},
+      success: function(data, textStatus, xhr) {
+        
+        $("#group-list-column-name", row).html(
+          $("<a/>", {
+            'class': "real-link",
+            href: "/dashboard/group/" + data['node_pk'] + "/",
+            text: data['new_name']
+          })
+        ).show();
+        $('#group-list-rename', row).hide();
+        // addMessage(data['message'], "success");
+      },
+      error: function(xhr, textStatus, error) {
+	 addMessage("uhoh", "danger");
+      }
+    });
+    return false;
+  });
+
+
+  /* group actions */
+
+  /* select all */
+  $('#group-list-group-select-all').click(function() {
+    $('.group-list-table tbody tr').each(function() {
+      var index = $(this).index();
+      if(selected.indexOf(index) < 0) {
+        selected.push(index);
+        $(this).addClass('group-list-selected');
+      }
+    });
+    if(selected.length > 0)
+      $('.group-list-group-control a').attr('disabled', false);
+    return false;
+  });
+
+  /* mass vm delete */
+  $('#group-list-group-delete').click(function() {
+    addModalConfirmation(massDeleteVm,
+      {
+        'url': '/dashboard/group/mass-delete/',
+        'data': {
+          'selected': selected,
+          'v': collectIds(selected)
+        }
+      }
+    );
+    return false;
+  });
+});
+
+function collectIds(rows) {
+  var ids = [];
+  for(var i = 0; i < rows.length; i++) {
+    var div = $('td:first-child div', $('.group-list-table tbody tr').eq(rows[i]));
+    ids.push(div.prop('id').replace('node-', ''));
+  }
+  return ids;  
+}
+
+function setRowColor(row) {
+  if(!row.hasClass('group-list-selected')) {
+    row.addClass('group-list-selected');
+  } else {
+    row.removeClass('group-list-selected');
+  }
+}

circle/dashboard/tables.py

-from django.contrib.auth.models import Group
+from django.contrib.auth.models import Group, User
 from django_tables2 import Table, A
 from django_tables2.columns import (TemplateColumn, Column, BooleanColumn,
                                     LinkColumn)
@@ -103,11 +103,55 @@ class NodeListTable(Table):
 
 
 class GroupListTable(Table):
+    pk = TemplateColumn(
+        template_name='dashboard/group-list/column-id.html',
+        verbose_name="ID",
+        attrs={'th': {'class': 'group-list-table-thin'}},
+    )
+
+    name = TemplateColumn(
+        template_name="dashboard/group-list/column-name.html"
+    )
+
+    number_of_users = TemplateColumn(
+        template_name='dashboard/group-list/column-users.html',
+        attrs={'th': {'class': 'group-list-table-admin'}},
+    )
+
+    admin = TemplateColumn(
+        template_name='dashboard/group-list/column-admin.html',
+        attrs={'th': {'class': 'group-list-table-admin'}},
+    )
+
+    actions = TemplateColumn(
+        attrs={'th': {'class': 'group-list-table-thin'}},
+        template_code=('{% include "dashboard/group-list/column-'
+                       'actions.html" with btn_size="btn-xs" %}'),
+    )
+
     class Meta:
         model = Group
         attrs = {'class': ('table table-bordered table-striped table-hover '
                            'group-list-table')}
-        fields = ('id', 'name', )
+        fields = ('pk', 'name', )
+
+
+class UserListTable(Table):
+    pk = TemplateColumn(
+        template_name='dashboard/vm-list/column-id.html',
+        verbose_name="ID",
+        attrs={'th': {'class': 'vm-list-table-thin'}},
+    )
+
+    username = TemplateColumn(
+        template_name="dashboard/group-list/column-username.html"
+    )
+
+    class Meta:
+        model = User
+        attrs = {'class': ('table table-bordered table-striped table-hover '
+                           'vm-list-table')}
+        fields = ('pk', 'username', )
 
 
 class NodeVmListTable(Table):
@@ -147,6 +191,11 @@ class NodeVmListTable(Table):
         fields = ('pk', 'name', 'state', 'time_of_suspend', 'time_of_delete', )
 
 
+class UserListTablex(Table):
+    class Meta:
+        model = User
+
+
 class TemplateListTable(Table):
     name = LinkColumn(
         'dashboard.views.template-detail',

circle/dashboard/templates/dashboard/group-detail.html

+{% extends "dashboard/base.html" %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+{% block content %}
+
+<div class="alert alert-info">
+  Tip #1: you can select multiple vm instances while holding down the <strong>CTRL</strong> key!
+</div>
+
+<div class="alert alert-info">
+  Tip #2: if you want to select multiple instances by one click select an instance then hold down <strong>SHIFT</strong> key and select another one!
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="no-margin"><i class="icon-user"></i> Your users</h3>
+      </div>
+      <div class="panel-body group-list-group-control">
+        <p>
+          <strong>Group actions</strong>
+          <button id="group-list-group-select-all" class="btn btn-info btn-xs">Select all</button>
+          <a id="group-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> Discard</a>
+        </p>
+	</div>
+	<div id="table_container">
+	
+        <div id="rendered_table" class="panel-body">
+	      {% render_table table %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<style>
+  .popover {
+    max-width: 600px;
+  }
+
+  .group-list-selected, .group-list-selected td {
+    background-color: #e8e8e8 !important;
+  }
+
+  .group-list-selected:hover, .group-list-selected:hover td {
+    background-color: #d0d0d0 !important;
+  }
+
+  .group-list-selected td:first-child {
+    font-weight: bold;
+  }
+
+  .group-list-table-thin {
+    width: 10px;
+  }
+
+  .group-list-table-admin {
+    width: 130px;
+  }
+</style>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ STATIC_URL}}dashboard/group-list.js"></script>
+{% endblock %}

circle/dashboard/templates/dashboard/group-list.html

@@ -15,16 +15,13 @@
   <div class="col-md-12">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-desktop"></i> Your nodes</h3>
+        <h3 class="no-margin"><i class="icon-group"></i> Your groups</h3>
       </div>
-      <div class="panel-body node-list-group-control">
+      <div class="panel-body group-list-group-control">
         <p>
           <strong>Group actions</strong>
-          <button id="node-list-group-select-all" class="btn btn-info btn-xs">Select all</button>
-          <a class="btn btn-default btn-xs" id="node-list-group-migrate" disabled><i class="icon-truck"></i> Migrate</a>
-          <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-refresh"></i> Reboot</a>
-          <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-off"></i> Shutdown</a>
-          <a id="node-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> Discard</a>
+          <button id="group-list-group-select-all" class="btn btn-info btn-xs">Select all</button>
+          <a id="group-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> Discard</a>
         </p>
 	</div>
 	<div id="table_container">
@@ -41,28 +38,28 @@
     max-width: 600px;
   }
 
-  .node-list-selected, .node-list-selected td {
+  .group-list-selected, .group-list-selected td {
     background-color: #e8e8e8 !important;
   }
 
-  .node-list-selected:hover, .node-list-selected:hover td {
+  .group-list-selected:hover, .group-list-selected:hover td {
     background-color: #d0d0d0 !important;
   }
 
-  .node-list-selected td:first-child {
+  .group-list-selected td:first-child {
     font-weight: bold;
   }
 
-  .node-list-table-thin {
+  .group-list-table-thin {
     width: 10px;
   }
 
-  .node-list-table-admin {
+  .group-list-table-admin {
     width: 130px;
   }
 </style>
 {% endblock %}
 
 {% block extra_js %}
-<script src="{{ STATIC_URL}}dashboard/node-list.js"></script>
+<script src="{{ STATIC_URL}}dashboard/group-list.js"></script>
 {% endblock %}

circle/dashboard/templates/dashboard/group-list/column-actions.html

+
+<div class="btn-group">
+	<button type="button" class="btn {{ btn_size }} btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+  <ul class="dropdown-menu" role="menu">
+   <li><a data-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-trash"></i> Delete</a></li>
+    </ul>
+</div>

circle/dashboard/templates/dashboard/group-list/column-admin.html

+<a id="group-list-rename-button" class="btn btn-default btn-xs" title data-original-title="Rename">
+  <i class="icon-pencil"></i>
+  </a>
+  

circle/dashboard/templates/dashboard/group-list/column-details.html

+<a class="btn btn-info btn-xs group-list-details" href="#"
+>Member list</a>

circle/dashboard/templates/dashboard/group-list/column-id.html

+<div id="node-{{ record.pk }}">{{ record.pk }}</div>

circle/dashboard/templates/dashboard/group-list/column-name.html

+{% load i18n %} 
+
+<div id="group-list-rename">
+  <form action="{% url "dashboard.views.group-detail" pk=record.pk %}" method="POST" id="group-list-rename-form">
+    {% csrf_token %}
+    <input id="group-list-rename-name" class="form-control input-sm" name="new_name" type="text" value="{{ record.name }}"/> 
+    <button type="submit" class="group-list-rename-submit btn btn-sm">{% trans "Rename" %}</button>
+  </form>
+</div>
+<div id="group-list-column-name">
+  <a class="real-link" href="{% url "dashboard.views.group-detail" pk=record.pk %}">{{ record.name }}</a>
+</div>

circle/dashboard/templates/dashboard/group-list/column-username.html

+{% load i18n %} 
+{{ record.username }}

circle/dashboard/templates/dashboard/group-list/column-users.html

+{% load i18n %} 
+
+<div id="group-list-column-users">
+  <a class="real-link" href="{% url "dashboard.views.group-detail" pk=record.pk %}">{{ record.user_set.count }}</a>
+  </div>

circle/dashboard/templates/dashboard/group-list/test-one.html

+            
+            <tr>
+              <!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>-->
+              <td>
+                <div id="vm-1{{ c }}">1{{ c }}</div>
+              </td>
+              <td><a href="" class="real-link">network-devenv</a></td>
+              <td>running</td>
+              <td>10 days</td>
+              <td>1 month</td>
+              <td>
+                <a class="btn btn-default btn-xs" title data-original-title="Migrate">
+                  <i class="icon-truck"></i>
+                </a>
+                <a class="btn btn-default btn-xs" title data-original-title="Rename">
+                  <i class="icon-pencil"></i>
+                </a>
+                <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
+                  data-content='
+                  Belépés: <input style="width: 300px;" type="text" class="form-control" value="ssh cloud@vm.ik.bme.hu -p22312"/>
+                  Jelszó: <input style="width: 300px;" type="text" class="form-control" value="asdfkicsiasdfkocsi"/>
+                  '>Connect</a>
+              </td>
+              <td>
+                <a class="btn btn-info btn-xs vm-list-details" href="#" data-toggle="popover" 
+                  data-content='
+                  <h4>Quick details</h4>
+                  <dl class="dl-horizontal">
+                    <dt>Number of cores:</dt><dd>4</dd>
+                    <dt>Memory:</dt> <dd>512 MB</dd>
+                    <dt>Architecture:</td><dd>x86-64</dd>
+                  </dl>
+                  <dl>
+                    <dt>IPv4 address:</dt><dd>10.9.8.7</dd>
+                    <dt>IPv6 address:</dt><dd> 2001:2001:2001:2001:2001:2001::</dd>
+                    <dt>DNS name:</dt><dd>1825.vm.ik.bme.hu</dd>
+                  </ul>
+                  '>Details</a>
+              </td>
+              <td>
+                <div class="btn-group">
+                  <button type="button" class="btn btn-xs btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+                  <ul class="dropdown-menu" role="menu">
+                    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
+                    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
+                    <li><a href="#"><i class="icon-remove"></i> Discard</a></li>
+                  </ul>
+                </div>
+              </td>
+            
+            </tr>

circle/dashboard/templates/dashboard/index-groups.html

@@ -9,9 +9,9 @@
   </div>
   <div class="list-group" id="vm-list-view">
      {% for i in groups %}
-    <a href="#" class="list-group-item">
-	    <i class="icon-file"></i> {{ i.name }}<div class="pull-right"><i class="icon-download-alt "></i></div>
-    </a>
+     <a href="{% url "dashboard.views.group-detail" pk=i.pk %}" class="list-group-item real-link">
+<i class="icon-group"></i> {{ i.name }}
+</a>
    {% endfor %}
     <div href="#" class="list-group-item list-group-footer text-right">
       <div class="row">

circle/dashboard/urls.py

@@ -7,7 +7,7 @@ from .views import (
     TransferOwnershipView, TransferOwnershipConfirmView, NodeDelete,
     TemplateList, LeaseDetail, NodeCreate, LeaseCreate, TemplateCreate,
     FavouriteView, NodeStatus, GroupList, TemplateDelete, LeaseDelete,
-    VmGraphView, TemplateAclUpdateView
+    VmGraphView, TemplateAclUpdateView, GroupDetailView,
 )
 
 urlpatterns = patterns(
@@ -69,4 +69,6 @@ urlpatterns = patterns(
          r'(?P<time>[0-9]{1,2}[hdwy])$'),
         VmGraphView.as_view(),
         name='dashboard.views.vm-graph'),
+    url(r'^group/(?P<pk>\d+)/$', GroupDetailView.as_view(),
+        name='dashboard.views.group-detail'),
 )

circle/dashboard/views.py

@@ -31,7 +31,8 @@ from .forms import (
     VmCreateForm, TemplateForm, LeaseForm, NodeForm, HostForm, DiskAddForm,
 )
 from .tables import (VmListTable, NodeListTable, NodeVmListTable,
-                     TemplateListTable, LeaseListTable, GroupListTable)
+                     TemplateListTable, LeaseListTable, GroupListTable,
+                     UserListTable)
 from vm.models import (Instance, InstanceTemplate, InterfaceTemplate,
                        InstanceActivity, Node, instance_activity, Lease,
                        Interface)
@@ -488,6 +489,44 @@ class NodeDetailView(LoginRequiredMixin, SuperuserRequiredMixin, DetailView):
                                          kwargs={'pk': self.object.pk}))
 
 
+class GroupDetailView(LoginRequiredMixin, SuperuserRequiredMixin, DetailView):
+    template_name = "dashboard/group-detail.html"
+    model = Group
+    table_pagination = False
+
+    def get_context_data(self, **kwargs):
+        context = super(GroupDetailView, self).get_context_data(**kwargs)
+        instances = Group.objects.filter(name=self.object)
+        context['table'] = UserListTable(instances[0].user_set.all())
+        return context
+
+    def post(self, request, *args, **kwargs):
+        if request.POST.get('new_name'):
+            return self.__set_name(request)
+
+    def __set_name(self, request):
+        self.object = self.get_object()
+        new_name = request.POST.get("new_name")
+        Group.objects.filter(pk=self.object.pk).update(
+            **{'name': new_name})
+
+        success_message = _("Node successfully renamed!")
+        if request.is_ajax():
+            response = {
+                'message': success_message,
+                'new_name': new_name,
+                'node_pk': self.object.pk
+            }
+            return HttpResponse(
+                json.dumps(response),
+                content_type="application/json"
+            )
+        else:
+            messages.success(request, success_message)
+            return redirect(reverse_lazy("dashboard.views.group-detail",
+                                         kwargs={'pk': self.object.pk}))
+
+
 class AclUpdateView(LoginRequiredMixin, View, SingleObjectMixin):
 
     def post(self, request, *args, **kwargs):