From f32bb4ec536795867b47a8e8bee1b4e867943d76 Mon Sep 17 00:00:00 2001
From: Kálmán Viktor <kviktor@cloud.bme.hu>
Date: Thu, 26 Sep 2013 13:40:09 +0200
Subject: [PATCH] dashboard: vm instance list with static data
---
circle/dashboard/tables.py | 24 ++++++++++++++++++++++++
circle/dashboard/templates/dashboard/base.html | 5 +++++
circle/dashboard/templates/dashboard/vm-list.html | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------
circle/dashboard/templates/dashboard/vm-list/column-actions.html | 1 +
circle/dashboard/templates/dashboard/vm-list/column-admin.html | 1 +
circle/dashboard/templates/dashboard/vm-list/column-details.html | 2 ++
circle/dashboard/templates/dashboard/vm-list/test-one.html | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
circle/dashboard/views.py | 8 ++++++--
8 files changed, 198 insertions(+), 22 deletions(-)
create mode 100644 circle/dashboard/tables.py
create mode 100644 circle/dashboard/templates/dashboard/vm-list/column-actions.html
create mode 100644 circle/dashboard/templates/dashboard/vm-list/column-admin.html
create mode 100644 circle/dashboard/templates/dashboard/vm-list/column-details.html
create mode 100644 circle/dashboard/templates/dashboard/vm-list/test-one.html
diff --git a/circle/dashboard/tables.py b/circle/dashboard/tables.py
new file mode 100644
index 0000000..d1d544d
--- /dev/null
+++ b/circle/dashboard/tables.py
@@ -0,0 +1,24 @@
+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', )
diff --git a/circle/dashboard/templates/dashboard/base.html b/circle/dashboard/templates/dashboard/base.html
index 089d55a..6d2136b 100644
--- a/circle/dashboard/templates/dashboard/base.html
+++ b/circle/dashboard/templates/dashboard/base.html
@@ -39,4 +39,9 @@
</div> <!-- /container -->
</body>
+ <script>
+{% block extra_js %}
+
+{% endblock %}
+ </script>
</html>
diff --git a/circle/dashboard/templates/dashboard/vm-list.html b/circle/dashboard/templates/dashboard/vm-list.html
index f9e04b0..924159c 100644
--- a/circle/dashboard/templates/dashboard/vm-list.html
+++ b/circle/dashboard/templates/dashboard/vm-list.html
@@ -1,7 +1,12 @@
{% 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 %}
diff --git a/circle/dashboard/templates/dashboard/vm-list/column-actions.html b/circle/dashboard/templates/dashboard/vm-list/column-actions.html
new file mode 100644
index 0000000..8884fa7
--- /dev/null
+++ b/circle/dashboard/templates/dashboard/vm-list/column-actions.html
@@ -0,0 +1 @@
+sziahello
diff --git a/circle/dashboard/templates/dashboard/vm-list/column-admin.html b/circle/dashboard/templates/dashboard/vm-list/column-admin.html
new file mode 100644
index 0000000..7fbe952
--- /dev/null
+++ b/circle/dashboard/templates/dashboard/vm-list/column-admin.html
@@ -0,0 +1 @@
+admin
diff --git a/circle/dashboard/templates/dashboard/vm-list/column-details.html b/circle/dashboard/templates/dashboard/vm-list/column-details.html
new file mode 100644
index 0000000..a3bdf9d
--- /dev/null
+++ b/circle/dashboard/templates/dashboard/vm-list/column-details.html
@@ -0,0 +1,2 @@
+detail
+
diff --git a/circle/dashboard/templates/dashboard/vm-list/test-one.html b/circle/dashboard/templates/dashboard/vm-list/test-one.html
new file mode 100644
index 0000000..ab02aee
--- /dev/null
+++ b/circle/dashboard/templates/dashboard/vm-list/test-one.html
@@ -0,0 +1,49 @@
+
+ <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>
diff --git a/circle/dashboard/views.py b/circle/dashboard/views.py
index 83e41ee..53318fe 100644
--- a/circle/dashboard/views.py
+++ b/circle/dashboard/views.py
@@ -1,5 +1,7 @@
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
--
libgit2 0.26.0