From 5f034650a3f67538efadeb829ec0842a7fa33cf3 Mon Sep 17 00:00:00 2001
From: Vitaly Kramskikh <vkramskikh@gmail.com>
Date: Wed, 18 Jul 2012 18:05:20 +0400
Subject: [PATCH] Roles Assign dialog stub, some UI refactor

---
 nailgun/nailgun/static/css/overlap.css        |  4 ++
 nailgun/nailgun/static/index.html             | 12 ------
 nailgun/nailgun/static/js/views/cluster.js    |  6 ++-
 nailgun/nailgun/static/js/views/dialogs.js    | 29 +++++++++++---
 .../static/templates/cluster/node.html        |  2 +-
 .../static/templates/cluster/page.html        | 11 ++++--
 .../templates/dialogs/add_remove_nodes.html   |  4 +-
 .../templates/dialogs/assign_roles.html       | 39 +++++++++++++++++++
 .../templates/dialogs/create_cluster.html     |  4 +-
 9 files changed, 84 insertions(+), 27 deletions(-)
 create mode 100644 nailgun/nailgun/static/templates/dialogs/assign_roles.html

diff --git a/nailgun/nailgun/static/css/overlap.css b/nailgun/nailgun/static/css/overlap.css
index 5873d4812..484359888 100644
--- a/nailgun/nailgun/static/css/overlap.css
+++ b/nailgun/nailgun/static/css/overlap.css
@@ -241,6 +241,10 @@ behavior: url(/static/css/pie.htc);
   color: #333333;
 }
 
+.cluster-control .btn {
+  margin-left: 15px;
+}
+
 .dialog-node {
   cursor: pointer !important;
 }
diff --git a/nailgun/nailgun/static/index.html b/nailgun/nailgun/static/index.html
index 98396ebf1..71131a9e7 100644
--- a/nailgun/nailgun/static/index.html
+++ b/nailgun/nailgun/static/index.html
@@ -10,18 +10,6 @@
     <link href="/static/css/overlap.css" rel="stylesheet">
     <link href="/static/css/buttons.css" rel="stylesheet">
     <link href="/static/css/font-awesome.css" rel="stylesheet">
-    <style>
-    @font-face {
-      font-family: 'FontAwesome';
-      src: url('/static/font/fontawesome-webfont.eot');
-      src: url('/static/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
-        url('/static/font/fontawesome-webfont.woff') format('woff'),
-        url('/static/font/fontawesome-webfont.ttf') format('truetype'),
-        url('/static/font/fontawesome-webfont.svg#FontAwesome') format('svg');
-      font-weight: normal;
-      font-style: normal;
-    }
-    </style>
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
diff --git a/nailgun/nailgun/static/js/views/cluster.js b/nailgun/nailgun/static/js/views/cluster.js
index 19d102b64..b88a7764c 100644
--- a/nailgun/nailgun/static/js/views/cluster.js
+++ b/nailgun/nailgun/static/js/views/cluster.js
@@ -16,11 +16,15 @@ function(models, dialogViews, taskViews, clusterPageTemplate, clusterNodeTemplat
         updateInterval: 5000,
         template: _.template(clusterPageTemplate),
         events: {
-            'click .js-add-nodes': 'addRemoveNodes'
+            'click .add-nodes-btn': 'addRemoveNodes',
+            'click .assign-roles-btn': 'assignRoles'
         },
         addRemoveNodes: function(e) {
             (new dialogViews.addRemoveNodesDialog({model: this.model})).render();
         },
+        assignRoles: function(e) {
+            (new dialogViews.assignRolesDialog({model: this.model})).render();
+        },
         initialize: function() {
             this.model.bind('change', this.render, this);
             this.scheduleUpdate();
diff --git a/nailgun/nailgun/static/js/views/dialogs.js b/nailgun/nailgun/static/js/views/dialogs.js
index d5948f98c..8dc05aac0 100644
--- a/nailgun/nailgun/static/js/views/dialogs.js
+++ b/nailgun/nailgun/static/js/views/dialogs.js
@@ -3,20 +3,20 @@ define(
     'models',
     'text!templates/dialogs/add_remove_nodes.html',
     'text!templates/dialogs/create_cluster.html',
-    'text!templates/dialogs/node_list.html'
+    'text!templates/dialogs/node_list.html',
+    'text!templates/dialogs/assign_roles.html'
 ],
-function(models, addRemoveNodesDialogTemplate, createClusterDialogTemplate, nodeDialogNodeListTemplate) {
+function(models, addRemoveNodesDialogTemplate, createClusterDialogTemplate, nodeDialogNodeListTemplate, assignRolesDialogTemplate) {
     var views = {}
 
     views.addRemoveNodesDialog = Backbone.View.extend({
         className: 'modal fade',
         template: _.template(addRemoveNodesDialogTemplate),
         events: {
-            'click .js-save-changes': 'saveChanges',
+            'click .save-changes-btn': 'saveChanges',
             'click .dialog-node': 'toggleNode'
         },
         saveChanges: function(e) {
-            e.preventDefault();
             var nodes = this.$('.node-checked').map(function(){return $(this).attr('data-node-id')}).get();
             this.model.update({nodes: nodes});
             this.$el.modal('hide');
@@ -45,11 +45,10 @@ function(models, addRemoveNodesDialogTemplate, createClusterDialogTemplate, node
         className: 'modal fade',
         template: _.template(createClusterDialogTemplate),
         events: {
-            'click .js-create-cluster': 'createCluster',
+            'click .create-cluster-btn': 'createCluster',
             'click .dialog-node': 'toggleNode'
         },
         createCluster: function(e) {
-            e.preventDefault();
             this.$('.help-inline').text('');
             this.$('.control-group').removeClass('error');
             var nodes = this.$('.node-checked').map(function(){return $(this).attr('data-node-id')}).get();
@@ -111,5 +110,23 @@ function(models, addRemoveNodesDialogTemplate, createClusterDialogTemplate, node
         }
     });
 
+    views.assignRolesDialog = Backbone.View.extend({
+        className: 'modal fade',
+        template: _.template(assignRolesDialogTemplate),
+        events: {
+            'click .assign-roles-btn': 'assignRoles'
+        },
+        assignRoles: function() {
+            // TODO
+            this.$el.modal('hide');
+        },
+        render: function() {
+            this.$el.html(this.template());
+            this.$el.on('hidden', function() {$(this).remove()});
+            this.$el.modal();
+            return this;
+        }
+    });
+
     return views;
 });
diff --git a/nailgun/nailgun/static/templates/cluster/node.html b/nailgun/nailgun/static/templates/cluster/node.html
index bab240114..6c59ed937 100644
--- a/nailgun/nailgun/static/templates/cluster/node.html
+++ b/nailgun/nailgun/static/templates/cluster/node.html
@@ -46,7 +46,7 @@
         </div>
       <% } else if (node.get('status') == 'error') { %>
         <div class="statusbar-text msg-error">
-          <i class="icon-warning-sign"></i><strong>Error</strong>
+          <i class="icon-exclamation-sign"></i><strong>Error</strong>
         </div>
       <% } else if (node.get('status') == 'deploying') { %>
         <div class="statusbar-text msg-warning">
diff --git a/nailgun/nailgun/static/templates/cluster/page.html b/nailgun/nailgun/static/templates/cluster/page.html
index cffe765b2..f2e7fd96b 100644
--- a/nailgun/nailgun/static/templates/cluster/page.html
+++ b/nailgun/nailgun/static/templates/cluster/page.html
@@ -1,7 +1,12 @@
 <div class="row">
-  <div class="span8"><h1><%= cluster.get('name') %></h1></div>
-  <div class="span2"><button class="btn pull-right"><i class="icon-wrench icon-white"></i>Settings</button></div>
-  <div class="span2"><button class="btn btn-success pull-right js-add-nodes"><i class="icon-plus-sign icon-white"></i>Add Nodes</button></div>
+  <div class="span6">
+    <h1><%= cluster.get('name') %></h1>
+  </div>
+  <div class="span6 cluster-control">
+    <button class="btn btn-success pull-right add-nodes-btn"><i class="icon-plus-sign icon-white"></i>Add Nodes</button>
+    <button class="btn pull-right assign-roles-btn"><i class="icon-tags icon-white"></i>Assign Roles</button>
+    <button class="btn pull-right"><i class="icon-wrench icon-white"></i>Settings</button>
+  </div>
 </div>
 <div class="deployment-control"></div>
 <div class="task-status"></div>
diff --git a/nailgun/nailgun/static/templates/dialogs/add_remove_nodes.html b/nailgun/nailgun/static/templates/dialogs/add_remove_nodes.html
index 3e45b08cd..3640493e5 100644
--- a/nailgun/nailgun/static/templates/dialogs/add_remove_nodes.html
+++ b/nailgun/nailgun/static/templates/dialogs/add_remove_nodes.html
@@ -19,6 +19,6 @@
   </div>
 </div>
 <div class="modal-footer">
-  <a href="#" class="btn" data-dismiss="modal">Close</a>
-  <a href="#" class="btn btn-success js-save-changes">Save changes</a>
+  <button class="btn" data-dismiss="modal">Close</button>
+  <button class="btn btn-success save-changes-btn">Save changes</button>
 </div>
diff --git a/nailgun/nailgun/static/templates/dialogs/assign_roles.html b/nailgun/nailgun/static/templates/dialogs/assign_roles.html
new file mode 100644
index 000000000..3f64fab40
--- /dev/null
+++ b/nailgun/nailgun/static/templates/dialogs/assign_roles.html
@@ -0,0 +1,39 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal">×</button>
+  <h2>Assign Roles</h2>
+</div>
+<div class="modal-body">
+  <h3>Please choose deployment type</h3>
+  <form>
+    <table class="table">
+      <tbody>
+        <tr>
+          <td style="width: 16px;">
+            <label class="radio">
+              <input type="radio" name="type">
+            </label>
+          </td>
+          <td>
+            <p>Simple Deployment</p>
+            <p><small>Simple OpenStack deployment</small></p>
+          </td>
+        </tr>
+        <tr>
+          <td style="width: 16px;">
+            <label class="radio">
+              <input type="radio" name="type">
+            </label>
+          </td>
+          <td>
+            <p>HA Deployment</p>
+            <p><small>Highly-available OpenStack deployment</small></p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
+</div>
+<div class="modal-footer">
+  <button class="btn" data-dismiss="modal">Cancel</button>
+  <button class="btn btn-success assign-roles-btn">Assign Roles</button>
+</div>
diff --git a/nailgun/nailgun/static/templates/dialogs/create_cluster.html b/nailgun/nailgun/static/templates/dialogs/create_cluster.html
index b9f6536d4..93278ee2a 100644
--- a/nailgun/nailgun/static/templates/dialogs/create_cluster.html
+++ b/nailgun/nailgun/static/templates/dialogs/create_cluster.html
@@ -35,6 +35,6 @@
   </div>
 </div>
 <div class="modal-footer">
-  <a href="#" class="btn" data-dismiss="modal">Cancel</a>
-  <a href="#" class="btn btn-success js-create-cluster">Create Cluster</a>
+  <button class="btn" data-dismiss="modal">Cancel</button>
+  <button class="btn btn-success create-cluster-btn">Create Cluster</button>
 </div>