From a885313e752bdd5db01f3f9b6fe6304705675441 Mon Sep 17 00:00:00 2001
From: Manson Wang <manson@rulingcom.com>
Date: Wed, 30 Oct 2013 18:23:46 +0800
Subject: [PATCH] Dashboard with HighChart

---
 Gemfile                                       |   4 +
 .../admin/dashboards_controller.rb            |  32 +-
 app/controllers/pages_controller.rb           |   6 +-
 .../admin/dashboards/_server_loading.erb      | 400 ++++++++++++++++++
 .../admin/dashboards/_traffic_loading.erb     |  62 +++
 app/views/admin/dashboards/index.html.erb     |  35 +-
 config/mongoid.yml                            |   4 +-
 config/routes.rb                              |   4 +
 .../front_end/bulletins_controller.rb         |   5 +-
 .../front_end/page_contexts_controller.rb     |   3 +-
 10 files changed, 540 insertions(+), 15 deletions(-)
 create mode 100644 app/views/admin/dashboards/_server_loading.erb
 create mode 100644 app/views/admin/dashboards/_traffic_loading.erb

diff --git a/Gemfile b/Gemfile
index 933772f0..a1c2c94e 100644
--- a/Gemfile
+++ b/Gemfile
@@ -71,6 +71,10 @@ gem 'redis-search'
 gem 'syslog-logger'
 gem "recaptcha", :require => "recaptcha/rails"
 
+gem 'puma'
+gem 'request-log-analyzer'
+gem 'usagewatch'
+
 # Gems used only for assets and not required
 # in production environments by default.
 group :assets do
diff --git a/app/controllers/admin/dashboards_controller.rb b/app/controllers/admin/dashboards_controller.rb
index c0acaf8d..e7fd745e 100644
--- a/app/controllers/admin/dashboards_controller.rb
+++ b/app/controllers/admin/dashboards_controller.rb
@@ -1,3 +1,6 @@
+require 'fileutils'
+require 'usagewatch'
+
 class Admin::DashboardsController < OrbitBackendController
 
   open_for_visitor
@@ -8,7 +11,7 @@ class Admin::DashboardsController < OrbitBackendController
     check_backend_openness
     @module_app_contents, @module_app_contents_total = get_module_app_count('bulletin', 'page_context', 'web_link')
     @recent_updated = get_recently_updated('bulletin', 'page_context', 'web_link')
-    @most_visited = get_most_visited('bulletin', 'page_context')
+    @most_visited = get_most_visited('bulletin', 'page_context','page')
   end
 
   def reload_all_content
@@ -19,7 +22,7 @@ class Admin::DashboardsController < OrbitBackendController
   end
 
   def reload_most_visited
-    @most_visited = get_most_visited('bulletin', 'page_context')
+    @most_visited = get_most_visited('bulletin', 'page_context','page')
     respond_to do |format|
       format.js { render 'reload', locals: {div_id: 'most_visited'} }
     end
@@ -32,6 +35,31 @@ class Admin::DashboardsController < OrbitBackendController
     end
   end
 
+  def get_cpu_usage
+    @usw = Usagewatch
+    render :js => @usw.uw_cpuused.to_s
+  end
+
+  def get_mem_usage
+    @usw = Usagewatch
+    render :js => @usw.uw_memused.to_s
+  end
+
+  def get_disk_usage
+    @usw = Usagewatch
+    render :json => @usw.uw_diskused_perc.to_s
+  end
+
+  def get_month_traffic
+    result = []
+    (0..31).each do |i|
+      the_day = i.day.ago
+      visits = Impression.where( created_at: {'$gte' => the_day.beginning_of_day, '$lte' => the_day.end_of_day}).count
+      result.push({the_day.strftime("%b-%d")=>visits})
+    end
+    render :js => result.to_json
+  end
+
   protected
 
   def get_module_app_count(*args)
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
index 430bc408..0accef0b 100644
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@@ -8,7 +8,8 @@ class PagesController < ApplicationController
     @item = Page.find_by_name('home')
 
     if @item
-      delayed_impressionist(@item)
+      # delayed_impressionist(@item)
+      impressionist(@item)
       if params[:edit]
         if request.referer && request.referer.ends_with?("admin/items")
           redirect_to admin_page_url(@item)
@@ -29,7 +30,8 @@ class PagesController < ApplicationController
       @item = Item.first(:conditions => {:path => params[:page_name]})
 
       if @item && @item.is_published && (@item.enabled_for.nil? ? true : @item.enabled_for.include?(I18n.locale.to_s))
-        delayed_impressionist(@item)
+        # delayed_impressionist(@item)
+        impressionist(@item)
         case @item.class.to_s
           when 'Page'
             if params[:clicked_field_name]
diff --git a/app/views/admin/dashboards/_server_loading.erb b/app/views/admin/dashboards/_server_loading.erb
new file mode 100644
index 00000000..6ff3fa00
--- /dev/null
+++ b/app/views/admin/dashboards/_server_loading.erb
@@ -0,0 +1,400 @@
+<div class="box-header">
+    <h2>
+        <i class="icons-book-2"></i>
+        <span class="break"></span>
+        Server Loading
+    </h2>
+</div>
+<div class="box-content" style='overflow: hidden;'>
+    <div id="cpu_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
+    <div id="mem_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
+    <div id="disk_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
+</div>
+<script type="text/javascript">
+$(function () {
+    get_cpu_usage();
+    get_mem_usage();
+    get_disk_usage();
+});
+
+function get_cpu_usage(){
+    $('#cpu_usage').highcharts({
+      chart: {
+            type: 'gauge',
+            plotBackgroundColor: null,
+            plotBackgroundImage: null,
+            plotBorderWidth: 0,
+            plotShadow: false
+        },
+        
+        title: {
+            text: 'CPU Usage'
+        },
+        
+        pane: {
+            startAngle: -150,
+            endAngle: 150,
+            background: [{
+                backgroundColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, '#FFF'],
+                        [1, '#333']
+                    ]
+                },
+                borderWidth: 0,
+                outerRadius: '109%'
+            }, {
+                backgroundColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, '#333'],
+                        [1, '#FFF']
+                    ]
+                },
+                borderWidth: 1,
+                outerRadius: '107%'
+            }, {
+                // default background
+            }, {
+                backgroundColor: '#DDD',
+                borderWidth: 0,
+                outerRadius: '105%',
+                innerRadius: '103%'
+            }]
+        },
+           
+        // the value axis
+        yAxis: {
+            min: 0,
+            max: 100,
+            
+            minorTickInterval: 'auto',
+            minorTickWidth: 1,
+            minorTickLength: 10,
+            minorTickPosition: 'inside',
+            minorTickColor: '#666',
+    
+            tickPixelInterval: 30,
+            tickWidth: 2,
+            tickPosition: 'inside',
+            tickLength: 10,
+            tickColor: '#666',
+            labels: {
+                step: 2,
+                rotation: 'auto'
+            },
+            title: {
+                text: ''
+            },
+            plotBands: [{
+                from: 0,
+                to: 60,
+                color: '#55BF3B' // green
+            }, {
+                from: 60,
+                to: 80,
+                color: '#DDDF0D' // yellow
+            }, {
+                from: 80,
+                to: 100,
+                color: '#DF5353' // red
+            }]        
+        },
+    
+        series: [{
+            name: 'CPU Usage',
+            data: [0],
+            dataLabels: {
+                formatter: function () {
+                    var usage = this.y;
+                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
+                },
+                backgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, '#DDD'],
+                        [1, '#FFF']
+                    ]
+                }
+            },
+            tooltip: {
+                valueSuffix: ' %'
+            }
+        }]
+    },
+    function(chart) {
+        update_cpu_usage(chart);
+        setInterval(function() {
+          update_cpu_usage(chart);
+        }, 2000);
+    });
+}
+
+function update_cpu_usage(chart){
+    $.get('/admin/dashboards/get_cpu_usage',function(usage){
+            var point = chart.series[0].points[0],
+            newVal = Math.round(usage);
+            point.update(newVal);
+    });
+}
+
+function get_mem_usage(){
+    $('#mem_usage').highcharts({
+      chart: {
+            type: 'gauge',
+            plotBackgroundColor: null,
+            plotBackgroundImage: null,
+            plotBorderWidth: 0,
+            plotShadow: false
+        },
+        
+        title: {
+            text: 'Memory Usage'
+        },
+        
+        pane: {
+            startAngle: -150,
+            endAngle: 150,
+            background: [{
+                backgroundColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, '#FFF'],
+                        [1, '#333']
+                    ]
+                },
+                borderWidth: 0,
+                outerRadius: '109%'
+            }, {
+                backgroundColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, '#333'],
+                        [1, '#FFF']
+                    ]
+                },
+                borderWidth: 1,
+                outerRadius: '107%'
+            }, {
+                // default background
+            }, {
+                backgroundColor: '#DDD',
+                borderWidth: 0,
+                outerRadius: '105%',
+                innerRadius: '103%'
+            }]
+        },
+           
+        // the value axis
+        yAxis: {
+            min: 0,
+            max: 100,
+            
+            minorTickInterval: 'auto',
+            minorTickWidth: 1,
+            minorTickLength: 10,
+            minorTickPosition: 'inside',
+            minorTickColor: '#666',
+    
+            tickPixelInterval: 30,
+            tickWidth: 2,
+            tickPosition: 'inside',
+            tickLength: 10,
+            tickColor: '#666',
+            labels: {
+                step: 2,
+                rotation: 'auto'
+            },
+            title: {
+                text: ''
+            },
+            plotBands: [{
+                from: 0,
+                to: 60,
+                color: '#55BF3B' // green
+            }, {
+                from: 60,
+                to: 80,
+                color: '#DDDF0D' // yellow
+            }, {
+                from: 80,
+                to: 100,
+                color: '#DF5353' // red
+            }]        
+        },
+    
+        series: [{
+            name: 'Memory Usage',
+            data: [0],
+            dataLabels: {
+                formatter: function () {
+                    var usage = this.y;
+                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
+                },
+                backgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, '#DDD'],
+                        [1, '#FFF']
+                    ]
+                }
+            },
+            tooltip: {
+                valueSuffix: ' %'
+            }
+        }]
+    },
+    function(chart) {
+        update_mem_usage(chart)
+        setInterval(function() {
+            update_mem_usage(chart);  
+        }, 5000);
+    });
+}
+
+function update_mem_usage(chart){
+    $.get('/admin/dashboards/get_mem_usage',function(usage){
+            var point = chart.series[0].points[0],
+            newVal = Math.round(usage);
+            point.update(newVal);
+    });
+}
+
+function get_disk_usage(){
+    $('#disk_usage').highcharts({
+      chart: {
+            type: 'gauge',
+            plotBackgroundColor: null,
+            plotBackgroundImage: null,
+            plotBorderWidth: 0,
+            plotShadow: false
+        },
+        
+        title: {
+            text: 'Disk Usage'
+        },
+        
+        pane: {
+            startAngle: -150,
+            endAngle: 150,
+            background: [{
+                backgroundColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, '#FFF'],
+                        [1, '#333']
+                    ]
+                },
+                borderWidth: 0,
+                outerRadius: '109%'
+            }, {
+                backgroundColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, '#333'],
+                        [1, '#FFF']
+                    ]
+                },
+                borderWidth: 1,
+                outerRadius: '107%'
+            }, {
+                // default background
+            }, {
+                backgroundColor: '#DDD',
+                borderWidth: 0,
+                outerRadius: '105%',
+                innerRadius: '103%'
+            }]
+        },
+           
+        // the value axis
+        yAxis: {
+            min: 0,
+            max: 100,
+            
+            minorTickInterval: 'auto',
+            minorTickWidth: 1,
+            minorTickLength: 10,
+            minorTickPosition: 'inside',
+            minorTickColor: '#666',
+    
+            tickPixelInterval: 30,
+            tickWidth: 2,
+            tickPosition: 'inside',
+            tickLength: 10,
+            tickColor: '#666',
+            labels: {
+                step: 2,
+                rotation: 'auto'
+            },
+            title: {
+                text: ''
+            },
+            plotBands: [{
+                from: 0,
+                to: 60,
+                color: '#55BF3B' // green
+            }, {
+                from: 60,
+                to: 80,
+                color: '#DDDF0D' // yellow
+            }, {
+                from: 80,
+                to: 100,
+                color: '#DF5353' // red
+            }]        
+        },
+    
+        series: [{
+            name: 'Disk Usage',
+            data: [0],
+            dataLabels: {
+                formatter: function () {
+                    var usage = this.y;
+                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
+                },
+                backgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, '#DDD'],
+                        [1, '#FFF']
+                    ]
+                }
+            },
+            tooltip: {
+                valueSuffix: ' %'
+            }
+        }]
+    },
+    function(chart) {
+        update_disk_usage(chart);
+        setInterval(function() {
+            update_disk_usage(chart);  
+        }, 60000);
+    });
+}
+
+function update_disk_usage(chart){
+    $.get('/admin/dashboards/get_disk_usage',function(usage){
+            var point = chart.series[0].points[0],
+            newVal = Math.round(usage);
+            point.update(newVal);
+    });
+}
+</script>
\ No newline at end of file
diff --git a/app/views/admin/dashboards/_traffic_loading.erb b/app/views/admin/dashboards/_traffic_loading.erb
new file mode 100644
index 00000000..0dee91c6
--- /dev/null
+++ b/app/views/admin/dashboards/_traffic_loading.erb
@@ -0,0 +1,62 @@
+<div class="box-header">
+    <h2>
+        <i class="icons-book-2"></i>
+        <span class="break"></span>
+        Traffic Loading
+    </h2>
+</div>
+<div class="box-content">
+<div id="month_traffic" style="min-width: 310px; height: 230px; margin: 0 auto"></div>
+</div>
+<script type="text/javascript">
+$(function () {
+    $.getJSON('/admin/dashboards/get_month_traffic', function (data) {
+            // console.log(data);
+            dates = [];
+            visits = [];
+            $.each(data,function(key,value){
+                // console.log(value);
+                $.each(value,function(date,visit){
+                     dates.push(date);
+                     visits.push(visit);
+                });
+            });
+            
+            $('#month_traffic').highcharts({
+                chart: {
+                    type: 'spline'
+                },
+                title: {
+                    text: 'Monthly Traffic',
+                    x: 0 //center
+                },
+                xAxis: {
+                    categories: dates
+                },
+                yAxis: {
+                    title: {
+                        text: 'Number of visits'
+                    },
+                    plotLines: [{
+                        value: 0,
+                        width: 1,
+                        color: '#808080'
+                    }]
+                },
+                tooltip: {
+                    valueSuffix: ''
+                },
+                legend: {
+                    layout: 'vertical',
+                    align: 'right',
+                    verticalAlign: 'middle',
+                    borderWidth: 0
+                },
+                series: [{
+                    name: 'Visits',
+                    data: visits
+                }]
+            });
+    });
+});
+</script>
\ No newline at end of file
diff --git a/app/views/admin/dashboards/index.html.erb b/app/views/admin/dashboards/index.html.erb
index 236f9c70..1d700791 100644
--- a/app/views/admin/dashboards/index.html.erb
+++ b/app/views/admin/dashboards/index.html.erb
@@ -1,5 +1,33 @@
+<script src="http://code.highcharts.com/highcharts.js"></script>
+<script src="http://code.highcharts.com/highcharts-more.js"></script>
+<script src="http://code.highcharts.com/modules/exporting.js"></script>
+
+<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
+<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
+<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
+
 <section id="main-wrap">
   <div class="wrap-inner initial">
+  <div class="row-fluid">
+      <div class="box span6">
+        <div id='server_loading'>
+          <%= render 'server_loading' %>
+        </div>
+      </div>
+      <div class="box span4">
+        <div id='traffic'>
+          <%= render 'traffic' %>
+        </div>
+      </div>
+    </div>
+    <div class="row-fluid">
+      <div class="box span">
+        <div id='server_loading'>
+          <%= render 'traffic_loading' %>
+        </div>
+      </div>
+    </div>
+    <hr>
     <div class="row-fluid">
       <div class="box span8">
         <div id='recent_update'>
@@ -14,11 +42,6 @@
     </div>
     <hr>
     <div class="row-fluid">
-      <div class="box span4">
-        <div id='traffic'>
-          <%= render 'traffic' %>
-        </div>
-      </div>
       <div class="box span8">
         <div id='most_visited'>
           <%= render 'most_visited' %>
@@ -26,4 +49,4 @@
       </div>
     </div>
   </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/config/mongoid.yml b/config/mongoid.yml
index 49a7167c..1b3b0585 100644
--- a/config/mongoid.yml
+++ b/config/mongoid.yml
@@ -8,7 +8,7 @@ defaults: &defaults
 
 development:
   <<: *defaults
-  database: test_site
+  database: test_site_new
 
 
 
@@ -24,4 +24,4 @@ production:
   # password: <%= ENV['MONGOID_PASSWORD'] %>
   # database: <%= ENV['MONGOID_DATABASE'] %>
   <<: *defaults
-  database: test_site
+  database: test_site_new
diff --git a/config/routes.rb b/config/routes.rb
index 6d1e40c1..f15898c7 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -67,6 +67,10 @@ Orbit::Application.routes.draw do
         get 'reload_all_content'
         get 'reload_most_visited'
         get 'reload_recent_update'
+        get 'get_cpu_usage'
+        get 'get_mem_usage'
+        get 'get_disk_usage'
+        get 'get_month_traffic'
       end
     end
     resources :designs do
diff --git a/vendor/built_in_modules/announcement/app/controllers/panel/announcement/front_end/bulletins_controller.rb b/vendor/built_in_modules/announcement/app/controllers/panel/announcement/front_end/bulletins_controller.rb
index 07ba9fa2..407a5e44 100644
--- a/vendor/built_in_modules/announcement/app/controllers/panel/announcement/front_end/bulletins_controller.rb
+++ b/vendor/built_in_modules/announcement/app/controllers/panel/announcement/front_end/bulletins_controller.rb
@@ -53,7 +53,7 @@ class Panel::Announcement::FrontEnd::BulletinsController < OrbitWidgetController
       else
         @bulletins = Bulletin.all.available_for_lang(I18n.locale).can_display.desc( :is_top, :postdate).page( params[:page_main]).per(@page_num)
       end
-      delayed_impressionist(@tag) if @tag
+      # delayed_impressionist(@tag) if @tag
     end
 
   end 
@@ -66,7 +66,8 @@ class Panel::Announcement::FrontEnd::BulletinsController < OrbitWidgetController
       @bulletin = Bulletin.all.can_display.where(_id: params[:id]).first
       if @bulletin and !@bulletin.disable? and !@bulletin.is_rejected
         if @bulletin.enabled_for_lang(I18n.locale.to_s)
-          delayed_impressionist(@bulletin)
+          # delayed_impressionist(@bulletin)
+          impressionist(@bulletin)
         else
           render :text => "<div class='alert alert-error'>#{t('sys.can_not_display_due_to_no_context')}</div>".html_safe 
         end
diff --git a/vendor/built_in_modules/page_content/app/controllers/panel/page_content/front_end/page_contexts_controller.rb b/vendor/built_in_modules/page_content/app/controllers/panel/page_content/front_end/page_contexts_controller.rb
index 90a079e4..a9f5a462 100644
--- a/vendor/built_in_modules/page_content/app/controllers/panel/page_content/front_end/page_contexts_controller.rb
+++ b/vendor/built_in_modules/page_content/app/controllers/panel/page_content/front_end/page_contexts_controller.rb
@@ -8,7 +8,8 @@ class Panel::PageContent::FrontEnd::PageContextsController < OrbitWidgetControll
   def index
     # @page_context = PageContext.where("page_id" => params[:page_id], :archived => false)
     @page_context = PageContext.first(conditions: { page_id: params[:page_id], :archived => false })
-    delayed_impressionist(@page_context)
+    # delayed_impressionist(@page_context)
+    impressionist(@page_context)
     
     respond_to do |format|
       format.html # index.html.erb