Mohammed Morsi
2008-May-17 00:56 UTC
[Ovirt-devel] [Patch] Availability Graphs on Hardware Summary Tab
Attached is all the logic behind the availability graphs
(memory,storage,vms) on the hardware summary page. Its based on the
jquery-svg library Jay previously added. I had to hack the library a
bit, so as to disable an annoying "feature", where the y-axis was
always
being drawn for stacked bar graphs, and could not be disabled by the
client. Have a good weekend.
Mo
-------------- next part --------------
A non-text attachment was scrubbed...
Name: availabilitygraphs.patch
Type: text/x-patch
Size: 10898 bytes
Desc: not available
URL:
<http://listman.redhat.com/archives/ovirt-devel/attachments/20080516/fecab1ae/attachment.bin>
Hugh O. Brock
2008-May-19 16:18 UTC
[Ovirt-devel] [Patch] Availability Graphs on Hardware Summary Tab
On Fri, May 16, 2008 at 08:56:54PM -0400, Mohammed Morsi wrote:> Attached is all the logic behind the availability graphs > (memory,storage,vms) on the hardware summary page. Its based on the > jquery-svg library Jay previously added. I had to hack the library a bit, > so as to disable an annoying "feature", where the y-axis was always being > drawn for stacked bar graphs, and could not be disabled by the client. Have > a good weekend. > > Mo> diff --git a/wui/src/app/controllers/application.rb b/wui/src/app/controllers/application.rb > index d387319..76c7826 100644 > --- a/wui/src/app/controllers/application.rb > +++ b/wui/src/app/controllers/application.rb > @@ -29,12 +29,11 @@ class ApplicationController < ActionController::Base > before_filter :pre_new, :only => [:new] > before_filter :pre_create, :only => [:create] > before_filter :pre_edit, :only => [:edit, :update, :destroy] > - before_filter :pre_show, :only => [:show, :show_vms, :show_users, :show_hosts, :show_storage] > + before_filter :pre_show, :only => [:show, :show_vms, :show_users, :show_hosts, :show_storage, :show_graphs, :available_graph] > before_filter :authorize_admin, :only => [:new, :create, :edit, :update, :destroy] > > def get_login_user > - # user_from_principal(request.env["HTTP_X_FORWARDED_USER"]) > - 'admin' > + user_from_principal(request.env["HTTP_X_FORWARDED_USER"]) > end > > def user_from_principal(principal) > diff --git a/wui/src/app/controllers/hardware_controller.rb b/wui/src/app/controllers/hardware_controller.rb > index 599d881..5c65f0f 100644 > --- a/wui/src/app/controllers/hardware_controller.rb > +++ b/wui/src/app/controllers/hardware_controller.rb > @@ -28,7 +28,6 @@ class HardwareController < ApplicationController > :add_storage, :move_storage, > :create_storage, :delete_storage] > > - > def show > set_perms(@perm_obj) > unless @can_view > @@ -88,6 +87,48 @@ class HardwareController < ApplicationController > @hardware_pools = HardwarePool.find :all > end > > + # retrieves data to be used by availablilty bar charts > + def available_graph > + target = params[:target] > + available = nil > + used = nil > + if target == 'memory' > + available = @available_memory > + used = @used_memory > + elsif target == 'storage' > + available = @available_storage > + used = @used_storage > + elsif target == 'vms' > + available = @available_vms > + used = @used_vms > + end > + > + color = 'blue' > + color = 'red' if (used.to_f / (available + used).to_f) > 0.75 # 3/4 is the critical boundry for now > + > + graph_object = { > + :timepoints => [], > + :dataset => > + [ > + { > + :name => target + "used", > + :values => [used], > + :fill => color, > + :stroke => 'lightgray', > + :strokeWidth => 1 > + }, > + { > + :name => target + "available", > + :values => [available], > + :fill => 'white', > + :stroke => 'lightgray', > + :strokeWidth => 1 > + } > + ] > + } > + render :json => graph_object > + end > + > def hosts_json > if params[:id] > pre_json > @@ -261,6 +302,16 @@ class HardwareController < ApplicationController > @pool = HardwarePool.find(params[:id]) > @perm_obj = @pool > @current_pool_id=@pool.id > + > + # TODO pull real values in > + @available_memory = 18 > + @used_memory = 62 > + > + @available_storage = 183 > + @used_storage = 61 > + > + @available_vms = 1 > + @used_vms = 26 > end > def pre_json > pre_show > diff --git a/wui/src/app/views/hardware/show.html.erb b/wui/src/app/views/hardware/show.html.erb > index 4dd63f8..85d1c4c 100644 > --- a/wui/src/app/views/hardware/show.html.erb > +++ b/wui/src/app/views/hardware/show.html.erb > @@ -1,3 +1,14 @@ > +<%= javascript_include_tag "jquery-svg/custom_test.js" %> > + > +<!-- TODO put style in stylesheet --> > +<style type="text/css"> > + #availability_graphs{ } > + .availability_graph { float: left; width: 33%;} > + .availability_graph_left { float: left; width: 50px;} > + .availability_graph_right { float: left; margin-top: 10%; margin-left: 125px; min-width: 100px;} > + #available_memory, #available_storage, #available_vms {margin-left:50px;width:100px;height:100px} > +</style> > + > <div id="toolbar_nav"> > <ul> > <li><a href="<%= url_for :controller => 'host', :action => 'addhost', :hardware_pool_id => @pool %>" rel="facebox[.bolder]"><%= image_tag "icon_addhost.png" %> Add Host</a></li> > @@ -7,6 +18,46 @@ > </div> > <div class="panel_header"></div> > > + > +<%= @pool.name %> > + > +<div id="availability_graphs"> > + <div class="availability_graph"> > + <div class="availability_graph_left"> > + <%= render :partial => '/layouts/graph', :locals => { :div_id => 'available_memory', :chartType => 'stackedColumn', :url => (url_for :controller => 'hardware', :action => 'available_graph', :target => 'memory' ) } %> > + </div> > + <div class="availability_graph_right"> > + Available: <%= @available_memory %> <br/> Used: <%= @used_memory %> <br/><b><%= @available_memory + @used_memory %> GB of Memory</b><br/> > + </div> > + </div> > + > + <div class="availability_graph"> > + <div class="availability_graph_left"> > + <%= render :partial => '/layouts/graph', :locals => { :div_id => 'available_storage', :chartType => 'stackedColumn', :url => (url_for :controller => 'hardware', :action => 'available_graph', :target => 'storage') } %> > + </div> > + <div class="availability_graph_right"> > + Available: <%= @available_storage %> <br/> Used: <%= @used_storage %> <br/><b><%= @available_storage + @used_storage %> GB of Storage</b><br/> > + </div> > + </div> > + > + <div class="availability_graph"> > + <div class="availability_graph_left"> > + <%= render :partial => '/layouts/graph', :locals => { :div_id => 'available_vms', :chartType => 'stackedColumn', :url => (url_for :controller => 'hardware', :action => 'available_graph', :target => 'vms' ) } %> > + </div> > + <div class="availability_graph_right"> > + Available: <%= @available_vms %> <br/> Used: <%= @used_vms %> <br/><b><%= @available_vms + @used_vms %> Virtual Machines</b><br/> > + </div> > + </div> > +</div> > + > +<%= # render :partial => '/graphs/load_history' > +%> > + > +<br/> > + > +<%= #render :partial => '/graphs/network_traffic' > +%> > + > <div id="data"> > <div class="inside"> > <div id="dataTableWrapper"> > diff --git a/wui/src/app/views/hardware/show_graphs.rhtml b/wui/src/app/views/hardware/show_graphs.rhtml > index 41e5656..07eee21 100644 > --- a/wui/src/app/views/hardware/show_graphs.rhtml > +++ b/wui/src/app/views/hardware/show_graphs.rhtml > @@ -6,7 +6,7 @@ > </style> > <%= javascript_include_tag "jquery-svg/custom_test.js" -%> > <%= render :partial => '/layouts/graph', > - :locals => {:div_id => "bar_graph",:chartType => "bar",:dataType =>"Memory"} %> > + :locals => {:div_id => "bar_graph",:chartType => "bar",:dataType =>"Memory", :url => (url_for :controller => 'graph', :action => 'graph') } %> > <%= render :partial => '/layouts/graph', > - :locals => {:div_id => "cool_graph",:chartType => "line",:dataType =>"summary"} %> > -</div> > \ No newline at end of file > + :locals => {:div_id => "cool_graph",:chartType => "line",:dataType =>"summary", :url => (url_for :controller => 'graph', :action => 'graph') } %> > +</div> > diff --git a/wui/src/app/views/layouts/_graph.rhtml b/wui/src/app/views/layouts/_graph.rhtml > index af1faf6..5ee7b67 100644 > --- a/wui/src/app/views/layouts/_graph.rhtml > +++ b/wui/src/app/views/layouts/_graph.rhtml > @@ -1,12 +1,29 @@ > <script type="text/javascript"> > $(document).ready(function(){ > + <% dataType = "summary" unless defined? dataType %> > + <% chartType = "line" unless defined? chartType %> > + > $("#<%= div_id %>").svg(); > - buildGraph({ > - <%if defined? chartType%>chartType: "<%= chartType%>",<%end%> > - <%if defined? dataType%>dataType: "<%= dataType%>",<%end%> > - svg_container: "#<%= div_id %>", > - graph_url: "<%= url_for :controller =>'/graph', :action => 'graph' %>" > - }); > + var svg = svgManager.getSVGFor("#<%= div_id %>"); > + var params = { id:1, type:"<%= dataType %>", timeframe:"7 days", isJSON:true}; > + > + $.getJSON("<%= url %>", params, > + function(response) { > + var defs = svg.defs(); > + svg.graph.noDraw(); > + svg.graph.chartFormat('white', 'white').chartType("<%= chartType %>", {explode: [2], explodeDist: 10}) > + $(response.dataset).each( > + function(){ > + svg.graph.addSeries(this.name, this.values, this.fill, this.stroke, this.strokeWidth); > + } > + ); > + svg.graph.xAxis.line('white', 0); > + svg.graph.yAxis.line('white', 0); > + svg.graph.legend.show(false); > + svg.graph.redraw(); > + } > + ); > }); > </script> > -<div id="<%= div_id %>"></div> > \ No newline at end of file > + > +<div id="<%= div_id %>"></div> > diff --git a/wui/src/app/views/layouts/redux.rhtml b/wui/src/app/views/layouts/redux.rhtml > index bc9d7c3..cd013d1 100644 > --- a/wui/src/app/views/layouts/redux.rhtml > +++ b/wui/src/app/views/layouts/redux.rhtml > @@ -22,7 +22,7 @@ > <%= javascript_include_tag "facebox.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.pack.js" -%> > + <%= javascript_include_tag "jquery-svg/jquery.svggraph.js" -%> > <%= yield :scripts -%> > <%= javascript_include_tag "jquery.form.js" -%> > <script type="text/javascript"> > diff --git a/wui/src/public/javascripts/jquery-svg/custom_test.js b/wui/src/public/javascripts/jquery-svg/custom_test.js > index decfee9..4ce446a 100644 > --- a/wui/src/public/javascripts/jquery-svg/custom_test.js > +++ b/wui/src/public/javascripts/jquery-svg/custom_test.js > @@ -64,4 +64,4 @@ > **/ > function setStatus(value) { > //alert(value); > -} > \ No newline at end of file > +} > diff --git a/wui/src/public/javascripts/jquery-svg/jquery.svggraph.js b/wui/src/public/javascripts/jquery-svg/jquery.svggraph.js > index 1fb66e8..b4e747f 100644 > --- a/wui/src/public/javascripts/jquery-svg/jquery.svggraph.js > +++ b/wui/src/public/javascripts/jquery-svg/jquery.svggraph.js > @@ -892,8 +892,8 @@ $.extend(SVGStackedColumnChart.prototype, { > graph._root.text(graph._chartGroup, 0, 0, svgGraphing.region.percentageText, > {text_anchor: 'middle', transform: 'translate(' + (dims[graph.X] - graph.yAxis._titleOffset) + > ',' +(dims[graph.Y] + dims[graph.H] / 2) + ') rotate(-90)'}); > - graph._drawAxis(graph._getPercentageAxis(), 'yAxis', > - dims[graph.X], dims[graph.Y], dims[graph.X], dims[graph.Y] + dims[graph.H]); > + //graph._drawAxis(graph._getPercentageAxis(), 'yAxis', > + //dims[graph.X], dims[graph.Y], dims[graph.X], dims[graph.Y] + dims[graph.H]); > this._drawXAxis(graph, numVal, barWidth, barGap, dims, xScale); > graph._drawLegend(); > },<pedantic>I believe there's one new line in application.rb that is over 80 chars, can you fix it?</pedantic> Other than that, ACK --Hugh