Skip to content

Commit d171f76

Browse files
DaneEverittDaneEveritt
committed
Move from highcharts
1 parent 2f0883c commit d171f76

File tree

1 file changed

+97
-169
lines changed

1 file changed

+97
-169
lines changed

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

Lines changed: 97 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,15 @@
2525

2626
@section('scripts')
2727
@parent
28-
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.1/highcharts.js"></script>
28+
{!! Theme::css('css/metricsgraphics.css') !!}
29+
{!! Theme::js('js/d3.min.js') !!}
30+
{!! Theme::js('js/metricsgraphics.min.js') !!}
2931
@endsection
3032

3133
@section('content')
3234
<div class="col-md-12">
3335
<ul class="nav nav-tabs tabs_with_panel" id="config_tabs">
3436
<li id="triggerConsoleView" class="active"><a href="#console" data-toggle="tab">{{ trans('server.index.control') }}</a></li>
35-
<li><a href="#stats" data-toggle="tab">{{ trans('server.index.usage') }}</a></li>
3637
@can('view-allocation', $server)<li><a href="#allocation" data-toggle="tab">{{ trans('server.index.allocation') }}</a></li>@endcan
3738
</ul>
3839
<div class="tab-content">
@@ -84,17 +85,6 @@
8485
</div>
8586
</div>
8687
</div>
87-
<div class="tab-pane" id="stats">
88-
<div class="panel panel-default">
89-
<div class="panel-heading"></div>
90-
<div class="panel-body">
91-
<div class="row">
92-
<div class="col-xs-11 text-center" id="chart_memory" style="height:250px;"></div>
93-
<div class="col-xs-11 text-center" id="chart_cpu" style="height:250px;"></div>
94-
</div>
95-
</div>
96-
</div>
97-
</div>
9888
@can('view-allocation', $server)
9989
<div class="tab-pane" id="allocation">
10090
<div class="panel panel-default">
@@ -111,8 +101,22 @@
111101
</div>
112102
@endcan
113103
</div>
114-
<div class="row">
115-
<div class="col-xs-11" id="col11_setter"></div>
104+
<div class="panel panel-default" style="margin-top:-22px;">
105+
<div class="panel-heading"></div>
106+
<div class="panel-body">
107+
<div class="row">
108+
<div class="col-md-12">
109+
<h4 class="text-center">Memory Usage (MB)</h4>
110+
<div class="col-md-12" id="chart_memory" style="height:250px;"></div>
111+
</div>
112+
</div>
113+
<div class="row" style="margin-top:15px;">
114+
<div class="col-md-12">
115+
<h4 class="text-center">CPU Usage (% Total) <small><a href="#" data-action="show-all-cores">toggle cores</a></small></h4>
116+
<div class="col-md-12" id="chart_cpu" style="height:250px;"></div>
117+
</div>
118+
</div>
119+
</div>
116120
</div>
117121
</div>
118122
<div class="modal fade" id="pauseConsole" tabindex="-1" role="dialog" aria-labelledby="PauseConsole" aria-hidden="true">
@@ -142,91 +146,42 @@
142146
$(window).load(function () {
143147
$('[data-toggle="tooltip"]').tooltip();
144148
149+
var showOnlyTotal = true;
150+
$('[data-action="show-all-cores"]').click(function (event) {
151+
event.preventDefault();
152+
showOnlyTotal = !showOnlyTotal;
153+
$('#chart_cpu').empty();
154+
});
155+
145156
// -----------------+
146157
// Charting Methods |
147158
// -----------------+
148-
$(window).resize(function() {
149-
$('#chart_memory').highcharts().setSize($('#col11_setter').width(), 250);
150-
$('#chart_cpu').highcharts().setSize($('#col11_setter').width(), 250);
151-
});
152-
$('#chart_memory').highcharts({
153-
chart: {
154-
type: 'area',
155-
animation: Highcharts.svg,
156-
marginRight: 10,
157-
renderTo: 'container',
158-
width: $('#col11_setter').width()
159-
},
160-
colors: [
161-
'#113F8C',
162-
'#00A1CB',
163-
'#01A4A4',
164-
'#61AE24',
165-
'#D0D102',
166-
'#D70060',
167-
'#E54028',
168-
'#F18D05',
169-
'#616161',
170-
'#32742C',
171-
],
172-
credits: {
173-
enabled: false,
174-
},
175-
title: {
176-
text: 'Live Memory Usage',
177-
},
178-
tooltip: {
179-
shared: true,
180-
crosshairs: true,
181-
formatter: function () {
182-
var s = '<b>Memory Usage</b>';
183-
184-
$.each(this.points, function () {
185-
s += '<br/>' + this.series.name + ': ' +
186-
this.y + 'MB';
187-
});
188-
189-
return s;
190-
},
191-
},
192-
xAxis: {
193-
visible: false,
194-
},
195-
yAxis: {
196-
title: {
197-
text: 'Memory Usage (MB)',
198-
},
199-
plotLines: [{
200-
value: 0,
201-
width: 1,
202-
}],
203-
},
204-
plotOptions: {
205-
area: {
206-
fillOpacity: 0.10,
207-
marker: {
208-
enabled: false,
209-
},
210-
},
211-
},
212-
legend: {
213-
enabled: false
214-
},
215-
series: [{
216-
name: 'Total Memory',
217-
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
159+
var memoryGraphSettings = {
160+
data: [{
161+
'date': new Date(),
162+
'memory': -1
163+
}],
164+
full_width: true,
165+
full_height: true,
166+
right: 40,
167+
target: document.getElementById('chart_memory'),
168+
x_accessor: 'date',
169+
y_accessor: 'memory',
170+
y_rug: true,
171+
area: false,
172+
};
173+
174+
var cpuGraphData = [
175+
[{
176+
'date': new Date(),
177+
'cpu': -1
218178
}]
219-
});
220-
221-
$('#chart_cpu').highcharts({
222-
chart: {
223-
type: 'area',
224-
animation: Highcharts.svg,
225-
marginRight: 10,
226-
renderTo: 'container',
227-
width: $('#col11_setter').width()
228-
},
179+
];
180+
var cpuGraphSettings = {
181+
data: cpuGraphData,
182+
legend: ['Total', 'C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7'],
229183
colors: [
184+
'#113F8C',
230185
'#00A1CB',
231186
'#01A4A4',
232187
'#61AE24',
@@ -237,73 +192,42 @@
237192
'#616161',
238193
'#32742C',
239194
],
240-
credits: {
241-
enabled: false,
242-
},
243-
title: {
244-
text: 'Live CPU Usage',
245-
},
246-
tooltip: {
247-
shared: true,
248-
crosshairs: true,
249-
formatter: function () {
250-
var s = '<b>CPU Usage</b>';
251-
var i = 0;
252-
var t = 0;
253-
$.each(this.points, function () {
254-
t = t + this.y;
255-
i++;
256-
s += '<br/>' + this.series.name + ': ' +
257-
this.y + '%';
258-
});
259-
260-
t = parseFloat(t).toFixed(3).toString();
261-
262-
if (i > 1) {
263-
return s + '<br />Combined: ' + t;
264-
} else {
265-
return s;
266-
}
267-
},
268-
},
269-
xAxis: {
270-
visible: false,
271-
},
272-
yAxis: {
273-
title: {
274-
text: 'CPU Usage (%)',
275-
},
276-
plotLines: [{
277-
value: 0,
278-
width: 1,
279-
}],
280-
},
281-
plotOptions: {
282-
area: {
283-
fillOpacity: 0.10,
284-
stacking: 'normal',
285-
lineWidth: 1,
286-
marker: {
287-
enabled: false,
288-
},
289-
},
290-
},
291-
legend: {
292-
enabled: true
293-
},
294-
series: [{
295-
name: 'Core 0',
296-
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
297-
}]
298-
});
195+
right: 40,
196+
full_width: true,
197+
full_height: true,
198+
target: document.getElementById('chart_cpu'),
199+
x_accessor: 'date',
200+
y_accessor: 'cpu',
201+
aggregate_rollover: true,
202+
missing_is_hidden: true,
203+
area: false,
204+
};
205+
206+
MG.data_graphic(memoryGraphSettings);
207+
MG.data_graphic(cpuGraphSettings);
299208
300209
// Socket Recieves New Server Stats
301210
var activeChartArrays = [];
302211
socket.on('proc', function (proc) {
303-
var MemoryChart = $('#chart_memory').highcharts();
304-
MemoryChart.series[0].addPoint(parseInt(proc.data.memory.total / (1024 * 1024)), true, true);
305212
306-
var CPUChart = $('#chart_cpu').highcharts();
213+
var curDate = new Date();
214+
if (typeof memoryGraphSettings.data[0][20] !== 'undefined' || memoryGraphSettings.data[0][0].memory === -1) {
215+
memoryGraphSettings.data[0].shift();
216+
}
217+
218+
if (typeof cpuGraphData[0][20] !== 'undefined' || cpuGraphData[0][0].cpu === -1) {
219+
cpuGraphData[0].shift();
220+
}
221+
222+
memoryGraphSettings.data[0].push({
223+
'date': curDate,
224+
'memory': parseInt(proc.data.memory.total / (1024 * 1024))
225+
});
226+
227+
cpuGraphData[0].push({
228+
'date': curDate,
229+
'cpu': ({{ $server->cpu }} > 0) ? parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()) : proc.data.cpu.total
230+
});
307231
308232
// Remove blank values from listing
309233
var activeCores = [];
@@ -325,22 +249,26 @@
325249
}
326250
}
327251
328-
console.log(activeChartArrays);
329-
console.log(modifedActiveCores);
330-
331252
for (i = 0, length = activeChartArrays.length; i < length; i++) {
332-
if (typeof CPUChart.series[i] === 'undefined') {
333-
CPUChart.addSeries({
334-
name: 'Core ' + i,
335-
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
336-
});
337-
}
338-
if({{ $server->cpu }} > 0) {
339-
CPUChart.series[i].addPoint(parseFloat((((modifedActiveCores[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()), true, true);
253+
if (typeof cpuGraphData[(i + 1)] === 'undefined') {
254+
cpuGraphData[(i + 1)] = [{
255+
'date': curDate,
256+
'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modifedActiveCores[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modifedActiveCores[i] || null
257+
}];
340258
} else {
341-
CPUChart.series[i].addPoint(modifedActiveCores[i] || 0, true, true);
259+
if (typeof cpuGraphData[(i + 1)][20] !== 'undefined') {
260+
cpuGraphData[(i + 1)].shift();
261+
}
262+
cpuGraphData[(i + 1)].push({
263+
'date': curDate,
264+
'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modifedActiveCores[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modifedActiveCores[i] || null
265+
});
342266
}
343267
}
268+
269+
cpuGraphSettings.data = (showOnlyTotal === true) ? cpuGraphData[0] : cpuGraphData;
270+
MG.data_graphic(memoryGraphSettings);
271+
MG.data_graphic(cpuGraphSettings);
344272
});
345273
346274
// Socket Recieves New Query

0 commit comments

Comments
 (0)