[PATCH/foreman 1/1] statistics pie is now a thumbnail that expand in a modal dialog

Development
1

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 -%>

+


    +<% charts.each do |ch| -%>
    • <%= link_to_function content_tag (:div, ch, :class=>“thumbnail”), “expand_chart(this);” %>

    <% 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