Move from highcharts
This commit is contained in:
parent
2f0883cfc7
commit
d171f767a3
1 changed files with 96 additions and 168 deletions
|
@ -25,14 +25,15 @@
|
||||||
|
|
||||||
@section('scripts')
|
@section('scripts')
|
||||||
@parent
|
@parent
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.1/highcharts.js"></script>
|
{!! Theme::css('css/metricsgraphics.css') !!}
|
||||||
|
{!! Theme::js('js/d3.min.js') !!}
|
||||||
|
{!! Theme::js('js/metricsgraphics.min.js') !!}
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<ul class="nav nav-tabs tabs_with_panel" id="config_tabs">
|
<ul class="nav nav-tabs tabs_with_panel" id="config_tabs">
|
||||||
<li id="triggerConsoleView" class="active"><a href="#console" data-toggle="tab">{{ trans('server.index.control') }}</a></li>
|
<li id="triggerConsoleView" class="active"><a href="#console" data-toggle="tab">{{ trans('server.index.control') }}</a></li>
|
||||||
<li><a href="#stats" data-toggle="tab">{{ trans('server.index.usage') }}</a></li>
|
|
||||||
@can('view-allocation', $server)<li><a href="#allocation" data-toggle="tab">{{ trans('server.index.allocation') }}</a></li>@endcan
|
@can('view-allocation', $server)<li><a href="#allocation" data-toggle="tab">{{ trans('server.index.allocation') }}</a></li>@endcan
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
|
@ -84,17 +85,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane" id="stats">
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading"></div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-11 text-center" id="chart_memory" style="height:250px;"></div>
|
|
||||||
<div class="col-xs-11 text-center" id="chart_cpu" style="height:250px;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@can('view-allocation', $server)
|
@can('view-allocation', $server)
|
||||||
<div class="tab-pane" id="allocation">
|
<div class="tab-pane" id="allocation">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
|
@ -111,8 +101,22 @@
|
||||||
</div>
|
</div>
|
||||||
@endcan
|
@endcan
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel panel-default" style="margin-top:-22px;">
|
||||||
|
<div class="panel-heading"></div>
|
||||||
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-11" id="col11_setter"></div>
|
<div class="col-md-12">
|
||||||
|
<h4 class="text-center">Memory Usage (MB)</h4>
|
||||||
|
<div class="col-md-12" id="chart_memory" style="height:250px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="margin-top:15px;">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<h4 class="text-center">CPU Usage (% Total) <small><a href="#" data-action="show-all-cores">toggle cores</a></small></h4>
|
||||||
|
<div class="col-md-12" id="chart_cpu" style="height:250px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal fade" id="pauseConsole" tabindex="-1" role="dialog" aria-labelledby="PauseConsole" aria-hidden="true">
|
<div class="modal fade" id="pauseConsole" tabindex="-1" role="dialog" aria-labelledby="PauseConsole" aria-hidden="true">
|
||||||
|
@ -142,21 +146,40 @@
|
||||||
$(window).load(function () {
|
$(window).load(function () {
|
||||||
$('[data-toggle="tooltip"]').tooltip();
|
$('[data-toggle="tooltip"]').tooltip();
|
||||||
|
|
||||||
|
var showOnlyTotal = true;
|
||||||
|
$('[data-action="show-all-cores"]').click(function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
showOnlyTotal = !showOnlyTotal;
|
||||||
|
$('#chart_cpu').empty();
|
||||||
|
});
|
||||||
|
|
||||||
// -----------------+
|
// -----------------+
|
||||||
// Charting Methods |
|
// Charting Methods |
|
||||||
// -----------------+
|
// -----------------+
|
||||||
$(window).resize(function() {
|
var memoryGraphSettings = {
|
||||||
$('#chart_memory').highcharts().setSize($('#col11_setter').width(), 250);
|
data: [{
|
||||||
$('#chart_cpu').highcharts().setSize($('#col11_setter').width(), 250);
|
'date': new Date(),
|
||||||
});
|
'memory': -1
|
||||||
$('#chart_memory').highcharts({
|
}],
|
||||||
chart: {
|
full_width: true,
|
||||||
type: 'area',
|
full_height: true,
|
||||||
animation: Highcharts.svg,
|
right: 40,
|
||||||
marginRight: 10,
|
target: document.getElementById('chart_memory'),
|
||||||
renderTo: 'container',
|
x_accessor: 'date',
|
||||||
width: $('#col11_setter').width()
|
y_accessor: 'memory',
|
||||||
},
|
y_rug: true,
|
||||||
|
area: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
var cpuGraphData = [
|
||||||
|
[{
|
||||||
|
'date': new Date(),
|
||||||
|
'cpu': -1
|
||||||
|
}]
|
||||||
|
];
|
||||||
|
var cpuGraphSettings = {
|
||||||
|
data: cpuGraphData,
|
||||||
|
legend: ['Total', 'C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7'],
|
||||||
colors: [
|
colors: [
|
||||||
'#113F8C',
|
'#113F8C',
|
||||||
'#00A1CB',
|
'#00A1CB',
|
||||||
|
@ -169,141 +192,42 @@ $(window).load(function () {
|
||||||
'#616161',
|
'#616161',
|
||||||
'#32742C',
|
'#32742C',
|
||||||
],
|
],
|
||||||
credits: {
|
right: 40,
|
||||||
enabled: false,
|
full_width: true,
|
||||||
},
|
full_height: true,
|
||||||
title: {
|
target: document.getElementById('chart_cpu'),
|
||||||
text: 'Live Memory Usage',
|
x_accessor: 'date',
|
||||||
},
|
y_accessor: 'cpu',
|
||||||
tooltip: {
|
aggregate_rollover: true,
|
||||||
shared: true,
|
missing_is_hidden: true,
|
||||||
crosshairs: true,
|
area: false,
|
||||||
formatter: function () {
|
};
|
||||||
var s = '<b>Memory Usage</b>';
|
|
||||||
|
|
||||||
$.each(this.points, function () {
|
MG.data_graphic(memoryGraphSettings);
|
||||||
s += '<br/>' + this.series.name + ': ' +
|
MG.data_graphic(cpuGraphSettings);
|
||||||
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,
|
|
||||||
renderTo: 'container',
|
|
||||||
width: $('#col11_setter').width()
|
|
||||||
},
|
|
||||||
colors: [
|
|
||||||
'#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 = '<b>CPU Usage</b>';
|
|
||||||
var i = 0;
|
|
||||||
var t = 0;
|
|
||||||
$.each(this.points, function () {
|
|
||||||
t = t + this.y;
|
|
||||||
i++;
|
|
||||||
s += '<br/>' + this.series.name + ': ' +
|
|
||||||
this.y + '%';
|
|
||||||
});
|
|
||||||
|
|
||||||
t = parseFloat(t).toFixed(3).toString();
|
|
||||||
|
|
||||||
if (i > 1) {
|
|
||||||
return s + '<br />Combined: ' + t;
|
|
||||||
} else {
|
|
||||||
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: 'Core 0',
|
|
||||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
|
|
||||||
// Socket Recieves New Server Stats
|
// Socket Recieves New Server Stats
|
||||||
var activeChartArrays = [];
|
var activeChartArrays = [];
|
||||||
socket.on('proc', function (proc) {
|
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();
|
var curDate = new Date();
|
||||||
|
if (typeof memoryGraphSettings.data[0][20] !== 'undefined' || memoryGraphSettings.data[0][0].memory === -1) {
|
||||||
|
memoryGraphSettings.data[0].shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof cpuGraphData[0][20] !== 'undefined' || cpuGraphData[0][0].cpu === -1) {
|
||||||
|
cpuGraphData[0].shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
memoryGraphSettings.data[0].push({
|
||||||
|
'date': curDate,
|
||||||
|
'memory': parseInt(proc.data.memory.total / (1024 * 1024))
|
||||||
|
});
|
||||||
|
|
||||||
|
cpuGraphData[0].push({
|
||||||
|
'date': curDate,
|
||||||
|
'cpu': ({{ $server->cpu }} > 0) ? parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()) : proc.data.cpu.total
|
||||||
|
});
|
||||||
|
|
||||||
// Remove blank values from listing
|
// Remove blank values from listing
|
||||||
var activeCores = [];
|
var activeCores = [];
|
||||||
|
@ -325,22 +249,26 @@ $(window).load(function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(activeChartArrays);
|
|
||||||
console.log(modifedActiveCores);
|
|
||||||
|
|
||||||
for (i = 0, length = activeChartArrays.length; i < length; i++) {
|
for (i = 0, length = activeChartArrays.length; i < length; i++) {
|
||||||
if (typeof CPUChart.series[i] === 'undefined') {
|
if (typeof cpuGraphData[(i + 1)] === 'undefined') {
|
||||||
CPUChart.addSeries({
|
cpuGraphData[(i + 1)] = [{
|
||||||
name: 'Core ' + i,
|
'date': curDate,
|
||||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modifedActiveCores[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modifedActiveCores[i] || null
|
||||||
|
}];
|
||||||
|
} else {
|
||||||
|
if (typeof cpuGraphData[(i + 1)][20] !== 'undefined') {
|
||||||
|
cpuGraphData[(i + 1)].shift();
|
||||||
|
}
|
||||||
|
cpuGraphData[(i + 1)].push({
|
||||||
|
'date': curDate,
|
||||||
|
'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modifedActiveCores[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modifedActiveCores[i] || null
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if({{ $server->cpu }} > 0) {
|
|
||||||
CPUChart.series[i].addPoint(parseFloat((((modifedActiveCores[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()), true, true);
|
|
||||||
} else {
|
|
||||||
CPUChart.series[i].addPoint(modifedActiveCores[i] || 0, true, true);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
cpuGraphSettings.data = (showOnlyTotal === true) ? cpuGraphData[0] : cpuGraphData;
|
||||||
|
MG.data_graphic(memoryGraphSettings);
|
||||||
|
MG.data_graphic(cpuGraphSettings);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Socket Recieves New Query
|
// Socket Recieves New Query
|
||||||
|
|
Loading…
Reference in a new issue