html and css for role per-environment run lists, css refactor

9 files changed, 252 insertions, 172 deletions

diff --git a/chef-server-webui/app/controllers/application.rb b/chef-server-webui/app/controllers/application.rb
index 407abae358..67866225b9 100644
--- a/chef-server-webui/app/controllers/application.rb
+++ b/chef-server-webui/app/controllers/application.rb
@@ -262,8 +262,8 @@ class Application < Merb::Controller
   def get_available_recipes
     r = Chef::REST.new(Chef::Config[:chef_server_url])
     all_recipes = Array.new
-    r.get_rest('cookbooks/_recipes').keys.each do |cb|
-      all_recipes << all[cb].sort{|x,y| y <=> x }.map do |ver, recipes|
+    r.get_rest('cookbooks/_recipes').each do |cb, versions|
+      all_recipes << versions.sort{|x,y| y <=> x }.map do |ver, recipes|
         recipes.map{ |rn| rn == "default" ? "#{cb} #{ver}" : "#{cb}::#{rn} #{ver}" }
       end
     end
diff --git a/chef-server-webui/app/controllers/roles.rb b/chef-server-webui/app/controllers/roles.rb
index bdf3186124..91083a4692 100644
--- a/chef-server-webui/app/controllers/roles.rb
+++ b/chef-server-webui/app/controllers/roles.rb
@@ -56,6 +56,9 @@ class Roles < Application
       @role = Chef::Role.new
       @available_roles = Chef::Role.list.keys.sort
       @run_list = @role.run_list
+      @environments = ['_default']
+      @current_env = "_default"
+      @selected
       render
     rescue => e
       Chef::Log.error("#{e}\n#{e.backtrace.join("\n")}")
@@ -72,6 +75,8 @@ class Roles < Application
       @available_recipes = get_available_recipes 
       @available_roles = Chef::Role.list.keys.sort
       @run_list = @role.run_list
+      @environments = @role.env_run_lists.keys
+      @current_env = @role.env_run_lists.key?(session[:environment]) ? session[:environment] : "_default"
     rescue => e
       Chef::Log.error("#{e}\n#{e.backtrace.join("\n")}")
       @role = Chef::Role.new
diff --git a/chef-server-webui/app/helpers/application_helper.rb b/chef-server-webui/app/helpers/application_helper.rb
index 1aaf4f6b9d..c3873bc5a6 100644
--- a/chef-server-webui/app/helpers/application_helper.rb
+++ b/chef-server-webui/app/helpers/application_helper.rb
@@ -8,5 +8,9 @@ module Merb
       ::ChefServerWebui::VERSION
     end
 
+    def class_for_run_list_item(item)
+      item.type == 'role' ? 'ui-state-highlight' : 'ui-state-default'
+    end
+
   end
 end
diff --git a/chef-server-webui/app/views/nodes/_form.html.erb b/chef-server-webui/app/views/nodes/_form.html.erb
new file mode 100644
index 0000000000..0115ff9577
--- /dev/null
+++ b/chef-server-webui/app/views/nodes/_form.html.erb
@@ -0,0 +1,63 @@
+<div class="content nodeFormContainer">
+    <%= form(:action => form_url, :method => :post, :id => form_id, :class => 'form') do -%>
+    <% unless form_for == 'edit' %>
+      <div class="group form">
+        <label class="label" for="node_name">Name</label>
+        <%= text_field :id => "node_name", :name => "name", :class => "text_field", :value => params.has_key?(:name) ? h(params[:name]) : @node.name %>
+        <span class="description">The name of the Node</span>
+      </div>
+    <% end %>
+
+    <div class="group form" id="run_list_editor_container">
+      <div id="availableRunListItemContainer" class="runListEditorColumn">
+        <div id="available_nodes_container" >
+          <span class="runListEditorLabel">Available Roles</span>
+          <div class="sortable runListAvailableItemContainer">
+            <ul id="node_available_roles" class="connectedSortable runListAvailableItemList">
+              <% @available_roles.each do |role| %>
+                <li id="role[<%=h(role)  -%>]" class="ui-state-highlight runListItem"><%= h(role) -%></li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+        <div id="available_recipes_container">
+          <span class="runListEditorLabel">Available Recipes</span>
+          <div class="sortable runListAvailableItemContainer">
+            <ul id="node_available_recipes" class="connectedSortable runListAvailableItemList">
+              <% @available_recipes.each do |recipe|
+                 versioned_recipe = recipe.split(/\s+/).join('@') %>
+                <li id="recipe[<%= h(versioned_recipe) -%>]" class="ui-state-default runListItem"><%= h(versioned_recipe) -%></li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div id="run_list_container" class="runListEditorColumn">
+        <div id="environment_run_list_selector">
+          <span class="runListEditorLabel">Run List</span>
+        </div>
+        <div class="sortable runListContainer">
+          <ul class="ui-sortable connectedSortable runListItemList" id="for_node">
+            <% @run_list.each do |entry| %>
+              <li id="<%=h(entry.to_s)%>" class="<%= class_for_run_list_item(entry) -%> runListItem"><%=h "#{entry.name} #{entry.version}"-%></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="group form attrEditor">
+      <label class="label">Attributes</label>
+      <%= partial 'layout/jsonedit', :json => @node.normal_attrs.to_json %>
+      <span class="description">
+        A JSON hash for default attributes for nodes of this node.  These attributes will only be applied if the node does not already have a value for the attributes.
+      </span>
+    </div>
+
+    <div class="group">
+      <div class="actions-bar">
+        <%= submit(submit_name, :id => submit_id, :class => 'button') -%>
+      </div>
+    </div>
+  <% end =%>
+</div>
diff --git a/chef-server-webui/app/views/nodes/_form.html.haml b/chef-server-webui/app/views/nodes/_form.html.haml
deleted file mode 100644
index b04b1f7747..0000000000
--- a/chef-server-webui/app/views/nodes/_form.html.haml
+++ /dev/null
@@ -1,52 +0,0 @@
-.content
-  .inner
-    - if form_for != "edit"
-      %div.group.form
-        %label.label Name
-        = text_field :id => "node_name", :name => "name", :class => "text_field", :value => params.has_key?(:name) ? h(params[:name]) : @node.name 
-        %span.description The name of the Node 
-
-    %div.group.form
-      %table.sortable
-        %tr
-          %td 
-            %label.label Available Roles
-          %td
-            %label.label Run List 
-        %tr
-          %td
-            %div.sortable
-              %ul#node_available_roles.connectedSortable
-                - @available_roles.each do |role|
-                  %li{ :id => "role[#{role}]", :class => 'ui-state-highlight' }= h role 
-          %td{:rowspan => 3}
-            %div.sortable.run-list
-              %ul#for_node.connectedSortable
-                - @run_list.each do |entry|
-                  %li{ :id => h(entry.to_s), :class => entry.type == 'role' ? 'ui-state-highlight' : 'ui-state-default' }= h "#{entry.name} #{entry.version}"
-          %td.help
-            %span.description
-              Drag recipes from the list of Available Recipes section on the left, and drop them
-              in the "Recipes for this node" section on the right.  Then sort the recipes for this node list to the order you would like to see the recipes applied.
-        %tr
-          %td
-            %label.label Available Recipes
-        %tr
-          %td
-            %div.sortable
-              %ul#node_available_recipes.connectedSortable
-                - @available_recipes.each do |recipe|
-                  %li{ :id => "recipe[#{recipe.split(" ").join(",")}]", :title => recipe, :class => 'ui-state-default' }= h recipe
-
-
-    %div.group.form{:style => "position:relative;"}
-      %label.label Attributes 
-      = partial 'layout/jsonedit', :json =>@node.normal_attrs.to_json
-    %div.group.form
-      %span.description A JSON hash for default attributes for nodes of this node.  These attributes will only be applied if the node does not already have a value for the attributes.
-
-    = form(:action => form_url, :method => :post, :id => form_id, :class => 'form') do
-      %div.group
-        .actions-bar
-          .actions= submit submit_name, :id => submit_id, :class => 'button'
-
diff --git a/chef-server-webui/app/views/roles/_form.html.erb b/chef-server-webui/app/views/roles/_form.html.erb
new file mode 100644
index 0000000000..81eaba64c8
--- /dev/null
+++ b/chef-server-webui/app/views/roles/_form.html.erb
@@ -0,0 +1,79 @@
+<div class="content roleFormContainer">
+    <%= form(:action => form_url, :method => :post, :id => form_id, :class => 'form') do -%>
+    <% unless form_for == 'edit' %>
+      <div class="group form">
+        <label class="label" for="role_name">Name</label>
+        <%= text_field :id => "role_name", :name => "name", :class => "text_field", :value => params.has_key?(:name) ? h(params[:name]) : @role.name %>
+        <span class="description">The name of the Role</span>
+      </div>
+    <% end %>
+
+    <div class="group form">
+      <label class="label" for="role_description">Description</label>
+      <%= text_area(params.has_key?(:description) ? h(params[:description]) : @role.description, :name => "description", :class => "text_area", :id => "role_description") %>
+      <span class="description">A description of this Role</span>
+    </div>
+
+    <div class="group form" id="run_list_editor_container">
+      <div id="availableRunListItemContainer" class="runListEditorColumn">
+        <div id="available_roles_container" >
+          <span class="runListEditorLabel">Available Roles</span>
+          <div class="sortable runListAvailableItemContainer">
+            <ul id="node_available_roles" class="connectedSortable runListAvailableItemList">
+              <% @available_roles.each do |role| %>
+                <li id="role[<%=h(role)  -%>]" class="ui-state-highlight runListItem"><%= h(role) -%></li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+        <div id="available_recipes_container">
+          <span class="runListEditorLabel">Available Recipes</span>
+          <div class="sortable runListAvailableItemContainer">
+            <ul id="node_available_recipes" class="connectedSortable runListAvailableItemList">
+              <% @available_recipes.each do |recipe| %>
+                <li id="recipe[<%= h(recipe.split(/\s+/).join('@')) -%>]" class="ui-state-default runListItem"><%= h(recipe.split(/\s+/).join('@')) -%></li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div id="run_list_container" class="runListEditorColumn">
+        <div id="environment_run_list_selector">
+          <span class="runListEditorLabel">Run List for Environment:</span>
+          <span id="environment_run_list_selection_control"><%= select :environment, :collection => @environments, :selected => @current_env%></span>
+        </div>
+        <div class="sortable runListContainer">
+          <ul class="ui-sortable connectedSortable runListItemList" id="for_role">
+            <% @run_list.each do |entry| %>
+              <li id="<%=h(entry.to_s)%>" class="<%= class_for_run_list_item(entry) -%> runListItem"><%=h "#{entry.name} #{entry.version}"-%></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+      <div id="current_run_list_display_container" class="runListEditorColumn">
+        <span class="runListEditorLabel">Active Run List for <%= h(@current_env) -%></span>
+        <div class="sortable runListContainer">
+          <ul class="ui-sortable runListItemList" id="active_run_list">
+            <% @role.run_list_for(@current_env).each do |item| %>
+              <li class="<%= class_for_run_list_item(item) -%> runListItem"><%= h(item) -%></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="group form attrEditor">
+      <label class="label">Default and Override Attributes</label>
+      <%= partial 'layout/jsonedit', :json => { :defaults => @role.default_attributes, :overrides => @role.override_attributes }.to_json%>
+      <span class="description">
+        A JSON hash for default attributes for nodes of this role.  These attributes will only be applied if the node does not already have a value for the attributes.
+      </span>
+    </div>
+
+    <div class="group">
+      <div class="actions-bar">
+        <%= submit(submit_name, :id => submit_id, :class => 'button') -%>
+      </div>
+    </div>
+  <% end =%>
+</div>
diff --git a/chef-server-webui/app/views/roles/_form.html.haml b/chef-server-webui/app/views/roles/_form.html.haml
deleted file mode 100644
index 36a5d69c36..0000000000
--- a/chef-server-webui/app/views/roles/_form.html.haml
+++ /dev/null
@@ -1,52 +0,0 @@
-.content
-  .inner
-    - if form_for != "edit"
-      %div.group.form
-        %label.label Name
-        = text_field :id => "role_name", :name => "name", :class => "text_field", :value => params.has_key?(:name) ? h(params[:name]) : @role.name 
-        %span.description The name of the Role
-    %div.group.form
-      %label.label Description
-      = text_area(params.has_key?(:description) ? h(params[:description]) : @role.description, :name => "description", :class => "text_area", :id => "role_description")
-      %span.description A description of this Role 
-
-    %div.group.form
-      %table.sortable
-        %tr
-          %td 
-            %label.label Available Roles
-          %td
-            %label.label Run List
-        %tr
-          %td
-            %div.sortable
-              %ul#node_available_roles.connectedSortable
-                - @available_roles.each do |role|
-                  %li{ :id => "role[#{role}]", :class => 'ui-state-highlight' }= h role 
-          %td{:rowspan => 3}
-            %div.sortable.run-list
-              %ul#for_role.connectedSortable
-                - @run_list.each do |entry|
-                  %li{ :id => h(entry.to_s), :class => entry.type == 'role' ? 'ui-state-highlight' : 'ui-state-default' }= h "#{entry.name} #{entry.version}"
-          %td.help
-            %span.description
-              Drag recipes from the list of Available Recipes section on the left, and drop them
-              in the "Recipes for this node" section on the right.  Then sort the recipes for this node list to the order you would like to see the recipes applied.
-        %tr
-          %td
-            %label.label Available Recipes
-        %tr
-          %td
-            %div.sortable
-              %ul#node_available_recipes.connectedSortable
-                - @available_recipes.each do |recipe|
-                  %li{ :id => "recipe[#{recipe.split(" ").join(",")}]", :title => recipe, :class => 'ui-state-default' }= h recipe
-
-    %div.group.form{:style => "position:relative;"}
-      %label.label Default and Override Attributes 
-      = partial 'layout/jsonedit', :json => { :defaults => @role.default_attributes, :overrides => @role.override_attributes }.to_json
-      %span.description A JSON hash for default attributes for nodes of this role.  These attributes will only be applied if the node does not already have a value for the attributes.
-    = form(:action => form_url, :method => :post, :id => form_id, :class => 'form') do
-      %div.group
-        .actions-bar
-          .actions= submit submit_name, :id => submit_id, :class => 'button'
diff --git a/chef-server-webui/public/stylesheets/base.css b/chef-server-webui/public/stylesheets/base.css
index 0da62086ed..99d34db3bd 100644
--- a/chef-server-webui/public/stylesheets/base.css
+++ b/chef-server-webui/public/stylesheets/base.css
@@ -11,7 +11,7 @@ a img { border: none; }
 
 body {
   font-size: 12px;
-  font-family: sans-serif;  
+  font-family: sans-serif;
 }
 
 #container {
@@ -24,12 +24,12 @@ body {
 
 #header {
   position: relative;
-  padding-top: 1px;  
+  padding-top: 1px;
 }
 
 #header h1 {
   margin: 0;
-  padding: 10px 0;  
+  padding: 10px 0;
   font-size: 30px;
 }
 
@@ -37,9 +37,9 @@ body {
   text-decoration: none;
 }
 
-#main {  
-  width: 80%; 
-  float: left;    
+#main {
+  width: 100%;
+  float: left;
 }
 
 .actions-bar {
@@ -58,10 +58,10 @@ body {
 
 #sidebar {
   width: 15%;
-  float: right;      
+  float: right;
 }
 
-#sidebar h3 {  
+#sidebar h3 {
   padding: 10px 15px;
   margin: 0;
   font-size: 13px;
@@ -95,7 +95,7 @@ body {
 }
 
 #main .block .content .inner {
-  padding: 0 15px 15px;  
+  padding: 0 15px 15px;
 }
 
 #main .main p.first {
@@ -105,7 +105,7 @@ body {
 #user-navigation {
   position: absolute;
   top: 0px;
-  right: 20px;  
+  right: 20px;
 }
 
 #main-navigation {
@@ -119,7 +119,7 @@ body {
 }
 
 #user-navigation ul li, #main-navigation ul li, .secondary-navigation ul li {
-  float: left;  
+  float: left;
 }
 
 #main-navigation ul li {
@@ -143,14 +143,14 @@ body {
 }
 
 .secondary-navigation {
-  font-size: 13px;  
+  font-size: 13px;
   border-bottom-width: 10px;
   border-bottom-style: solid;
 }
 
 .secondary-navigation ul li a {
   display: block;
-  padding: 10px 15px;  
+  padding: 10px 15px;
 }
 
 #footer {
@@ -161,7 +161,7 @@ body {
 
 .pagination a, .pagination span {
   padding: 2px 5px;
-  margin-right: 5px; 
+  margin-right: 5px;
   display: block;
   float: left;
   border-style: solid;
@@ -169,17 +169,17 @@ body {
 }
 
 .pagination span.current {
-  font-weight: bold;  
+  font-weight: bold;
 }
 
 .pagination a {
-  text-decoration: none;  
+  text-decoration: none;
 }
 
 /* tables */
 .table {
   width: 100%;
-  border-collapse: collapse;  
+  border-collapse: collapse;
   margin-bottom: 15px;
 }
 
@@ -194,7 +194,7 @@ body {
 }
 
 .table th.last {
-  width: 200px;  
+  width: 200px;
 }
 
 .table .checkbox {
@@ -261,8 +261,8 @@ input.checkbox {
 }
 
 .form label.label {
-  display: block;
-  padding-bottom: 2px;  
+  display: inline-block;
+  padding-bottom: 2px;
   font-weight: bold;
 }
 
@@ -294,7 +294,7 @@ ul.list li {
 }
 
 ul.list li .left {
-  float: left;  
+  float: left;
 }
 
 ul.list li .left .avatar {
@@ -317,7 +317,7 @@ ul.list li .item .avatar {
 
 #box {
   width: 500px;
-  margin: 50px auto;  
+  margin: 50px auto;
 }
 
 #box .block {
@@ -326,7 +326,7 @@ ul.list li .item .avatar {
 
 #box .block h2 {
   padding: 10px 15px;
-  margin: 0;  
+  margin: 0;
 }
 
 #box .block .content {
diff --git a/chef-server-webui/public/stylesheets/chef.css b/chef-server-webui/public/stylesheets/chef.css
index b9df6fbaab..57aa09130d 100644
--- a/chef-server-webui/public/stylesheets/chef.css
+++ b/chef-server-webui/public/stylesheets/chef.css
@@ -49,35 +49,75 @@ dl dt { font-weight: bold; }
   padding-top: 2px;
 }
 
-div.sortable {
-  height: 200px;
-  width: 350px;
-  margin-right: 10px;
-  border: 1px solid black;
-  overflow-y: scroll;
-  background: #777777;
+div.roleFormContainer, div.nodeFormContainer{
+  padding: 0 15px 15px;
+  min-width:1000px;
+}
+
+div#run_list_editor_container {
+  min-height:450px;
+  min-width:1000px;
+}
+
+div.runListEditorColumn {
+  float:left;
 }
 
-div.sortable.run-list {
-  height: 430px;
-  width: 350px;
+span#environment_run_list_selection_control{
+  float:right;
+  margin-right:10px;
+}
+
+span.runListEditorLabel{
+  font-size: 1.2em;
+  padding: 1px 0 3px 0;
+  margin: 0;
+  display: inline-block;
+  font-weight: bold;
+}
+
+div.runListAvailableItemContainer, div.runListContainer {
+  width: 300px;
   margin-right: 10px;
   border: 1px solid black;
   overflow-y: scroll;
-  background: #777777;
+  background: #eee;
+}
+
+div.runListAvailableItemContainer{
+  height: 200px;
+}
+
+div.runListContainer{
+  height: 423px;
 }
 
-div.run-list ul.ui-sortable#for_node, div.run-list ul.ui-sortable#for_role {
-  min-height: 420px;
+ul.runListAvailableItemList, ul.runListItemList {
+  padding:5px 0px 0px 0px;
+  min-height:185px;
+  width:100%;
+  list-style-type: none;
+  margin: 0px;
+  background: #eee;
+}
+
+ul.runListItemList{
+  min-height:410px;
 }
 
+li.runListItem{
+  margin: 0px 5px 5px 5px;
+  padding: 5px;
+  width: 93%;
+  overflow:hidden;
+  cursor:pointer;
+}
 
 div.clear {
   clear: left;
 }
 
 table.form th {
-  /* vertical-align: top; */
   font-weight: bold;
   text-align: right;
   padding-right: 10px;
@@ -91,7 +131,6 @@ div.help {
 
 table.form td {
   text-align: left;
-  /* vertical-align: top; */
 }
 
 table.sortable td {
@@ -121,7 +160,7 @@ div#tree {
   float: left;
 }
 
-div#jform { 
+div#jform {
   float: left;
   margin-left: 50px;
 }
@@ -130,23 +169,17 @@ div.editor {
   border: 1px solid black;
 }
 
-#node_available_roles, #node_available_recipes, #for_node, #for_role, #available_recipes { 
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  float: left;
-  margin-right: 10px; 
-  background: #eee; 
-  padding: 5px; 
-  width: 325px;
-  min-height:200px;
+div.attrEditor{
+  clear:both;
 }
 
-#node_available_roles li, #node_available_recipes li, #for_node li, #for_role li, #available_recipes li { 
-  margin: 0 5px 5px 5px; 
-  padding: 5px; 
-  width: 310px; 
-  overflow:hidden;
+div.attrEditor #treecontainer, div.attrEditor #tabcontainer{
+  float:left;
+}
+
+div.attrEditor #tabcontainer{
+  position:relative;
+  top:0px;
 }
 
 #sidebar_block {
@@ -157,19 +190,19 @@ div.editor {
   display: none;
 }
 
-div.tooltip { 
-    background-color: #000; 
-    outline: 1px solid #669; 
-    border: 2px solid #fff; 
-    padding: 10px 15px; 
+div.tooltip {
+    background-color: #000;
+    outline: 1px solid #669;
+    border: 2px solid #fff;
+    padding: 10px 15px;
     /* width: 200px;  */
-    display: none; 
-    color: #fff; 
-    text-align: left; 
-    font-size: 12px; 
-    outline-radius: 4px; 
-    -moz-outline-radius: 4px; 
-    -webkit-outline-radius: 4px; 
+    display: none;
+    color: #fff;
+    text-align: left;
+    font-size: 12px;
+    outline-radius: 4px;
+    -moz-outline-radius: 4px;
+    -webkit-outline-radius: 4px;
 }
 
 table.tooltip {