From eb10364070f12bfc1dc7de5776a7eb3aec6e0772 Mon Sep 17 00:00:00 2001
From: Bach Dániel <bd@ik.bme.hu>
Date: Wed, 14 Jan 2015 00:28:49 +0100
Subject: [PATCH] dashboard: rewrite search js
---
circle/dashboard/static/dashboard/dashboard.js | 243 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
circle/dashboard/static/dashboard/dashboard.less | 2 +-
circle/dashboard/templates/dashboard/index-nodes.html | 2 +-
circle/dashboard/views/vm.py | 1 +
4 files changed, 77 insertions(+), 171 deletions(-)
diff --git a/circle/dashboard/static/dashboard/dashboard.js b/circle/dashboard/static/dashboard/dashboard.js
index dc26039..fa58818 100644
--- a/circle/dashboard/static/dashboard/dashboard.js
+++ b/circle/dashboard/static/dashboard/dashboard.js
@@ -154,156 +154,61 @@ $(function () {
addSliderMiscs();
- /* search for vms */
- var my_vms = [];
- $("#dashboard-vm-search-input").keyup(function(e) {
- // if my_vms is empty get a list of our vms
- if(my_vms.length < 1) {
- $("#dashboard-vm-search-form button i").addClass("fa-spinner fa-spin");
-
- $.get("/dashboard/vm/list/", function(result) {
- for(var i in result) {
- my_vms.push({
- 'pk': result[i].pk,
- 'name': result[i].name,
- '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;
- }
+ /* search */
+ function register_search(form, list, generateHTML) {
+ var my_vms = [];
+
+ form.find('input').keyup(function(e) {
+ // if my_vms is empty get a list of our vms
+ if(my_vms.length < 1) {
+ var btn = form.find('button');
+ btn.find('i').addClass("fa-spinner fa-spin");
+
+ $.get(form.prop('action'), function(result) {
+ my_vms = result;
+ $(this).trigger("keyup");
+ btn.find('i').removeClass("fa-spinner fa-spin").addClass("fa-search");
+ });
+ return;
+ }
- input = $("#dashboard-vm-search-input").val().toLowerCase();
- var search_result = [];
- var html = '';
- for(var i in my_vms) {
- if(my_vms[i].name.toLowerCase().indexOf(input) != -1 || my_vms[i].host.indexOf(input) != -1) {
- search_result.push(my_vms[i]);
+ input = $(this).val().toLowerCase();
+ var search_result = [];
+ for(var i in my_vms) {
+ 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.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'});
- });
+ search_result.sort(compareVmByFav);
- $("#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;
- });
+ var html = '';
+ var is_last = search_result.length < 5;
- /* 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 } );
- }
+ for(var i=0; i<5 && i<search_result.length; i++)
+ html += generateHTML(search_result[i], is_last);
- input = $("#dashboard-node-search-input").val().toLowerCase();
- var search_result = [];
- 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;
- }
- });
+ if(search_result.length === 0)
+ html += '<div class="list-group-item list-group-item-last">' + gettext("No result") + '</div>';
- /* search for groups */
- var my_groups = [];
- $("#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 } );
- }
+ list.html(html);
+ $('.title-favourite').tooltip({'placement': 'right'});
+ });
- 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]);
+ form.submit(function() {
+ var vm_list_items = list.find(".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;
}
- }
- 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
- 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;
- }
- });
+ return true;
+ });
+ }
+
+ register_search($("#dashboard-vm-search-form"), $("#dashboard-vm-list"), generateVmHTML);
+ register_search($("#dashboard-node-search-form"), $("#dashboard-node-list"), generateNodeHTML);
+ register_search($("#dashboard-group-search-form"), $("#dashboard-group-list"), generateGroupHTML);
+ register_search($("#dashboard-user-search-form"), $("#dashboard-user-list"), generateUserHTML);
/* notification message toggle */
$(document).on('click', ".notification-message-subject", function() {
@@ -364,40 +269,40 @@ $(function () {
});
});
-function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
- return '<a href="/dashboard/vm/' + pk + '/" class="list-group-item' +
- (is_last ? ' list-group-item-last' : '') + '">' +
- '<span class="index-vm-list-name">' +
- '<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) +
- '</span>' +
- '<small class="text-muted index-vm-list-host"> ' + host + '</small>' +
- '<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' +
- (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>' ) +
- '</div>' +
- '<div style="clear: both;"></div>' +
- '</a>';
+function generateVmHTML(data, is_last) {
+ return '<a href="' + data.url + '" class="list-group-item' +
+ (is_last ? ' list-group-item-last' : '') + '">' +
+ '<span class="index-vm-list-name">' +
+ '<i class="fa ' + data.icon + '" title="' + data.status + '"></i> ' + safe_tags_replace(data.name) +
+ '</span>' +
+ '<small class="text-muted index-vm-list-host"> ' + data.host + '</small>' +
+ '<div class="pull-right dashboard-vm-favourite" data-vm="' + data.pk + '">' +
+ (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>' ) +
+ '</div>' +
+ '<div style="clear: both;"></div>' +
+ '</a>';
}
-function generateGroupHTML(url, name, is_last) {
- return '<a href="' + url + '" class="list-group-item real-link' + (is_last ? " list-group-item-last" : "") +'">'+
- '<i class="fa fa-users"></i> '+ safe_tags_replace(name) +
+function generateGroupHTML(data, is_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(data.name) +
'</a>';
}
-function generateNodeHTML(name, icon, _status, url, is_last) {
- return '<a href="' + url + '" class="list-group-item real-link' + (is_last ? ' list-group-item-last' : '') + '">' +
- '<span class="index-node-list-name">' +
- '<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) +
- '</span>' +
- '<div style="clear: both;"></div>' +
- '</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>';
}
-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> ';
+function generateNodeHTML(data, is_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 ' + 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 */
diff --git a/circle/dashboard/static/dashboard/dashboard.less b/circle/dashboard/static/dashboard/dashboard.less
index 11f2d15..2c62327 100644
--- a/circle/dashboard/static/dashboard/dashboard.less
+++ b/circle/dashboard/static/dashboard/dashboard.less
@@ -562,7 +562,7 @@ footer a, footer a:hover, footer a:visited {
}
#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;
}
diff --git a/circle/dashboard/templates/dashboard/index-nodes.html b/circle/dashboard/templates/dashboard/index-nodes.html
index 09a7c0e..1966ca0 100644
--- a/circle/dashboard/templates/dashboard/index-nodes.html
+++ b/circle/dashboard/templates/dashboard/index-nodes.html
@@ -37,7 +37,7 @@
id="dashboard-node-search-form">
<div class="input-group input-group-sm">
<input id="dashboard-node-search-input" type="text" class="form-control"
- placeholder="{% trans "Search..." %}" />
+ name="s" placeholder="{% trans "Search..." %}" />
<div class="input-group-btn">
<button type="submit" class="btn btn-primary" title="{% trans "Search" %}" data-container="body">
<i class="fa fa-search"></i>
diff --git a/circle/dashboard/views/vm.py b/circle/dashboard/views/vm.py
index fe44140..0cd3a71 100644
--- a/circle/dashboard/views/vm.py
+++ b/circle/dashboard/views/vm.py
@@ -950,6 +950,7 @@ class VmList(LoginRequiredMixin, FilterMixin, ListView):
destroyed_at=None).all()
instances = [{
'pk': i.pk,
+ 'url': reverse('dashboard.views.detail', args=[i.pk]),
'name': i.name,
'icon': i.get_status_icon(),
'host': i.short_hostname,
--
libgit2 0.26.0