dashboard: add javascript create vm modal

circle/dashboard/static/dashboard/dashboard.js

 $(function () {
 $(function () {
+  $('.vm-create').click(function(e) {
+    $.ajax({
+      type: 'GET',
+      url: '/dashboard/vm/create/', 
+      success: function(data) { 
+        // TODO this is ugly
+        var html = '<div class="modal fade" id="vm-create-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">Modal title</h4></div><div class="modal-body"> ' +
+        data + 
+        '</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->';
+
+        $('.container').append(html);
+        $('#vm-create-modal').modal('show');
+        $('#vm-create-modal').on('hidden.bs.modal', function() {
+          $('#vm-create-modal').remove();
+        });
+      }
+    });
+    return false;
+  });
   $('[href=#vm-graph-view]').click(function (e) {
   $('[href=#vm-graph-view]').click(function (e) {
     $('#vm-list-view').hide();
     $('#vm-list-view').hide();
     $('#vm-graph-view').show();
     $('#vm-graph-view').show();

circle/dashboard/templates/dashboard/ajax-wrapper.html

+{% extends "dashboard/base.html" %}
+
+{% block content %}
+    {% include template %}
+{% endblock %}

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

@@ -32,7 +32,7 @@
             <i class="icon-chevron-sign-right"></i> <strong>{{ more_instances }}</strong>  more  
             <i class="icon-chevron-sign-right"></i> <strong>{{ more_instances }}</strong>  more  
           </a>
           </a>
           {% endif %}
           {% endif %}
-          <a class="btn btn-success btn-xs"><i class="icon-plus-sign"></i> new </a>
+          <a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="icon-plus-sign"></i> new </a>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>

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

+Create a VM

circle/dashboard/urls.py

 from django.conf.urls import patterns, url
 from django.conf.urls import patterns, url
 
 
-from .views import IndexView, VmDetailView, VmList
+from .views import IndexView, VmDetailView, VmList, VmCreate
 
 
 urlpatterns = patterns(
 urlpatterns = patterns(
     '',
     '',
@@ -8,4 +8,6 @@ urlpatterns = patterns(
     url(r'^vm/(?P<pk>\d+)/$', VmDetailView.as_view(),
     url(r'^vm/(?P<pk>\d+)/$', VmDetailView.as_view(),
         name='dashboard.views.detail'),
         name='dashboard.views.detail'),
     url(r'^vm/list/$', VmList.as_view(), name='dashboard.views.vm-list'),
     url(r'^vm/list/$', VmList.as_view(), name='dashboard.views.vm-list'),
+    url(r'^vm/create/$', VmCreate.as_view(),
+        name='dashboard.views.vm-create'),
 )
 )

circle/dashboard/views.py

@@ -51,3 +51,20 @@ class VmList(SingleTableView):
     model = Instance
     model = Instance
     table_class = VmListTable
     table_class = VmListTable
     table_pagination = False
     table_pagination = False
+
+
+class VmCreate(TemplateView):
+
+    def get_template_names(self):
+        if self.request.is_ajax():
+            return ['dashboard/vm-create.html']
+        else:
+            return ['dashboard/ajax-wrapper.html']
+
+    def get(self, request, *args, **kwargs):
+        context = self.get_context_data(**kwargs)
+        if not request.is_ajax():
+            context.update({
+                'template': 'dashboard/vm-create.html'
+            })
+        return self.render_to_response(context)