Skip to content

Gutyán Gábor / circlestack

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

dashboard: node list cleanup 

Closes #240
parent aef328d4
Showing with 45 additions and 240 deletions
circle/dashboard/static/dashboard/node-list.js
var ctrlDown, shiftDown = false;
var ctrlKey = 17;
var shiftKey = 16;
var selected = [];
$(function() { $(function() {
$(document).keydown(function(e) { $(document).ready( function() {
if (e.keyCode == ctrlKey) ctrlDown = true;
if (e.keyCode == shiftKey) shiftDown = true;
}).keyup(function(e) {
if (e.keyCode == ctrlKey) ctrlDown = false;
if (e.keyCode == shiftKey) shiftDown = false;
});
$('.node-list-table tbody').find('tr').mousedown(function() {
var retval = true;
if (ctrlDown) {
setRowColor($(this));
if(!$(this).hasClass('node-list-selected')) {
selected.splice(selected.indexOf($(this).index()), 1);
} else {
selected.push($(this).index());
}
retval = false;
} else if(shiftDown) {
if(selected.length > 0) {
start = selected[selected.length - 1] + 1;
end = $(this).index();
if(start > end) {
var tmp = start - 1; start = end; end = tmp - 1;
}
for(var i = start; i <= end; i++) {
if(selected.indexOf(i) < 0) {
selected.push(i);
setRowColor($('.node-list-table tbody tr').eq(i));
}
}
}
retval = false;
} else {
$('.node-list-selected').removeClass('node-list-selected');
$(this).addClass('node-list-selected');
selected = [$(this).index()];
}
// reset btn disables
$('.node-list-table tbody tr .btn').attr('disabled', false);
// show/hide group controls
if(selected.length > 1) {
$('.node-list-group-control a').attr('disabled', false);
for(var i = 0; i < selected.length; i++) {
$('.node-list-table tbody tr').eq(selected[i]).find('.btn').attr('disabled', true);
}
} else {
$('.node-list-group-control a').attr('disabled', true);
}
return retval;
});
$('#node-list-group-migrate').click(function() {
console.log(collectIds(selected));
});
$(document).ready( function()
{
colortable(); colortable();
$('.node-list-details').popover(
{
placement : 'auto',
html : true,
trigger : 'click',
});
});
$('tbody a').mousedown(function(e) {
// parent tr doesn't get selected when clicked
e.stopPropagation();
});
$('tbody a').click(function(e) {
// browser doesn't jump to top when clicked the buttons
if(!$(this).hasClass('real-link')) {
return false;
}
}); });
// find disabled nodes, set danger (red) on the rows // find disabled nodes, set danger (red) on the rows
...@@ -176,51 +91,4 @@ $(function() { ...@@ -176,51 +91,4 @@ $(function() {
}); });
return false; return false;
}); });
/* group actions */
/* select all */
$('#node-list-group-select-all').click(function() {
$('.node-list-table tbody tr').each(function() {
var index = $(this).index();
if(selected.indexOf(index) < 0) {
selected.push(index);
$(this).addClass('node-list-selected');
}
});
if(selected.length > 0)
$('.node-list-group-control a').attr('disabled', false);
return false;
});
/* mass vm delete */
$('#node-list-group-delete').click(function() {
addModalConfirmation(massDeleteVm,
{
'url': '/dashboard/node/mass-delete/',
'data': {
'selected': selected,
'v': collectIds(selected)
}
}
);
return false;
});
}); });
function collectIds(rows) {
var ids = [];
for(var i = 0; i < rows.length; i++) {
var div = $('td:first-child div', $('.node-list-table tbody tr').eq(rows[i]));
ids.push(div.prop('id').replace('node-', ''));
}
return ids;
}
function setRowColor(row) {
if(!row.hasClass('node-list-selected')) {
row.addClass('node-list-selected');
} else {
row.removeClass('node-list-selected');
}
}
circle/dashboard/tables.py
...@@ -35,16 +35,16 @@ class NodeListTable(Table): ...@@ -35,16 +35,16 @@ class NodeListTable(Table):
) )
overcommit = Column( overcommit = Column(
verbose_name="Overcommit", verbose_name=_("Overcommit"),
attrs={'th': {'class': 'node-list-table-thin'}}, attrs={'th': {'class': 'node-list-table-thin'}},
) )
host = Column( host = Column(
verbose_name="Host", verbose_name=_("Host"),
) )
enabled = BooleanColumn( enabled = BooleanColumn(
verbose_name="Enabled", verbose_name=_("Enabled"),
attrs={'th': {'class': 'node-list-table-thin'}}, attrs={'th': {'class': 'node-list-table-thin'}},
) )
...@@ -59,6 +59,7 @@ class NodeListTable(Table): ...@@ -59,6 +59,7 @@ class NodeListTable(Table):
) )
number_of_VMs = TemplateColumn( number_of_VMs = TemplateColumn(
verbose_name=_("Number of VMs"),
template_name='dashboard/node-list/column-vm.html', template_name='dashboard/node-list/column-vm.html',
attrs={'th': {'class': 'node-list-table-thin'}}, attrs={'th': {'class': 'node-list-table-thin'}},
) )
...@@ -66,16 +67,14 @@ class NodeListTable(Table): ...@@ -66,16 +67,14 @@ class NodeListTable(Table):
monitor = TemplateColumn( monitor = TemplateColumn(
template_name='dashboard/node-list/column-monitor.html', template_name='dashboard/node-list/column-monitor.html',
attrs={'th': {'class': 'node-list-table-monitor'}}, attrs={'th': {'class': 'node-list-table-monitor'}},
orderable=False,
) )
details = TemplateColumn(
template_name='dashboard/node-list/column-details.html',
attrs={'th': {'class': 'node-list-table-thin'}},
)
actions = TemplateColumn( actions = TemplateColumn(
attrs={'th': {'class': 'node-list-table-thin'}}, attrs={'th': {'class': 'node-list-table-thin'}},
template_code=('{% include "dashboard/node-list/column-' template_code=('{% include "dashboard/node-list/column-'
'actions.html" with btn_size="btn-xs" %}'), 'actions.html" with btn_size="btn-xs" %}'),
orderable=False,
) )
class Meta: class Meta:
......
circle/dashboard/templates/dashboard/node-list.html
...@@ -12,35 +12,24 @@ ...@@ -12,35 +12,24 @@
<div class="panel-heading"> <div class="panel-heading">
<h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Compute nodes" %}</h3> <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Compute nodes" %}</h3>
</div> </div>
<div id="table_container"> <div id="table_container">
<div id="rendered_table" class="panel-body"> <div id="rendered_table" class="panel-body">
{% render_table table %} {% render_table table %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style>
.node-list-table tbody>tr>td { <style>
.node-list-table tbody>tr>td, .node-list-table thead>tr>th {
vertical-align: middle; vertical-align: middle;
} }
.popover { .node-list-table thead>tr>th,
max-width: 600px; .node-list-table .enabled, .node-list-table .priority,
} .node-list-table .overcommit, .node-list-table .number_of_VMs {
text-align: center;
.node-list-selected, .node-list-selected td {
background-color: #e8e8e8 !important;
}
.node-list-selected:hover, .node-list-selected:hover td {
background-color: #d0d0d0 !important;
}
.node-list-selected td:first-child {
font-weight: bold;
} }
.node-list-table-thin { .node-list-table-thin {
...@@ -54,5 +43,5 @@ ...@@ -54,5 +43,5 @@
{% endblock %} {% endblock %}
{% block extra_js %} {% block extra_js %}
<script src="{{ STATIC_URL}}dashboard/node-list.js"></script> <script src="{{ STATIC_URL}}dashboard/node-list.js"></script>
{% endblock %} {% endblock %}
circle/dashboard/templates/dashboard/node-list/column-actions.html
{% load i18n %} {% load i18n %}
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button> <button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu nojs-dropdown-toogle" role="menu"> <ul class="dropdown-menu nojs-dropdown-toogle" role="menu">
<li><a href="#" class="node-details-rename-button"><i class="fa fa-pencil"></i> {% trans "Rename" %}</a></li> <li>
<li><a data-node-pk="{{ record.pk }}" class="real-link node-flush" href="{% url "dashboard.views.flush-node" pk=record.pk %}"><i class="fa fa-cloud-upload"></i>{% trans "Flush" %}</a> <a href="#" class="node-details-rename-button">
<li><a style={% if record.enabled %}"display:none"{% else %}"display:block"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-check"></i>{% trans "Enable" %}</a> <i class="fa fa-pencil"></i> {% trans "Rename" %}
<a style={% if record.enabled %}"display:block"{% else %}"display:none"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-times"></i>{% trans "Disable" %}</a></li> </a>
<li><a data-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-trash"></i>{% trans "Delete" %}</a></li> </li>
</ul> <li>
<a data-node-pk="{{ record.pk }}" class="real-link node-flush" href="{% url "dashboard.views.flush-node" pk=record.pk %}">
<i class="fa fa-cloud-upload"></i> {% trans "Flush" %}
</a>
</li>
<li>
<a style={% if record.enabled %}"display:none"{% else %}"display:block"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}">
<i class="fa fa-check"></i> {% trans "Enable" %}
</a>
</li>
<li>
<a style={% if record.enabled %}"display:block"{% else %}"display:none"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}">
<i class="fa fa-times"></i> {% trans "Disable" %}
</a>
</li>
<li>
<a data-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}">
<i class="fa fa-trash-o"></i> {% trans "Delete" %}
</a>
</li>
</ul>
</div> </div>
circle/dashboard/templates/dashboard/node-list/column-admin.html deleted 100644 → 0
{% load i18n %}
<a class="btn btn-default btn-xs" title="{% trans "Flush" %}">
<i class="fa fa-cloud-upload"></i>
</a>
<a id="node-list-rename-button" class="btn btn-default btn-xs" title="{% trans "Rename" %}">
<i class="fa fa-pencil"></i>
</a>
circle/dashboard/templates/dashboard/node-list/column-details.html deleted 100644 → 0
<a class="btn btn-info btn-xs node-list-details" rel="popover" 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>{% widthratio record.ram_size 1048576 1 %} MB</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/node-list/column-id.html deleted 100644 → 0
<div id="node-{{ record.pk }}">{{ record.pk }}</div>
circle/dashboard/templates/dashboard/node-list/test-one.html deleted 100644 → 0
<tr>
<!--<td><input type="checkbox"/ class="vm-checkbox" id="vm-1825{{ c }}"></td>-->
<td>
<div id="vm-1{{ c }}">1{{ c }}</div>
</td>
<td><a href="" class="real-link">network-devenv</a></td>
<td>running</td>
<td>10 days</td>
<td>1 month</td>
<td>
<a class="btn btn-default btn-xs" title data-original-title="Migrate">
<i class="fa fa-truck"></i>
</a>
<a class="btn btn-default btn-xs" title data-original-title="Rename">
<i class="fa fa-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>
</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 nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
<ul class="nojs-dropdown-menu dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
<li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
<li><a href="#"><i class="fa fa-times"></i> Discard</a></li>
</ul>
</div>
</td>
</tr>
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