Ovirt devel - Oct 2008 - [PATCH server] WIP - Rev 1 of Storage Tree UI for 'Create VM'.

This probably needs some visual tweaks, but should work as
is.  Needs integration testing with scott's work to create
lvm volumes.

Signed-off-by: Jason Guiditta <jguiditt at redhat.com>
---
 src/app/controllers/vm_controller.rb       |    2 +
 src/app/models/storage_volume.rb           |    3 +
 src/app/views/vm/_form.rhtml               |   59 ++++++++++++++-------------
 src/public/javascripts/ovirt.tree.js       |    8 +++-
 src/public/stylesheets/ovirt-tree/tree.css |    5 ++-
 5 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/src/app/controllers/vm_controller.rb
b/src/app/controllers/vm_controller.rb
index fc992b3..ee956da 100644
--- a/src/app/controllers/vm_controller.rb
+++ b/src/app/controllers/vm_controller.rb
@@ -41,6 +41,7 @@ class VmController < ApplicationController
   end
 
   def new
+    @storage_tree =
VmResourcePool.find(params[:vm_resource_pool_id]).get_hardware_pool.storage_tree.to_json
     render :layout => 'popup'
   end
 
@@ -80,6 +81,7 @@ class VmController < ApplicationController
   end
 
   def edit
+    @storage_tree =
@vm.vm_resource_pool.get_hardware_pool.storage_tree(@vm).to_json
     render :layout => 'popup'
   end
 
diff --git a/src/app/models/storage_volume.rb b/src/app/models/storage_volume.rb
index 3bd5da0..6f14c4d 100644
--- a/src/app/models/storage_volume.rb
+++ b/src/app/models/storage_volume.rb
@@ -81,6 +81,7 @@ class StorageVolume < ActiveRecord::Base
       :type => self[:type],
       :text => display_name,
       :name => display_name,
+      :size => size_in_gb,
       :available => ((vm_ids.empty?) or
                     (vm_to_include and vm_to_include.id and
                      vm_ids.include?(vm_to_include.id))),
@@ -100,6 +101,8 @@ class StorageVolume < ActiveRecord::Base
                                :conditions => condition).collect do |volume|
         volume.storage_tree_element(vm_to_include)
       end
+    else
+      return_hash[:children] = []
     end
     return_hash
   end
diff --git a/src/app/views/vm/_form.rhtml b/src/app/views/vm/_form.rhtml
index 3d4cd79..523e81e 100644
--- a/src/app/views/vm/_form.rhtml
+++ b/src/app/views/vm/_form.rhtml
@@ -29,7 +29,7 @@
     <div class="clear_row"></div>
     <div class="field_title">Storage: </div>
     <div style="height:150px; overflow:auto; border:#CCCCCC solid
1px;">
-      <table id="storage_volumes_grid"
style="display:none"></table>
+      <ul id="storage_volumes_tree"
class="ovirt-tree"></ul>
     </div>
 
     <!-- FIXME: fill in total here -->
@@ -55,35 +55,38 @@
    <%= check_box_tag_with_label "Restart VM Now? (pending current
resource availability)", "restart_now", nil if @vm.state ==
Vm::STATE_RUNNING %>
 
 <!--[eoform:vm]-->
-<script type="text/javascript">
-	$("#storage_volumes_grid").flexigrid
-	(
-	{
-	url: '<%=  url_for :controller => "vm", 
-                           :action =>
"storage_volumes_for_vm_json",
-                           :id => @vm, :vm_pool_id =>
@vm.vm_resource_pool %>',
-	dataType: 'json',
-        width: 700,
-	colModel : [
-		{display: '', name : 'id', width : 20, sortable : false,
align: 'left', process: storage_volumes_grid_checkbox},
-		{display: 'Alias', name : 'display_name', width : 180,
sortable : false, align: 'left'},
-	        {display: 'Size (Gb)', name : 'size', width : 80,
sortable : true, align: 'left'},
-		{display: 'Type', name : 'type', width : 80, sortable : true,
align: 'left'}
-		],
-	sortname: "size",
-	sortorder: "desc",
-	usepager: true,
-	useRp: true,
-	rp: 10,
-	showTableToggleBtn: true
-	}
-	);   
 
-	function storage_volumes_grid_checkbox(celDiv)
-	{
-	       $(celDiv).html('<input type="checkbox"
name="vm[storage_volume_ids][]"
value="'+$(celDiv).html()+'"/>');
-	} 
+<textarea id="tree_template" style="display:none;">
+{macro htmlList(list, isFullList)}
+  {if isFullList}
+  <ul style="display:none;">
+  {/if}
+    {for item in list}
+      <li>
+        <span class="hitarea {if item.children.length > 0}
expandable{/if}">&nbsp;</span>
+        <div id="move-${item.id}" class="{if !item.available}
unclickable{/if}">
+          <input type="checkbox"
name="vm[storage_volume_ids][]" value="${item.id}"
+            {if !item.available}disabled="disabled"
style="display:none"{/if}
+            {if item.selected}checked="checked"{/if}/>
${item.name} {if item.size}(${item.size} GB){/if}
+        </div>
+        {if item.children.length > 0}
+          ${htmlList(item.children, true)}
+        {/if}
+      </li>
+    {/for}
+  {if isFullList}
+  </ul>
+  {/if}
+{/macro}
 
+${htmlList(pools)}
+</textarea>
+<script type="text/javascript">
+    $(document).ready(function(){
+      $('#storage_volumes_tree').tree({
+        content: {"pools" : <%=  @storage_tree%>}
+      });
+    });
 </script>
 
 
diff --git a/src/public/javascripts/ovirt.tree.js
b/src/public/javascripts/ovirt.tree.js
index 42719a1..13720b2 100644
--- a/src/public/javascripts/ovirt.tree.js
+++ b/src/public/javascripts/ovirt.tree.js
@@ -121,6 +121,7 @@ function processChildren(list, templateObj){
                           }
                       }
                     });
+                    this.openToSelected(self);
                 },
                 toggle: function(e, elem) {
                     $(elem)
@@ -129,8 +130,11 @@ function processChildren(list, templateObj){
                       .siblings('ul').slideToggle("normal");
                 },
                 clickHandler: function(e,elem) {
-                    alert('e: ' + e + ', elem: ' + elem);
-                    var fred = 'fred';
+                    // make this a default impl if needed.
+                },
+                openToSelected: function(self) {
+                    //find 'selected' items and open tree accordingly. 
This may need to have a
+                    //marker of some sort passed in since different trees may
have different needs.
                 },
 		off: function() {
 			this.element.css({background: 'none'});
diff --git a/src/public/stylesheets/ovirt-tree/tree.css
b/src/public/stylesheets/ovirt-tree/tree.css
index bc5cca5..2c9456d 100644
--- a/src/public/stylesheets/ovirt-tree/tree.css
+++ b/src/public/stylesheets/ovirt-tree/tree.css
@@ -20,7 +20,7 @@
 .ovirt-tree div {
     background-repeat: no-repeat;
     background-position: left;
-    padding: 4px 0 4px 28px;
+    padding: 4px 0 4px 4px;
     cursor: pointer; /* maybe move this into a clickable class? */
 }
 
@@ -30,14 +30,17 @@
 }
 
 .HardwarePool {
+    padding: 4px 0 4px 28px !important;
     background-image: url('../../images/icon_hdwarepool.png');
 }
 
 .VmResourcePool {
+    padding: 4px 0 4px 28px !important;
     background-image: url('../../images/icon_vmpool.png');
 }
 
 .SmartPool {
+    padding: 4px 0 4px 28px !important;
     background-image: url('../../images/icon_smartpool.png');
 }
 
-- 
1.5.6.5

Jason Guiditta wrote:
> This probably needs some visual tweaks, but should work as
> is.  Needs integration testing with scott's work to create
> lvm volumes.
>
> Signed-off-by: Jason Guiditta <jguiditt at redhat.com>
> ---
>  src/app/controllers/vm_controller.rb       |    2 +
>  src/app/models/storage_volume.rb           |    3 +
>  src/app/views/vm/_form.rhtml               |   59
++++++++++++++-------------
>  src/public/javascripts/ovirt.tree.js       |    8 +++-
>  src/public/stylesheets/ovirt-tree/tree.css |    5 ++-
>  5 files changed, 46 insertions(+), 31 deletions(-)
>
>   
ACK.

Works for me on top of my LVM UI patch.

Scott

Jason Guiditta wrote:
> This probably needs some visual tweaks, but should work as
> is.  Needs integration testing with scott's work to create
> lvm volumes.
> 
> Signed-off-by: Jason Guiditta <jguiditt at redhat.com>
Committed.

-- 
Chris Lalancette