Merge "Show popups on node boxes everywhere"

tuskar_boxes/overview/views.py

@@ -17,6 +17,7 @@ import operator
 
 from django.core.urlresolvers import reverse
 import django.utils.text
+from django.utils.translation import ugettext_lazy as _
 from openstack_dashboard.api import base as api_base
 
 from tuskar_ui import api
@@ -78,6 +79,8 @@ def _node_data(request, nodes):
             'uuid': node.uuid,
             'role_name': role.name if role else '',
             'role_slug': django.utils.text.slugify(role.name) if role else '',
+            'node_title': unicode(_("{0} node").format(role.name.title())
+                                  if role else _("Free node")),
             'state': node.state,
             'state_slug': django.utils.text.slugify(unicode(node.state)),
             'state_icon': NODE_STATE_ICON.get(node.state,
@@ -115,6 +118,13 @@ class IndexView(views.IndexView):
     def get_data(self, request, context, *args, **kwargs):
         data = super(IndexView, self).get_data(request, context,
                                                *args, **kwargs)
+        nodes = list(_node_data(
+            request, api.node.Node.list(request, maintenance=False),
+        ))
+        nodes.sort(key=lambda node: node.get('role_name'))
+        nodes.reverse()
+        data['nodes'] = nodes
+
         if not data['stack']:
             flavors = api.flavor.Flavor.list(self.request)
             if not MATCHING_DEPLOYMENT_MODE:
@@ -126,6 +136,7 @@ class IndexView(views.IndexView):
             free_roles = []
             flavor_roles = {}
             for role in roles:
+                if 'form' in data:
                     role['flavor_field'] = data['form'][role['id'] + '-flavor']
                 flavor = role['role'].flavor(data['plan'])
                 if flavor in flavors:
@@ -138,13 +149,6 @@ class IndexView(views.IndexView):
             data['flavors'] = list(
                 _flavor_data(self.request, flavors, flavor_roles))
         else:
-            nodes = list(_node_data(
-                request, api.node.Node.list(request, maintenance=False),
-            ))
-
-            nodes.sort(key=lambda node: node.get('role_name'))
-            nodes.reverse()
-            data['nodes'] = nodes
             distribution = collections.Counter()
 
             for node in nodes:

tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes_progress.js

@@ -7,7 +7,14 @@ tuskar.boxes_progress = function () {
   };
 
   module.update_progress = function (data) {
-    $('div.boxes-nodes').html(module.nodes_template.render(data));
+    var $nodes = $('div.boxes-nodes');
+    $nodes.html(module.nodes_template.render(data));
+    $nodes.find('div.boxes-node').popover({
+      'trigger': 'hover',
+      'placement': 'auto',
+      'delay': 500,
+      'html': true
+    });
   };
 
   // Attach to the original update procedure.

tuskar_boxes/templates/tuskar_boxes/overview/_node_info.html

@@ -1,8 +1,18 @@
 {% load i18n %}
 <div
-  class="boxes-node boxes-role-none"
+  class="boxes-nodes
+  {% if nodes|length >= 100 %}
+    boxes-nodes-small
+  {% elif nodes|length >= 25 %}
+    boxes-nodes-medium
+  {% endif %}
+  {{ classes }}"
+>
+{% for node in nodes %}{% spaceless %}
+<div
+  class="boxes-node boxes-role-{{ node.role_slug }}"
   data-toggle="popover"
-  title="{{ node.role_name|title|default:_('Free') }} {% trans 'node' %}"
+  title="{{ node.node_title }}"
   data-content="<dl>
     <dt>{% trans "Node UUID" %}</dt>
     <dd>{{ node.uuid }}</dd>
@@ -15,4 +25,6 @@
     <dt>{% trans "HDD (GB)" %}</dt>
     <dd>{{ node.local_gb }}</dd>
   </dl>"
->free</div>
+  ><i class="fa fa-lg {{ node.state_icon }}"></i></div>
+{% endspaceless %}{% endfor %}
+</div>

tuskar_boxes/templates/tuskar_boxes/overview/_node_info_js.html

@@ -0,0 +1,23 @@
+{% load i18n %}
+{% load horizon %}
+<script type="text/html" id="nodes-template">{% spaceless %}{% jstemplate %}
+[[#nodes]]
+  <div
+    class="boxes-node boxes-role-[[ role_slug ]] status-[[ state_slug ]]"
+    data-toggle="popover"
+    title="[[ node_title ]]"
+    data-content="<dl>
+      <dt>{% trans "Node UUID" %}</dt>
+      <dd>[[ uuid ]]</dd>
+      <dt>{% trans "Architecture" %}</dt>
+      <dd>[[ cpu_arch ]]</dd>
+      <dt>{% trans "CPUs" %}</dt>
+      <dd>[[ cpus ]]</dt>
+      <dt>{% trans "RAM (MB)" %}</dt>
+      <dd>[[ memory_mb ]]</dd>
+      <dt>{% trans "HDD (GB)" %}</dt>
+      <dd>[[ local_gb ]]</dd>
+    </dl>"
+  ><i class="fa fa-lg [[ state_icon ]]"></i></div>
+[[/nodes]]
+{% endjstemplate %}{% endspaceless %}</script>

tuskar_boxes/templates/tuskar_boxes/overview/index.html

@@ -67,11 +67,7 @@
                 {% endif %}
             {% endfor %}
         </div>
-        <div class="boxes-nodes {% if nodes|length >= 100 %}boxes-nodes-small{% elif nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
-            {% for node in nodes %}{% spaceless %}
-                <div class="boxes-node boxes-role-{{ node.role_slug }}"></div>
-            {% endspaceless %}{% endfor %}
-        </div>
+        {% include "tuskar_boxes/overview/_node_info.html" with nodes=nodes %}
     {% endif %}
   </div>
 </div>

tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html

@@ -58,11 +58,7 @@
               </ul>
             </div>
         </div>
-        <div class="col-xs-7 boxes-nodes {% if flavor.nodes|length >= 100 %}boxes-nodes-small{% elif flavor.nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
-            {% for node in flavor.nodes %}{% spaceless %}
-            {% include "tuskar_boxes/overview/_node_info.html" with node=node %}
-            {% endspaceless %}{% endfor %}
-        </div>
+        {% include "tuskar_boxes/overview/_node_info.html" with nodes=flavor.nodes classes="col-xs-7" %}
     </div>
 </div>
 {% endfor %}

tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_status.html

@@ -20,13 +20,7 @@
       </div>
   {% endfor %}
   </div>
-  <div class="col-xs-7 boxes-nodes {% if nodes|length >= 100 %}boxes-nodes-small{% elif nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
-      {% for node in nodes %}{% spaceless %}
-      <div class="boxes-node boxes-role-{{ node.role_slug }} status-{{ node.state_slug }}" title="{{ node.uuid }}">
-        <i class="fa fa-lg {{ node.state_icon }}"></i>
-      </div>
-      {% endspaceless %}{% endfor %}
-  </div>
+  {% include "tuskar_boxes/overview/_node_info.html" with nodes=nodes classes="col-xs-7" %}
 </div>
 
 <script type="text/html" id="roles-template">{% spaceless %}{% jstemplate %}
@@ -46,10 +40,4 @@
     </div>
 [[/roles]]
 {% endjstemplate %}{% endspaceless %}</script>
-<script type="text/html" id="nodes-template">{% spaceless %}{% jstemplate %}
-[[#nodes]]
-  <div class="boxes-node boxes-role-[[ role_slug ]] status-[[ state_slug ]]" title="[[ uuid ]]">
-    <i class="fa fa-lg [[ state_icon ]]"></i>
-  </div>
-[[/nodes]]
-{% endjstemplate %}{% endspaceless %}</script>
+{% include "tuskar_boxes/overview/_node_info_js.html" %}