400 lines
12 KiB
Plaintext
400 lines
12 KiB
Plaintext
<div class="box-header">
|
|
<h2>
|
|
<i class="icons-book-2"></i>
|
|
<span class="break"></span>
|
|
Server Status
|
|
</h2>
|
|
</div>
|
|
<div class="box-content" style='overflow: hidden;'>
|
|
<span id="cpu_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></span>
|
|
<span id="mem_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></span>
|
|
<span id="disk_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></span>
|
|
</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> |