Skip to content

Gyuricska Milán / cloud

Go to a project
Commit f32bb4ec by Kálmán Viktor
Options

dashboard: vm instance list with static data

parent 283da340
Showing with 198 additions and 22 deletions
circle/dashboard/tables.py 0 → 100644
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 @@ ...@@ -39,4 +39,9 @@
</div> <!-- /container --> </div> <!-- /container -->
</body> </body>
<script>
{% block extra_js %}
{% endblock %}
</script>
</html> </html>
circle/dashboard/templates/dashboard/vm-list.html
{% extends "dashboard/base.html" %} {% extends "dashboard/base.html" %}
{% load i18n %} {% load i18n %}
{% load render_table from django_tables2 %}
{% block content %} {% 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="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default"> <div class="panel panel-default">
...@@ -9,39 +14,124 @@ ...@@ -9,39 +14,124 @@
<h3 class="no-margin"><i class="icon-desktop"></i> Your virtual machines</h3> <h3 class="no-margin"><i class="icon-desktop"></i> Your virtual machines</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<table class="table table-striped table-bordered"> <table class="table table-bordered table-striped table-hover vm-list-table">
<thead> <thead>
<tr> <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>Name</td>
<td>State</td> <td>State</td>
<td>Suspend in</td> <td>Suspend in</td>
<td>Delete in</td> <td>Delete in</td>
<td style="width: 130px;">Admin</td>
<td style="width: 10px;">Details</td>
<td style="width: 10px;">Actions</td> <td style="width: 10px;">Actions</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> {% for i in "xxxxxxxxxxxxxxxxxxxxx" %}
<td><input type="checkbox"/></td> {% with forloop.counter as c %}
<td><a href="">network-devenv</a></td> {% include "dashboard/vm-list/test-one.html" %}
<td>running</td> {% endwith %}
<td>10 days</td> {% endfor %}
<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>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</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 %} {% endblock %}
circle/dashboard/templates/dashboard/vm-list/test-one.html 0 → 100644
<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.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 vm.models import Instance
from django.core import signing from django.core import signing
...@@ -39,5 +41,7 @@ class VmDetailView(DetailView): ...@@ -39,5 +41,7 @@ class VmDetailView(DetailView):
return context return context
class VmList(TemplateView): class VmList(SingleTableView):
template_name = "dashboard/vm-list.html" template_name = "dashboard/vm-list.html"
model = Instance
table_class = VmListTable
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment