developers
/
orbit-basic
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dashboard with HighChart

This commit is contained in:
Manson Wang 2013-10-30 18:23:46 +08:00
parent 62c663d699
commit a885313e75
10 changed files with 540 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Gemfile
View File

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

32
app/controllers/admin/dashboards_controller.rb
View File

@ -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)

6
app/controllers/pages_controller.rb
View File

@ -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]

400
app/views/admin/dashboards/_server_loading.erb Normal file
View File

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

62
app/views/admin/dashboards/_traffic_loading.erb Normal file
View File

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

33
app/views/admin/dashboards/index.html.erb
View File

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

4
config/mongoid.yml
View File

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

4
config/routes.rb
View File

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

5
vendor/built_in_modules/announcement/app/controllers/panel/announcement/front_end/bulletins_controller.rb vendored
View File

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

3
vendor/built_in_modules/page_content/app/controllers/panel/page_content/front_end/page_contexts_controller.rb vendored
View File

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