Improvements to flavor details in the launch instance dialog. The

relevant pieces of the flavor are now shown in a table above the auota usage and update dynamically when a flavor is selected. Fixes bug 988560 Change-Id: I688347054ad17732eb96d6580a68b39d5cf9a809
openstack · Apr 25, 2012 · 6423266 · 6423266
1 parent 220fa04
commit 6423266
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 11 deletions.
diff --git a/horizon/dashboards/nova/images_and_snapshots/images/views.py b/horizon/dashboards/nova/images_and_snapshots/images/views.py
@@ -79,14 +79,10 @@ def get_initial(self):
                 'tenant_id': self.request.user.tenant_id}
 
     def flavor_list(self):
-        display = '%(name)s (%(vcpus)sVCPU / %(disk)sGB Disk / %(ram)sMB Ram )'
         try:
             flavors = api.flavor_list(self.request)
-            flavor_list = [(flavor.id, display % {"name": flavor.name,
-                                                  "vcpus": flavor.vcpus,
-                                                  "disk": flavor.disk,
-                                                  "ram": flavor.ram})
-                                                for flavor in flavors]
+            flavor_list = [(flavor.id,
+                            "%s" % flavor.name) for flavor in flavors]
         except:
             flavor_list = []
             exceptions.handle(self.request,

diff --git a/horizon/dashboards/nova/templates/nova/images_and_snapshots/images/_launch.html b/horizon/dashboards/nova/templates/nova/images_and_snapshots/images/_launch.html
@@ -15,10 +15,22 @@
   </fieldset>
 </div>
 <div class="right">
-  <h3>{% trans "Description:" %}</h3>
+  <h3>{% trans "Description" %}</h3>
   <p>{% trans "Specify the details for launching an instance. The chart below shows the resources used by this project in relation to the project's quotas." %}</p>
-  <h3>{% trans "Project Quotas" %}</h3>
 
+  <h3>{% trans "Flavor Details" %}</h3>
+  <table class="flavor_table table-striped">
+    <tbody>
+      <tr><td class="flavor_name">{% trans "Name" %}</td><td><span id="flavor_name"></span></td></tr>
+      <tr><td class="flavor_name">{% trans "VCPUs" %}</td><td><span id="flavor_vcpus"></span></td></tr>
+      <tr><td class="flavor_name">{% trans "Root Disk" %}</td><td><span id="flavor_disk"> </span> {% trans "GB" %}</td></tr>
+      <tr><td class="flavor_name">{% trans "Ephemeral Disk" %}</td><td><span id="flavor_ephemeral"></span> {% trans "GB" %}</td></tr>
+      <tr><td class="flavor_name">{% trans "Total Disk" %}</td><td><span id="flavor_disk_total"></span> {% trans "GB" %}</td></tr>
+      <tr><td class="flavor_name">{% trans "RAM" %}</td><td><span id="flavor_ram"></span> {% trans "MB" %}</td></tr>
+    </tbody>
+  </table>
+
+  <h3>{% trans "Project Quotas" %}</h3>
   <div class="quota_title">
     <strong>{% trans "Instance Count" %} <span>({{ usages.instances.used }})</span></strong>
     <p>{{ usages.instances.available|quota }}</p>

diff --git a/horizon/static/horizon/js/forms.js b/horizon/static/horizon/js/forms.js
@@ -128,4 +128,12 @@ horizon.updateQuotaUsages = function(flavors, usages) {
 
     el.animate({width: width + "%"}, 300);
   });
+
+  // Also update flavor details
+  $("#flavor_name").html(horizon.utils.truncate(selectedFlavor.name, 14, true));
+  $("#flavor_vcpus").text(selectedFlavor.vcpus);
+  $("#flavor_disk").text(selectedFlavor.disk);
+  $("#flavor_ephemeral").text(selectedFlavor["OS-FLV-EXT-DATA:ephemeral"]);
+  $("#flavor_disk_total").text(selectedFlavor.disk + selectedFlavor["OS-FLV-EXT-DATA:ephemeral"]);
+  $("#flavor_ram").text(selectedFlavor.ram);
 };
diff --git a/horizon/static/horizon/js/horizon.js b/horizon/static/horizon/js/horizon.js
@@ -257,15 +257,27 @@ var Horizon = function() {
       cancel = "Cancel";
     }
     var template = horizon.templates.compiled_templates["#modal_template"],
-        params = {title: title, body: body, confirm: confirm, cancel: cancel},
-        modal = $(template.render(params)).appendTo("body");
+      params = {title: title, body: body, confirm: confirm, cancel: cancel},
+      modal = $(template.render(params)).appendTo("body");
     return modal;
   };
 
   /* Utilities for common needs which aren't JS builtins. */
   horizon.utils = {
     capitalize: function(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    },
+    // Truncate a string at the desired length
+    truncate: function(string, size, includeEllipsis) {
+      var ellip = "";
+      if(includeEllipsis) {
+        ellip = "&hellip;";
+      }
+      if(string.length > size) {
+        return string.substring(0, size) + ellip;
+      } else {
+        return string;
+      }
     }
   };
 

diff --git a/openstack_dashboard/static/dashboard/css/style.css b/openstack_dashboard/static/dashboard/css/style.css
@@ -994,6 +994,20 @@ iframe {
   margin: -8px 0 8px;
 }
 
+div .flavor_table {
+  border: 1px solid #AAA;
+  width: 100%;
+  margin-bottom: 14px;
+}
+
+.flavor_table .flavor_name {
+  white-space: nowrap;
+  font-weight: bold;
+  text-align: left;
+  padding: 7px 12px 7px 7px;
+  width: 160px;
+}
+
 #main_content .row-fluid {
   margin: 10px 0 20px;
 }