Render roles without images differently

Change-Id: I8b595bde1dc242094614b64af104e3e4d7d4c0d8

tuskar_boxes/overview/views.py

@@ -148,6 +148,11 @@ class IndexView(views.IndexView):
                     if field:
                         field.initial = 0
                     free_roles.append(role)
+                # For now, role is valid if it has image.
+                if role['role'].image:
+                    role['is_valid'] = True
+                else:
+                    role['is_valid'] = False
             data['free_roles'] = free_roles
             data['flavors'] = list(
                 _flavor_data(self.request, flavors, flavor_roles))

tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js

@@ -64,7 +64,7 @@ tuskar.boxes = (function () {
       // Only activate on a page that has the right classes.
       return;
     }
-    $('div.boxes-role').draggable({
+    $('div.boxes-role:not(.boxes-role-invalid)').draggable({
         revert: 'invalid',
         helper: 'clone',
         zIndex: 1000,

tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss

@@ -91,6 +91,11 @@
 .deploy-role-status .boxes-role {
     cursor: default;
 }
+.boxes-role-invalid {
+    border: 1px solid #999;
+    background: #eee;
+    color: #666;
+}
 .boxes-role-controller {
     background-color: #fcaf3e;
     border-color: #f57900;

tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html

@@ -3,8 +3,9 @@
 {% load url from future %}
 {% load form_helpers %}
 <div
-  class="boxes-role-{{ role.name|slugify }} boxes-role"
+  class="{% if role.is_valid %}boxes-role-{{ role.name|slugify }}{% else %}boxes-role-invalid{% endif %} boxes-role"
   data-name="{{ role.name|slugify }}"
+  {% if not role.is_valid %}title="{% trans 'Please edit this role to fill out any necessary missing configuration.' %}"{% endif %}
 >
   <div class="row">
     <div class="col-xs-5 deploy-role-count">
@@ -12,7 +13,10 @@
       {{ role.flavor_field|add_bootstrap_class }}
     </div>
     <div class="col-xs-7 deploy-role-label">
-      <div class="deployment-roles-label">{{ role.name|title }}</div>
+      <div class="deployment-roles-label">
+        {% if not role.is_valid %}<b class="fa fa-lg fa-fw fa-question"></b>{% endif %}
+        {{ role.name|title }}
+      </div>
     </div>
     <div class="deploy-role-icon">
       <a name="role-edit-{{role.name|slugify}}"