Converts keypairs to use the new ajax modal dialogs.

Incidentally updates jQuery to 1.7.1 and uses the "on" method instead of "live"
for click handling as per Tres' comment.

Adds a common "main_content" id to all the base.html templates for uniformity.

Change-Id: I667cfaa72b9b85883a86649a666e75e4d501b93e

horizon/horizon/dashboards/nova/keypairs/views.py

@@ -38,16 +38,15 @@ from horizon.dashboards.nova.keypairs.forms import (CreateKeypair,
 LOG = logging.getLogger(__name__)
 
 
+# FIXME(gabriel): There's a very obvious pattern to these views.
+#                 This is a perfect candidate for a class-based view.
+
 @login_required
 def index(request):
     delete_form, handled = DeleteKeypair.maybe_handle(request)
-
     if handled:
         return handled
 
-    create_form = CreateKeypair()
-    import_form = ImportKeypair()
-
     try:
         keypairs = api.keypair_list(request)
     except novaclient_exceptions.ClientException, e:
@@ -55,12 +54,15 @@ def index(request):
         LOG.exception("ClientException in keypair index")
         messages.error(request, _('Error fetching keypairs: %s') % e.message)
 
-    return shortcuts.render(request,
-                            'nova/keypairs/index.html', {
-                                'keypairs': keypairs,
-                                'create_form': create_form,
-                                'import_form': import_form,
-                                'delete_form': delete_form})
+    context = {'keypairs': keypairs, 'delete_form': delete_form}
+
+    if request.is_ajax():
+        template = 'nova/keypairs/_list.html'
+        context['hide'] = True
+    else:
+        template = 'nova/keypairs/index.html'
+
+    return shortcuts.render(request, template, context)
 
 
 @login_required
@@ -69,9 +71,15 @@ def create(request):
     if handled:
         return handled
 
-    return shortcuts.render(request,
-                            'nova/keypairs/create.html', {
-                                'create_form': form})
+    context = {'form': form}
+
+    if request.is_ajax():
+        template = 'nova/keypairs/_create.html'
+        context['hide'] = True
+    else:
+        template = 'nova/keypairs/create.html'
+
+    return shortcuts.render(request, template, context)
 
 
 @login_required
@@ -80,7 +88,12 @@ def import_keypair(request):
     if handled:
         return handled
 
-    return shortcuts.render(request,
-                            'nova/keypairs/import.html', {
-                                'import_form': form,
-                                'create_form': form})
+    context = {'form': form}
+
+    if request.is_ajax():
+        template = 'nova/keypairs/_import.html'
+        context['hide'] = True
+    else:
+        template = 'nova/keypairs/import.html'
+
+    return shortcuts.render(request, template, context)

horizon/horizon/dashboards/nova/templates/nova/base.html

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block main %}
-  <div class="content">
+  <div id='main_content' class="content">
     {% block page_header %}{% endblock %}
     {% include "_messages.html" %}
     {% block dash_main %}{% endblock %}

horizon/horizon/dashboards/nova/templates/nova/keypairs/_create.html

@@ -1,11 +1,25 @@
-{% extends 'nova/keypairs/_form.html' %}
+{% extends "horizon/common/_modal_form.html" %}
 {% load i18n %}
 
+{% block form_id %}create_keypair_form{% endblock %}
 {% block form_action %}{% url horizon:nova:keypairs:create %}{% endblock %}
 
-{% block modal-footer %}
-<div class="modal-footer">
-  <input class="btn primary pull-right" type="submit" value="{%trans "Create Keypair"%}" />
-  <a href="#" class="btn secondary cancel close">Cancel</a>
+{% block modal-header %}{% trans "Create Keypair" %}{% endblock %}
+
+{% block modal-body %}
+<div class="left">
+    <fieldset>
+    {% include "horizon/common/_form_fields.html" %}
+    </fieldset>
+</div>
+<div class="right">
+    <h3>{% trans "Description"%}:</h3>
+    <p>{% trans "Keypairs are ssh credentials which are injected into images when they are launched. Creating a new key pair registers the public key and downloads the private key (a .pem file)."%}</p>
+    <p>{% trans "Protect and use the key as you would any normal ssh private key."%}</p>
 </div>
 {% endblock %}
+
+{% block modal-footer %}
+  <input class="btn primary pull-right" type="submit" value="{% trans "Create Keypair" %}" />
+  <a href="{% url horizon:nova:keypairs:index %}" class="btn secondary cancel close">Cancel</a>
+{% endblock %}

horizon/horizon/dashboards/nova/templates/nova/keypairs/_import.html

@@ -1,11 +1,25 @@
-{% extends 'nova/keypairs/_form.html' %}
+{% extends "horizon/common/_modal_form.html" %}
 {% load i18n %}
 
+{% block form_id %}import_keypair_form{% endblock %}
 {% block form_action %}{% url horizon:nova:keypairs:import %}{% endblock %}
 
-{% block modal-footer %}
-<div class="modal-footer">
-  <input class="btn primary pull-right" type="submit" value="{%trans "Import Keypair"%}" />
-  <a href="#" class="btn secondary cancel close">Cancel</a>
+{% block modal-header %}{% trans "Import Keypair" %}{% endblock %}
+
+{% block modal-body %}
+<div class="left">
+    <fieldset>
+    {% include "horizon/common/_form_fields.html" %}
+    </fieldset>
+</div>
+<div class="right">
+    <h3>{% trans "Description"%}:</h3>
+    <p>{% trans "Keypairs are ssh credentials which are injected into images when they are launched. Creating a new key pair registers the public key and downloads the private key (a .pem file)."%}</p>
+    <p>{% trans "Protect and use the key as you would any normal ssh private key."%}</p>
 </div>
 {% endblock %}
+
+{% block modal-footer %}
+  <input class="btn primary pull-right" type="submit" value="{% trans "Import Keypair" %}" />
+  <a href="{% url horizon:nova:keypairs:index %}" class="btn secondary cancel close">Cancel</a>
+{% endblock %}

horizon/horizon/dashboards/nova/templates/nova/keypairs/_list.html

@@ -4,8 +4,8 @@
   <h3>{% trans "Keypairs" %}</h3>
 
   <div class="table_actions">
-    <a id="keypairs_import_link" class="btn primary small" data-controls-modal="import_keypair_modal" data-backdrop="static" href="{% url horizon:nova:keypairs:import %}">{% trans "Import Keypair"%}</a>
-    <a id="keypairs_create_link" class="btn small" data-controls-modal="create_keypair_modal" data-backdrop="static" href="{% url horizon:nova:keypairs:create %}">{% trans "Create New Keypair"%}</a>
+    <a id="keypairs_import_link" class="btn primary small ajax-modal" data-controls-modal="import_keypair_modal" data-backdrop="static" href="{% url horizon:nova:keypairs:import %}">{% trans "Import Keypair"%}</a>
+    <a id="keypairs_create_link" class="btn small ajax-modal" data-controls-modal="create_keypair_modal" data-backdrop="static" href="{% url horizon:nova:keypairs:create %}">{% trans "Create New Keypair"%}</a>
 
     <div class="keypairs table_search">
       <form action="#">

horizon/horizon/dashboards/nova/templates/nova/keypairs/create.html

@@ -1,39 +1,11 @@
 {% extends 'nova/base.html' %}
 {% load i18n %}
 
-{% block headerjs %}
-  <script type="text/javascript" charset="utf-8">
-    $(function(){
-      $(".left h3").hide()
-      $("form input[type='submit']").click(function(e){
-        $("form").hide("fast")
-        $(".left h3").show("fast")
-      })
-    })
-  </script>
-{% endblock %}
-
 {% block page_header %}
-  {# to make searchable false, just remove it from the include statement #}
   {% include "horizon/common/_page_header.html" with title=_("Create Keypair") %}
 {% endblock page_header %}
 
 {% block dash_main %}
-  <div id="import_keypair_modal" class="modal static_page">
-    <div class="modal-header">
-      <h3>Create Keypair</h3>
-    </div>
-    <div class="modal-body">
-      <div class="left">
-        {% include 'nova/keypairs/_create.html' with form=create_form %}
-        <h3><a href="{% url horizon:nova:keypairs:index %}"><< {% trans "Return to keypairs list"%}</a></h3>
-      </div>
-      <div class="right">
-        <h3>{% trans "Description"%}:</h3>
-        <p>{% trans "Keypairs are ssh credentials which are injected into images when they are launched. Creating a new key pair registers the public key and downloads the private key (a .pem file)."%}</p>
-        <p>{% trans "Protect and use the key as you would any normal ssh private key."%}</p>
-      </div>
-    </div>
-  </div>
+  {% include 'nova/keypairs/_create.html' %}
 {% endblock %}
 

horizon/horizon/dashboards/nova/templates/nova/keypairs/import.html

@@ -2,27 +2,10 @@
 {% load i18n %}
 
 {% block page_header %}
-  {# to make searchable false, just remove it from the include statement #}
-  {% include "horizon/common/_page_header.html" with title=_("Create Keypair") %}
+  {% include "horizon/common/_page_header.html" with title=_("Import Keypair") %}
 {% endblock page_header %}
 
 {% block dash_main %}
-<div id="import_keypair_modal" class="modal">
-  <div class="modal-header">
-    <a href="#" class="close">&times;</a>
-    <h3>Import Keypair</h3>
-  </div>
-  <div class="modal-body">
-    <div class="left">
-      {% include 'nova/keypairs/_import.html' with form=import_form %}
-    </div>
-    <div class="right">
-      <h3>{% trans "Description"%}:</h3>
-      <p>{% trans "Keypairs are ssh credentials which are injected into images when they are launched. Creating a new key pair registers the public key and downloads the private key (a .pem file)."%}</p>
-      <p>{% trans "Protect and use the key as you would any normal ssh private key."%}</p>
-    </div>
-    <div class="clear">&nbsp;</div>
-  </div>
-</div>
+  {% include 'nova/keypairs/_import.html' %}
 {% endblock %}
 

horizon/horizon/dashboards/nova/templates/nova/keypairs/index.html

@@ -1,26 +1,6 @@
 {% extends 'nova/base.html' %}
 {% load i18n %}
 
-{% block sidebar %}
-  {% with current_sidebar="keypairs" %}
-    {{block.super}}
-  {% endwith %}
-{% endblock %}
-
-{% block headerjs %}
-  <script type="text/javascript" charset="utf-8">
-    $(function(){
-      $('.modal').hide()
-
-      $(".left h3").hide()
-      $("form input[type='submit']").click(function(e){
-        $("form").hide("fast")
-        $(".left h3").show("fast")
-      })
-    })
-  </script>
-{% endblock %}
-
 {% block page_header %}
   {% include "horizon/common/_page_header.html" with title=_("Keypairs") %}
 {% endblock page_header %}
@@ -32,45 +12,10 @@
     <div class="alert-message block-message info">
       <p><strong>{% trans "Info: "%}</strong>{% trans "There are currently no keypairs."%}</p>
       <div class="alert-actions">
-        <a id="keypairs_create_link" class="btn primary small" data-controls-modal="create_keypair_modal" data-backdrop="static" href="{% url horizon:nova:keypairs:create %}">{% trans "Create New Keypair"%}</a>
-        <a id="keypairs_import_link" class="btn small" data-controls-modal="import_keypair_modal" data-backdrop="static" href="{% url horizon:nova:keypairs:import %}">{% trans "Import Keypair"%}</a>
+        <a id="keypairs_create_link" class="btn primary small ajax-modal" href="{% url horizon:nova:keypairs:create %}">{% trans "Create New Keypair"%}</a>
+        <a id="keypairs_import_link" class="btn small ajax-modal" href="{% url horizon:nova:keypairs:import %}">{% trans "Import Keypair"%}</a>
       </div>
     </div>
   {% endif %}
-
-  <div id="create_keypair_modal" class="modal">
-    <div class="modal-header">
-      <a href="#" class="close">&times;</a>
-      <h3>Create Keypair</h3>
-    </div>
-    <div class="modal-body">
-      <div class="left">
-        {% include 'nova/keypairs/_create.html' with form=create_form %}
-        <h3>Keypair downloading. <a href="{% url horizon:nova:keypairs:index %}">{% trans "Close"%}</a></h3>
-      </div>
-      <div class="right">
-        <h3>{% trans "Description"%}:</h3>
-        <p>{% trans "Keypairs are ssh credentials which are injected into images when they are launched. Creating a new key pair registers the public key and downloads the private key (a .pem file)."%}</p>
-        <p>{% trans "Protect and use the key as you would any normal ssh private key."%}</p>
-      </div>
-    </div>
-  </div>
-
-  <div id="import_keypair_modal" class="modal">
-    <div class="modal-header">
-      <a href="#" class="close">&times;</a>
-      <h3>Import Keypair</h3>
-    </div>
-    <div class="modal-body">
-      <div class="left">
-        {% include 'nova/keypairs/_import.html' with form=import_form %}
-      </div>
-      <div class="right">
-        <h3>{% trans "Description"%}:</h3>
-        <p>{% trans "Keypairs are ssh credentials which are injected into images when they are launched. Creating a new key pair registers the public key and downloads the private key (a .pem file)."%}</p>
-        <p>{% trans "Protect and use the key as you would any normal ssh private key."%}</p>
-      </div>
-      <div class="clear">&nbsp;</div>
-    </div>
   </div>
 {% endblock %}

horizon/horizon/dashboards/settings/templates/settings/base.html

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block main %}
-  <div class="content">
+  <div id='main_content' class="content">
     {% block page_header %}{% endblock %}
     {% include "_messages.html" %}
     {% block settings_main %}{% endblock %}

horizon/horizon/dashboards/syspanel/templates/syspanel/base.html

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block main %}
-  <div class="content">
+  <div id='main_content' class="content">
     {% block page_header %}{% endblock %}
     {% include "_messages.html" %}
     {% block syspanel_main %}{% endblock %}