[Ovirt-devel] [PATCH server] Version 1 of Revamped Tree Navigation.

Jason Guiditta jguiditt at redhat.com
Fri Oct 3 20:39:14 UTC 2008


The new javascript tree widget contains the following features/changes from previous implementation:

* The html for the list is dynamically generated using a javascript template system.  This will allow us to plug in different layouts per tree as the widget matures.
* Updates to the tree are now incremental, rather than a full rip and replace as earlier. We have 2 states we currently look for - 'new' and 'changed'.  The first generates new html and appends it to the DOM, the second just does a replacement of the content of existing nodes.
* Vastly simplified the markup and css.
* Added calls where appropriate to refresh the tree before next planned call (for instance, if you add a new hardware pool).
* Added slide effect when opening and closing a node of the tree.
* Clicking the plus/minus opens/close the node only, does not load main content area.
* Clicking anywhere to the right of that on a given node will load content area.
* Added interim icons for 'smartpool' and 'add smartpool'

Note that aside from the nav area, this should not impact the existing trees which have not been converted yet (all popups that have one), as this is a completely separate codebase with it's own js and css files.

Related, but not technically part of the tree, I added a choose_layout method to allow testing of javascript components as we are building them to help eliminate possible side effects from other code.  When not in a production environment, you can pass in ?component_layout=[name] where [name] is the name of a shell rhtml file you have put in views/layouts/components.  As our UI is growing increasingly complex, I think this will be a very useful way to facilitate building components.

Signed-off-by: Jason Guiditta <jguiditt at redhat.com>
---
 src/app/controllers/application.rb                 |   19 +-
 src/app/controllers/tree_controller.rb             |   70 ++++-
 src/app/models/pool.rb                             |   18 +-
 src/app/views/layouts/_side_toolbar.rhtml          |    2 +-
 src/app/views/layouts/_tree.rhtml                  |  148 ++++++--
 src/app/views/layouts/components/tree.rhtml        |   61 +++
 src/app/views/layouts/redux.rhtml                  |   40 +--
 src/public/images/icon_add_smartpool.png           |  Bin 0 -> 1341 bytes
 src/public/images/icon_smartpool.png               |  Bin 0 -> 641 bytes
 src/public/javascripts/ovirt.js                    |   28 +-
 src/public/javascripts/ovirt.tree.js               |   71 ++++
 src/public/javascripts/smart_nav_test_data.js      |  151 ++++++++
 src/public/javascripts/trimpath-template-1.0.38.js |  397 ++++++++++++++++++++
 src/public/stylesheets/ovirt-tree/tree.css         |   83 ++++
 14 files changed, 994 insertions(+), 94 deletions(-)
 create mode 100644 src/app/views/layouts/components/tree.rhtml
 create mode 100644 src/public/images/icon_add_smartpool.png
 create mode 100644 src/public/images/icon_smartpool.png
 create mode 100644 src/public/javascripts/ovirt.tree.js
 create mode 100644 src/public/javascripts/smart_nav_test_data.js
 create mode 100644 src/public/javascripts/trimpath-template-1.0.38.js
 create mode 100644 src/public/stylesheets/ovirt-tree/tree.css

diff --git a/src/app/controllers/application.rb b/src/app/controllers/application.rb
index 6dcf6f8..a751768 100644
--- a/src/app/controllers/application.rb
+++ b/src/app/controllers/application.rb
@@ -1,4 +1,4 @@
-# 
+#
 # Copyright (C) 2008 Red Hat, Inc.
 # Written by Scott Seago <sseago at redhat.com>
 #
@@ -24,7 +24,7 @@ class ApplicationController < ActionController::Base
   # Pick a unique cookie name to distinguish our session data from others'
   session :session_key => '_ovirt_session_id'
   init_gettext "ovirt"
-  layout 'redux'
+  layout :choose_layout
 
   before_filter :pre_new, :only => [:new]
   before_filter :pre_create, :only => [:create]
@@ -33,6 +33,13 @@ class ApplicationController < ActionController::Base
   before_filter :authorize_admin, :only => [:new, :create, :edit, :update, :destroy]
   before_filter :is_logged_in
 
+  def choose_layout
+    if(params[:component_layout])
+      return (ENV["RAILS_ENV"] != "production")?'components/' << params[:component_layout]:'redux'
+    end
+    return 'redux'
+  end
+
   def is_logged_in
     redirect_to(:controller => "login", :action => "login") unless get_login_user
   end
@@ -40,7 +47,7 @@ class ApplicationController < ActionController::Base
   def get_login_user
     (ENV["RAILS_ENV"] == "production") ? session[:user] : "ovirtadmin"
   end
-  
+
   def set_perms(hwpool)
     @user = get_login_user
     @can_view = hwpool.can_view(@user)
@@ -91,8 +98,8 @@ class ApplicationController < ActionController::Base
   # don't define find_opts for array inputs
   def json_hash(full_items, attributes, arg_list=[], find_opts={}, id_method=:id)
     page = params[:page].to_i
-    paginate_opts = {:page => page, 
-                     :order => "#{params[:sortname]} #{params[:sortorder]}", 
+    paginate_opts = {:page => page,
+                     :order => "#{params[:sortname]} #{params[:sortorder]}",
                      :per_page => params[:rp]}
     arg_list << find_opts.merge(paginate_opts)
     item_list = full_items.paginate(*arg_list)
@@ -102,7 +109,7 @@ class ApplicationController < ActionController::Base
     json_hash[:rows] = item_list.collect do |item|
       item_hash = {}
       item_hash[:id] = item.send(id_method)
-      item_hash[:cell] = attributes.collect do |attr| 
+      item_hash[:cell] = attributes.collect do |attr|
         if attr.is_a? Array
           value = item
           attr.each { |attr_item| value = value.send(attr_item)}
diff --git a/src/app/controllers/tree_controller.rb b/src/app/controllers/tree_controller.rb
index 1aed544..bc423b7 100644
--- a/src/app/controllers/tree_controller.rb
+++ b/src/app/controllers/tree_controller.rb
@@ -1,5 +1,4 @@
 class TreeController < ApplicationController
-
   def get_pools
     # TODO: split these into separate hash elements for HW and smart pools
     pools = HardwarePool.get_default_pool.full_set_nested(:method => :json_hash_element,
@@ -8,11 +7,78 @@ class TreeController < ApplicationController
                        :privilege => Permission::PRIV_VIEW, :user => get_login_user,
                        :smart_pool_set => true)
   end
+
   def fetch_nav
     @pools = get_pools
   end
-  
+
   def fetch_json
     render :json => get_pools.to_json
   end
+
+  def return_filtered_list
+    @ids = Array.new
+    @clientHash = {}
+    if (params[:item])
+      params[:item].each { |item|
+        tempItem = item.split("-")
+        itemHash = {
+          :id => tempItem[0].to_s,
+          :name =>tempItem[1]
+        }
+        @clientHash[tempItem[0]] = itemHash
+      }
+    end
+    @serverHash = {:pools => build_json(HardwarePool.get_default_pool.full_set_nested(:method => :json_hash_element,
+                       :privilege => Permission::PRIV_VIEW, :user => get_login_user))
+                  }
+    @serverHash[:smart_pools] = adjust_smart_pool_list(build_json(DirectoryPool.get_smart_root.full_set_nested(:method => :json_hash_element,
+         :privilege => Permission::PRIV_VIEW, :user => get_login_user,
+         :smart_pool_set => true)))
+    @ids.each { |item|
+      if @clientHash.has_key?(item.to_s)
+        @clientHash.delete(item.to_s)
+      end
+    }
+    @serverHash[:deleted] = @clientHash
+    render :json => @serverHash.to_json
+  end
+
+  private
+  def build_json(list)
+    list.each {|listItem|
+      process_list_item(listItem)
+      if listItem.has_key?(:children)
+          build_json(listItem[:children])
+      end
+    }
+    list
+  end
+
+  def process_list_item(list)
+    if @clientHash.has_key?(list[:id].to_s)
+      unless @clientHash[list[:id].to_s][:name] == list[:name]
+        list[:state] = "changed"
+      else
+        list[:state] = "unchanged"
+      end
+    else
+      list[:state] = "new"
+    end
+    @ids = @ids.push(list[:id])
+  end
+
+  def adjust_smart_pool_list(list)
+    adjustedList = Array.new
+    list.each {|listItem|
+      if (listItem[:name] == get_login_user)
+        listItem[:children].each {|item|
+          adjustedList.push(item)
+        }
+      else
+        adjustedList.push(listItem)
+      end
+    }
+    adjustedList
+  end
 end
diff --git a/src/app/models/pool.rb b/src/app/models/pool.rb
index eb71be8..d189649 100644
--- a/src/app/models/pool.rb
+++ b/src/app/models/pool.rb
@@ -1,4 +1,4 @@
-# 
+#
 # Copyright (C) 2008 Red Hat, Inc.
 # Written by Scott Seago <sseago at redhat.com>
 #
@@ -45,7 +45,7 @@ class Pool < ActiveRecord::Base
   has_many :smart_pool_tags, :as => :tagged, :dependent => :destroy
   has_many :smart_pools, :through => :smart_pool_tags
 
-  # used to allow parent traversal before obj is saved to the db 
+  # used to allow parent traversal before obj is saved to the db
   # (needed for view code 'create' form)
   attr_accessor :tmp_parent
 
@@ -168,10 +168,10 @@ class Pool < ActiveRecord::Base
     end
   end
 
-  RESOURCE_LABELS = [["CPUs", :cpus, ""], 
-                     ["Memory", :memory_in_mb, "(mb)"], 
-                     ["NICs", :nics, ""], 
-                     ["VMs", :vms, ""], 
+  RESOURCE_LABELS = [["CPUs", :cpus, ""],
+                     ["Memory", :memory_in_mb, "(mb)"],
+                     ["NICs", :nics, ""],
+                     ["VMs", :vms, ""],
                      ["Disk", :storage_in_gb, "(gb)"]]
 
   #needed by tree widget for display
@@ -195,7 +195,7 @@ class Pool < ActiveRecord::Base
       found = false
       open_list.each do |open_pool|
         if pool.id == open_pool.id
-          new_open_list = open_list[(open_list.index(open_pool)+1)..-1]          
+          new_open_list = open_list[(open_list.index(open_pool)+1)..-1]
           unless new_open_list.empty?
             pool_children = pool.children unless pool_children
             hash[:children] = pool_hash(pool_children, new_open_list, filter_vm_pools)
@@ -210,7 +210,7 @@ class Pool < ActiveRecord::Base
   end
 
   def json_hash_element
-    { :id => id, :type => self[:type], :text => name, :name => name}
+    { :id => id, :type => self[:type], :text => name, :name => name, :parent_id => parent_id}
   end
 
   def hash_element
@@ -272,7 +272,7 @@ class Pool < ActiveRecord::Base
     obj = args.shift
     method = args.shift
     obj.send(method, *args)
-  end    
+  end
 
   def display_name
     name
diff --git a/src/app/views/layouts/_side_toolbar.rhtml b/src/app/views/layouts/_side_toolbar.rhtml
index e1958f1..4b92bcf 100644
--- a/src/app/views/layouts/_side_toolbar.rhtml
+++ b/src/app/views/layouts/_side_toolbar.rhtml
@@ -25,7 +25,7 @@
 <% end -%>
 <div class="toolbar" style="float:left;">
    <a href="<%= url_for :controller => :smart_pools, :action => 'new' %>" rel="facebox[.bolder]">
-     <%=image_tag "icon_add_hardwarepool.png", :title=>"Add Smart Pool"  %>
+     <%=image_tag "icon_add_smartpool.png", :title=>"Add Smart Pool"  %>
    </a>
 </div>
 <%if pool -%>
diff --git a/src/app/views/layouts/_tree.rhtml b/src/app/views/layouts/_tree.rhtml
index 0e6e138..a6bde14 100644
--- a/src/app/views/layouts/_tree.rhtml
+++ b/src/app/views/layouts/_tree.rhtml
@@ -1,32 +1,124 @@
-<div style=" float:left; padding:0 0 0 5px;"><%= image_tag("icon_dashboard.gif")%></div>
-  <% selected = "selected" if controller.controller_name == "dashboard" && params[:action] == "index" %>
-<div style=" float:left; padding:5px 0 0 5px;">
-    <%= link_to "Dashboard", { :controller => "dashboard" }, { :id => "dashboard", :class => "#{selected}" } %>
-</div>
-<div style="clear:both"></div>
-<%= javascript_include_tag "jquery.ovirt.treeview.js" -%>
-<script type="text/javascript">    
-    $(document).ready(function(){         
-        $("#test-tree").ovirt_treeview({
-            collapsed: true,
-            //animated: "normal",
-            url: "<%=  url_for :controller =>'/tree', :action => 'fetch_json' %>",
-            hardware_url: "<%=  url_for :controller =>'/hardware', :action => 'show' %>",
-            resource_url: "<%=  url_for :controller =>'/resources', :action => 'show' %>",
-            smart_url: "<%=  url_for :controller =>'/smart_pools', :action => 'show' %>"
-	});
-        var tree_reload = {
-            url: "<%=  url_for :controller =>'/tree', :action => 'fetch_json' %>",
-            hardware_url: "<%=  url_for :controller =>'/hardware', :action => 'show' %>",
-            resource_url: "<%=  url_for :controller =>'/resources', :action => 'show' %>",
-            smart_url: "<%=  url_for :controller =>'/smart_pools', :action => 'show' %>"
+<%= javascript_include_tag "trimpath-template-1.0.38.js" %>
+<%= javascript_include_tag "ovirt.tree.js" %>
+<%= stylesheet_link_tag 'ovirt-tree/tree' %>
+<script type="text/javascript">
+    var treeTimer, urlObj;
+    var processRecursive = true;
+    var recursiveTreeTempl, treeItemTempl, tree_url;
+    $(document).ready(function(){
+      recursiveTreeTempl = TrimPath.parseDOMTemplate("nav_tree_template");
+      treeItemTempl = TrimPath.parseDOMTemplate("nav_tree_updater_template");
+      urlObj = {
+        "HardwarePool" : "<%=  url_for :controller =>'/hardware', :action => 'show' %>",
+        "VmResourcePool" : "<%=  url_for :controller =>'/resources', :action => 'show' %>",
+        "SmartPool" : "<%=  url_for :controller =>'/smart_pools', :action => 'show' %>",
+        "DirectoryPool" : null
+      }
+      tree_url = "<%=  url_for :controller =>"/tree", :action => "return_filtered_list" %>";
+      processTree();
+      treeTimer = setInterval(processTree,15000);
+      $('ul.ovirt-tree li').livequery(
+        function(){
+          $(this)
+          .children('div')
+          .bind('click',function(){
+            $('ul.ovirt-tree li div').removeClass('current');
+            var thisHref = (urlObj[$(this).attr('class')] !=null) ? urlObj[$(this).attr('class')] + '/' + this.id :null;
+            $(this).toggleClass('current');
+            currentNode = this.id;
+            if ($tabs != null) {
+              var tabType = $tabs.data("pool_type.tabs");
+              ($(this).attr('class').toLowerCase().indexOf(tabType) == -1) ?selected_tab = 0 :selected_tab = $tabs.data("selected.tabs");
+            }
+            if (thisHref != null) {
+              $.ajax({
+                url: thisHref,
+                type: 'GET',
+                data: {ajax:true,tab:selected_tab},
+                dataType: 'html',
+                success: function(data) {
+                  $('#side-toolbar').html($(data).find('div.toolbar'));
+                  $('#tabs-and-content-container').html($(data).not('div#side-toolbar'));
+                },
+                error: function(xhr) {$.jGrowl(xhr.status + ' ' + xhr.statusText);}
+              });
+            }
+          });
+        },function(){
+          $(this)
+          .children('div')
+          .unbind('click');
         }
-        $('#test-tree').everyTime(15000,function(){
-          load(tree_reload, {}, this, this);
-        })
+      );
+      $('ul.ovirt-tree li:has(ul)').livequery(
+        function(){
+          $(this)
+            .children('span.hitarea')
+            .click(function(event){
+              if (this == event.target) {
+                  if($(this).siblings('ul').size() >0) {
+                      $(this)
+                        .toggleClass('expanded')
+                        .toggleClass('expandable')
+                        .siblings('ul').slideToggle("normal");
+                  }
+              }
+            });
+        },function(){
+            $(this).children('span.hitarea')
+              .removeClass('expanded expandable')
+              .unbind('click');
+        }
+      );
     });
 </script>
 
-<ul id="test-tree" class="filetree treeview-famfamfam treeview">
-</ul>
-<!--<ul id="tree" class="filetree treeview-famfamfam treeview"></ul>-->
+<!-- Output elements -->
+<div class="nav-dashboard">
+  <% selected = "selected" if controller.controller_name == "dashboard" && params[:action] == "index" %>
+  <%= link_to "Dashboard", { :controller => "dashboard" }, { :id => "dashboard", :class => "#{selected}" } %>
+</div>
+<form id="nav_tree_form">
+  <div class="nav-tree">
+    <ul id="nav_tree" class="ovirt-tree"></ul>
+  </div>
+  <div class="nav-smart-pool">
+    <span class="nav-smart-pool-header">Smart Pools</span> <!--FIXME: replace with i18n text -->
+    <ul id="smart_nav_tree" class="ovirt-tree"></ul>
+  </div>
+</form>
+
+<!-- Template content -->
+<!-- TODO: possibly move these templates into external files-->
+<textarea id="nav_tree_updater_template" style="display:none;">
+  <li>
+    <input type="checkbox" name="item[]" value="${id}-${name}" style="display:none" checked="checked"/>
+    <span class="hitarea {if defined('children')} expandable{/if}"> </span><div id="${id}" class="${type}">${name}</div>
+  </li>
+</textarea>
+<textarea id="nav_tree_template" style="display:none;">
+  {macro htmlList(list, optionalListType)}
+    {var listType = optionalListType != null ? optionalListType : "ul"}
+    <${listType} style="display:none;">
+      {for item in list}
+        <li>
+          <input type="checkbox" name="item[]" value="${item.id}-${item.name}" style="display:none" checked="checked"/>
+          <span class="hitarea {if item.children} expandable{/if}"> </span><div id="${item.id}" class="${item.type}">${item.name}</div>
+          {if item.children}
+            ${htmlList(item.children)}
+          {/if}
+        </li>
+      {/for}
+    </${listType}>
+  {/macro}
+
+  {for item in pools}
+    <li>
+      <input type="checkbox" name="item[]" value="${item.id}-${item.name}" style="display:none" checked="checked"/>
+      <span class="hitarea {if item.children} expandable{/if}"> </span><div id="${item.id}" class="${item.type}">${item.name}</div>
+      {if item.children}
+        ${htmlList(item.children)}
+      {/if}
+    </li>
+  {/for}
+</textarea>
diff --git a/src/app/views/layouts/components/tree.rhtml b/src/app/views/layouts/components/tree.rhtml
new file mode 100644
index 0000000..063a6df
--- /dev/null
+++ b/src/app/views/layouts/components/tree.rhtml
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+  <title><%= yield :title -%></title>
+  <%= javascript_include_tag "jquery-1.2.6.min.js" -%>
+  <%= javascript_include_tag "jquery.livequery.min.js" -%>
+  <%= javascript_include_tag "smart_nav_test_data.js" -%>
+  <%= javascript_include_tag "jquery.form.js" -%>
+  <%= javascript_include_tag "ovirt.js" -%>
+
+  <script type="text/javascript">
+      var $tabs, selected_tab;
+      function delete_vm_pool(id, parent) {
+        $(document).trigger('close.facebox');
+        $.post('<%= url_for :controller => "resources", :action => "destroy" %>',
+               {id: id},
+                function(data,status){
+                  $("#vmpools_grid").flexReload();
+                  processTree();
+                  if (data.alert) {
+                    $.jGrowl(data.alert);
+                  }
+                 }, 'json');
+      }
+      function delete_hw_pool(id, parent) {
+        $(document).trigger('close.facebox');
+        $.post('<%= url_for :controller => "hardware", :action => "destroy" %>',
+               {id: id},
+                function(data,status){
+                  processTree();
+                  if (data.alert) {
+                    $.jGrowl(data.alert);
+                  }
+                 }, 'json');
+      }
+   </script>
+   <%= yield :scripts -%>
+ </head>
+
+ <body>
+   <div id="side">
+     <button id="stop">Stop!</button>
+     <%= render :partial => '/layouts/tree' %>
+   </div>
+   <div id="side-toolbar" class="header_menu_wrapper">
+     <%= render :partial => '/layouts/side_toolbar' %>
+   </div>
+
+   <div id="tabs-and-content-container">
+     <div id="main">
+        <div id="content_area">
+
+        </div>
+     </div>
+   </div>
+ </body>
+</html>
diff --git a/src/app/views/layouts/redux.rhtml b/src/app/views/layouts/redux.rhtml
index 01540d4..a985cdd 100644
--- a/src/app/views/layouts/redux.rhtml
+++ b/src/app/views/layouts/redux.rhtml
@@ -16,20 +16,18 @@
   <%= stylesheet_link_tag 'flexigrid/flexigrid.css' %>
   <%= stylesheet_link_tag 'facebox' %>
   <%= stylesheet_link_tag 'jquery.jgrowl.css' %>
-  <!--%= stylesheet_link_tag 'jquery.ui-1.5b4/themes/flora/flora.tabs.css' %-->
+
   <%= javascript_include_tag "jquery-1.2.6.min.js" -%>
   <%= javascript_include_tag "jquery-treeview/jquery.treeview.js" -%>
   <%= javascript_include_tag "jquery-treeview/jquery.treeview.async.js" -%>
   <%= javascript_include_tag "flexigrid.js" -%>
   <%= javascript_include_tag "facebox.js" -%>
-  <%= javascript_include_tag "jquery.timers.js" -%>
+  <%#= javascript_include_tag "jquery.timers.js" -%>
   <%= javascript_include_tag "jquery-svg/jquery.svg.pack.js" -%>
   <!--%= javascript_include_tag "jquery-svg/jquery.svgfilter.js" -%-->
   <%= javascript_include_tag "jquery-svg/jquery.svggraph.js" -%>
-  <!--%= javascript_include_tag "jquery.ui-1.5b4/ui.core.js" -%>
-  < %= javascript_include_tag "jquery.ui-1.5b4/ui.tabs.js" -%-->
   <%= javascript_include_tag "jquery.cookie.js" -%>
-  <%= javascript_include_tag "jquery.livequery.pack.js" -%>
+  <%= javascript_include_tag "jquery.livequery.min.js" -%>
   <%= javascript_include_tag "jquery.form.js" -%>
   <%= javascript_include_tag "jquery.jgrowl.js" -%>
 
@@ -40,37 +38,9 @@
   <%= javascript_include_tag "ovirt.js" -%>
     <script type="text/javascript">
       var $tabs, selected_tab;
-      $(document).ready(function(){  
+      $(document).ready(function(){
+         $.ajaxSetup({error: function(xhr) {$.jGrowl(xhr.status + ' ' + xhr.statusText);}});
             $('a[rel*=facebox]').livequery(function(){$(this).facebox();},function(){});
-            $('#side a').livequery(function(){
-                $(this).bind('click', function(){ 
-                    currentNode = $(this).parent().parent()[0].id;
-                    if ($tabs != null) {
-                    var tabType = $tabs.data("pool_type.tabs");
-                    ($(this).attr('href').indexOf(tabType) == -1) ?selected_tab = 0 :selected_tab = $tabs.data("selected.tabs");
-                    }
-                    $('#side span').each(function(){
-                        var nodeType = $(this).attr('class');
-                        if (nodeType.indexOf('_') != -1){
-                            nodeType = nodeType.substr(nodeType.indexOf('_') +1);
-                            $(this).attr('class', nodeType);
-                        }                        
-                    });
-                    var nodeType = $(this).parent().attr('class');
-                    $(this).parent().attr('class', 'current_' + nodeType);
-                    $.ajax({
-                        url: $(this).attr('href'),
-                        type: 'GET',
-                        data: {ajax:true,tab:selected_tab},
-                        //data: {nolayout:true},
-                        dataType: 'html',
-                        success: function(data) {
-                          $('#side-toolbar').html($(data).find('div.toolbar'));
-                          $('#tabs-and-content-container').html($(data).not('div#side-toolbar'));
-                        },
-                        error: function(xhr) {$.jGrowl(xhr.status + ' ' + xhr.statusText);}
-                    });
-                    return false;})},function(){});
             $('.dialog_tab_nav a').livequery(function(){
                 $(this).bind('click', function(){
                     $('.dialog_tab_nav li').removeClass('current');
diff --git a/src/public/images/icon_add_smartpool.png b/src/public/images/icon_add_smartpool.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7cb7316596b1eafbcad54890971f42737d45a62
GIT binary patch
literal 1341
zcmV-D1;YA?P)<h;3K|Lk000e1NJLTq0018V0018d1^@s7XsITz00001b5ch_0Itp)
z=>Px#32;bRa{vGe at Bjb`@Bu=sG?)MY1ma0VK~zY`?Uj8 at m1P*lf6sdk2N4b*32Gpj
ziIr#}C<=4BR93E5nbW3j`bTK1wQ`NkwdGP<I&+%SGMr_8v}Lp5DrT%42!5m_a$+JN
znu#8ik0Ws4aK7L7?hk|@QFOLy&Fin{eeUPFuIGNA`?(+J4=cVoEq2>x0Wbs1Je}!`
ze{g(M at wQp<036Moz3Z2+-<aJm9l3!%lg6=BasDv&Ptg;VL-E*;a7R$xgZa57vMJ at H
zB*xoR#W4eq*F)yg{GK?48&Y at 4{sb}h#Y_46DB&MQck=e~O;WZ$r?PiU1312IIsgf=
zWyB>6O)lU4OwT6G0K?PY9_K6=d)8_VBT?0;+Pa3m3Q1GuR$Z)UMA at 5B^-Wl!$L#L2
z0HDR?qfDNgR at y!hzxx{hBGw%|BO)TTW#2C@*_bScR>%Eba->ELc-SH$ukJnBC;0L6
zZ79H&w~>rxh3d8f0Ebq`O4h38F2U+~C|@(8081QVNu;ASDCIxqtC=h7RKEfMMVm7}
z3v*X5&6qeG(FLUxm=q_=u3;KEzjV|~JF?=!mFuQs=!U2HoH@=C#8GouPLyBg_^Ae(
zt1ih<i%wH at UUhHsef*u5aoxc)0&uoCSAJSKSc*SNpM0zJ=H5hrHn+cLJaYVK`8ju4
zX|uyMEG{;p>6TTuY|n{4ZD+ at l44{Vd1s`zrLVeLwZxzq_E4im&7CTq4V at U>WZa=SU
z+o1gbT*zk3)VWw=5@*`>z96S}&XRt~uB&AL?0;=KsZ&CcOS$0EFzP-fZL)<4GbUnE
z{{C}*GP`u#;q}RRR?F4LCro-6P1CxPl1_BFj;%BgmuYmzEpHmY;SJ*?^`TB8t)X2(
zrP0>z=1lz%MlZ<EN=Qg3yveyI4<m^3ctHFJ3Z*nOw+D at AdK3F4<7p(=VQ{{|OT9ma
z1ha!7krC(}b=>lA_aG{X at +KW$+S)}&-*2=&_O7meZ444Hh2OtL|N9ov8{PA at r@ocK
zwWB0|IdU+^RMlPVC0nMcyU|wznXme;0)RCyrl6EkMIWXt3<;0?${K4WWKbwUpH6#o
zd%)*%F35VvcHo}OMMReGJ9S&qmWAoK8V?aMEE8AbNlx#{7V9H()WrE))jgZ{{$8^4
zH~@RIr}kavSc9SkF&@AjOrfga6YS-MttJf{3PTG)vqZ)-BzYc_Ufw$Eww=6ZH%h7e
z93(t?7&BHj(B=;Ga&&{Y5}Lk5dC!CHLTTX)9 at I?w!gZv-@<a^o-)0(tc6{x2TI<TF
zJ+|-e&fIojh3MW^JXenq9c^ORh-it8)f7fMV(6ekQD~qvKoE2=d?;lCQxpz|LBo|6
z91TrgLqb2#de8pm9h=+FS6EFU5&GqV9NlrH=nIRPMKO_P9!-kH8Wo1<Mpvu9L01Tv
zG&-CfYA-lwX>mzJ(i}B3ZE2b*G}1F_Y(~u;{dRy6V^Vq^jicM2^($Ws;;uzpouC4s
z3n+Ety-*+;Xa;(R2MGv~56w^zvOQ_S)3)0coOz&%>};$eO!E_A31abj!0-|9>)4$E
z+yR5ZAsUHM7D6l<gM0=NrXWq%EAdL`pn<dpG&h2sVA4ShE;jjb1~i<yMJ$68I+Ugb
zb+5~OuGMLcH2YMP#UR9_A^uK+0nhy|{olkN%sNK%{HL at T00000NkvXXu0mjfQ2usz

literal 0
HcmV?d00001

diff --git a/src/public/images/icon_smartpool.png b/src/public/images/icon_smartpool.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ed0af0d2f2da5b34d13491ebe06f64a9450b5ec
GIT binary patch
literal 641
zcmV-{0)G98P)<h;3K|Lk000e1NJLTq000gE000gM1^@s7XiptS00001b5ch_0Itp)
z=>Px#32;bRa{vGe>i_@>>j8p`4O##I0wzgBK~yNuZIDYylwlNxpYI#zqK at T2S=JyC
z*&>E6I%yZEa3L*)iWaScHm%y#Sj12vM9^iELAzSCYGDjC>WH_Ll*&tLv#6;-Yf=*(
zLq~sS=07cl{z>v(edpsn?|FFPUrEF#`N at p<B=)fr2A^FZ9B_&;-y<D&ygAEwlUu?8
zXWrl1=*kUkH{2rM&r55dNVKW#5S_qN>OgCO?qQ8bXY*%b6TKMABl7yX+X_>W+dJjd
z*#@*RiZ;R2Aa*aK{hv_)UHA6OiHbRtXp~Y6$A425SX5T*=MN#m*9wJ=6mE2hu{<L2
z at jmNMwFkFJ)<{x!wGGEoGp)_9P`ZGv)t8kTdg_;h$1A~@vNp1=1N6KM<$wn7mdfF3
zFQ5UFj=o>i-<nYc0CrI at H=iq6OkAGbzzhWd#X3#<*edoCFI&t6sZ=xvv=Mpt{VFNj
zTZvLOW at A&Fyz*v4-#T?Ys*z~RIWboUM2ta+ww#gP$94a8qr#0YscHzYx#B2xS2=pq
z9{AY=O9LQ+xQ`&^H<9HpWKszhC*Lw0dVu;i65(s;k~nQi{Ks}-x7+fmN+FUvmPrfm
z`s1WBPU?fx%3|+(QZJ6=d;I%6>lQ(il?+3llCb?WH5XqfAlDo~YI=;a;xx=Hu(FnA
ze0B{0UzvkKhmBHOn)qa=6{`O}igp}Qv4t#=AB9Z%9;({limDB+sD%Hy>P!?7TS%jw
bB^KcyJ~ZgpH4FC800000NkvXXu0mjf6L=r`

literal 0
HcmV?d00001

diff --git a/src/public/javascripts/ovirt.js b/src/public/javascripts/ovirt.js
index 28585fd..4579c80 100644
--- a/src/public/javascripts/ovirt.js
+++ b/src/public/javascripts/ovirt.js
@@ -1,6 +1,5 @@
 // ovirt-specific javascript functions are defined here
 
-
 // helper functions for dialogs and action links
 
 
@@ -41,7 +40,7 @@ function add_hosts(url)
     if (validate_selected(hosts, "host")) {
       $.post(url,
              { resource_ids: hosts.toString() },
-              function(data,status){ 
+              function(data,status){
                 $(document).trigger('close.facebox');
 	        grid = $("#hosts_grid");
                 if (grid.size()>0 && grid != null) {
@@ -142,11 +141,11 @@ function ajax_validation(response, status)
     $(".fieldWithErrors").removeClass("fieldWithErrors");
     $("div.errorExplanation").remove();
     if (!response.success && response.errors ) {
-      for(i=0; i<response.errors.length; i++) { 
+      for(i=0; i<response.errors.length; i++) {
         var element = $("div.form_field:has(#"+response.object + "_" + response.errors[i][0]+")");
         if (element) {
           element.addClass("fieldWithErrors");
-          for(j=0; j<response.errors[i][1].length; j++) { 
+          for(j=0; j<response.errors[i][1].length; j++) {
             element.append('<div class="errorExplanation">'+response.errors[i][1][j]+'</div>');
           }
         }
@@ -163,9 +162,7 @@ function afterHwPool(response, status){
     ajax_validation(response, status);
     if (response.success) {
       $(document).trigger('close.facebox');
-      // FIXME do we need to reload the tree here
-
-      // this is for reloading the host/storage grid when 
+      // this is for reloading the host/storage grid when
       // adding hosts/storage to a new HW pool
       if (response.resource_type) {
         grid = $('#' + response.resource_type + '_grid');
@@ -176,9 +173,12 @@ function afterHwPool(response, status){
         }
       }
       
+      //FIXME: point all these refs at a widget so we dont need the functions in here
+      processTree();
+
       if ((response.resource_type == 'hosts' ? get_selected_hosts() : get_selected_storage()).indexOf($('#'+response.resource_type+'_selection_id').html()) != -1){
 	  empty_summary(response.resource_type +'_selection', (response.resource_type == 'hosts' ? 'Host' : 'Storage Pool'));
-      }   
+      }
       // do we have HW pools grid?
       //$("#vmpools_grid").flexReload()
     }
@@ -193,12 +193,14 @@ function afterVmPool(response, status){
       } else {
         $tabs.tabs("load",$tabs.data('selected.tabs'));
       }
+      processTree();
     }
 }
 function afterSmartPool(response, status){
     ajax_validation(response, status);
     if (response.success) {
       $(document).trigger('close.facebox');
+      processTree();
     }
 }
 function afterStoragePool(response, status){
@@ -208,7 +210,7 @@ function afterStoragePool(response, status){
       grid = $("#storage_grid");
       if (grid.size()>0 && grid != null) {
         grid.flexReload();
-      } else {;
+      } else {
         $tabs.tabs("load",$tabs.data('selected.tabs'));
       }
     }
@@ -238,7 +240,7 @@ function afterVm(response, status){
     }
 }
 
-//selection detail refresh 
+//selection detail refresh
 function refresh_summary(element_id, url, obj_id){
   $('#'+element_id+'').load(url, { id: obj_id})
 }
@@ -289,10 +291,10 @@ function delete_pool(delete_url, id)
   $.post(delete_url,
          {id: id},
           function(data,status){
+            //no more flex reload?
+            processTree();
             if (data.alert) {
               $.jGrowl(data.alert);
             }
            }, 'json');
-}
-
-
+}
\ No newline at end of file
diff --git a/src/public/javascripts/ovirt.tree.js b/src/public/javascripts/ovirt.tree.js
new file mode 100644
index 0000000..77f0233
--- /dev/null
+++ b/src/public/javascripts/ovirt.tree.js
@@ -0,0 +1,71 @@
+function processTree (){
+  $("#nav_tree_form").ajaxSubmit({
+    url: tree_url,
+    type: "POST",
+    dataType: "json",
+    success: function(response){
+      // First, remove any deleted items from the tree
+      $.each(response.deleted, function(name, value){
+          //check if the li is the only one.  If so, remove its container as well
+          if ($('#' + value.id).parent("li").siblings().size() === 0 ) {
+            if($('#' + value.id).is(':visible')) {
+              $('#' + value.id).parent("li").parent("ul").siblings("div").click();
+            }
+            $('#' + value.id).parent("li").parent("ul").remove();
+          } else {
+            if($('#' + value.id).is(':visible')) {
+              $('#' + value.id).parent()
+              .siblings('li:last')
+              .children('div')
+              .click();
+            }
+            $('#' + value.id).parent().remove();
+          }
+      });
+
+      if(processRecursive) {
+        $("#nav_tree").html(recursiveTreeTempl.process({"pools" : response.pools}));
+        $("#smart_nav_tree").html(recursiveTreeTempl.process({"pools" : response.smart_pools}));
+        processRecursive = false;
+      } else {
+          // Loop through the items and decide if we need updated/new html for each item.
+          processChildren(response.pools, treeItemTempl);
+          processChildren(response.smart_pools, treeItemTempl);
+      }
+    }
+  });
+}
+
+function processChildren(list, templateObj){
+/*  TODO: In future, we may need an additional state here of 'moved' which deletes
+ *  the item where it was in the tree and adds it to its new parent.
+*/
+  $.each(list, function(n,data){
+    var updatedNode;
+    if(data.state === 'changed'){
+      $('input[value^=' + data.id + '-]').attr('value', data.id + '-' + data.name);
+      $('#' + data.id).html(data.name);
+    } else if(data.state === 'new') {
+        /* If the elem with id matching the parent id has a sibling that is a ul,
+         * we should append the result of processing the template to the existing
+         * sublist.  Otherwise, we need to add a new sublist and add it there.
+        */
+       var result  = templateObj.process(data);
+       if ($('#' + data.parent_id).siblings('ul').size() > 0) {
+         $('#' + data.parent_id).siblings('ul').append(result);
+       } else {
+         if (data.type === "SmartPool"){  //handle current user smart pools
+           $('#smart_nav_tree > li:last:not(:has(ul))').append(result);
+         } else {
+           $('#' + data.parent_id).parent().append('<ul>' + result + '</ul>');
+           $('#' + data.parent_id).siblings('span').addClass('expanded');
+         }
+       }
+      }
+    else {
+      if (data.children) {
+          processChildren(data.children, templateObj);
+      }
+    }
+  });
+}
\ No newline at end of file
diff --git a/src/public/javascripts/smart_nav_test_data.js b/src/public/javascripts/smart_nav_test_data.js
new file mode 100644
index 0000000..43e7dbc
--- /dev/null
+++ b/src/public/javascripts/smart_nav_test_data.js
@@ -0,0 +1,151 @@
+var pools3 = {
+    "deleted" : {},
+    "pools" :[
+ {  "name": "default",
+    "text": "default",
+    "children":
+        [{  "name": "Engineering",
+            "text": "Engineering",
+            "children":
+                [{  "name": "Development",
+                    "text": "Development",
+                    "children":
+                        [{  "name": "Project X",
+                            "text": "Project X",
+                            "id": 19,
+                            "type": "VmResourcePool"},
+                         {  "name": "Project Y",
+                            "text": "Project Y",
+                            "id": 20,
+                            "type": "VmResourcePool"}],
+                    "id": 9,
+                    "type": "HardwarePool"},
+                 {  "name": "QA",
+                    "text": "QA",
+                    "children":
+                        [{  "name": "Bob's Team",
+                            "text": "Bob's Team",
+                            "children":
+                                [{  "name": "Bob's VMs",
+                                    "text": "Bob's VMs",
+                                    "id": 21,
+                                    "type": "VmResourcePool"}],
+                            "id": 17,
+                            "type": "HardwarePool"},
+                         {  "name": "Jim's Team",
+                            "text": "Jim's Team",
+                            "children":
+                                [{  "name": "Jim's VMs",
+                                    "text": "Jim's VMs",
+                                    "id": 22,
+                                    "type": "VmResourcePool"}],
+                            "id": 18,
+                            "type": "HardwarePool"},
+                         {  "name": "Sally's Team",
+                            "text": "Sally's Team",
+                            "children":
+                                [{  "name": "Sally's VMs",
+                                    "text": "Sally's VMs",
+                                    "id": 33,
+                                    "type": "VmResourcePool"}],
+                            "id": 32,
+                            "type": "HardwarePool"}],
+                    "id": 10,
+                    "type": "HardwarePool"},
+                 {  "name": "Stage",
+                    "text": "Stage",
+                    "children":
+                        [{  "name": "stage1",
+                            "text": "stage1",
+                            "id": 45,
+                            "type": "HardwarePool"},
+                         {  "name": "stage2",
+                            "text": "stage2",
+                            "id": 46,
+                            "type": "HardwarePool"}],
+                    "id": 44,
+                    "type": "HardwarePool"}],
+            "id": 5,
+            "type": "HardwarePool"},
+         {  "name": "Finance",
+            "text": "Finance",
+            "children":
+                [{  "name": "Payroll",
+                    "text": "Payroll",
+                    "children":
+                        [{  "name": "Payroll VMs",
+                            "text": "Payroll VMs",
+                            "id": 23,
+                            "type": "VmResourcePool"}],
+                    "id": 11,
+                    "type": "HardwarePool"},
+                 {  "name": "Accts. Receivable",
+                     "text": "Accts. Receivable",
+                     "children":
+                         [{  "name": "our VMs",
+                             "text": "our VMs",
+                             "id": 24,
+                             "type": "VmResourcePool"}],
+                     "id": 12,
+                     "type": "HardwarePool"}],
+             "id": 6,
+             "type": "HardwarePool"},
+          {  "name": "HR",
+              "text": "HR",
+              "children":
+                  [{  "name": "Hiring Team",
+                      "text": "Hiring Team",
+                      "id": 13,
+                      "type": "HardwarePool"},
+                   {  "name": "Benefits",
+                       "text": "Benefits",
+                       "id": 14,
+                       "type": "HardwarePool"}],
+               "id": 7,
+               "type": "HardwarePool"},
+          {  "name": "External (DMZ)",
+              "text": "External (DMZ)",
+              "children":
+                  [{  "name": "VMs",
+                      "text": "VMs",
+                      "id": 25,
+                      "type": "VmResourcePool"},
+                   {  "name": "DB Cluster",
+                      "text": "DB Cluster",
+                      "children":
+                          [{  "name": "VMs",
+                              "text": "VMs",
+                              "id": 27,
+                              "type": "VmResourcePool"}],
+                      "id": 26,
+                      "type": "HardwarePool"}],
+              "id": 8,
+              "type": "HardwarePool"}],
+      "id": 1,
+      "type": "HardwarePool"}],
+"smart_pools":[{  "name": "ovirtadmin",
+   "text": "ovirtadmin",
+   "children":
+       [{  "name": "not so smart",
+           "text": "not so smart",
+           "id": 39,
+           "type": "SmartPool"},
+        {  "name": "a little smarter",
+           "text": "a little smarter",
+           "id": 40,
+           "type": "SmartPool"},
+        {  "name": "arrrrr",
+            "text": "arrrrr",
+            "id": 41,
+            "type": "SmartPool"},
+        {  "name": "huh?",
+           "text": "huh?",
+           "id": 42,
+           "type": "SmartPool"},
+        {  "name": "booya",
+           "text": "booya",
+           "id": 43,
+           "type": "SmartPool"}],
+   "id": 37,
+   "type": "DirectoryPool"}]
+}
\ No newline at end of file
diff --git a/src/public/javascripts/trimpath-template-1.0.38.js b/src/public/javascripts/trimpath-template-1.0.38.js
new file mode 100644
index 0000000..fd0898d
--- /dev/null
+++ b/src/public/javascripts/trimpath-template-1.0.38.js
@@ -0,0 +1,397 @@
+/**
+ * TrimPath Template. Release 1.0.38.
+ * Copyright (C) 2004, 2005 Metaha.
+ *
+ * TrimPath Template is licensed under the GNU General Public License
+ * and the Apache License, Version 2.0, as follows:
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the
+ * implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var TrimPath;
+
+// TODO: Debugging mode vs stop-on-error mode - runtime flag.
+// TODO: Handle || (or) characters and backslashes.
+// TODO: Add more modifiers.
+
+(function() {               // Using a closure to keep global namespace clean.
+    if (TrimPath == null)
+        TrimPath = new Object();
+    if (TrimPath.evalEx == null)
+        TrimPath.evalEx = function(src) { return eval(src); };
+
+    var UNDEFINED;
+    if (Array.prototype.pop == null)  // IE 5.x fix from Igor Poteryaev.
+        Array.prototype.pop = function() {
+            if (this.length === 0) {return UNDEFINED;}
+            return this[--this.length];
+        };
+    if (Array.prototype.push == null) // IE 5.x fix from Igor Poteryaev.
+        Array.prototype.push = function() {
+            for (var i = 0; i < arguments.length; ++i) {this[this.length] = arguments[i];}
+            return this.length;
+        };
+
+    TrimPath.parseTemplate = function(tmplContent, optTmplName, optEtc) {
+        if (optEtc == null)
+            optEtc = TrimPath.parseTemplate_etc;
+        var funcSrc = parse(tmplContent, optTmplName, optEtc);
+        var func = TrimPath.evalEx(funcSrc, optTmplName, 1);
+        if (func != null)
+            return new optEtc.Template(optTmplName, tmplContent, funcSrc, func, optEtc);
+        return null;
+    }
+
+    try {
+        String.prototype.process = function(context, optFlags) {
+            var template = TrimPath.parseTemplate(this, null);
+            if (template != null)
+                return template.process(context, optFlags);
+            return this;
+        }
+    } catch (e) { // Swallow exception, such as when String.prototype is sealed.
+    }
+
+    TrimPath.parseTemplate_etc = {};            // Exposed for extensibility.
+    TrimPath.parseTemplate_etc.statementTag = "forelse|for|if|elseif|else|var|macro";
+    TrimPath.parseTemplate_etc.statementDef = { // Lookup table for statement tags.
+        "if"     : { delta:  1, prefix: "if (", suffix: ") {", paramMin: 1 },
+        "else"   : { delta:  0, prefix: "} else {" },
+        "elseif" : { delta:  0, prefix: "} else if (", suffix: ") {", paramDefault: "true" },
+        "/if"    : { delta: -1, prefix: "}" },
+        "for"    : { delta:  1, paramMin: 3,
+            prefixFunc : function(stmtParts, state, tmplName, etc) {
+                if (stmtParts[2] != "in")
+                    throw new etc.ParseError(tmplName, state.line, "bad for loop statement: " + stmtParts.join(' '));
+                var iterVar = stmtParts[1];
+                var listVar = "__LIST__" + iterVar;
+                return [ "var ", listVar, " = ", stmtParts[3], ";",
+                    // Fix from Ross Shaull for hash looping, make sure that we have an array of loop lengths to treat like a stack.
+                    "var __LENGTH_STACK__;",
+                    "if (typeof(__LENGTH_STACK__) == 'undefined' || !__LENGTH_STACK__.length) __LENGTH_STACK__ = new Array();",
+                    "__LENGTH_STACK__[__LENGTH_STACK__.length] = 0;", // Push a new for-loop onto the stack of loop lengths.
+                    "if ((", listVar, ") != null) { ",
+                    "var ", iterVar, "_ct = 0;",       // iterVar_ct variable, added by B. Bittman
+                    "for (var ", iterVar, "_index in ", listVar, ") { ",
+                    iterVar, "_ct++;",
+                    "if (typeof(", listVar, "[", iterVar, "_index]) == 'function') {continue;}", // IE 5.x fix from Igor Poteryaev.
+                    "__LENGTH_STACK__[__LENGTH_STACK__.length - 1]++;",
+                    "var ", iterVar, " = ", listVar, "[", iterVar, "_index];" ].join("");
+            } },
+        "forelse" : { delta:  0, prefix: "} } if (__LENGTH_STACK__[__LENGTH_STACK__.length - 1] == 0) { if (", suffix: ") {", paramDefault: "true" },
+        "/for"    : { delta: -1, prefix: "} }; delete __LENGTH_STACK__[__LENGTH_STACK__.length - 1];" }, // Remove the just-finished for-loop from the stack of loop lengths.
+        "var"     : { delta:  0, prefix: "var ", suffix: ";" },
+        "macro"   : { delta:  1,
+            prefixFunc : function(stmtParts, state, tmplName, etc) {
+                var macroName = stmtParts[1].split('(')[0];
+                return [ "var ", macroName, " = function",
+                    stmtParts.slice(1).join(' ').substring(macroName.length),
+                    "{ var _OUT_arr = []; var _OUT = { write: function(m) { if (m) _OUT_arr.push(m); } }; " ].join('');
+            } },
+        "/macro"  : { delta: -1, prefix: " return _OUT_arr.join(''); };" }
+    }
+    TrimPath.parseTemplate_etc.modifierDef = {
+        "eat"        : function(v)    { return ""; },
+        "escape"     : function(s)    { return String(s).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); },
+        "capitalize" : function(s)    { return String(s).toUpperCase(); },
+        "default"    : function(s, d) { return s != null ? s : d; }
+    }
+    TrimPath.parseTemplate_etc.modifierDef.h = TrimPath.parseTemplate_etc.modifierDef.escape;
+
+    TrimPath.parseTemplate_etc.Template = function(tmplName, tmplContent, funcSrc, func, etc) {
+        this.process = function(context, flags) {
+            if (context == null)
+                context = {};
+            if (context._MODIFIERS == null)
+                context._MODIFIERS = {};
+            if (context.defined == null)
+                context.defined = function(str) { return (context[str] != undefined); };
+            for (var k in etc.modifierDef) {
+                if (context._MODIFIERS[k] == null)
+                    context._MODIFIERS[k] = etc.modifierDef[k];
+            }
+            if (flags == null)
+                flags = {};
+            var resultArr = [];
+            var resultOut = { write: function(m) { resultArr.push(m); } };
+            try {
+                func(resultOut, context, flags);
+            } catch (e) {
+                if (flags.throwExceptions == true)
+                    throw e;
+                var result = new String(resultArr.join("") + "[ERROR: " + e.toString() + (e.message ? '; ' + e.message : '') + "]");
+                result["exception"] = e;
+                return result;
+            }
+            return resultArr.join("");
+        }
+        this.name       = tmplName;
+        this.source     = tmplContent;
+        this.sourceFunc = funcSrc;
+        this.toString   = function() { return "TrimPath.Template [" + tmplName + "]"; }
+    }
+    TrimPath.parseTemplate_etc.ParseError = function(name, line, message) {
+        this.name    = name;
+        this.line    = line;
+        this.message = message;
+    }
+    TrimPath.parseTemplate_etc.ParseError.prototype.toString = function() {
+        return ("TrimPath template ParseError in " + this.name + ": line " + this.line + ", " + this.message);
+    }
+
+    var parse = function(body, tmplName, etc) {
+        body = cleanWhiteSpace(body);
+        var funcText = [ "var TrimPath_Template_TEMP = function(_OUT, _CONTEXT, _FLAGS) { with (_CONTEXT) {" ];
+        var state    = { stack: [], line: 1 };                              // TODO: Fix line number counting.
+        var endStmtPrev = -1;
+        while (endStmtPrev + 1 < body.length) {
+            var begStmt = endStmtPrev;
+            // Scan until we find some statement markup.
+            begStmt = body.indexOf("{", begStmt + 1);
+            while (begStmt >= 0) {
+                var endStmt = body.indexOf('}', begStmt + 1);
+                var stmt = body.substring(begStmt, endStmt);
+                var blockrx = stmt.match(/^\{(cdata|minify|eval)/); // From B. Bittman, minify/eval/cdata implementation.
+                if (blockrx) {
+                    var blockType = blockrx[1];
+                    var blockMarkerBeg = begStmt + blockType.length + 1;
+                    var blockMarkerEnd = body.indexOf('}', blockMarkerBeg);
+                    if (blockMarkerEnd >= 0) {
+                        var blockMarker;
+                        if( blockMarkerEnd - blockMarkerBeg <= 0 ) {
+                            blockMarker = "{/" + blockType + "}";
+                        } else {
+                            blockMarker = body.substring(blockMarkerBeg + 1, blockMarkerEnd);
+                        }
+
+                        var blockEnd = body.indexOf(blockMarker, blockMarkerEnd + 1);
+                        if (blockEnd >= 0) {
+                            emitSectionText(body.substring(endStmtPrev + 1, begStmt), funcText);
+
+                            var blockText = body.substring(blockMarkerEnd + 1, blockEnd);
+                            if (blockType == 'cdata') {
+                                emitText(blockText, funcText);
+                            } else if (blockType == 'minify') {
+                                emitText(scrubWhiteSpace(blockText), funcText);
+                            } else if (blockType == 'eval') {
+                                if (blockText != null && blockText.length > 0) // From B. Bittman, eval should not execute until process().
+                                    funcText.push('_OUT.write( (function() { ' + blockText + ' })() );');
+                            }
+                            begStmt = endStmtPrev = blockEnd + blockMarker.length - 1;
+                        }
+                    }
+                } else if (body.charAt(begStmt - 1) != '$' &&               // Not an expression or backslashed,
+                body.charAt(begStmt - 1) != '\\') {              // so check if it is a statement tag.
+                    var offset = (body.charAt(begStmt + 1) == '/' ? 2 : 1); // Close tags offset of 2 skips '/'.
+                    // 10 is larger than maximum statement tag length.
+                    if (body.substring(begStmt + offset, begStmt + 10 + offset).search(TrimPath.parseTemplate_etc.statementTag) == 0)
+                        break;                                              // Found a match.
+                }
+                begStmt = body.indexOf("{", begStmt + 1);
+            }
+            if (begStmt < 0)                              // In "a{for}c", begStmt will be 1.
+                break;
+            var endStmt = body.indexOf("}", begStmt + 1); // In "a{for}c", endStmt will be 5.
+            if (endStmt < 0)
+                break;
+            emitSectionText(body.substring(endStmtPrev + 1, begStmt), funcText);
+            emitStatement(body.substring(begStmt, endStmt + 1), state, funcText, tmplName, etc);
+            endStmtPrev = endStmt;
+        }
+        emitSectionText(body.substring(endStmtPrev + 1), funcText);
+        if (state.stack.length != 0)
+            throw new etc.ParseError(tmplName, state.line, "unclosed, unmatched statement(s): " + state.stack.join(","));
+        funcText.push("}}; TrimPath_Template_TEMP");
+        return funcText.join("");
+    }
+
+    var emitStatement = function(stmtStr, state, funcText, tmplName, etc) {
+        var parts = stmtStr.slice(1, -1).split(' ');
+        var stmt = etc.statementDef[parts[0]]; // Here, parts[0] == for/if/else/...
+        if (stmt == null) {                    // Not a real statement.
+            emitSectionText(stmtStr, funcText);
+            return;
+        }
+        if (stmt.delta < 0) {
+            if (state.stack.length <= 0)
+                throw new etc.ParseError(tmplName, state.line, "close tag does not match any previous statement: " + stmtStr);
+            state.stack.pop();
+        }
+        if (stmt.delta > 0)
+            state.stack.push(stmtStr);
+
+        if (stmt.paramMin != null &&
+            stmt.paramMin >= parts.length)
+            throw new etc.ParseError(tmplName, state.line, "statement needs more parameters: " + stmtStr);
+        if (stmt.prefixFunc != null)
+            funcText.push(stmt.prefixFunc(parts, state, tmplName, etc));
+        else
+            funcText.push(stmt.prefix);
+        if (stmt.suffix != null) {
+            if (parts.length <= 1) {
+                if (stmt.paramDefault != null)
+                    funcText.push(stmt.paramDefault);
+            } else {
+                for (var i = 1; i < parts.length; i++) {
+                    if (i > 1)
+                        funcText.push(' ');
+                    funcText.push(parts[i]);
+                }
+            }
+            funcText.push(stmt.suffix);
+        }
+    }
+
+    var emitSectionText = function(text, funcText) {
+        if (text.length <= 0)
+            return;
+        var nlPrefix = 0;               // Index to first non-newline in prefix.
+        var nlSuffix = text.length - 1; // Index to first non-space/tab in suffix.
+        while (nlPrefix < text.length && (text.charAt(nlPrefix) == '\n'))
+            nlPrefix++;
+        while (nlSuffix >= 0 && (text.charAt(nlSuffix) == ' ' || text.charAt(nlSuffix) == '\t'))
+            nlSuffix--;
+        if (nlSuffix < nlPrefix)
+            nlSuffix = nlPrefix;
+        if (nlPrefix > 0) {
+            funcText.push('if (_FLAGS.keepWhitespace == true) _OUT.write("');
+            var s = text.substring(0, nlPrefix).replace('\n', '\\n'); // A macro IE fix from BJessen.
+            if (s.charAt(s.length - 1) == '\n')
+              s = s.substring(0, s.length - 1);
+            funcText.push(s);
+            funcText.push('");');
+        }
+        var lines = text.substring(nlPrefix, nlSuffix + 1).split('\n');
+        for (var i = 0; i < lines.length; i++) {
+            emitSectionTextLine(lines[i], funcText);
+            if (i < lines.length - 1)
+                funcText.push('_OUT.write("\\n");\n');
+        }
+        if (nlSuffix + 1 < text.length) {
+            funcText.push('if (_FLAGS.keepWhitespace == true) _OUT.write("');
+            var s = text.substring(nlSuffix + 1).replace('\n', '\\n');
+            if (s.charAt(s.length - 1) == '\n')
+              s = s.substring(0, s.length - 1);
+            funcText.push(s);
+            funcText.push('");');
+        }
+    }
+
+    var emitSectionTextLine = function(line, funcText) {
+        var endMarkPrev = '}';
+        var endExprPrev = -1;
+        while (endExprPrev + endMarkPrev.length < line.length) {
+            var begMark = "${", endMark = "}";
+            var begExpr = line.indexOf(begMark, endExprPrev + endMarkPrev.length); // In "a${b}c", begExpr == 1
+            if (begExpr < 0)
+                break;
+            if (line.charAt(begExpr + 2) == '%') {
+                begMark = "${%";
+                endMark = "%}";
+            }
+            var endExpr = line.indexOf(endMark, begExpr + begMark.length);         // In "a${b}c", endExpr == 4;
+            if (endExpr < 0)
+                break;
+            emitText(line.substring(endExprPrev + endMarkPrev.length, begExpr), funcText);
+            // Example: exprs == 'firstName|default:"John Doe"|capitalize'.split('|')
+            var exprArr = line.substring(begExpr + begMark.length, endExpr).replace(/\|\|/g, "#@@#").split('|');
+            for (var k in exprArr) {
+                if (exprArr[k].replace) // IE 5.x fix from Igor Poteryaev.
+                    exprArr[k] = exprArr[k].replace(/#@@#/g, '||');
+            }
+            funcText.push('_OUT.write(');
+            emitExpression(exprArr, exprArr.length - 1, funcText);
+            funcText.push(');');
+            endExprPrev = endExpr;
+            endMarkPrev = endMark;
+        }
+        emitText(line.substring(endExprPrev + endMarkPrev.length), funcText);
+    }
+
+    var emitText = function(text, funcText) {
+        if (text == null ||
+            text.length <= 0)
+            return;
+        text = text.replace(/\\/g, '\\\\');
+        text = text.replace(/\n/g, '\\n');
+        text = text.replace(/"/g,  '\\"');
+        funcText.push('_OUT.write("');
+        funcText.push(text);
+        funcText.push('");');
+    }
+
+    var emitExpression = function(exprArr, index, funcText) {
+        // Ex: foo|a:x|b:y1,y2|c:z1,z2 is emitted as c(b(a(foo,x),y1,y2),z1,z2)
+        var expr = exprArr[index]; // Ex: exprArr == [firstName,capitalize,default:"John Doe"]
+        if (index <= 0) {          // Ex: expr    == 'default:"John Doe"'
+            funcText.push(expr);
+            return;
+        }
+        var parts = expr.split(':');
+        funcText.push('_MODIFIERS["');
+        funcText.push(parts[0]); // The parts[0] is a modifier function name, like capitalize.
+        funcText.push('"](');
+        emitExpression(exprArr, index - 1, funcText);
+        if (parts.length > 1) {
+            funcText.push(',');
+            funcText.push(parts[1]);
+        }
+        funcText.push(')');
+    }
+
+    var cleanWhiteSpace = function(result) {
+        result = result.replace(/\t/g,   "    ");
+        result = result.replace(/\r\n/g, "\n");
+        result = result.replace(/\r/g,   "\n");
+        result = result.replace(/^(\s*\S*(\s+\S+)*)\s*$/, '$1'); // Right trim by Igor Poteryaev.
+        return result;
+    }
+
+    var scrubWhiteSpace = function(result) {
+        result = result.replace(/^\s+/g,   "");
+        result = result.replace(/\s+$/g,   "");
+        result = result.replace(/\s+/g,   " ");
+        result = result.replace(/^(\s*\S*(\s+\S+)*)\s*$/, '$1'); // Right trim by Igor Poteryaev.
+        return result;
+    }
+
+    // The DOM helper functions depend on DOM/DHTML, so they only work in a browser.
+    // However, these are not considered core to the engine.
+    //
+    TrimPath.parseDOMTemplate = function(elementId, optDocument, optEtc) {
+        if (optDocument == null)
+            optDocument = document;
+        var element = optDocument.getElementById(elementId);
+        var content = element.value;     // Like textarea.value.
+        if (content == null)
+            content = element.innerHTML; // Like textarea.innerHTML.
+        content = content.replace(/</g, "<").replace(/>/g, ">");
+        return TrimPath.parseTemplate(content, elementId, optEtc);
+    }
+
+    TrimPath.processDOMTemplate = function(elementId, context, optFlags, optDocument, optEtc) {
+        return TrimPath.parseDOMTemplate(elementId, optDocument, optEtc).process(context, optFlags);
+    }
+}) ();
diff --git a/src/public/stylesheets/ovirt-tree/tree.css b/src/public/stylesheets/ovirt-tree/tree.css
new file mode 100644
index 0000000..bd89cb2
--- /dev/null
+++ b/src/public/stylesheets/ovirt-tree/tree.css
@@ -0,0 +1,83 @@
+#nav_tree {
+   padding: 20px;
+}
+
+.nav-tree {
+    width: 222px;
+    position: absolute;
+    overflow: auto;
+    top: 25px;
+    bottom: 140px;
+}
+
+.ovirt-tree, .ovirt-tree ul {
+    list-style: none;
+    margin:0;
+    padding:5px 0 5px 16px;
+    margin-right: 8px;
+}
+
+.ovirt-tree div {
+    background-repeat: no-repeat;
+    background-position: left;
+    padding: 4px 0 4px 28px;
+    cursor: pointer;
+}
+
+.HardwarePool {
+    background-image: url('/images/icon_hdwarepool.png');
+}
+
+.VmResourcePool {
+    background-image: url('/images/icon_vmpool.png');
+}
+
+.SmartPool {
+    background-image: url('/images/icon_smartpool.png');
+}
+
+.hitarea {
+	width: 16px;
+	margin-left: -16px;
+	float: left;
+	cursor: pointer;
+}
+
+.expandable {
+    background: url('/images/plus.gif') no-repeat left;
+}
+
+.expanded {
+    background: url('/images/minus.gif') no-repeat left;
+}
+
+ul.ovirt-tree .current {
+    background-color: #698FA6;
+    color:#000000;
+    width: 100%;
+}
+
+.nav-smart-pool {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 130px;
+    background: #CCCCCC;
+    width: 218px;
+    padding: 5px 5px 5px 5px;
+    overflow: auto;
+}
+
+.nav-smart-pool-header {
+    color: #666666;
+}
+
+.nav-dashboard {
+    background-image: url('/images/icon_dashboard.gif');
+    background-repeat: no-repeat;
+    background-position: left;
+    padding: 0px 0 0px 28px;
+    position: absolute;
+    height: 25px;
+    top: 0;
+}
\ No newline at end of file
-- 
1.5.5.2




More information about the ovirt-devel mailing list