From 8b8ef4f2d6807c826eb5b31332172f133c537711 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Fri, 1 Jan 2016 21:35:50 -0500 Subject: [PATCH] Display graphs using highcharts now. Shows all CPU core usage as well. --- resources/views/server/index.blade.php | 201 ++++++++++++++++++++----- 1 file changed, 167 insertions(+), 34 deletions(-) diff --git a/resources/views/server/index.blade.php b/resources/views/server/index.blade.php index e4e49f019..1ef71aa59 100644 --- a/resources/views/server/index.blade.php +++ b/resources/views/server/index.blade.php @@ -6,7 +6,7 @@ @section('scripts') @parent - + @endsection @@ -27,24 +27,8 @@
-
-

{{ trans('server.index.memory_use') }}

-
- -

{{ trans('server.index.xaxis') }}

- - -
-
-
-

{{ trans('server.index.cpu_use') }}

-
- -

{{ trans('server.index.xaxis') }}

- - -
-
+
+
@@ -137,13 +121,171 @@ $(window).load(function () { $('[data-toggle="tooltip"]').tooltip(); + // -----------------+ + // Charting Methods | + // -----------------+ + $('#chart_memory').highcharts({ + chart: { + type: 'area', + animation: Highcharts.svg, + marginRight: 10, + }, + colors: [ + '#113F8C', + '#00A1CB', + '#01A4A4', + '#61AE24', + '#D0D102', + '#D70060', + '#E54028', + '#F18D05', + '#616161', + '#32742C', + ], + credits: { + enabled: false, + }, + title: { + text: 'Live Memory Usage', + }, + tooltip: { + shared: true, + crosshairs: true, + formatter: function () { + var s = 'Memory Usage'; + + $.each(this.points, function () { + s += '
' + this.series.name + ': ' + + this.y + 'MB'; + }); + + return s; + }, + }, + xAxis: { + visible: false, + }, + yAxis: { + title: { + text: 'Memory Usage (MB)', + }, + plotLines: [{ + value: 0, + width: 1, + }], + }, + plotOptions: { + area: { + fillOpacity: 0.10, + marker: { + enabled: false, + }, + }, + }, + legend: { + enabled: false + }, + series: [{ + name: 'Total Memory', + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] + }] + }); + + $('#chart_cpu').highcharts({ + chart: { + type: 'area', + animation: Highcharts.svg, + marginRight: 10, + }, + colors: [ + '#113F8C', + '#00A1CB', + '#01A4A4', + '#61AE24', + '#D0D102', + '#D70060', + '#E54028', + '#F18D05', + '#616161', + '#32742C', + ], + credits: { + enabled: false, + }, + title: { + text: 'Live CPU Usage', + }, + tooltip: { + shared: true, + crosshairs: true, + formatter: function () { + var s = 'CPU Usage'; + + $.each(this.points, function () { + s += '
' + this.series.name + ': ' + + this.y + '%'; + }); + + return s; + }, + }, + xAxis: { + visible: false, + }, + yAxis: { + title: { + text: 'CPU Usage (%)', + }, + plotLines: [{ + value: 0, + width: 1, + }], + }, + plotOptions: { + area: { + fillOpacity: 0.10, + stacking: 'normal', + lineWidth: 1, + marker: { + enabled: false, + }, + }, + }, + legend: { + enabled: true + }, + series: [{ + name: 'Total CPU', + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] + }] + }); + // Socket Recieves New Server Stats - socket.on('stats', function (data) { - var currentTime = new Date(); - memoryChart.addData([parseInt(data.data.memory / (1024 * 1024))], ''); - memoryChart.removeData(); - if({{ $server->cpu }} > 0) { cpuChart.addData([(data.data.cpu / {{ $server->cpu }}) * 100], ''); }else{ cpuChart.addData([data.data.cpu], ''); } - cpuChart.removeData(); + socket.on('proc', function (proc) { + var MemoryChart = $('#chart_memory').highcharts(); + MemoryChart.series[0].addPoint(parseInt(proc.data.memory.total / (1024 * 1024)), true, true); + + var CPUChart = $('#chart_cpu').highcharts(); + + if({{ $server->cpu }} > 0) { + CPUChart.series[0].addPoint(parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()), true, true); + } else { + CPUChart.series[0].addPoint(proc.data.cpu.total, true, true); + } + for (i = 0, length = proc.data.cpu.cores.length; i < length; i++) { + if (typeof CPUChart.series[ i + 1 ] === 'undefined') { + CPUChart.addSeries({ + name: 'Core ' + i, + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] + }); + } + if({{ $server->cpu }} > 0) { + CPUChart.series[ i + 1 ].addPoint(parseFloat(((proc.data.cpu.cores[i] / {{ $server->cpu }}) * 100).toFixed(3).toString()) +, true, true); + } else { + CPUChart.series[ i + 1 ].addPoint(proc.data.cpu.cores[i], true, true); + } + } }); // Socket Recieves New Query @@ -215,15 +357,6 @@ $(window).load(function () { $('#paused_console').val($('#live_console').val()); }); - // -----------------+ - // Charting Methods | - // -----------------+ - var ctx = $('#memoryChart').get(0).getContext('2d'); - var cty = $('#cpuChart').get(0).getContext('2d'); - 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]}]}; - 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]}]}; - var memoryChart= new Chart(ctx).Bar(memoryChartData,{animation:!1,showScale:!0,barShowStroke:!1,scaleOverride:!1,tooltipTemplate:"<%= value %> Mb",barValueSpacing:1,barStrokeWidth:1,scaleShowGridLines:!1}); - var cpuChart = new Chart(cty).Bar(cpuChartData,{animation:!1,showScale:!0,barShowStroke:!1,scaleOverride:!1,tooltipTemplate:"<%= value %> %",barValueSpacing:1,barStrokeWidth:1,scaleShowGridLines:!1}); function updatePlayerListVisibility(data) { // Server is On or Starting if(data !== 0) {