dashboard: search vms from the landing page

circle/dashboard/static/dashboard/dashboard.js

@@ -96,8 +96,50 @@ $(function () {
     return false;
   });
 
+  /* search for vms */
+  var my_vms = []
+  $("#dashboard-vm-search-input").keyup(function() {
+    // if my_vms is empty get a list of our vms
+    if(my_vms.length < 1) {
+      $.ajaxSetup( { "async": false } );
+      $.get("/dashboard/vm/list/", function(result) {
+        for(var i in result) {
+          my_vms.push({
+            'pk': result[i].pk,
+            'name': result[i].fields.name,
+            'state': result[i].fields.state,
+          });
+        }
+      });
+      $.ajaxSetup( { "async": true } );
+    }
+
+    input = $("#dashboard-vm-search-input").val();
+    var search_result = []
+    var html = '';
+    for(var i in my_vms) {
+      if(my_vms[i].name.indexOf(input) != -1) {
+        search_result.push(my_vms[i]);
+      }
+    }
+    for(var i=0; i<5 && i<search_result.length; i++)
+      html += generateVmHTML(search_result[i].pk, search_result[i].name)
+    if(search_result.length == 0)
+      html += '<div class="list-group-item">No result</div>';
+    $("#dashboard-vm-list").html(html);
+  });
+ 
 });
 
+function generateVmHTML(pk, name) {
+  return '<a href="/dashboard/vm/' + pk + '/" class="list-group-item">' + 
+          '<i class="icon-play-sign"></i> ' + name +
+          '<div class="pull-right">' + 
+          '<i class="icon-star text-primary" title="" data-original-title="Mark as favorite."></i>' +
+          '</div>' + 
+          '</a>';
+}
+
 function addSliderMiscs() {
   $('.vm-slider').each(function() {  
     $("<span>").addClass("output").html($(this).val()).insertAfter($(this));

circle/dashboard/templates/dashboard/index-vm.html

@@ -13,15 +13,17 @@
     </h3>
   </div>
   <div class="list-group" id="vm-list-view">
+    <div id="dashboard-vm-list">
       {% for i in instances %}
       <a href="{{ i.get_absolute_url }}" class="list-group-item">
         <i class="icon-{% if i.state == "RUNNING" %}play-sign{% else %}pause{% endif %}"></i> {{ i.name }} <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
       </a>
       {% endfor %}
+    </div>
     <div href="#" class="list-group-item list-group-footer">
       <div class="row">
         <div class="col-sm-6 col-xs-6 input-group input-group-sm">
-          <input type="text" class="form-control" placeholder="Search..." />
+          <input id="dashboard-vm-search-input" type="text" class="form-control" placeholder="Search..." />
           <div class="input-group-btn">
             <button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button>
           </div>

circle/dashboard/views.py

@@ -17,6 +17,7 @@ from django.views.generic.detail import SingleObjectMixin
 from django.views.generic import (TemplateView, DetailView, View, DeleteView,
                                   UpdateView, CreateView)
 from django.contrib import messages
+from django.core import serializers
 from django.utils.translation import ugettext as _
 
 from django.forms.models import inlineformset_factory
@@ -431,6 +432,17 @@ class VmList(LoginRequiredMixin, SingleTableView):
     table_pagination = False
     model = Instance
 
+    def get(self, *args, **kwargs):
+        if self.request.is_ajax():
+            vms = serializers.serialize('json', self.get_queryset(),
+                                        fields=('pk', 'name', 'state'))
+            return HttpResponse(
+                vms,
+                content_type="application/json",
+            )
+        else:
+            return super(VmList, self).get(*args, **kwargs)
+
     def get_queryset(self):
         logger.debug('VmList.get_queryset() called. User: %s',
                      unicode(self.request.user))