[PATCH/foreman 1/2] 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

2

Signed-off-by: Amos Benari <abenari@redhat.com>

··· --- app/helpers/dashboard_helper.rb | 3 ++- app/views/dashboard/index.html.erb | 18 +++++++++++------- public/javascripts/charts.js | 10 +++++++++- 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/helpers/dashboard_helper.rb b/app/helpers/dashboard_helper.rb
index 4e45eaa…dbf3128 100644
— a/app/helpers/dashboard_helper.rb
+++ b/app/helpers/dashboard_helper.rb
@@ -19,7 +19,8 @@ module DashboardHelper
[:Error, report[:bad_hosts]],
[:OK, report[:ok_hosts]],
[:‘Out of sync’, report[:out_of_sync_hosts]],

  •        [:'No report', report[:reports_missing]]]

  •        [:'No report', report[:reports_missing]],

  •        [:'Notification disabled', report[:disabled_hosts]]]
    pie_chart ‘overview’, ‘Puppet Clients Activity Overview’, data, options
    end

diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index 9c4a699…b76711c 100644
— a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -1,26 +1,30 @@
<% title ‘Overview’ %>

Generated at <%= Time.now.to_s(:short) %>

- +
- - - - + + + + + + + + - - + + diff --git a/public/javascripts/charts.js b/public/javascripts/charts.js index caf053c..b785d13 100644 --- a/public/javascripts/charts.js +++ b/public/javascripts/charts.js @@ -120,13 +120,21 @@ function stat_pie(name, title, data, border, expandable, show_title) { }, plotOptions: { pie: { - allowPointSelect: true, + allowPointSelect: false, cursor: 'pointer', dataLabels: { enabled: true, formatter: function() { return this.point.name + ': '+ Math.round(this.y*100)/100; } + }, + events: { + click: function(event) { + var link = $($('#links-tbl tr td a')[event.point.x]).attr('href'); + if (link != undefined) { + window.location.href = link; + } + } } } }, -- 1.7.4.2
Description Data
Good Host Reports in the last <%= Setting[:puppet_interval] %> minutes <%= "#{@report[:good_hosts]} / #{@report[:total_hosts]}" %> hosts (<%= @report[:percentage] %>%)
<%= link_to 'Hosts that had performed modifications', active_hosts_path %> <%= @report[:active_hosts] %>
<%= link_to 'Hosts in Error State', errors_hosts_path %><%= @report[:bad_hosts] %>
<%=link_to "Good Host Reports in the last #{Setting[:puppet_interval]} minutes", "hosts?search=last_report+>+'#{Setting[:puppet_interval]} minutes ago'+and+status.enabled+%3D+true+and+status.interesting++%3D+false"%> <%= "#{@report[:good_hosts]} / #{@report[:total_hosts]}" %> hosts (<%= @report[:percentage] %>%)
<%= link_to 'Out Of Sync Hosts', out_of_sync_hosts_path %> <%= @report[:out_of_sync_hosts] %>
<%= link_to 'Hosts in Error State', errors_hosts_path %><%= @report[:bad_hosts] %> <%= link_to 'Hosts With No Reports', 'hosts?search=not+has+last_report' %><%= @report[:reports_missing] %>
<%= link_to 'Hosts With Alerts Disabled', disabled_hosts_path %>