dashboard: vm instance list with static data

circle/dashboard/tables.py

+from django_tables2 import Table, A
+from django_tables2.columns import Column, LinkColumn, TemplateColumn
+
+from vm.models import Instance
+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')
+    time_of_suspend = TemplateColumn(
+        '{{ record.time_of_suspend|timesince }}',
+        verbose_name=_("Suspend in"))
+    time_of_delete = Column(verbose_name=_("Delete in"))
+
+    class Meta:
+        model = Instance
+        attrs = {'class': ('table table-bordered table-striped table-hover '
+                           'vm-list-table')}
+        fields = ('pk', 'name', 'state', 'time_of_suspend', 'time_of_delete', )

circle/dashboard/templates/dashboard/base.html

@@ -39,4 +39,9 @@
     </div> <!-- /container -->
 
   </body>
+  <script>
+{% block extra_js %}
+
+{% endblock %}
+  </script>
 </html>

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

 {% extends "dashboard/base.html" %}
 {% load i18n %}
+{% load render_table from django_tables2 %}
 {% block content %}
 
+<div class="alert alert-info">
+  Tip of the day: you can select multiple vm instances while holding down the <strong>CTRL</strong> button!
+</div>
+
 <div class="row">
   <div class="col-md-12">
     <div class="panel panel-default">
@@ -9,39 +14,124 @@
         <h3 class="no-margin"><i class="icon-desktop"></i> Your virtual machines</h3>
       </div>
       <div class="panel-body">
-        <table class="table table-striped table-bordered">
+        <table class="table table-bordered table-striped table-hover vm-list-table">
           <thead>
             <tr>
-              <td style="width: 10px;"><input type="checkbox"/></td>
+              <!--<td style="width: 10px;"><input type="checkbox" id="check_all"/></td> -->
+              <td style="width: 10px;">Id</td>
               <td>Name</td>
               <td>State</td>
               <td>Suspend in</td>
               <td>Delete in</td>
+              <td style="width: 130px;">Admin</td>
+              <td style="width: 10px;">Details</td>
               <td style="width: 10px;">Actions</td>
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <td><input type="checkbox"/></td>
-              <td><a href="">network-devenv</a></td>
-              <td>running</td>
-              <td>10 days</td>
-              <td>1 month</td>
-              <td>
-                <div class="btn-group">
-                  <button type="button" class="btn btn-xs btn-info 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>
+            {% for i in "xxxxxxxxxxxxxxxxxxxxx" %}
+            {% with forloop.counter as c %}
+                {% include "dashboard/vm-list/test-one.html" %}
+              {% endwith %}
+            {% endfor %}
           </tbody>
         </table>
       </div>
     </div>
   </div>
 </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-desktop"></i> Your virtual machines</h3>
+      </div>
+      <div class="panel-body">
+        {% render_table table %}
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<style>
+  .popover {
+    max-width: 600px;
+  }
+
+  .vm-list-selected, .vm-list-selected td {
+    background-color: #e8e8e8 !important;
+  }
+
+  .vm-list-selected:hover, .vm-list-selected:hover td {
+    background-color: #d0d0d0 !important;
+  }
+
+  .vm-list-selected td:first-child {
+    font-weight: bold;
+  }
+</style>
+{% endblock %}
+
+{% block extra_js %}
+$(function() {
+    var ctrlDown = false;
+    var ctrlKey = 17;
+
+    $(document).keydown(function(e) {
+      if (e.keyCode == ctrlKey) ctrlDown = true;
+    }).keyup(function(e) {
+      if (e.keyCode == ctrlKey) ctrlDown = false;
+    });
+
+    $('.vm-list-table').find('tr').click(function() {
+      if (ctrlDown) {
+        setRowColor($(this));
+      } else {
+        $('.vm-list-selected').removeClass('vm-list-selected');
+        $(this).addClass('vm-list-selected');
+      }
+    });
+
+    $('.vm-list-details').popover({
+      'placement': 'auto',
+      'html': true,
+      'trigger': 'hover'
+    });
+
+    $('.vm-list-connect').popover({
+      'placement': 'left',
+      'html': true,
+      'trigger': 'click'
+    });
+
+    /*
+    $('#check_all').click(function() {
+      var checked = $(this).prop('checked');
+      $('.vm-checkbox').each(function() {
+        // reverse
+        // $(this).prop('checked', !$(this).prop('checked'));
+        // set
+        $(this).prop('checked', checked);
+        setRowColor($(this))
+      })
+    });
+
+    $('.vm-checkbox').click(function() {
+      setRowColor($(this));
+    });
+    */
+
+  });
+
+
+  function setRowColor(row) {
+    if(!row.hasClass('vm-list-selected')) {
+      row.addClass('vm-list-selected');
+    } else {
+      row.removeClass('vm-list-selected');
+    }
+
+  }
 {% endblock %}

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

+sziahello

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

+admin

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

+detail
+

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

+            
+            <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>running</td>
+              <td>10 days</td>
+              <td>1 month</td>
+              <td>
+                <span 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">
+                  <i class="icon-pencil"></i>
+                </span>
+                <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/views.py

 from django.views.generic import TemplateView, DetailView
-# from django_tables2 import SingleTableView
+from django_tables2 import SingleTableView
+
+from tables import VmListTable
 
 from vm.models import Instance
 from django.core import signing
@@ -39,5 +41,7 @@ class VmDetailView(DetailView):
         return context
 
 
-class VmList(TemplateView):
+class VmList(SingleTableView):
     template_name = "dashboard/vm-list.html"
+    model = Instance
+    table_class = VmListTable