Signed-off-by: Amos Benari <abenari@redhat.com>
···
--- app/helpers/application_helper.rb | 1 + app/helpers/statistics_helper.rb | 20 ++++++------ app/views/statistics/index.html.erb | 12 +++--- public/javascripts/application.js | 61 ----------------------------------- public/javascripts/charts.js | 55 +++++++++++++++++++++++++++++-- public/stylesheets/style.css | 6 ++-- 6 files changed, 71 insertions(+), 84 deletions(-)diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index e8b7d40…fd84968 100644
— a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -162,6 +162,7 @@ module ApplicationHelper
end
def pie_chart name, title, data, options = {}
- content_tag(:h4,title,:class=>‘ca’) +
content_tag(:div, nil,
{ :id => name,
:class => ‘statistics_pie’,
diff --git a/app/helpers/statistics_helper.rb b/app/helpers/statistics_helper.rb
index f687ef9…d654e1f 100644
— a/app/helpers/statistics_helper.rb
+++ b/app/helpers/statistics_helper.rb
@@ -1,16 +1,16 @@
module StatisticsHelper
- def charts
- options = {:class => “statistics_pie small”, :expandable => true, :‘border’ => 0, :show_title => false}
[
-
pie_chart("os_dist" ,"OS Distribution", @os_count, :class => "statistics_pie small"), -
pie_chart("arch_dist" ,"Architecture Distribution", @arch_count, :class => "statistics_pie small"), -
pie_chart("env_dist" ,"Environments Distribution", @env_count, :class => "statistics_pie small"), -
pie_chart("cpu_num" ,"Number of CPUs", @cpu_count, :class => "statistics_pie small"), -
pie_chart("hardware" ,"Hardware", @model_count, :class => "statistics_pie small"), -
pie_chart("class_dist" ,"Class Distribution", @klass_count, :class => "statistics_pie small"), -
pie_chart("mem_usage" ,"Average memory usage", [["free memory (GB)",@mem_free],["used memory (GB)",@mem_size-@mem_free]], :class => "statistics_pie small"), -
pie_chart("swap_usage" ,"Average swap usage", [["free swap (GB)",@swap_free],["used swap (GB)",@swap_size-@swap_free]], :class => "statistics_pie small"), -
pie_chart("mem_totals" ,"Total memory usage", [["free memory (GB)", @mem_totfree],["used memory (GB)",@mem_totsize-@mem_totfree]], :class => "statistics_pie small"),
-
pie_chart("os_dist" ,"OS Distribution", @os_count, options), -
pie_chart("arch_dist" ,"Architecture Distribution", @arch_count, options), -
pie_chart("env_dist" ,"Environments Distribution", @env_count, options), -
pie_chart("cpu_num" ,"Number of CPUs", @cpu_count,options), -
pie_chart("hardware" ,"Hardware", @model_count, options), -
pie_chart("class_dist" ,"Class Distribution", @klass_count, options), -
pie_chart("mem_usage" ,"Average memory usage", [["free memory (GB)",@mem_free],["used memory (GB)",@mem_size-@mem_free]], options), -
pie_chart("swap_usage" ,"Average swap usage", [["free swap (GB)",@swap_free],["used swap (GB)",@swap_size-@swap_free]], options), -
]pie_chart("mem_totals" ,"Total memory usage", [["free memory (GB)", @mem_totfree],["used memory (GB)",@mem_totsize-@mem_totfree]],options),
end
end
diff --git a/app/views/statistics/index.html.erb b/app/views/statistics/index.html.erb
index 14876bb…91807ce 100644
— a/app/views/statistics/index.html.erb
+++ b/app/views/statistics/index.html.erb
@@ -1,7 +1,7 @@
-<% charts.in_groups(3,nil) do |ch| -%>
-
- <% ch.each do |c| -%>
<div class="span-one-third"><%= c %></div>- <% end -%>
+
- <%= link_to_function content_tag (:div, ch, :class=>“thumbnail”), “expand_chart(this);” %>
+<% charts.each do |ch| -%>
<% end -%>
+
\ No newline at end of file
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 3e45e0c…4d9cec6 100644
— a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -68,65 +68,6 @@ function template_info(div, url) {
}
});
}
-function get_pie_chart(div, url) {
- if($("#"+div).length == 0)
- {
- $(‘body’).append(’’);
- $("#"+div).append(‘×’)
Fact Chart
-
.append('<div id="' + div + '-body" class="fact_chart modal-body">Loading ...</div>'); - $("#"+div).modal(‘show’);
- $.getJSON(url, function(data) {
-
pie_chart(div+'-body', data.name, data.values); - });
- } else {$("#"+div).modal(‘show’);}
-}
-function pie_chart(div, title, data) {
- new Highcharts.Chart({
- chart: {
-
renderTo: div, -
borderWidth: 0, -
backgroundColor: { -
linearGradient: [0, 0, 0, 200], -
stops: [ -
[0, '#ffffff'], -
[1, '#EDEDED'] -
]} - },
- credits: {
- enabled: false
- },
- title: {
-
text: title, -
style: {color: "#000000"} - },
- tooltip: {
-
formatter: function() { -
return '<b>'+ this.point.name +'</b>: '+ this.y; -
} - },
- plotOptions: {
-
pie: { -
allowPointSelect: true, -
cursor: 'pointer', -
dataLabels: { -
enabled: true, -
formatter: function() { -
return '<b>'+ this.point.name +'</b>: '+ this.y; -
} -
} -
} - },
-
series: [{ -
type: 'pie', -
name: '', -
data: data - }]
- });
-};
$(document).ready(function() {
var common_settings = {
method : ‘PUT’,
@@ -177,8 +118,6 @@ $(document).ready(function() {
};
$(this).editable($(this).attr(‘data-url’), $.extend(common_settings, settings));
});
});
// adds buttons classes to all links
diff --git a/public/javascripts/charts.js b/public/javascripts/charts.js
index 40186fe…caf053c 100644
— a/public/javascripts/charts.js
+++ b/public/javascripts/charts.js
@@ -3,9 +3,12 @@ $(function(){
var el = $(element);
var name = el.attr(‘chart-name’);
var title = el.attr(‘chart-title’);
- var border = $.parseJSON(el.attr(‘border’));
- var expandable = el.attr(‘expandable’);
- var show_title = $.parseJSON(el.attr(‘show_title’));
var data = $.parseJSON(el.attr(‘chart-data’));
- stat_pie(name, title, data);
- stat_pie(name, title, data, border, expandable, show_title);
});
$(".statistics_bar").each(function(index, element){
@@ -46,12 +49,56 @@ $(function(){
});
-function stat_pie(name, title, data) {
- new Highcharts.Chart({
+function expand_chart(ref){
- var chart = $(ref)
- if (!chart.hasClass(‘statistics_pie’)){
- chart = $(ref).children().children(’.statistics_pie’);
- }
- var modal_id = chart.attr(‘id’)+’_modal’;
- var title = chart.attr(‘chart-title’);
- var data = $.parseJSON(chart.attr(‘chart-data’));
- if($("#"+modal_id).length == 0)
- {
- $(‘body’).append(’’);
- $("#"+modal_id).append('×')
’ +title+ ’
-
.append('<div id="' + modal_id + '-body" class="fact_chart modal-body">Loading ...</div>'); - $("#"+modal_id).modal(‘show’);
- stat_pie(modal_id+’-body’, title, data, 0, false, false)
- } else {$("#"+modal_id).modal(‘show’);}
+}
+function get_pie_chart(div, url) {
- if($("#"+div).length == 0)
- {
- $(‘body’).append(’’);
- $("#"+div).append(‘×’)
Fact Chart
-
.append('<div id="' + div + '-body" class="fact_chart modal-body">Loading ...</div>'); - $("#"+div).modal(‘show’);
- $.getJSON(url, function(data) {
-
stat_pie(div+'-body', data.name, data.values,0); - });
- } else {$("#"+div).modal(‘show’);}
+}
+function stat_pie(name, title, data, border, expandable, show_title) {
- if (border == undefined) { border = 1;}
- if (show_title == undefined) { show_title = true;}
- if (expandable == undefined) { expandable = false;}
- var top_spacing = 10;
- if (show_title == false){title=’’; top_spacing = 5;}
- new Highcharts.Chart({
chart: {
renderTo: name,
borderColor: ‘#909090’,
-
borderWidth: 1,
-
borderWidth: border, -
spacingTop: top_spacing, -
spacingBottom: 10, -
spacingLeft: 0, -
spacingRight: 0, -
events: { -
click: function(e) {if(expandable){expand_chart(this.container.parentElement);}}, -
selection: function(e) {alert('kuku');} -
}, backgroundColor: { linearGradient: [0, 0, 0, 200], stops: [
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 700a658…48c55f8 100644
— a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -182,9 +182,8 @@ table.list td {
border: solid 1px #f00;
}
.statistics_pie.small{
- width: 320px;
- height: 275px;
- padding-bottom: 4px;
- width: 290px;
- height: 250px;
}
.page_title{
font-size: 20px;
@@ -314,6 +313,7 @@ tr.open span.expander {background-image: url(…/images/bullet_toggle_minus.png);
.pills.vertical:parent{clear:both;}
.fixed-width{table-layout:fixed;}
+select{padding: initial;}
[class*=“tbl-column”]{ overflow: hidden; white-space: nowrap;}
table th.small{width:60px; max-width:60px;}
1.7.4.2