[Ovirt-devel] [PATCH server] WIP - Rev 1 of Storage Tree UI for 'Create VM'.
Jason Guiditta
jguiditt at redhat.com
Thu Oct 30 21:49:03 UTC 2008
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}"> </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
More information about the ovirt-devel
mailing list