Skip to content

Gutyán Gábor / circlestack

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

dashboard: rewrite search js

parent e9ee55cc
Showing with 77 additions and 171 deletions
circle/dashboard/static/dashboard/dashboard.js
...@@ -154,156 +154,61 @@ $(function () { ...@@ -154,156 +154,61 @@ $(function () {
addSliderMiscs(); addSliderMiscs();
/* search for vms */ /* search */
var my_vms = []; function register_search(form, list, generateHTML) {
$("#dashboard-vm-search-input").keyup(function(e) { var my_vms = [];
// if my_vms is empty get a list of our vms
if(my_vms.length < 1) { form.find('input').keyup(function(e) {
$("#dashboard-vm-search-form button i").addClass("fa-spinner fa-spin"); // if my_vms is empty get a list of our vms
if(my_vms.length < 1) {
$.get("/dashboard/vm/list/", function(result) { var btn = form.find('button');
for(var i in result) { btn.find('i').addClass("fa-spinner fa-spin");
my_vms.push({
'pk': result[i].pk, $.get(form.prop('action'), function(result) {
'name': result[i].name, my_vms = result;
'state': result[i].state, $(this).trigger("keyup");
'fav': result[i].fav, btn.find('i').removeClass("fa-spinner fa-spin").addClass("fa-search");
'host': result[i].host, });
'icon': result[i].icon, return;
'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;
}
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 ||
if(my_vms[i].name.toLowerCase().indexOf(input) != -1 || my_vms[i].host.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 html = '';
var vm_list_items = $("#dashboard-vm-list .list-group-item"); var is_last = search_result.length < 5;
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 */ for(var i=0; i<5 && i<search_result.length; i++)
var my_nodes = []; html += generateHTML(search_result[i], is_last);
$("#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(); if(search_result.length === 0)
var search_result = []; html += '<div class="list-group-item list-group-item-last">' + gettext("No result") + '</div>';
var html = '';
for(var i in my_nodes) {
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(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)
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
if(e.keyCode == 13 && search_result.length == 1) {
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 */ list.html(html);
var my_groups = []; $('.title-favourite').tooltip({'placement': 'right'});
$("#dashboard-group-search-input").keyup(function(e) { });
// if my_groups is empty get a list of our groups
if(my_groups.length < 1) {
$.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,
});
}
});
$.ajaxSetup( { "async": true } );
}
input = $("#dashboard-group-search-input").val().toLowerCase(); form.submit(function() {
var search_result = []; var vm_list_items = list.find(".list-group-item");
var html = ''; if(vm_list_items.length == 1 && vm_list_items.first().prop("href")) {
for(var i in my_groups) { window.location.href = vm_list_items.first().prop("href");
if(my_groups[i].name.toLowerCase().indexOf(input) != -1) { return false;
search_result.push(my_groups[i]);
} }
} return true;
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>'; register_search($("#dashboard-vm-search-form"), $("#dashboard-vm-list"), generateVmHTML);
$("#dashboard-group-list").html(html); register_search($("#dashboard-node-search-form"), $("#dashboard-node-list"), generateNodeHTML);
register_search($("#dashboard-group-search-form"), $("#dashboard-group-list"), generateGroupHTML);
// if there is only one result and ENTER is pressed redirect register_search($("#dashboard-user-search-form"), $("#dashboard-user-list"), generateUserHTML);
if(e.keyCode == 13 && search_result.length == 1) {
window.location.href = search_result[0].url;
}
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,40 +269,40 @@ $(function () { ...@@ -364,40 +269,40 @@ $(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>'; '</a>';
} }
function generateNodeHTML(name, icon, _status, url, is_last) { function generateUserHTML(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">' + '<i class="fa fa-user"></i> '+ safe_tags_replace(data.name) +
'<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) + '</a>';
'</span>' +
'<div style="clear: both;"></div>' +
'</a>';
} }
function generateNodeTagHTML(name, icon, _status, label , url) { function generateNodeHTML(data, is_last) {
return '<a href="' + url + '" class="label ' + label + '" >' + return '<a href="' + data.url + '" class="list-group-item real-link' + (is_last ? ' list-group-item-last' : '') + '">' +
'<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) + '<span class="index-node-list-name">' +
'</a> '; '<i class="fa ' + data.icon + '" title="' + data.status + '"></i> ' + safe_tags_replace(data.name) +
'</span>' +
'<div style="clear: both;"></div>' +
'</a>';
} }
/* copare vm-s by fav, pk order */ /* copare vm-s by fav, pk order */
......
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