Commit af03144a by Őry Máté

Merge branch 'feature-vm-mass-op' into 'feature-mass-ops'

save resultant_state early
parents 5b01216a 48b00b23
...@@ -25,9 +25,9 @@ def handler500(request): ...@@ -25,9 +25,9 @@ def handler500(request):
ctx['error'] = exception.get_admin_text() ctx['error'] = exception.get_admin_text()
except: except:
pass pass
try: try:
resp = render_to_response("500.html", ctx, RequestContext(request)) resp = render_to_response("500.html", ctx, RequestContext(request))
except: except:
resp = render_to_response("500.html", ctx) resp = render_to_response("500.html", ctx)
resp.status_code = 500 resp.status_code = 500
return resp return resp
...@@ -552,7 +552,8 @@ class TemplateForm(forms.ModelForm): ...@@ -552,7 +552,8 @@ class TemplateForm(forms.ModelForm):
exclude = ('state', 'disks', ) exclude = ('state', 'disks', )
widgets = { widgets = {
'system': forms.TextInput, 'system': forms.TextInput,
'max_ram_size': forms.HiddenInput 'max_ram_size': forms.HiddenInput,
'parent': forms.Select(attrs={'disabled': ""}),
} }
...@@ -925,10 +926,8 @@ class TraitForm(forms.ModelForm): ...@@ -925,10 +926,8 @@ class TraitForm(forms.ModelForm):
Field('name', id="node-details-traits-input", Field('name', id="node-details-traits-input",
css_class="input-sm input-traits"), css_class="input-sm input-traits"),
Div( Div(
HTML('<input type="submit" ' Submit("submit", _("Add trait"),
'class="btn btn-default btn-sm input-traits" ' css_class="btn btn-primary btn-sm input-traits"),
'value="Add trait"/>',
),
css_class="input-group-btn", css_class="input-group-btn",
), ),
css_class="input-group", css_class="input-group",
......
$(function() {
/* rename */ /* rename */
$("#node-details-h1-name, .node-details-rename-button").click(function() { $("#node-details-h1-name, .node-details-rename-button").click(function() {
$("#node-details-h1-name").hide(); $("#node-details-h1-name").hide();
...@@ -43,26 +44,6 @@ ...@@ -43,26 +44,6 @@
return false; return false;
}); });
function changeNodeStatus(data) {
$.ajax({
type: 'POST',
url: data['url'],
headers: {"X-CSRFToken": getCookie('csrftoken')},
success: function(re, textStatus, xhr) {
if(!data['redirect']) {
selected = [];
addMessage(re['message'], 'success');
} else {
window.location.replace('/dashboard');
}
},
error: function(xhr, textStatus, error) {
addMessage('Uh oh :(', 'danger')
}
});
}
// remove trait // remove trait
$('.node-details-remove-trait').click(function() { $('.node-details-remove-trait').click(function() {
var to_remove = $(this).data("trait-pk"); var to_remove = $(this).data("trait-pk");
...@@ -86,3 +67,24 @@ function changeNodeStatus(data) { ...@@ -86,3 +67,24 @@ function changeNodeStatus(data) {
}); });
return false; return false;
}); });
});
function changeNodeStatus(data) {
$.ajax({
type: 'POST',
url: data['url'],
headers: {"X-CSRFToken": getCookie('csrftoken')},
success: function(re, textStatus, xhr) {
if(!data['redirect']) {
selected = [];
addMessage(re['message'], 'success');
} else {
window.location.replace('/dashboard');
}
},
error: function(xhr, textStatus, error) {
addMessage('Uh oh :(', 'danger')
}
});
}
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');
}
}
...@@ -22,7 +22,7 @@ from django_tables2 import Table, A ...@@ -22,7 +22,7 @@ from django_tables2 import Table, A
from django_tables2.columns import (TemplateColumn, Column, BooleanColumn, from django_tables2.columns import (TemplateColumn, Column, BooleanColumn,
LinkColumn) LinkColumn)
from vm.models import Instance, Node, InstanceTemplate, Lease from vm.models import Node, InstanceTemplate, Lease
from django.utils.translation import ugettext_lazy as _ from django.utils.translation import ugettext_lazy as _
from django_sshkey.models import UserKey from django_sshkey.models import UserKey
...@@ -35,16 +35,11 @@ class NodeListTable(Table): ...@@ -35,16 +35,11 @@ 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(
verbose_name="Host",
)
enabled = BooleanColumn( enabled = BooleanColumn(
verbose_name="Enabled",
attrs={'th': {'class': 'node-list-table-thin'}}, attrs={'th': {'class': 'node-list-table-thin'}},
) )
...@@ -54,28 +49,28 @@ class NodeListTable(Table): ...@@ -54,28 +49,28 @@ class NodeListTable(Table):
) )
priority = Column( priority = Column(
verbose_name=_("Priority"),
attrs={'th': {'class': 'node-list-table-thin'}}, attrs={'th': {'class': 'node-list-table-thin'}},
) )
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'}},
) )
monitor = TemplateColumn( monitor = TemplateColumn(
verbose_name=_("Monitor"),
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(
verbose_name=_("Actions"),
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:
...@@ -141,52 +136,14 @@ class UserListTable(Table): ...@@ -141,52 +136,14 @@ class UserListTable(Table):
fields = ('pk', 'username', ) fields = ('pk', 'username', )
class NodeVmListTable(Table):
pk = TemplateColumn(
template_name='dashboard/vm-list/column-id.html',
verbose_name="ID",
attrs={'th': {'class': 'vm-list-table-thin'}},
)
name = TemplateColumn(
template_name="dashboard/vm-list/column-name.html"
)
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(
'{{ record.time_of_suspend|timeuntil }}',
verbose_name=_("Suspend in"))
time_of_delete = TemplateColumn(
'{{ record.time_of_delete|timeuntil }}',
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', )
class UserListTablex(Table): class UserListTablex(Table):
class Meta: class Meta:
model = User model = User
class TemplateListTable(Table): class TemplateListTable(Table):
name = LinkColumn( name = TemplateColumn(
'dashboard.views.template-detail', template_name="dashboard/template-list/column-template-name.html",
args=[A('pk')],
attrs={'th': {'data-sort': "string"}} attrs={'th': {'data-sort': "string"}}
) )
num_cores = Column( num_cores = Column(
...@@ -194,23 +151,31 @@ class TemplateListTable(Table): ...@@ -194,23 +151,31 @@ class TemplateListTable(Table):
attrs={'th': {'data-sort': "int"}} attrs={'th': {'data-sort': "int"}}
) )
ram_size = TemplateColumn( ram_size = TemplateColumn(
"{{ record.ram_size }} Mb", "{{ record.ram_size }} MiB",
attrs={'th': {'data-sort': "string"}} attrs={'th': {'data-sort': "int"}},
) )
lease = TemplateColumn( lease = TemplateColumn(
"{{ record.lease.name }}", "{{ record.lease.name }}",
verbose_name=_("Lease"), verbose_name=_("Lease"),
attrs={'th': {'data-sort': "string"}} attrs={'th': {'data-sort': "string"}}
) )
arch = Column(
attrs={'th': {'data-sort': "string"}}
)
system = Column( system = Column(
attrs={'th': {'data-sort': "string"}} attrs={'th': {'data-sort': "string"}}
) )
access_method = Column( access_method = Column(
attrs={'th': {'data-sort': "string"}} attrs={'th': {'data-sort': "string"}}
) )
owner = TemplateColumn(
template_name="dashboard/template-list/column-template-owner.html",
verbose_name=_("Owner"),
attrs={'th': {'data-sort': "string"}}
)
running = TemplateColumn(
template_name="dashboard/template-list/column-template-running.html",
verbose_name=_("Running"),
attrs={'th': {'data-sort': "int"}},
orderable=False,
)
actions = TemplateColumn( actions = TemplateColumn(
verbose_name=_("Actions"), verbose_name=_("Actions"),
template_name="dashboard/template-list/column-template-actions.html", template_name="dashboard/template-list/column-template-actions.html",
...@@ -222,8 +187,8 @@ class TemplateListTable(Table): ...@@ -222,8 +187,8 @@ class TemplateListTable(Table):
model = InstanceTemplate model = InstanceTemplate
attrs = {'class': ('table table-bordered table-striped table-hover' attrs = {'class': ('table table-bordered table-striped table-hover'
' template-list-table')} ' template-list-table')}
fields = ('name', 'num_cores', 'ram_size', 'arch', fields = ('name', 'num_cores', 'ram_size', 'system',
'system', 'access_method', 'lease', 'actions', ) 'access_method', 'lease', 'owner', 'running', 'actions', )
prefix = "template-" prefix = "template-"
......
...@@ -54,11 +54,13 @@ ...@@ -54,11 +54,13 @@
<div class="row"> <div class="row">
<div class="col-md-2" id="node-info-pane"> <div class="col-md-2" id="node-info-pane">
<div id="node-info-data" class="big"> <div id="node-info-data" class="big">
<span id="node-details-state" class="label {% if node.state == 'ONLINE' %}label-success <span id="node-details-state" class="label
{% elif node.state == 'MISSING' %}label-danger {% if node.state == 'ONLINE' %}label-success
{% elif node.state == 'DISABLED' %}label-warning {% elif node.state == 'MISSING' %}label-danger
{% elif node.state == 'OFFLINE' %}label-warning {% elif node.state == 'DISABLED' %}label-warning
{% endif %}">{{ node.get_status_display|upper }}</span> {% elif node.state == 'OFFLINE' %}label-warning{% endif %}">
<i class="fa {{ node.get_status_icon }}"></i> {{ node.get_status_display|upper }}
</span>
</div> </div>
</div> </div>
<div class="col-md-10" id="node-detail-pane"> <div class="col-md-10" id="node-detail-pane">
...@@ -67,39 +69,41 @@ ...@@ -67,39 +69,41 @@
<li class="active"> <li class="active">
<a href="#home" data-toggle="pill" class="text-center"> <a href="#home" data-toggle="pill" class="text-center">
<i class="fa fa-compass fa-2x"></i><br> <i class="fa fa-compass fa-2x"></i><br>
{% trans "Home" %}</a></li> {% trans "Home" %}
</a>
</li>
<li> <li>
<a href="#resources" data-toggle="pill" class="text-center"> <a href="#resources" data-toggle="pill" class="text-center">
<i class="fa fa-tasks fa-2x"></i><br> <i class="fa fa-tasks fa-2x"></i><br>
{% trans "Resources" %}</a></li> {% trans "Resources" %}
</a>
</li>
<li> <li>
<a href="#virtualmachines" data-toggle="pill" class="text-center"> <a href="{% url "dashboard.views.vm-list" %}?s=node:{{ node.name }}"
target="blank" class="text-center">
<i class="fa fa-desktop fa-2x"></i><br> <i class="fa fa-desktop fa-2x"></i><br>
{% trans "Virtual Machines" %}</a></li> {% trans "Virtual Machines" %}
</a>
</li>
<li> <li>
<a href="#activity" data-toggle="pill" class="text-center"> <a href="#activity" data-toggle="pill" class="text-center">
<i class="fa fa-clock-o fa-2x"></i><br> <i class="fa fa-clock-o fa-2x"></i><br>
{% trans "Activity" %}</a></li> {% trans "Activity" %}
</a>
</li>
</ul> </ul>
<div id="panel-body" class="tab-content panel-body"> <div id="panel-body" class="tab-content panel-body">
<div class="tab-pane active" id="home">{% include "dashboard/node-detail/home.html" %}</div> <div class="tab-pane active" id="home">{% include "dashboard/node-detail/home.html" %}</div>
<div class="tab-pane" id="resources">{% include "dashboard/node-detail/resources.html" %}</div> <div class="tab-pane" id="resources">{% include "dashboard/node-detail/resources.html" %}</div>
<div class="tab-pane" id="activity">{% include "dashboard/node-detail/activity.html" %}</div> <div class="tab-pane" id="activity">{% include "dashboard/node-detail/activity.html" %}</div>
<div class="tab-pane" id="virtualmachines">{% include "dashboard/node-detail/vm.html" %}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style>
.popover {
max-width: 600px;
}
</style>
{% endblock %} {% endblock %}
{% block extra_js %} {% block extra_js %}
<script src="{{ STATIC_URL}}dashboard/node-details.js"></script> <script src="{{ STATIC_URL}}dashboard/node-details.js"></script>
{% endblock %} {% endblock %}
...@@ -5,15 +5,17 @@ ...@@ -5,15 +5,17 @@
<span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}"> <span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}">
<i class="fa {% if not a.finished %}fa-refresh fa-spin {% else %}fa-plus{% endif %}"></i> <i class="fa {% if not a.finished %}fa-refresh fa-spin {% else %}fa-plus{% endif %}"></i>
</span> </span>
<strong>{% if user.is_superuser %} <strong title="{{ a.result.get_admin_text }}">
{{ a.readable_name.get_admin_text }} {{ a.readable_name.get_admin_text|capfirst }}
{% else %} </strong>
{{ a.readable_name.get_user_text }}{% endif %}</strong>
{{ a.started|date:"Y-m-d H:i" }}, {{ a.user }} {{ a.started|date:"Y-m-d H:i" }}, {{ a.user }}
{% if a.children.count > 0 %} {% if a.children.count > 0 %}
<div class="sub-timeline"> <div class="sub-timeline">
{% for s in a.children.all %} {% for s in a.children.all %}
<div data-activity-id="{{ s.pk }}" class="sub-activity{% if s.has_failed %} sub-activity-failed{% endif %}"> <div data-activity-id="{{ s.pk }}"
class="sub-activity{% if s.has_failed %} sub-activity-failed{% endif %}"
>
{% if user.is_superuser %} {% if user.is_superuser %}
{{ s.readable_name.get_admin_text }} {{ s.readable_name.get_admin_text }}
{% else %} {% else %}
...@@ -25,7 +27,7 @@ ...@@ -25,7 +27,7 @@
<i class="fa fa-refresh fa-spin" class="sub-activity-loading-icon"></i> <i class="fa fa-refresh fa-spin" class="sub-activity-loading-icon"></i>
{% endif %} {% endif %}
{% if s.has_failed %} {% if s.has_failed %}
<div class="label label-danger">{% trans "failed" %}</div> <div title="{{ s.result.get_admin_text }}" class="label label-danger">{% trans "failed" %}</div>
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
......
...@@ -4,15 +4,25 @@ ...@@ -4,15 +4,25 @@
<dl class="dl-horizontal"> <dl class="dl-horizontal">
<dt>{% trans "Node name" %}:</dt><dd>{{ node.name }}</dd> <dt>{% trans "Node name" %}:</dt><dd>{{ node.name }}</dd>
<dt>{% trans "CPU cores" %}:</dt><dd>{{ node.info.core_num }}</dd> <dt>{% trans "CPU cores" %}:</dt><dd>{{ node.info.core_num }}</dd>
<dt>{% trans "RAM size" %}:</dt> <dd>{% widthratio node.info.ram_size 1048576 1 %} MB</dd> <dt>{% trans "RAM size" %}:</dt> <dd>{% widthratio node.info.ram_size 1048576 1 %} MiB</dd>
<dt>{% trans "Architecture" %}:</dt><dd>{{ node.info.architecture }}</dd> <dt>{% trans "Architecture" %}:</dt><dd>{{ node.info.architecture }}</dd>
<dt>{% trans "Host IP" %}:</dt><dd>{{ node.host.ipv4 }}</dd> <dt>{% trans "Host IP" %}:</dt><dd>{{ node.host.ipv4 }}</dd>
<dt>{% trans "Enabled" %}:</dt><dd>{{ node.enabled }}</dd> <dt>{% trans "Enabled" %}:</dt><dd>{{ node.enabled }}</dd>
<dt>{% trans "Host online" %}:</dt><dd> {{ node.online }}</dd> <dt>{% trans "Host online" %}:</dt><dd> {{ node.online }}</dd>
<dt>{% trans "Priority" %}:</dt><dd>{{ node.priority }}</dd> <dt>{% trans "Priority" %}:</dt><dd>{{ node.priority }}</dd>
<dt>{% trans "Host owner" %}:</dt><dd>{{ node.host.owner }}</dd> <dt>{% trans "Host owner" %}:</dt>
<dd>
{% include "dashboard/_display-name.html" with user=node.host.owner show_org=True %}
</dd>
<dt>{% trans "Vlan" %}:</dt><dd>{{ node.host.vlan }}</dd> <dt>{% trans "Vlan" %}:</dt><dd>{{ node.host.vlan }}</dd>
<dt>{% trans "Host name" %}:</dt><dd>{{ node.host.hostname }}</dd> <dt>{% trans "Host name" %}:</dt>
<dd>
{{ node.host.hostname }}
<a href="{{ node.host.get_absolute_url }}" class="btn btn-default btn-xs">
<i class="fa fa-pencil"></i>
{% trans "Edit host" %}
</a>
</dd>
</dl> </dl>
{% block extra_js %} {% block extra_js %}
......
{% load render_table from django_tables2 %}
{% block content %}
<div class="panel-body">
{% render_table table %}
</div>
{% endblock %}
<script>
"use strict";
$('a[data-toggle$="pill"][href!="#virtualmachines"]').click(function() {
$("#node-info-pane").fadeIn();
$("#node-detail-pane").removeClass("col-md-12");
});
$('a[href$="virtualmachines"]').click(function() {
$("#node-info-pane").hide();
$("#node-detail-pane").addClass("col-md-12");
});
</script>
{% block extra_js %}
<script src="{{ STATIC_URL}}dashboard/vm-list.js"></script>
{% endblock %}
...@@ -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 %}