Merge "Update node status on progress page with ajax"

tuskar_boxes/overview/views.py

@@ -12,6 +12,8 @@
 #    License for the specific language governing permissions and limitations
 #    under the License.
 
+import django.utils.text
+
 from tuskar_ui import api
 from tuskar_ui.infrastructure.overview import views
 from tuskar_boxes.overview import forms
@@ -86,11 +88,24 @@ class IndexView(views.IndexView):
             for role in context['roles']:
                 role['flavor_field'] = context['form'][role['id'] + '-flavor']
         else:
-            context['nodes'] = [{
-                'uuid': node.uuid,
-                'role': node_role(self.request, node),
-                'state': node.state,
-                'state_icon': NODE_STATE_ICON.get(node.state,
-                                                  NODE_STATE_ICON[None]),
-            } for node in api.node.Node.list(self.request, maintenance=False)]
+            nodes = []
+            for node in api.node.Node.list(self.request, maintenance=False):
+                role = node_role(self.request, node)
+                nodes.append({
+                    'uuid': node.uuid,
+                    'role_name': role.name if role else '',
+                    'role_slug': django.utils.text.slugify(role.name)
+                        if role else '',
+                    'state': node.state,
+                    'state_slug': django.utils.text.slugify(
+                        unicode(node.state)),
+                    'state_icon': NODE_STATE_ICON.get(node.state,
+                                                      NODE_STATE_ICON[None]),
+                })
+            context['nodes'] = nodes
         return context
+
+    def get_progress_update(self, request, data):
+        out = super(IndexView, self).get_progress_update(request, data)
+        out['nodes'] = data.get('nodes', [])
+        return out

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

@@ -0,0 +1,22 @@
+tuskar.boxes_progress = function () {
+  'use static';
+  var module = {};
+
+  module.init = function () {
+    module.nodes_template = Hogan.compile($('#nodes-template').html() || '');
+  };
+
+  module.update_progress = function (data) {
+    $('div.boxes-nodes').html(module.nodes_template.render(data));
+  };
+
+  // Attach to the original update procedure.
+  var orig_update_progress = tuskar.deployment_progress.update_progress;
+  tuskar.deployment_progress.update_progress = function () {
+    orig_update_progress.apply(tuskar.deployment_progress, arguments);
+    module.update_progress.apply(module, arguments);
+  };
+
+  horizon.addInitFunction(module.init);
+  return module;
+} ();

tuskar_boxes/templates/tuskar_boxes/overview/index.html

@@ -14,6 +14,7 @@
 {% block js %}
   {{ block.super }}
   <script src='{{ STATIC_URL }}tuskar_boxes/js/tuskar.boxes.js' type='text/javascript' charset='utf-8'></script>
+  <script src='{{ STATIC_URL }}tuskar_boxes/js/tuskar.boxes_progress.js' type='text/javascript' charset='utf-8'></script>
 {% endblock %}
 
 

tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_status.html

@@ -22,7 +22,7 @@
   </div>
   <div class="col-xs-7 boxes-nodes">
       {% for node in nodes %}{% spaceless %}
-      <div class="boxes-node boxes-role-{{ node.role.name|slugify }} status-{{ node.status|slugify }}" title="{{ node.uuid }}">
+      <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 %}
@@ -31,7 +31,7 @@
 
 <script type="text/html" id="roles-template">{% spaceless %}{% jstemplate %}
 [[#roles]]
-    <div class="boxes-role boxes-role boxes-role[[ slug ]] clearfix">
+    <div class="boxes-role boxes-role boxes-role-[[ slug ]] clearfix">
       <div class="col-xs-2 deploy-role-count">
         [[#finished]]
           [[ deployed_node_count ]]
@@ -46,3 +46,10 @@
     </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>