dashboard: wordwrap for ajax search too in vm list

circle/dashboard/static/dashboard/dashboard.js

@@ -188,6 +188,9 @@ $(function () {
             'name': result[i].name.toLowerCase(),
             'name': result[i].name.toLowerCase(),
             'state': result[i].state,
             'state': result[i].state,
             'fav': result[i].fav,
             'fav': result[i].fav,
+            'host': result[i].host,
+            'icon': result[i].icon,
+            'status': result[i].status,
           });
           });
         }
         }
       });
       });
@@ -204,7 +207,9 @@ $(function () {
     }
     }
     search_result.sort(compareVmByFav);
     search_result.sort(compareVmByFav);
     for(var i=0; i<5 && i<search_result.length; i++)
     for(var i=0; i<5 && i<search_result.length; i++)
-      html += generateVmHTML(search_result[i].pk, search_result[i].name, search_result[i].fav);
+      html += generateVmHTML(search_result[i].pk, search_result[i].name, 
+                             search_result[i].host, search_result[i].icon,
+                             search_result[i].status, search_result[i].fav);
     if(search_result.length == 0)
     if(search_result.length == 0)
       html += '<div class="list-group-item">No result</div>';
       html += '<div class="list-group-item">No result</div>';
     $("#dashboard-vm-list").html(html);
     $("#dashboard-vm-list").html(html);
@@ -230,14 +235,18 @@ $(function () {
   });
   });
 });
 });
 
 
-function generateVmHTML(pk, name, fav) {
-  return '<a href="/dashboard/vm/' + pk + '/" class="list-group-item">' + 
-          '<i class="icon-play-sign"></i> ' + name +
-          '<div class="pull-right dashboard-vm-favourite" data-vm="' + pk +'">' + 
-          '<i class="title-favourite icon-star' + (fav ? "" : "-empty") + ' text-primary" title="" data-original-title="' + 
-          (fav ? "Un": "Mark as ") + 'favourite"></i>' +
-          '</div>' + 
-          '</a>';
+function generateVmHTML(pk, name, host, icon, _status, fav) {
+  return '<a href="/dashboard/vm/' + pk + '/" class="list-group-item">' +      
+        '<span class="index-vm-list-name">' + 
+          '<i class="' + icon + '" title="' + _status + '"></i> ' + name +
+        '</span>' + 
+        '<small class="text-muted"> ' + host + '</small>' +
+        '<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' +  
+          (fav ? '<i class="icon-star text-primary title-favourite" title="Unfavourite"></i>' :
+          '<i class="icon-star-empty text-primary title-favourite" title="Mark as favorite"></i>' ) +
+        '</div>' +                                                               
+      '<div style="clear: both;"></div>' +                                       
+      '</a>';     
 }
 }
 
 
 function compareVmByFav(a, b) {
 function compareVmByFav(a, b) {

circle/dashboard/views.py

@@ -921,7 +921,9 @@ class VmList(LoginRequiredMixin, ListView):
             instances = [{
             instances = [{
                 'pk': i.pk,
                 'pk': i.pk,
                 'name': i.name,
                 'name': i.name,
-                'state': i.state,
+                'icon': i.get_status_icon(),
+                'host': "" if not i.primary_host else i.primary_host.hostname,
+                'status': i.get_status_display(),
                 'fav': i.pk in favs} for i in instances]
                 'fav': i.pk in favs} for i in instances]
             return HttpResponse(
             return HttpResponse(
                 json.dumps(list(instances)),  # instances is ValuesQuerySet
                 json.dumps(list(instances)),  # instances is ValuesQuerySet