Skip to content

CIRCLE / cloud

Go to a project
Commit c369ff1e by Őry Máté
Options

Merge branch 'feature-jsmenu' into 'master' 

Feature Jsmenu

fixed:
seperating node-list-action button and node-detail-action button
dropdown menu now uses js, css fallback
Node status changer templates, view, javascript
Node rename js, view
some missing trans
issue 86
fix index-nodes buttons colorchanging

todo:
check and fix more trans
parents 217564f6 3367ab7b
Showing with 214 additions and 86 deletions
circle/dashboard/static/dashboard/dashboard.css
......@@ -303,33 +303,27 @@ a.hover-black {
}
.dropdown-menu
.nojs-dropdown-menu
{
position:absolute;
display:none;
z-index: 1;
position:absolute;
display:none;
z-index: 1;
}
.dropdown-toggle:focus + .dropdown-menu
.nojs-dropdown-toggle:focus + .nojs-dropdown-menu
{
display: block;
display: block;
}
.dropdown-toggle:focus
.nojs-dropdown-toggle:focus
{
outline:none;
outline:none;
}
.dropdown-menu:hover{
display: block;
.nojs-dropdown-menu:hover
{
display: block;
}
.notification-messages {
......
circle/dashboard/static/dashboard/dashboard.js
......@@ -137,7 +137,7 @@ $(function () {
return false;
});
/* for Node removes buttons */
/* for Group removes buttons */
$('.group-delete').click(function() {
var group_pk = $(this).data('group-pk');
var dir = window.location.pathname.indexOf('list') == -1;
......@@ -151,19 +151,6 @@ $(function () {
return false;
});
/* for Group removes buttons */
$('.group-delete').click(function() {
var group_pk = $(this).data('group-pk');
var dir = window.location.pathname.indexOf('list') == -1;
addModalConfirmation(deleteGroup,
{ 'url': '/dashboard/group/delete/' + group_pk + '/',
'data': [],
'group_pk': group_pk,
'redirect': dir});
return false;
});
/* search for vms */
var my_vms = []
$("#dashboard-vm-search-input").keyup(function(e) {
......
circle/dashboard/static/dashboard/group-details.js 0 → 100644
/* rename */
$("#group-details-h1-name, .group-details-rename-button").click(function() {
$("#group-details-h1-name").hide();
$("#group-details-rename").css('display', 'inline');
$("#group-details-rename-name").focus();
});
/* rename ajax */
$('#group-details-rename-submit').click(function() {
var name = $('#group-details-rename-name').val();
$.ajax({
method: 'POST',
url: location.href,
data: {'new_name': name},
headers: {"X-CSRFToken": getCookie('csrftoken')},
success: function(data, textStatus, xhr) {
$("#group-details-h1-name").html(data['new_name']).show();
$('#group-details-rename').hide();
// addMessage(data['message'], "success");
},
error: function(xhr, textStatus, error) {
addMessage("Error during renaming!", "danger");
}
});
return false;
});
circle/dashboard/static/dashboard/node-details.js 0 → 100644
/* rename */
$("#node-details-h1-name, .node-details-rename-button").click(function() {
$("#node-details-h1-name").hide();
$("#node-details-rename").css('display', 'inline');
$("#node-details-rename-name").focus();
});
/* rename ajax */
$('#node-details-rename-submit').click(function() {
var name = $('#node-details-rename-name').val();
$.ajax({
method: 'POST',
url: location.href,
data: {'new_name': name},
headers: {"X-CSRFToken": getCookie('csrftoken')},
success: function(data, textStatus, xhr) {
$("#node-details-h1-name").html(data['new_name']).show();
$('#node-details-rename').hide();
// addMessage(data['message'], "success");
},
error: function(xhr, textStatus, error) {
addMessage("Error during renaming!", "danger");
}
});
return false;
});
/* for Node removes buttons */
$('.node-enable').click(function() {
var node_pk = $(this).data('node-pk');
var dir = window.location.pathname.indexOf('list') == -1;
addModalConfirmation(changeNodeStatus,
{ 'url': '/dashboard/node/status/' + node_pk + '/',
'data': [],
'pk': node_pk,
'type': "node",
'redirect': dir});
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');
$('a[data-'+data['type']+'-pk="' + data['pk'] + '"]').closest('tr').fadeOut(function() {
$(this).remove();
});
} else {
window.location.replace('/dashboard');
}
},
error: function(xhr, textStatus, error) {
addMessage('Uh oh :(', 'danger')
}
});
}
circle/dashboard/static/dashboard/node-list.js
......@@ -162,6 +162,7 @@ $(function() {
// change big status span
$('#node-info-pane').load(location.href+" #node-info-data");
$('#activity-timeline-wrapper').load(location.href+" #activity-timeline");
}
$('#table_container').on('click','.node-enable',function() {
......@@ -173,6 +174,7 @@ $(function() {
$('#node-info-pane').on('click','.node-enable',function(){
// post, change node status
enablenode($(this).attr('data-node-pk'),$(this).attr('data-status'),enabledetailsSuccess);
return false;
});
......
circle/dashboard/templates/dashboard/confirm/ajax-node-status.html 0 → 100644
{% load i18n %}
<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
{% if text %}
{{ text }}
{% else %}
{%blocktrans with object=object%}
Are you sure you want to change <strong>{{ object }}</strong> status?
{%endblocktrans%}
{% endif %}
<div class="pull-right">
<form action="" method="POST">
{% csrf_token %}
<button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
<input type="hidden" name="change_status" value=""/>
<button class="btn btn-warning">{% blocktrans with status=status %}Yes, {{status}}{% endblocktrans %}</button>
</form>
</div>
<div class="clearfix"></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
circle/dashboard/templates/dashboard/confirm/node-status.html
......@@ -25,7 +25,7 @@
<form action="" method="POST">
{% csrf_token %}
<a class="btn btn-default">Back</a>
<input type="hidden" name="new_status" value="{{ status }}"/>
<input type="hidden" name="change_status" value=""/>
<button class="btn btn-warning">Yes, {{ status }}</button>
</form>
</div>
......
circle/dashboard/templates/dashboard/group-detail.html
......@@ -15,17 +15,17 @@
<div id="group-details-h1-name">
{{ group.name }}
</div>
</h1>
</h1>
</div>
<div class="row">
<div class="col-md-4" id="group-info-pane">
<div class="big">
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" class="group-details-rename-button"><i class="icon-pencil"></i> Rename</a></li>
<li><a data-group-pk="{{ group.pk }}" class="group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"><i class="icon-remove"></i> Discard</a></li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="nojs-dropdown-menu dropdown-menu" role="menu">
<li><a href="#" class="group-details-rename-button"><i class="icon-pencil"></i>{% trans "Rename" %}</a></li>
<li><a data-group-pk="{{ group.pk }}" class="group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"><i class="icon-remove"></i> Discard</a></li>
</ul>
</div>
</div>
</div>
......
circle/dashboard/templates/dashboard/group-list/test-one.html
......@@ -39,8 +39,8 @@
</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">
<button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="nojs-dropdown-menu 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>
......
circle/dashboard/templates/dashboard/index-nodes.html
......@@ -44,8 +44,12 @@
<p><span class="big"><big>{{ node_num.running }}</big> running </span>
+ <big>{{ node_num.missing }}</big> missing + <br><big>{{ node_num.disabled }}</big> disabled + <big>{{ node_num.offline }}</big> offline</p>
<ul class="list-inline">
{% for i in nodes %}
<a class="label {% if i.state == 'online' %}label-success{% elif i.state == 'missing' %}label-danger{% else %}label-warning{% endif %}" href="{% url "dashboard.views.node-detail" pk=i.pk %}"><i class="icon-{% if i.enabled == True %}play-sign{% else %}pause{% endif %}"></i> {{ i.name}}</a>
{% for i in nodes %}
<a class="label {% if i.state == 'ONLINE' %}label-success
{% elif i.state == 'MISSING' %}label-danger
{% elif i.state == 'DISABLED' %}label-warning
{% elif i.state == 'OFFLINE' %}label-warning
{% endif %}" href="{% url "dashboard.views.node-detail" pk=i.pk %}"><i class="icon-{% if i.enabled == True %}play-sign{% else %}pause{% endif %}"></i> {{ i.name}}</a>
{% endfor %}
</ul>
......
circle/dashboard/templates/dashboard/node-detail.html
......@@ -4,7 +4,19 @@
{% block content %}
<div class="body-content">
<div class="page-header">
<h1>{{ node.name }} <small>{{ node.get_connect_host }}</small></h1>
<h1>
<div id="node-details-rename">
<form action="" method="POST" id="node-details-rename-form">
{% csrf_token %}
<input id="node-details-rename-name" class="form-control" name="new_name" type="text" value="{{ node.name }}"/>
<button type="submit" id="node-details-rename-submit" class="btn">{% trans "Rename" %}</button>
</form>
</div>
<div id="node-details-h1-name">
{{ node.name }}
</div>
</h1>
<small>{{ node.get_connect_host }}</small>
</div>
<div class="row">
<div class="col-md-4" id="node-info-pane">
......@@ -14,11 +26,22 @@
{% elif node.state == 'DISABLED' %}label-warning
{% elif node.state == 'OFFLINE' %}label-warning
{% endif %}">{{ node.state }}</span>
<div class="btn-group">
{% with node as record %}
{% include "dashboard/node-list/column-actions.html" with btn_size="" %}
{% endwith %}
</div>
<div class="btn-group">
<button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="dropdown-menu nojs-dropdown-toogle" role="menu">
<li><a href="#" class="node-details-rename-button"><i class="icon-pencil"></i> {% trans "Rename" %}</a></li>
<li><a href="#"><i class="icon-cloud-upload"></i> Flush</a></li>
{% if node.enabled %}
<li><a style="display:none" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-check"></i> Enable</a>
<a style="display:block" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-remove"></i> Disable</a></li>
{% else %}
<li><a style="display:block" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}" >
<i class="icon-check"></i> Enable</a>
<a style="display:none" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}" ><i class="icon-remove"></i> Disable</a></li>
{% endif %}
<li><a data-node-pk="{{ node.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-trash"></i> Delete</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-8" id="node-detail-pane">
......@@ -60,6 +83,6 @@
{% endblock %}
{% block extra_js %}
<script src="{{ STATIC_URL}}dashboard/node-list.js"></script>
<script src="{{ STATIC_URL}}dashboard/node-details.js"></script>
{% endblock %}
circle/dashboard/templates/dashboard/node-detail/_activity-timeline.html
{% load i18n %}
<div id="activity-timeline" class="timeline">
{% for a in activities %}
<div class="activity" data-activity-id="{{ a.pk }}">
<span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}">
......@@ -25,3 +26,4 @@
{% endif %}
</div>
{% endfor %}
</div>
circle/dashboard/templates/dashboard/node-detail/activity.html
......@@ -2,6 +2,6 @@
<h3>{% trans "Activity" %}</h3>
<div id="activity-timeline" class="timeline">
<div id="activity-timeline-wrapper">
{% include "dashboard/node-detail/_activity-timeline.html" %}
</div>
circle/dashboard/templates/dashboard/node-list/column-actions.html
<div class="btn-group">
<button type="button" class="btn {{ btn_size }} btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="dropdown-menu nojs-dropdown-toogle" role="menu">
<li><a href="#"><i class="icon-cloud-upload"></i> Flush</a></li>
{% if record.enabled %}
<li><a style="display:none" data-status="enable" data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}&status=enable"><i class="icon-check"></i> Enable</a>
......
circle/dashboard/templates/dashboard/node-list/test-one.html
......@@ -39,8 +39,8 @@
</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">
<button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="nojs-dropdown-menu 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>
......
circle/dashboard/templates/dashboard/vm-detail.html
......@@ -113,8 +113,8 @@
<div class="big">
<span id="vm-details-state" class="label label-success">{{ instance.state }}</span>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<button type="button" class="btn btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="nojs-dropdown-menu dropdown-menu" role="menu">
<li><a href="#" class="vm-details-rename-button"><i class="icon-pencil"></i> {% trans "Rename" %}</a></li>
<li><a data-vm-pk="{{ instance.pk }}" href="#" class="vm-details-save-as-button"><i class="icon-save"></i> {% trans "Save as" %}</a></li>
<li><a href="#"><i class="icon-refresh"></i> {% trans "Reboot" %}</a></li>
......
circle/dashboard/templates/dashboard/vm-list/column-actions.html
<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">
<button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="nojs-dropdown-toogle 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 data-vm-pk="{{ record.pk }}" class="real-link vm-delete" href="{% url "dashboard.views.delete-vm" pk=record.pk %}?next={{ request.path }}"><i class="icon-remove"></i> Discard</a></li>
......
circle/dashboard/templates/dashboard/vm-list/test-one.html
......@@ -39,8 +39,8 @@
</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">
<button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="nojs-dropdown-menu 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>
......
circle/dashboard/views.py
......@@ -480,10 +480,13 @@ class NodeDetailView(LoginRequiredMixin, SuperuserRequiredMixin, DetailView):
return context
def post(self, request, *args, **kwargs):
print request.POST
if request.POST.get('new_name'):
return self.__set_name(request)
if request.POST.get('new_status'):
if request.POST.get('change_status') is not None:
return self.__set_status(request)
return redirect(reverse_lazy("dashboard.views.node-detail",
kwargs={'pk': self.get_object().pk}))
def __set_name(self, request):
self.object = self.get_object()
......@@ -509,19 +512,14 @@ class NodeDetailView(LoginRequiredMixin, SuperuserRequiredMixin, DetailView):
def __set_status(self, request):
self.object = self.get_object()
new_status = request.POST.get("new_status")
if new_status == "enable":
if not self.object.enabled:
self.object.enable(user=request.user)
elif new_status == "disable":
self.object.disable(user=request.user)
else:
return
self.object.disable(user=request.user)
success_message = _("Node successfully changed status!")
if request.is_ajax():
response = {
'message': success_message,
'new_status': new_status,
'node_pk': self.object.pk
}
return HttpResponse(
......@@ -1275,6 +1273,12 @@ class NodeStatus(LoginRequiredMixin, SuperuserRequiredMixin, DetailView):
template_name = "dashboard/confirm/node-status.html"
model = Node
def get_template_names(self):
if self.request.is_ajax():
return ['dashboard/confirm/ajax-node-status.html']
else:
return ['dashboard/confirm/node-status.html']
def get_success_url(self):
next = self.request.GET.get('next')
if next:
......@@ -1285,37 +1289,30 @@ class NodeStatus(LoginRequiredMixin, SuperuserRequiredMixin, DetailView):
def get_context_data(self, **kwargs):
context = super(NodeStatus, self).get_context_data(**kwargs)
context['status'] = self.request.GET.get('status')
if self.object.enabled:
context['status'] = "disable"
else:
context['status'] = "enable"
return context
def post(self, request, *args, **kwargs):
if request.POST.get('new_status'):
print self.request.GET.get('next')
if request.POST.get('change_status') is not None:
return self.__set_status(request)
return redirect(reverse_lazy("dashboard.views.node-detail",
kwargs={'pk': self.get_object().pk}))
def __set_status(self, request):
self.object = self.get_object()
new_status = request.POST.get("new_status")
if new_status == "enable":
Node.objects.filter(pk=self.object.pk).update(
**{'enabled': True})
elif new_status == "disable":
Node.objects.filter(pk=self.object.pk).update(
**{'enabled': False})
if not self.object.enabled:
self.object.enable(user=request.user)
else:
if request.is_ajax():
return HttpResponse(content_type="application/json")
else:
return redirect(self.get_success_url())
self.object.disable(user=request.user)
success_message = _("Node successfully changed status!")
if request.is_ajax():
response = {
'message': success_message,
'new_status': new_status,
'node_pk': self.object.pk
}
return HttpResponse(
......
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