Add more buttons to the overview page

* Register nodes
* Global config
* Edit button on unassigned roles
* Remove button on assigned roles

Change-Id: I516c8d4c705b1756342f85b09d98c70b25672258
Note: the global config dialog is not ready yet, so the button doesn't work.

tuskar_boxes/overview/urls.py

@@ -24,6 +24,7 @@ urlpatterns = tuskar_urls.urlpatterns[1:]
 urlpatterns.extend(urls.patterns(
     '',
     urls.url(r'^$', views.IndexView.as_view(), name='index'),
+    urls.url(r'^config$', views.IndexView.as_view(), name='config'),
 ))
 
 if settings.DEBUG:

tuskar_boxes/overview/views.py

@@ -174,3 +174,20 @@ class IndexView(views.IndexView):
         out = super(IndexView, self).get_progress_update(request, data)
         out['nodes'] = data.get('nodes', [])
         return out
+
+    def get_context_data(self, **kwargs):
+        context = super(IndexView, self).get_context_data(**kwargs)
+        context['header_actions'] = [{
+            'name': _('Edit Global Configuration'),
+            'show_name': True,
+            'url': reverse('horizon:infrastructure:overview:config'),
+            'icon': 'fa-pencil',
+            'ajax_modal': True,
+        }, {
+            'name': _('Register Nodes'),
+            'show_name': True,
+            'url': reverse('horizon:infrastructure:nodes:register'),
+            'icon': 'fa-plus',
+            'ajax_modal': True,
+        }]
+        return context

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

@@ -113,6 +113,18 @@ tuskar.boxes = (function () {
         $count.trigger('change');
         window.setTimeout(module.update_boxes, 0);
     });
+
+    $('.deploy-role-remove').click(function () {
+        var $role = $(this).closest('.boxes-role');
+        var $count = $role.find('input.number-picker');
+        var $flavor = $role.find('input.boxes-flavor');
+        var $drop = $('.boxes-available-roles');
+        $role.appendTo($drop);
+        $flavor.val('');
+        $count.val(0);
+        $count.trigger('change');
+        window.setTimeout(module.update_boxes, 0);
+    });
   };
 
   horizon.addInitFunction(module.init);

tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss

@@ -38,15 +38,12 @@
     min-width: 120px;
     display: inline-block;
     padding: 4px 0 0 4px;
-    .boxes-role {
+    .boxes-role, .boxes-role:hover {
         display: inline-block;
         text-align: center;
-        width: 120px;
+        width: 180px;
         margin: 0 4px 4px 0;
-        border: 1px solid #999;
-        background: #eee;
-        color: #666;
-        .deploy-role-icon, .deploy-role-count, .form-control {
+        .deploy-role-remove, .deploy-role-count, .form-controller{
             display: none;
         }
         .deploy-role-label {
@@ -57,9 +54,14 @@
                 font-weight: normal;
             }
         }
+        .deploy-role-icon {
+            top: -8px;
+            right: -8px;
+        }
     }
 }
 .boxes-role {
+    position: relative;
     opacity: 0.75;
     padding: 6px;
     border: 1px solid;
@@ -69,6 +71,22 @@
     color: #c4a000;
     margin: 0 0 4px 0;
     cursor: move;
+    .deploy-role-icon {
+        position: absolute;
+        top: 8px;
+        right: -8px;
+        display: none;
+    }
+    .deploy-role-remove {
+        position: absolute;
+        top: -4px;
+        right: -8px;
+        display: none;
+    }
+}
+.boxes-role:hover .deploy-role-icon,
+.boxes-role:hover .deploy-role-remove {
+    display: block;
 }
 .deploy-role-status .boxes-role {
     cursor: default;
@@ -97,6 +115,7 @@
   border-color: inherit;
 }
 .boxes-role .deploy-role-icon a,
+.boxes-role .deploy-role-remove a,
 .boxes-role .number_picker,
 .boxes-role .number_picker a {
   color: inherit;

tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html

@@ -7,20 +7,25 @@
   data-name="{{ role.name|slugify }}"
 >
   <div class="row">
-    <div class="col-xs-3 deploy-role-count">
+    <div class="col-xs-5 deploy-role-count">
       {{ role.field|add_bootstrap_class }}
       {{ role.flavor_field|add_bootstrap_class }}
     </div>
-    <div class="col-xs-6 deploy-role-label">
+    <div class="col-xs-7 deploy-role-label">
       <div class="deployment-roles-label">{{ role.name|title }}</div>
     </div>
-    <div class="col-xs-3 deploy-role-icon">
+    <div class="deploy-role-icon">
       <a name="role-edit-{{role.name|slugify}}"
       href="{% url 'horizon:infrastructure:roles:update' role_id=role.id %}"
-      class="btn">
+      class="btn ajax-modal">
         <b class="fa fa-lg fa-fw fa-pencil"></b>
       </a>
     </div>
+    <div class="deploy-role-remove">
+      <a name="role-remove-{{role.name|slugify}}" href="#" class="btn">
+        <b class="fa fa-lg fa-fw fa-times"></b>
+      </a>
+    </div>
   </div>
 </div>
 {% endspaceless %}

tuskar_boxes/templates/tuskar_boxes/overview/index.html

@@ -21,7 +21,8 @@
 {% block title %}{% trans 'My OpenStack Deployment' %}{% endblock %}
 
 {% block page_header %}
-  {% include 'horizon/common/_domain_page_header.html' with title=_('My OpenStack Deployment') %}
+  {% include 'horizon/common/_items_count_domain_page_header.html' with title=_('My OpenStack Deployment') %}
+
 {% endblock page_header %}
 
 {% block main %}