CHEF-129: Implement pilu's web-app-theme

  Also add the Futon JSON visualizer.

Author: AJ Christensen

chef-server-slice/app/helpers/nodes_helper.rb

@@ -1,5 +1,6 @@
 #
 # Author:: Adam Jacob (<adam@opscode.com>)
+# Author:: AJ Christensen (<aj@junglist.gen.nz>)
 # Copyright:: Copyright (c) 2008 Opscode, Inc.
 # License:: Apache License, Version 2.0
 #
@@ -34,7 +35,31 @@ def attribute_list(node)
         end
         response
       end
+      
+      # Recursively build a tree of lists.
+      def build_tree(node)
+        list = "<dl>"
+        list << "\n<!-- Beginning of Node Tree -->"
+        walk = lambda do |key,value|
+          case value
+            when Hash, Array
+              list << "\n<!-- Beginning of Enumerable obj -->"
+              list << "\n<dt>#{key}</dt>"
+              list << "<dd>"
+              list << "\t<dl>\n"
+              value.each(&walk)
+              list << "\t</dl>\n"
+              list << "</dd>"
+              list << "\n<!-- End of Enumerable obj -->"
+              
+            else
+              list << "\n<dt>#{key}</dt>"
+              list << "<dd>#{value}</dd>"
+          end
+        end
+        node.attribute.each(&walk)
+        list << "</dl>"
+      end
     end
-
   end
 end

chef-server-slice/app/views/nodes/_node.html.haml

@@ -13,11 +13,10 @@
   %table.table
     %tr
       %th.first Attributes
-      %th.last &nbps
+      %th.last &nbsp
     - if @node.attribute.empty?
       %tr
         %td{:colspan => 2} This node has no attributes, double click to add one.
     - else
-      - @node.attribute.each_with_index do |attrib, index|
-        %tr{:class => "#{index % 2 == 1 ? 'odd' : 'even'}"}
-          %td{:colspan => 2, :style => 'overflow: auto'}= "<b>#{attrib[0]}</b>: #{attrib[1]}"
+      %tr
+        %td{:colspan => 2}= build_tree(@node)

chef-server-slice/public/images/toggle-collapse.gif

@@ -42,6 +42,18 @@ $(document).ready(function(){
     });
   });
 
+  $("dd:has(dl)").livequery(function(){
+    $(this).hide().prev("dt").addClass("collapsed");
+  });
+  $("dd:not(:has(dl))").livequery(function(){
+    $(this).addClass("inline").prev().addClass("inline");
+  });
+  $("dt.collapsed").livequery(function(){
+    $(this).click(function() {
+      $(this).toggleClass("collapsed").next().toggle();
+    });
+  });
+  
   // editable table for the node show view
   $(".edit_area").editable(location.href + ".json", { 
     target : location.href,
@@ -52,9 +64,15 @@ $(document).ready(function(){
     loadurl : location.href,
     tooltip : "Click to edit",
     type  : "textarea",
+    event     : "dblclick",
     height : 300
   });
 
+
+  //alert("blah" + $('#json_tree_source').text());
+  //var json = $('#json_tree_source').text();
+  //$('#attribute_tree_view').append(TreeView($('#json_tree_source').text()));
+  
   // accordion for the cookbooks show view
 	$('.accordion .head').click(function() {
 		$(this).next().toggle('slow');
@@ -64,6 +82,7 @@ $(document).ready(function(){
 	// global facebox callback
 	$('a[rel*=facebox]').facebox();
 
+	/*
   JSONEditor.prototype.ADD_IMG = '/images/add.png';
   JSONEditor.prototype.DELETE_IMG = '/images/delete.png';
   var attrib_editor = new JSONEditor($("#attrib_json_edit"), 400, 300);
@@ -73,4 +92,5 @@ $(document).ready(function(){
   var recipe_editor = new JSONEditor($("#recipe_json_edit"), 400, 300);
   recipe_editor.doTruncation(true);
   recipe_editor.showFunctionButtons();
+  */
 });

chef-server-slice/public/images/toggle-expand.gif

@@ -29,4 +29,22 @@
 .search td {
   /*overflow: auto;*/
   font-size: 0.8em;
+}
+
+dl dt { font-weight: bold; }
+.content td dl { margin: 0; padding: 0; }
+.content td dt {
+  background: transparent url(/images/toggle-collapse.gif) 0 3px no-repeat;
+  clear: left; color: #333; cursor: pointer; line-height: 1em;
+  margin-left: -12px; padding-left: 14px;
+}
+.content td dd { margin: 0;
+  padding: 0 0 0 1em;
+}
+.content td dt.collapsed {
+  background-image: url(/images/toggle-expand.gif);
+}
+.content td dt.inline { background-image: none; cursor: default;
+  float: left; margin-left: 0; padding-left: 2px; padding-right: .5em;
+  padding-top: 2px;
 }