Skip to content

CIRCLE / cloud

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

dashboard: fix UI in vm listing

parent c0ad4f0b
Showing with 79 additions and 15 deletions
circle/dashboard/tables.py
...@@ -6,12 +6,27 @@ from django.utils.translation import ugettext_lazy as _ ...@@ -6,12 +6,27 @@ from django.utils.translation import ugettext_lazy as _
class VmListTable(Table): class VmListTable(Table):
name = LinkColumn('dashboard.views.detail', args=[A('pk')]) pk = Column(
admin = TemplateColumn(template_name='dashboard/vm-list/column-admin.html') verbose_name="ID",
details = TemplateColumn(template_name= attrs={'th': {'class': 'vm-list-table-thin'}},
'dashboard/vm-list/column-details.html') )
actions = TemplateColumn(template_name= name = LinkColumn(
'dashboard/vm-list/column-actions.html') '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( time_of_suspend = TemplateColumn(
'{{ record.time_of_suspend|timesince }}', '{{ record.time_of_suspend|timesince }}',
verbose_name=_("Suspend in")) verbose_name=_("Suspend in"))
......
circle/dashboard/templates/dashboard/vm-list.html
...@@ -71,6 +71,14 @@ ...@@ -71,6 +71,14 @@
.vm-list-selected td:first-child { .vm-list-selected td:first-child {
font-weight: bold; font-weight: bold;
} }
.vm-list-table-thin {
width: 10px;
}
.vm-list-table-admin {
width: 130px;
}
</style> </style>
{% endblock %} {% endblock %}
...@@ -106,6 +114,15 @@ $(function() { ...@@ -106,6 +114,15 @@ $(function() {
'trigger': 'click' '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() { $('#check_all').click(function() {
var checked = $(this).prop('checked'); 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 @@ ...@@ -2,17 +2,17 @@
<tr> <tr>
<!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>--> <!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>-->
<td>182{{ 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>running</td>
<td>10 days</td> <td>10 days</td>
<td>1 month</td> <td>1 month</td>
<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> <i class="icon-truck"></i>
</span> </a>
<span class="btn btn-default btn-xs" title data-original-title="Rename"> <a class="btn btn-default btn-xs" title data-original-title="Rename">
<i class="icon-pencil"></i> <i class="icon-pencil"></i>
</span> </a>
<a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover" <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
data-content=' data-content='
Belépés: <input style="width: 300px;" type="text" class="form-control" value="ssh cloud@vm.ik.bme.hu -p22312"/> 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): ...@@ -45,3 +45,4 @@ class VmList(SingleTableView):
template_name = "dashboard/vm-list.html" template_name = "dashboard/vm-list.html"
model = Instance model = Instance
table_class = VmListTable table_class = VmListTable
table_pagination = False
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