Skip to content

Commit 8b8ef4f

Browse files
DaneEverittDaneEveritt
committed
Display graphs using highcharts now.
Shows all CPU core usage as well.
1 parent 59fb0ea commit 8b8ef4f

File tree

1 file changed

+167
-34
lines changed

1 file changed

+167
-34
lines changed

‎resources/views/server/index.blade.php‎

Lines changed: 167 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
@section('scripts')
88
@parent
9-
<script src="{{ asset('js/chartjs/chart.core.js') }}"></script>
9+
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.1/highcharts.js"></script>
1010
<script src="{{ asset('js/chartjs/chart.bar.js') }}"></script>
1111
@endsection
1212

@@ -27,24 +27,8 @@
2727
<div class="tab-content">
2828
<div class="tab-pane active" id="stats">
2929
<div class="row">
30-
<div class="col-md-6">
31-
<h3 class="nopad">{{ trans('server.index.memory_use') }}</h3><hr />
32-
<div class="row centered">
33-
<canvas id="memoryChart" width="280" height="150" style="margin-left:20px;"></canvas>
34-
<p style="text-align:center;margin-top:-15px;" class="text-muted"><small>{{ trans('server.index.xaxis') }}</small></p>
35-
<p class="graph-yaxis hidden-xs hidden-sm text-muted" style="margin-top:-50px !important;"><small>{{ trans('server.index.memory_use') }} (Mb)</small></p>
36-
<p class="graph-yaxis hidden-lg hidden-md text-muted" style="margin-top:-65px !important;margin-left: 100px !important;"><small>{{ trans('server.index.memory_use') }} (Mb)</small></p>
37-
</div>
38-
</div>
39-
<div class="col-md-6">
40-
<h3 class="nopad">{{ trans('server.index.cpu_use') }}</h3><hr />
41-
<div class="row centered">
42-
<canvas id="cpuChart" width="280" height="150" style="margin-left:20px;"></canvas>
43-
<p style="text-align:center;margin-top:-15px;" class="text-muted"><small>{{ trans('server.index.xaxis') }}</small></p>
44-
<p class="graph-yaxis hidden-sm hidden-xs text-muted" style="margin-top:-65px !important;"><small>{{ trans('server.index.cpu_use') }} (%)</small></p>
45-
<p class="graph-yaxis hidden-lg hidden-md text-muted" style="margin-top:-65px !important;margin-left: 100px !important;"><small>{{ trans('server.index.cpu_use') }} (%)</small></p>
46-
</div>
47-
</div>
30+
<div class="col-md-12" id="chart_memory" style="height:250px;"></div>
31+
<div class="col-md-12" id="chart_cpu" style="height:250px;"></div>
4832
</div>
4933
<div class="row">
5034
<div class="col-md-12" id="stats_players">
@@ -137,13 +121,171 @@
137121
$(window).load(function () {
138122
$('[data-toggle="tooltip"]').tooltip();
139123
124+
// -----------------+
125+
// Charting Methods |
126+
// -----------------+
127+
$('#chart_memory').highcharts({
128+
chart: {
129+
type: 'area',
130+
animation: Highcharts.svg,
131+
marginRight: 10,
132+
},
133+
colors: [
134+
'#113F8C',
135+
'#00A1CB',
136+
'#01A4A4',
137+
'#61AE24',
138+
'#D0D102',
139+
'#D70060',
140+
'#E54028',
141+
'#F18D05',
142+
'#616161',
143+
'#32742C',
144+
],
145+
credits: {
146+
enabled: false,
147+
},
148+
title: {
149+
text: 'Live Memory Usage',
150+
},
151+
tooltip: {
152+
shared: true,
153+
crosshairs: true,
154+
formatter: function () {
155+
var s = '<b>Memory Usage</b>';
156+
157+
$.each(this.points, function () {
158+
s += '<br/>' + this.series.name + ': ' +
159+
this.y + 'MB';
160+
});
161+
162+
return s;
163+
},
164+
},
165+
xAxis: {
166+
visible: false,
167+
},
168+
yAxis: {
169+
title: {
170+
text: 'Memory Usage (MB)',
171+
},
172+
plotLines: [{
173+
value: 0,
174+
width: 1,
175+
}],
176+
},
177+
plotOptions: {
178+
area: {
179+
fillOpacity: 0.10,
180+
marker: {
181+
enabled: false,
182+
},
183+
},
184+
},
185+
legend: {
186+
enabled: false
187+
},
188+
series: [{
189+
name: 'Total Memory',
190+
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
191+
}]
192+
});
193+
194+
$('#chart_cpu').highcharts({
195+
chart: {
196+
type: 'area',
197+
animation: Highcharts.svg,
198+
marginRight: 10,
199+
},
200+
colors: [
201+
'#113F8C',
202+
'#00A1CB',
203+
'#01A4A4',
204+
'#61AE24',
205+
'#D0D102',
206+
'#D70060',
207+
'#E54028',
208+
'#F18D05',
209+
'#616161',
210+
'#32742C',
211+
],
212+
credits: {
213+
enabled: false,
214+
},
215+
title: {
216+
text: 'Live CPU Usage',
217+
},
218+
tooltip: {
219+
shared: true,
220+
crosshairs: true,
221+
formatter: function () {
222+
var s = '<b>CPU Usage</b>';
223+
224+
$.each(this.points, function () {
225+
s += '<br/>' + this.series.name + ': ' +
226+
this.y + '%';
227+
});
228+
229+
return s;
230+
},
231+
},
232+
xAxis: {
233+
visible: false,
234+
},
235+
yAxis: {
236+
title: {
237+
text: 'CPU Usage (%)',
238+
},
239+
plotLines: [{
240+
value: 0,
241+
width: 1,
242+
}],
243+
},
244+
plotOptions: {
245+
area: {
246+
fillOpacity: 0.10,
247+
stacking: 'normal',
248+
lineWidth: 1,
249+
marker: {
250+
enabled: false,
251+
},
252+
},
253+
},
254+
legend: {
255+
enabled: true
256+
},
257+
series: [{
258+
name: 'Total CPU',
259+
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
260+
}]
261+
});
262+
140263
// Socket Recieves New Server Stats
141-
socket.on('stats', function (data) {
142-
var currentTime = new Date();
143-
memoryChart.addData([parseInt(data.data.memory / (1024 * 1024))], '');
144-
memoryChart.removeData();
145-
if({{ $server->cpu }} > 0) { cpuChart.addData([(data.data.cpu / {{ $server->cpu }}) * 100], ''); }else{ cpuChart.addData([data.data.cpu], ''); }
146-
cpuChart.removeData();
264+
socket.on('proc', function (proc) {
265+
var MemoryChart = $('#chart_memory').highcharts();
266+
MemoryChart.series[0].addPoint(parseInt(proc.data.memory.total / (1024 * 1024)), true, true);
267+
268+
var CPUChart = $('#chart_cpu').highcharts();
269+
270+
if({{ $server->cpu }} > 0) {
271+
CPUChart.series[0].addPoint(parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()), true, true);
272+
} else {
273+
CPUChart.series[0].addPoint(proc.data.cpu.total, true, true);
274+
}
275+
for (i = 0, length = proc.data.cpu.cores.length; i < length; i++) {
276+
if (typeof CPUChart.series[ i + 1 ] === 'undefined') {
277+
CPUChart.addSeries({
278+
name: 'Core ' + i,
279+
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
280+
});
281+
}
282+
if({{ $server->cpu }} > 0) {
283+
CPUChart.series[ i + 1 ].addPoint(parseFloat(((proc.data.cpu.cores[i] / {{ $server->cpu }}) * 100).toFixed(3).toString())
284+
, true, true);
285+
} else {
286+
CPUChart.series[ i + 1 ].addPoint(proc.data.cpu.cores[i], true, true);
287+
}
288+
}
147289
});
148290
149291
// Socket Recieves New Query
@@ -215,15 +357,6 @@
215357
$('#paused_console').val($('#live_console').val());
216358
});
217359
218-
// -----------------+
219-
// Charting Methods |
220-
// -----------------+
221-
var ctx = $('#memoryChart').get(0).getContext('2d');
222-
var cty = $('#cpuChart').get(0).getContext('2d');
223-
var memoryChartData = {labels:["","","","","","","","","","","","","","","","","","","",""],datasets:[{fillColor:"#ccc",strokeColor:"rgba(0,0,0,0)",highlightFill:"#666",data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}]};
224-
var cpuChartData = {labels:["","","","","","","","","","","","","","","","","","","",""],datasets:[{fillColor:"#ccc",strokeColor:"rgba(0,0,0,0)",highlightFill:"#666",data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}]};
225-
var memoryChart= new Chart(ctx).Bar(memoryChartData,{animation:!1,showScale:!0,barShowStroke:!1,scaleOverride:!1,tooltipTemplate:"<%= value %> Mb",barValueSpacing:1,barStrokeWidth:1,scaleShowGridLines:!1});
226-
var cpuChart = new Chart(cty).Bar(cpuChartData,{animation:!1,showScale:!0,barShowStroke:!1,scaleOverride:!1,tooltipTemplate:"<%= value %> %",barValueSpacing:1,barStrokeWidth:1,scaleShowGridLines:!1});
227360
function updatePlayerListVisibility(data) {
228361
// Server is On or Starting
229362
if(data !== 0) {

0 commit comments

Comments
 (0)