dashboard: fix UI in vm listing

circle/dashboard/tables.py

@@ -6,12 +6,27 @@ from django.utils.translation import ugettext_lazy as _
 
 
 class VmListTable(Table):
-    name = LinkColumn('dashboard.views.detail', args=[A('pk')])
-    admin = TemplateColumn(template_name='dashboard/vm-list/column-admin.html')
-    details = TemplateColumn(template_name=
-                             'dashboard/vm-list/column-details.html')
-    actions = TemplateColumn(template_name=
-                             'dashboard/vm-list/column-actions.html')
+    pk = Column(
+        verbose_name="ID",
+        attrs={'th': {'class': 'vm-list-table-thin'}},
+    )
+    name = LinkColumn(
+        'dashboard.views.detail',
+        args=[A('pk')],
+        attrs={'class': 'real-link'}
+    )
+    admin = TemplateColumn(
+        template_name='dashboard/vm-list/column-admin.html',
+        attrs={'th': {'class': 'vm-list-table-admin'}},
+    )
+    details = TemplateColumn(
+        template_name='dashboard/vm-list/column-details.html',
+        attrs={'th': {'class': 'vm-list-table-thin'}},
+    )
+    actions = TemplateColumn(
+        template_name='dashboard/vm-list/column-actions.html',
+        attrs={'th': {'class': 'vm-list-table-thin'}},
+    )
     time_of_suspend = TemplateColumn(
         '{{ record.time_of_suspend|timesince }}',
         verbose_name=_("Suspend in"))

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

@@ -71,6 +71,14 @@
   .vm-list-selected td:first-child {
     font-weight: bold;
   }
+
+  .vm-list-table-thin {
+    width: 10px;
+  }
+
+  .vm-list-table-admin {
+    width: 130px;
+  }
 </style>
 {% endblock %}
 
@@ -106,6 +114,15 @@ $(function() {
       'trigger': 'click'
     });
 
+    $('tbody a').click(function(e) {
+      // parent tr doesn't get selected when clicked
+      e.stopPropagation();
+      // browser doesn't jump to top when clicked the buttons
+      if(!$(this).hasClass('real-link')) {
+        return false;
+      }
+    });
+
     /*
     $('#check_all').click(function() {
       var checked = $(this).prop('checked');

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

-sziahello
+
+<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>

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

-admin
+
+<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>

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

-detail
-
+<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>{{ record.num_cores }}</dd>
+    <dt>Memory:</dt> <dd>{{ record.ram_size }} Mebibytes</dd>
+    <dt>Architecture:</td><dd>{{ record.arch }}</dd>
+  </dl>
+  <dl>
+    <dt>IPv4 address:</dt><dd>{{ record.ipv4 }}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>

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

@@ -2,17 +2,17 @@
             <tr>
               <!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>-->
               <td>182{{ c }}</td>
-              <td><a href="">network-devenv</a></td>
+              <td><a href="" class="real-link">network-devenv</a></td>
               <td>running</td>
               <td>10 days</td>
               <td>1 month</td>
               <td>
-                <span class="btn btn-default btn-xs" title data-original-title="Migrate">
+                <a class="btn btn-default btn-xs" title data-original-title="Migrate">
                   <i class="icon-truck"></i>
-                </span>
-                <span class="btn btn-default btn-xs" title data-original-title="Rename">
+                </a>
+                <a class="btn btn-default btn-xs" title data-original-title="Rename">
                   <i class="icon-pencil"></i>
-                </span>
+                </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"/>

circle/dashboard/views.py

@@ -45,3 +45,4 @@ class VmList(SingleTableView):
     template_name = "dashboard/vm-list.html"
     model = Instance
     table_class = VmListTable
+    table_pagination = False