Skip to content

Gelencsér Szabolcs / circlestack

Go to a project
Commit eb103640 by Bach Dániel
Options

dashboard: rewrite search js

parent e9ee55cc
Showing with 50 additions and 144 deletions
circle/dashboard/static/dashboard/dashboard.js
...@@ -154,156 +154,61 @@ $(function () { ...@@ -154,156 +154,61 @@ $(function () {
addSliderMiscs(); addSliderMiscs();
/* search for vms */ /* search */
function register_search(form, list, generateHTML) {
var my_vms = []; var my_vms = [];
$("#dashboard-vm-search-input").keyup(function(e) {
form.find('input').keyup(function(e) {
// if my_vms is empty get a list of our vms // if my_vms is empty get a list of our vms
if(my_vms.length < 1) { if(my_vms.length < 1) {
$("#dashboard-vm-search-form button i").addClass("fa-spinner fa-spin"); var btn = form.find('button');
btn.find('i').addClass("fa-spinner fa-spin");
$.get("/dashboard/vm/list/", function(result) {
for(var i in result) { $.get(form.prop('action'), function(result) {
my_vms.push({ my_vms = result;
'pk': result[i].pk, $(this).trigger("keyup");
'name': result[i].name, btn.find('i').removeClass("fa-spinner fa-spin").addClass("fa-search");
'state': result[i].state,
'fav': result[i].fav,
'host': result[i].host,
'icon': result[i].icon,
'status': result[i].status,
'owner': result[i].owner,
});
}
$("#dashboard-vm-search-input").trigger("keyup");
$("#dashboard-vm-search-form button i").removeClass("fa-spinner fa-spin").addClass("fa-search");
}); });
return; return;
} }
input = $("#dashboard-vm-search-input").val().toLowerCase(); input = $(this).val().toLowerCase();
var search_result = []; var search_result = [];
var html = '';
for(var i in my_vms) { for(var i in my_vms) {
if(my_vms[i].name.toLowerCase().indexOf(input) != -1 || my_vms[i].host.indexOf(input) != -1) { if(my_vms[i].name.toLowerCase().indexOf(input) != -1 ||
my_vms[i].host && my_vms[i].host.indexOf(input) != -1) {
search_result.push(my_vms[i]); search_result.push(my_vms[i]);
} }
} }
search_result.sort(compareVmByFav); search_result.sort(compareVmByFav);
for(i=0; i<5 && i<search_result.length; i++)
html += generateVmHTML(search_result[i].pk, search_result[i].name,
search_result[i].owner ? search_result[i].owner : search_result[i].host, search_result[i].icon,
search_result[i].status, search_result[i].fav,
(search_result.length < 5));
if(search_result.length === 0)
html += '<div class="list-group-item list-group-item-last">' + gettext("No result") + '</div>';
$("#dashboard-vm-list").html(html);
$('.title-favourite').tooltip({'placement': 'right'});
});
$("#dashboard-vm-search-form").submit(function() {
var vm_list_items = $("#dashboard-vm-list .list-group-item");
if(vm_list_items.length == 1 && vm_list_items.first().prop("href")) {
window.location.href = vm_list_items.first().prop("href");
return false;
}
return true;
});
/* search for nodes */
var my_nodes = [];
$("#dashboard-node-search-input").keyup(function(e) {
// if my_nodes is empty get a list of our nodes
if(my_nodes.length < 1) {
$.ajaxSetup( { "async": false } );
$.get("/dashboard/node/list/", function(result) {
for(var i in result) {
my_nodes.push({
'name': result[i].name,
'icon': result[i].icon,
'status': result[i].status,
'label': result[i].label,
'url': result[i].url,
});
}
});
$.ajaxSetup( { "async": true } );
}
input = $("#dashboard-node-search-input").val().toLowerCase();
var search_result = [];
var html = ''; var html = '';
for(var i in my_nodes) { var is_last = search_result.length < 5;
if(my_nodes[i].name.toLowerCase().indexOf(input) != -1) {
search_result.push(my_nodes[i]);
}
}
for(i=0; i<5 && i<search_result.length; i++)
html += generateNodeHTML(search_result[i].name,
search_result[i].icon, search_result[i].status,
search_result[i].url,
(search_result.length < 5));
if(search_result.length === 0)
html += '<div class="list-group-item list-group-item-last">' + gettext("No result") + '</div>';
$("#dashboard-node-list").html(html);
html = ''; for(var i=0; i<5 && i<search_result.length; i++)
html += generateHTML(search_result[i], is_last);
for(i=0; i<5 && i<search_result.length; i++)
html += generateNodeTagHTML(search_result[i].name,
search_result[i].icon, search_result[i].status,
search_result[i].label, search_result[i].url);
if(search_result.length === 0) if(search_result.length === 0)
html += '<div class="list-group-item list-group-item-last">' + gettext("No result") + '</div>'; html += '<div class="list-group-item list-group-item-last">' + gettext("No result") + '</div>';
$("#dashboard-node-taglist").html(html);
// if there is only one result and ENTER is pressed redirect list.html(html);
if(e.keyCode == 13 && search_result.length == 1) { $('.title-favourite').tooltip({'placement': 'right'});
window.location.href = search_result[0].url;
}
if(e.keyCode == 13 && search_result.length > 1 && input.length > 0) {
window.location.href = "/dashboard/node/list/?s=" + input;
}
}); });
/* search for groups */ form.submit(function() {
var my_groups = []; var vm_list_items = list.find(".list-group-item");
$("#dashboard-group-search-input").keyup(function(e) { if(vm_list_items.length == 1 && vm_list_items.first().prop("href")) {
// if my_groups is empty get a list of our groups window.location.href = vm_list_items.first().prop("href");
if(my_groups.length < 1) { return false;
$.ajaxSetup( { "async": false } );
$.get("/dashboard/group/list/", function(result) {
for(var i in result) {
my_groups.push({
'url': result[i].url,
'name': result[i].name,
});
} }
return true;
}); });
$.ajaxSetup( { "async": true } );
}
input = $("#dashboard-group-search-input").val().toLowerCase();
var search_result = [];
var html = '';
for(var i in my_groups) {
if(my_groups[i].name.toLowerCase().indexOf(input) != -1) {
search_result.push(my_groups[i]);
}
} }
for(i=0; i<5 && i<search_result.length; i++)
html += generateGroupHTML(search_result[i].url, search_result[i].name, search_result.length < 5);
if(search_result.length === 0)
html += '<div class="list-group-item list-group-item-last">' + gettext("No result") + '</div>';
$("#dashboard-group-list").html(html);
// if there is only one result and ENTER is pressed redirect register_search($("#dashboard-vm-search-form"), $("#dashboard-vm-list"), generateVmHTML);
if(e.keyCode == 13 && search_result.length == 1) { register_search($("#dashboard-node-search-form"), $("#dashboard-node-list"), generateNodeHTML);
window.location.href = search_result[0].url; register_search($("#dashboard-group-search-form"), $("#dashboard-group-list"), generateGroupHTML);
} register_search($("#dashboard-user-search-form"), $("#dashboard-user-list"), generateUserHTML);
if(e.keyCode == 13 && search_result.length > 1 && input.length > 0) {
window.location.href = "/dashboard/group/list/?s=" + input;
}
});
/* notification message toggle */ /* notification message toggle */
$(document).on('click', ".notification-message-subject", function() { $(document).on('click', ".notification-message-subject", function() {
...@@ -364,42 +269,42 @@ $(function () { ...@@ -364,42 +269,42 @@ $(function () {
}); });
}); });
function generateVmHTML(pk, name, host, icon, _status, fav, is_last) { function generateVmHTML(data, is_last) {
return '<a href="/dashboard/vm/' + pk + '/" class="list-group-item' + return '<a href="' + data.url + '" class="list-group-item' +
(is_last ? ' list-group-item-last' : '') + '">' + (is_last ? ' list-group-item-last' : '') + '">' +
'<span class="index-vm-list-name">' + '<span class="index-vm-list-name">' +
'<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) + '<i class="fa ' + data.icon + '" title="' + data.status + '"></i> ' + safe_tags_replace(data.name) +
'</span>' + '</span>' +
'<small class="text-muted index-vm-list-host"> ' + host + '</small>' + '<small class="text-muted index-vm-list-host"> ' + data.host + '</small>' +
'<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' + '<div class="pull-right dashboard-vm-favourite" data-vm="' + data.pk + '">' +
(fav ? '<i class="fa fa-star text-primary title-favourite" title="' + gettext("Unfavourite") + '"></i>' : (data.fav ? '<i class="fa fa-star text-primary title-favourite" title="' + gettext("Unfavourite") + '"></i>' :
'<i class="fa fa-star-o text-primary title-favourite" title="' + gettext("Mark as favorite") + '"></i>' ) + '<i class="fa fa-star-o text-primary title-favourite" title="' + gettext("Mark as favorite") + '"></i>' ) +
'</div>' + '</div>' +
'<div style="clear: both;"></div>' + '<div style="clear: both;"></div>' +
'</a>'; '</a>';
} }
function generateGroupHTML(url, name, is_last) { function generateGroupHTML(data, is_last) {
return '<a href="' + url + '" class="list-group-item real-link' + (is_last ? " list-group-item-last" : "") +'">'+ return '<a href="' + data.url + '" class="list-group-item real-link' + (is_last ? " list-group-item-last" : "") +'">'+
'<i class="fa fa-users"></i> '+ safe_tags_replace(name) + '<i class="fa fa-users"></i> '+ safe_tags_replace(data.name) +
'</a>';
}
function generateUserHTML(data, is_last) {
return '<a href="' + data.url + '" class="list-group-item real-link' + (is_last ? " list-group-item-last" : "") +'">'+
'<i class="fa fa-user"></i> '+ safe_tags_replace(data.name) +
'</a>'; '</a>';
} }
function generateNodeHTML(name, icon, _status, url, is_last) { function generateNodeHTML(data, is_last) {
return '<a href="' + url + '" class="list-group-item real-link' + (is_last ? ' list-group-item-last' : '') + '">' + return '<a href="' + data.url + '" class="list-group-item real-link' + (is_last ? ' list-group-item-last' : '') + '">' +
'<span class="index-node-list-name">' + '<span class="index-node-list-name">' +
'<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) + '<i class="fa ' + data.icon + '" title="' + data.status + '"></i> ' + safe_tags_replace(data.name) +
'</span>' + '</span>' +
'<div style="clear: both;"></div>' + '<div style="clear: both;"></div>' +
'</a>'; '</a>';
} }
function generateNodeTagHTML(name, icon, _status, label , url) {
return '<a href="' + url + '" class="label ' + label + '" >' +
'<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) +
'</a> ';
}
/* copare vm-s by fav, pk order */ /* copare vm-s by fav, pk order */
function compareVmByFav(a, b) { function compareVmByFav(a, b) {
if(a.fav && b.fav) { if(a.fav && b.fav) {
......
circle/dashboard/static/dashboard/dashboard.less
...@@ -562,7 +562,7 @@ footer a, footer a:hover, footer a:visited { ...@@ -562,7 +562,7 @@ footer a, footer a:hover, footer a:visited {
} }
#dashboard-vm-list, #dashboard-node-list, #dashboard-group-list, #dashboard-vm-list, #dashboard-node-list, #dashboard-group-list,
#dashboard-template-list, #dashboard-files-toplist { #dashboard-template-list, #dashboard-files-toplist, #dashboard-user-list {
min-height: 200px; min-height: 200px;
} }
......
circle/dashboard/templates/dashboard/index-nodes.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
id="dashboard-node-search-form"> id="dashboard-node-search-form">
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<input id="dashboard-node-search-input" type="text" class="form-control" <input id="dashboard-node-search-input" type="text" class="form-control"
placeholder="{% trans "Search..." %}" /> name="s" placeholder="{% trans "Search..." %}" />
<div class="input-group-btn"> <div class="input-group-btn">
<button type="submit" class="btn btn-primary" title="{% trans "Search" %}" data-container="body"> <button type="submit" class="btn btn-primary" title="{% trans "Search" %}" data-container="body">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
......
circle/dashboard/views/vm.py
...@@ -950,6 +950,7 @@ class VmList(LoginRequiredMixin, FilterMixin, ListView): ...@@ -950,6 +950,7 @@ class VmList(LoginRequiredMixin, FilterMixin, ListView):
destroyed_at=None).all() destroyed_at=None).all()
instances = [{ instances = [{
'pk': i.pk, 'pk': i.pk,
'url': reverse('dashboard.views.detail', args=[i.pk]),
'name': i.name, 'name': i.name,
'icon': i.get_status_icon(), 'icon': i.get_status_icon(),
'host': i.short_hostname, 'host': i.short_hostname,
......
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