[Ovirt-devel] [Patch] Availability Graphs on Hardware Summary Tab
Hugh O. Brock
hbrock at redhat.com
Mon May 19 16:18:18 UTC 2008
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
More information about the ovirt-devel
mailing list