400 lines
11 KiB
Plaintext
400 lines
11 KiB
Plaintext
|
<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>
|