[Ovirt-devel] [PATCH server] Fix for Bug #467729.
Jason Guiditta
jguiditt at redhat.com
Fri Jan 30 17:51:13 UTC 2009
Replaced svg bar graphs with css version. Removed
peak indicators, at least for now.
Signed-off-by: Jason Guiditta <jguiditt at redhat.com>
---
src/app/helpers/graph_helper.rb | 24 ++++++--
src/app/views/graph/_snapshot_graph.rhtml | 4 +
src/app/views/graph/snapshot_graph.rhtml | 97 ++++++++---------------------
src/public/stylesheets/components.css | 56 ++++------------
4 files changed, 63 insertions(+), 118 deletions(-)
create mode 100644 src/app/views/graph/_snapshot_graph.rhtml
diff --git a/src/app/helpers/graph_helper.rb b/src/app/helpers/graph_helper.rb
index 98a2698..bb1f05b 100644
--- a/src/app/helpers/graph_helper.rb
+++ b/src/app/helpers/graph_helper.rb
@@ -23,7 +23,7 @@ module GraphHelper
:values => [remaining],
:fill => 'white',
:stroke => 'lightgray',
- :strokeWidth => 1
+ :strokeWidth => 1
}
]
}
@@ -36,20 +36,34 @@ module GraphHelper
data_sets = []
if (total > used)
# 3/4 is the critical boundry for now
- color = 'red' if (used.to_f / total.to_f) > 0.75
+ color = 'red' if (used.to_f / total.to_f) > 0.75
data_sets.push({ :name => title + '_used', :values => [used],
:fill => color, :stroke => 'lightgray', :strokeWidth => 1 },
- { :name => title + '_available',
+ { :name => title + '_available',
:values => [available], :fill => 'white',
:stroke => 'lightgray', :strokeWidth => 1})
else
data_sets.push({ :name => title + '_available', :values => [available],
:fill => 'white', :stroke => 'lightgray', :strokeWidth => 1 },
- { :name => title + '_used',
+ { :name => title + '_used',
:values => [used], :fill => 'red',
:stroke => 'lightgray', :strokeWidth => 1})
end
return ActiveSupport::JSON.encode({:timepoints => [], :dataset => data_sets})
end
-
+
+ def get_scaled_data(type, data)
+ if (data[:avg][type] > data[:scale][type])
+ data[:avg][type] = data[:scale][type]
+ end
+ # 180 is the maximum width we display for the bar graph in the ui
+ data[:avg][type] * (180.0/data[:scale][type])
+ end
+
+ def get_percentage(type, data)
+ if (data[:avg][type] > data[:scale][type])
+ return 100
+ end
+ (data[:avg][type].to_f/data[:scale][type]) * 100
+ end
end
diff --git a/src/app/views/graph/_snapshot_graph.rhtml b/src/app/views/graph/_snapshot_graph.rhtml
new file mode 100644
index 0000000..274f1a4
--- /dev/null
+++ b/src/app/views/graph/_snapshot_graph.rhtml
@@ -0,0 +1,4 @@
+<div class="snapshot_graph_container" title="<%= number_to_percentage get_percentage(type, data), :precision => 2%>">
+ <% load_css = (get_scaled_data(type, data) >90) ? "load_graph_high" : "load_graph_low" %>
+ <div class="snapshot_graph <%=load_css%>" style="width: <%= get_scaled_data(type, data)%>px;"></div>
+</div>
\ No newline at end of file
diff --git a/src/app/views/graph/snapshot_graph.rhtml b/src/app/views/graph/snapshot_graph.rhtml
index eb1308b..1a3113b 100644
--- a/src/app/views/graph/snapshot_graph.rhtml
+++ b/src/app/views/graph/snapshot_graph.rhtml
@@ -1,73 +1,28 @@
<div id="snapshot_graphs">
- <table>
- <tr>
- <th width="25%">Metric</th>
- <th width="70%">Load</th>
- </tr>
-
- <tr>
- <td>Overall Load </td>
- <td>
- <div class="snapshot_graph_text"><%= @snapshots[:avg]['load'] %> </div>
- <div class="snapshot_graph_container">
- <div class="snapshot_graph_arrow" style="padding-left: <%= @snapshots[:peak]['load'] + 28 %>px;"><%= image_tag "icon_menu_arrow.gif" %></div>
- <div class="snapshot_graph">
- <%= render :partial => '/layouts/graph',
- :locals => { :div_id => 'load_snapshot',
- :chartType => 'stackedRow',
- :graph_data => snapshot_graph_json('load', @snapshots) }
- %>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>CPU </td>
- <td>
- <div class="snapshot_graph_text"><%= @snapshots[:avg]['cpu'] %> </div>
- <div class="snapshot_graph_container">
- <div class="snapshot_graph_arrow" style="padding-left: <%= @snapshots[:peak]['cpu'] + 28 %>px;"><%= image_tag "icon_menu_arrow.gif" %></div>
- <div class="snapshot_graph">
- <%= render :partial => '/layouts/graph', :locals => { :div_id => 'cpu_snapshot', :chartType => 'stackedRow', :graph_data => snapshot_graph_json('cpu', @snapshots) } %>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>Memory </td>
- <td>
- <div class="snapshot_graph_text"><%= @snapshots[:avg]['memory'] %> </div>
- <div class="snapshot_graph_container">
- <div class="snapshot_graph_arrow" style="padding-left: <%= @snapshots[:peak]['memory'] + 28 %>px;"><%= image_tag "icon_menu_arrow.gif" %></div>
- <div class="snapshot_graph">
- <%= render :partial => '/layouts/graph', :locals => { :div_id => 'memory_snapshot', :chartType => 'stackedRow', :graph_data => snapshot_graph_json('memory', @snapshots) } %>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>Network In </td>
- <td>
- <div class="snapshot_graph_text"><%= @snapshots[:avg]['netin'] %> mb/s </div>
- <div class="snapshot_graph_container">
- <div class="snapshot_graph_arrow" style="padding-left: <%= @snapshots[:peak]['netin'] + 28 %>px;"><%= image_tag "icon_menu_arrow.gif" %></div>
- <div class="snapshot_graph">
- <%= render :partial => '/layouts/graph', :locals => { :div_id => 'net_in_snapshot', :chartType => 'stackedRow', :graph_data => snapshot_graph_json('netin', @snapshots) } %>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>Network Out</td>
- <td>
- <div class="snapshot_graph_text"><%= @snapshots[:avg]['netout'] %> mb/s</div>
- <div class="snapshot_graph_container">
- <div class="snapshot_graph_arrow" style="padding-left: <%= @snapshots[:peak]['netout'] + 28 %>px;"><%= image_tag "icon_menu_arrow.gif" %></div>
- <div class="snapshot_graph">
- <%= render :partial => '/layouts/graph', :locals => { :div_id => 'net_out_snapshot', :chartType => 'stackedRow', :graph_data => snapshot_graph_json('netout', @snapshots) } %>
- </div>
- </div>
- </td>
- </tr>
- </table>
+ <table cellspacing="0">
+ <tr>
+ <th width="25%">Metric</th>
+ <th width="70%">Load</th>
+ </tr>
+ <tr>
+ <td>Overall Load </td>
+ <td><%= render :partial => "snapshot_graph", :locals => {:type => "load", :data => @snapshots} %></td>
+ </tr>
+ <tr>
+ <td>CPU </td>
+ <td><%= render :partial => "snapshot_graph", :locals => {:type => "cpu", :data => @snapshots} %></td>
+ </tr>
+ <tr>
+ <td>Memory </td>
+ <td><%= render :partial => "snapshot_graph", :locals => {:type => "memory", :data => @snapshots} %></td>
+ </tr>
+ <tr>
+ <td>Network In </td>
+ <td><%= render :partial => "snapshot_graph", :locals => {:type => "netin", :data => @snapshots} %></td>
+ </tr>
+ <tr>
+ <td>Network Out</td>
+ <td><%= render :partial => "snapshot_graph", :locals => {:type => "netout", :data => @snapshots} %></td>
+ </tr>
+ </table>
</div>
diff --git a/src/public/stylesheets/components.css b/src/public/stylesheets/components.css
index 228ff7b..430fba7 100644
--- a/src/public/stylesheets/components.css
+++ b/src/public/stylesheets/components.css
@@ -1,10 +1,10 @@
/****************
- header style
+ header style
**/
.header_logo {
- position:absolute;
- top:10px;
+ position:absolute;
+ top:10px;
left:10px;
}
@@ -196,7 +196,7 @@
background: #CCFFFF;
}
.history_graph{
- height: 210px;
+ height: 210px;
position: relative;
float: left;
}
@@ -208,54 +208,26 @@
}
/* snapshot graphs on hardware / resource summary tab */
-#snapshot_graphs { height: 180px; padding-left: 0; }
-#snapshot_graphs table { width: 98%; border-spacing: 1px; background: #CCCCCC; border-width: 0; border-style:solid;}
-#snapshot_graphs th { background: #EEEEEE; text-align: left; padding-left: 10px;}
-#snapshot_graphs td { padding-left: 10px; background: #FFFFFF;}
-#load_snapshot, #cpu_snapshot, #net_in_snapshot, #net_out_snapshot, #io_snapshot, #memory_snapshot {
-/*
-#snapshot_graphs { height: 180px; padding-left: 60px; }
-#snapshot_graphs table { width: 90%; border-spacing: 0;}
-#snapshot_graphs th { background: #CCCCCC; text-align: left; padding-left: 10px; border: 1px solid #DDDDDD;}
-#snapshot_graphs td { padding-left: 10px; border: 1px solid #DDDDDD;}
-#load_snapshot, #cpu_snapshot, #net_in_snapshot, #net_out_snapshot, #io_snapshot, #memory_snapshot {
-*/
- width: 350px; height: 10px; float: left;
-}
-.snapshot_graph_text {
- float: left;
- padding-top: 13px;
- width: 50px;
+#snapshot_graphs table {
+ width: 98%;
}
+#snapshot_graphs th { background: #EEEEEE; text-align: left; padding-left: 10px;border:1px solid #CCCCCC;}
+#snapshot_graphs td { padding-left: 10px; background: #FFFFFF;border:1px solid #CCCCCC;}
.snapshot_graph_container{
- float: left;
-}
-.snapshot_graph_arrow{
- width: 350px; height: 6px; float: left;
+ width: 180px;
+ height: 10px;
+ border:#666666 solid 1px;
}
.snapshot_graph{
- float: left;
+ height: 10px;
}
-/* snapshot graphs on detail panes */
-.selection_detail #snapshot_graphs { height: 140px; padding-left: 0; }
-.selection_detail #snapshot_graphs table { width: 98%; }
-.selection_detail #load_snapshot,
-.selection_detail #memory_snapshot,
-.selection_detail #cpu_snapshot,
-.selection_detail #net_in_snapshot,
-.selection_detail #net_out_snapshot,
-.selection_detail #io_snapshot { height: 5px; width: 215px; }
-.selection_detail .snapshot_graph_arrow{ height: 6px; }
-.selection_detail .snapshot_graph_text { padding-top: 0; }
-.selection_detail .snapshot_graph_container{ width: 85%; }
-.selection_detail .snapshot_graph{ padding-left: 23px; }
-
/* load graphs in flexigrid */
.load_graph {
padding: 0px !important;
height: 10px;
- border:#F5AFA8 solid 1px;
+ border:#666666 solid 1px;
+ width: 100px;
}
.load_graph_low {background: url(../images/chart_horiz_blue.png) repeat-x;}
--
1.5.6.6
More information about the ovirt-devel
mailing list