Change graphing library for node view
Server view coming soon
This commit is contained in:
Dane Everitt
parent
e98e7d5e7f
commit
aa54e657e1
5 changed files with 453 additions and 187 deletions
|
|
@ -36,12 +36,16 @@ Bootstrap - [license](https://github.com/twbs/bootstrap/blob/master/LICENSE) - [
|
|||
|
||||
BootStrap Notify - [license](https://github.com/mouse0270/bootstrap-notify/blob/master/LICENSE) - [homepage](http://bootstrap-notify.remabledesigns.com)
|
||||
|
||||
D3.js - [license](https://github.com/mbostock/d3/blob/master/LICENSE) - [homepage](https://d3js.org/)
|
||||
|
||||
FontAwesome - [license](http://fontawesome.io/license/) - [homepage](http://fontawesome.io)
|
||||
|
||||
FuelUX - [license](https://github.com/ExactTarget/fuelux/blob/master/LICENSE) - [homepage](http://getfuelux.com)
|
||||
|
||||
jQuery - [license](https://github.com/jquery/jquery/blob/master/LICENSE.txt) - [homepage](http://jquery.com)
|
||||
|
||||
MetricsGraphics.js - [license](https://github.com/mozilla/metrics-graphics/blob/master/LICENSE) - [homepage](http://metricsgraphicsjs.org/)
|
||||
|
||||
Socket.io - [license](https://github.com/socketio/socket.io/blob/master/LICENSE) - [homepage](http://socket.io)
|
||||
|
||||
SweetAlert - [license](https://github.com/t4t5/sweetalert/blob/master/LICENSE) - [homepage](http://t4t5.github.io/sweetalert/)
|
||||
|
|
|
|||
368
public/css/metricsgraphics.css
Executable file
368
public/css/metricsgraphics.css
Executable file
|
|
@ -0,0 +1,368 @@
|
|||
.mg-active-datapoint {
|
||||
fill: black;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mg-area1-color {
|
||||
fill: #0000ff;
|
||||
}
|
||||
|
||||
.mg-area2-color {
|
||||
fill: #05b378;
|
||||
}
|
||||
|
||||
.mg-area3-color {
|
||||
fill: #db4437;
|
||||
}
|
||||
|
||||
.mg-area4-color {
|
||||
fill: #f8b128;
|
||||
}
|
||||
|
||||
.mg-area5-color {
|
||||
fill: #5c5c5c;
|
||||
}
|
||||
|
||||
.mg-barplot rect.mg-bar {
|
||||
shape-rendering: auto;
|
||||
fill: #b6b6fc;
|
||||
}
|
||||
|
||||
.mg-barplot rect.mg-bar.active {
|
||||
fill: #9e9efc;
|
||||
}
|
||||
|
||||
.mg-barplot .mg-bar-prediction {
|
||||
fill: #5b5b5b;
|
||||
}
|
||||
|
||||
.mg-barplot .mg-bar-baseline {
|
||||
stroke: #5b5b5b;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.mg-baselines line {
|
||||
opacity: 1;
|
||||
shape-rendering: auto;
|
||||
stroke: #b3b2b2;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.mg-baselines text {
|
||||
fill: black;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.6;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.mg-baselines-small text {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.mg-header {
|
||||
cursor: default;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.mg-header .mg-chart-description {
|
||||
fill: #ccc;
|
||||
font-family: FontAwesome;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.mg-points circle {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.mg-popover {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.mg-popover-content {
|
||||
cursor: auto;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.mg-data-table {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.mg-data-table thead tr th {
|
||||
border-bottom: 1px solid darkgray;
|
||||
cursor: default;
|
||||
font-size: 1.1rem;
|
||||
font-weight: normal;
|
||||
padding: 5px 5px 8px 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mg-data-table thead tr th .fa {
|
||||
color: #ccc;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.mg-data-table thead tr th .popover {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mg-data-table .secondary-title {
|
||||
color: darkgray;
|
||||
}
|
||||
|
||||
.mg-data-table tbody tr td {
|
||||
margin: 2px;
|
||||
padding: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mg-data-table tbody tr td.table-text {
|
||||
opacity: 0.8;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.mg-y-axis line.mg-extended-y-ticks {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.mg-x-axis line.mg-extended-x-ticks {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.mg-histogram .axis path,
|
||||
.mg-histogram .axis line {
|
||||
fill: none;
|
||||
opacity: 0.7;
|
||||
shape-rendering: auto;
|
||||
stroke: #ccc;
|
||||
}
|
||||
|
||||
.mg-histogram .mg-bar rect {
|
||||
fill: #b6b6fc;
|
||||
shape-rendering: auto;
|
||||
}
|
||||
|
||||
.mg-histogram .mg-bar rect.active {
|
||||
fill: #9e9efc;
|
||||
}
|
||||
|
||||
.mg-least-squares-line {
|
||||
stroke: red;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.mg-lowess-line {
|
||||
fill: none;
|
||||
stroke: red;
|
||||
}
|
||||
|
||||
.mg-line1-color {
|
||||
stroke: #4040e8;
|
||||
}
|
||||
|
||||
.mg-hover-line1-color {
|
||||
fill: #4040e8;
|
||||
}
|
||||
|
||||
.mg-line2-color {
|
||||
stroke: #05b378;
|
||||
}
|
||||
|
||||
.mg-hover-line2-color {
|
||||
fill: #05b378;
|
||||
}
|
||||
|
||||
.mg-line3-color {
|
||||
stroke: #db4437;
|
||||
}
|
||||
|
||||
.mg-hover-line3-color {
|
||||
fill: #db4437;
|
||||
}
|
||||
|
||||
.mg-line4-color {
|
||||
stroke: #f8b128;
|
||||
}
|
||||
|
||||
.mg-hover-line4-color {
|
||||
fill: #f8b128;
|
||||
}
|
||||
|
||||
.mg-line5-color {
|
||||
stroke: #5c5c5c;
|
||||
}
|
||||
|
||||
.mg-hover-line5-color {
|
||||
fill: #5c5c5c;
|
||||
}
|
||||
|
||||
.mg-line-legend text {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.mg-line1-legend-color {
|
||||
color: #4040e8;
|
||||
fill: #4040e8;
|
||||
}
|
||||
|
||||
.mg-line2-legend-color {
|
||||
color: #05b378;
|
||||
fill: #05b378;
|
||||
}
|
||||
|
||||
.mg-line3-legend-color {
|
||||
color: #db4437;
|
||||
fill: #db4437;
|
||||
}
|
||||
|
||||
.mg-line4-legend-color {
|
||||
color: #f8b128;
|
||||
fill: #f8b128;
|
||||
}
|
||||
|
||||
.mg-line5-legend-color {
|
||||
color: #5c5c5c;
|
||||
fill: #5c5c5c;
|
||||
}
|
||||
|
||||
.mg-main-area-solid svg .mg-main-area {
|
||||
fill: #ccccff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mg-markers line {
|
||||
opacity: 1;
|
||||
shape-rendering: auto;
|
||||
stroke: #b3b2b2;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.mg-markers text {
|
||||
fill: black;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.mg-missing-text {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.mg-missing-background {
|
||||
stroke: blue;
|
||||
fill: none;
|
||||
stroke-dasharray: 10,5;
|
||||
stroke-opacity: 0.05;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.mg-missing .mg-main-line {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.mg-missing .mg-main-area {
|
||||
opacity: 0.03;
|
||||
}
|
||||
|
||||
path.mg-main-area {
|
||||
opacity: 0.2;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
path.mg-confidence-band {
|
||||
fill: #ccc;
|
||||
opacity: 0.4;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
path.mg-main-line {
|
||||
fill: none;
|
||||
opacity: 0.8;
|
||||
stroke-width: 1.1px;
|
||||
}
|
||||
|
||||
.mg-points circle {
|
||||
fill-opacity: 0.4;
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
|
||||
circle.mg-points-mono {
|
||||
fill: #0000ff;
|
||||
stroke: #0000ff;
|
||||
}
|
||||
|
||||
/* a selected point in a scatterplot */
|
||||
.mg-points circle.selected {
|
||||
fill-opacity: 1;
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
|
||||
.mg-voronoi path {
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
stroke: none;
|
||||
stroke-opacity: 0.1;
|
||||
}
|
||||
|
||||
.mg-x-rug-mono,
|
||||
.mg-y-rug-mono {
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
.mg-x-axis line,
|
||||
.mg-y-axis line {
|
||||
opacity: 1;
|
||||
shape-rendering: auto;
|
||||
stroke: #b3b2b2;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.mg-x-axis text,
|
||||
.mg-y-axis text,
|
||||
.mg-histogram .axis text {
|
||||
fill: black;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.mg-x-axis .label,
|
||||
.mg-y-axis .label,
|
||||
.mg-axis .label {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mg-x-axis-small text,
|
||||
.mg-y-axis-small text,
|
||||
.mg-active-datapoint-small {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.mg-x-axis-small .label,
|
||||
.mg-y-axis-small .label {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.mg-european-hours {
|
||||
}
|
||||
|
||||
.mg-year-marker text {
|
||||
fill: black;
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.mg-year-marker line {
|
||||
opacity: 1;
|
||||
shape-rendering: auto;
|
||||
stroke: #b3b2b2;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.mg-year-marker-small text {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
5
public/js/d3.min.js
vendored
Normal file
5
public/js/d3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
public/js/metricsgraphics.min.js
vendored
Executable file
3
public/js/metricsgraphics.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
|
|
@ -25,7 +25,9 @@
|
|||
|
||||
@section('scripts')
|
||||
@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') !!}
|
||||
{!! Theme::js('js/socket.io.min.js') !!}
|
||||
{!! Theme::js('js/bootstrap-notify.min.js') !!}
|
||||
<script>
|
||||
|
|
@ -518,189 +520,51 @@ $(document).ready(function () {
|
|||
// -----------------+
|
||||
// Charting Methods |
|
||||
// -----------------+
|
||||
$(window).resize(function() {
|
||||
$('#chart_memory').highcharts().setSize($('#col11_setter').width(), 250);
|
||||
$('#chart_cpu').highcharts().setSize($('#col11_setter').width(), 250);
|
||||
$('#chart_players').highcharts().setSize($('#col11_setter').width(), 250);
|
||||
});
|
||||
$('#chart_memory').highcharts({
|
||||
chart: {
|
||||
type: 'area',
|
||||
animation: Highcharts.svg,
|
||||
marginRight: 10,
|
||||
renderTo: 'container',
|
||||
width: $('#col11_setter').width()
|
||||
},
|
||||
colors: [
|
||||
'#113F8C'
|
||||
],
|
||||
credits: {
|
||||
enabled: false,
|
||||
},
|
||||
title: {
|
||||
text: 'Memory Usage of All Servers',
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
crosshairs: true,
|
||||
formatter: function () {
|
||||
var s = '<b>Memory Usage</b>';
|
||||
|
||||
$.each(this.points, function () {
|
||||
s += '<br/>' + this.series.name + ': ' +
|
||||
this.y + 'MB';
|
||||
});
|
||||
|
||||
return s;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
visible: false,
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Memory Usage (MB)',
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
var memoryGraphSettings = {
|
||||
title: 'Memory Usage',
|
||||
data: [{
|
||||
'date': new Date(),
|
||||
'memory': -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]
|
||||
}]
|
||||
});
|
||||
full_width: true,
|
||||
full_height: true,
|
||||
target: document.getElementById('chart_memory'),
|
||||
x_accessor: 'date',
|
||||
y_accessor: 'memory',
|
||||
area: false,
|
||||
};
|
||||
|
||||
$('#chart_cpu').highcharts({
|
||||
chart: {
|
||||
type: 'area',
|
||||
animation: Highcharts.svg,
|
||||
marginRight: 10,
|
||||
renderTo: 'container',
|
||||
width: $('#col11_setter').width()
|
||||
},
|
||||
colors: [
|
||||
'#00A1CB',
|
||||
],
|
||||
credits: {
|
||||
enabled: false,
|
||||
},
|
||||
title: {
|
||||
text: 'CPU Usage of all Servers',
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
crosshairs: true,
|
||||
formatter: function () {
|
||||
var s = '<b>CPU Usage</b>';
|
||||
|
||||
$.each(this.points, function () {
|
||||
s += '<br/>' + this.series.name + ': ' +
|
||||
this.y + '%';
|
||||
});
|
||||
|
||||
return s;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
visible: false,
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'CPU Usage (%)',
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
var cpuGraphSettings = {
|
||||
title: 'CPU Usage',
|
||||
data: [{
|
||||
'date': new Date(),
|
||||
'cpu': -1
|
||||
}],
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
fillOpacity: 0.10,
|
||||
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]
|
||||
}]
|
||||
});
|
||||
full_width: true,
|
||||
full_height: true,
|
||||
target: document.getElementById('chart_cpu'),
|
||||
x_accessor: 'date',
|
||||
y_accessor: 'cpu',
|
||||
area: false,
|
||||
};
|
||||
|
||||
$('#chart_players').highcharts({
|
||||
chart: {
|
||||
type: 'area',
|
||||
animation: Highcharts.svg,
|
||||
marginRight: 10,
|
||||
renderTo: 'container',
|
||||
width: $('#col11_setter').width()
|
||||
},
|
||||
colors: [
|
||||
'#01A4A4',
|
||||
],
|
||||
credits: {
|
||||
enabled: false,
|
||||
},
|
||||
title: {
|
||||
text: 'Total Players on All Servers',
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
crosshairs: true,
|
||||
formatter: function () {
|
||||
var s = '<b>Total Players</b>';
|
||||
|
||||
$.each(this.points, function () {
|
||||
s += '<br/>' + this.series.name + ': ' + this.y;
|
||||
});
|
||||
|
||||
return s;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
visible: false,
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Total Players',
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
var playersGraphSettings = {
|
||||
title: 'Players Online',
|
||||
data: [{
|
||||
'date': new Date(),
|
||||
'players': -1
|
||||
}],
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
fillOpacity: 0.10,
|
||||
marker: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [{
|
||||
name: 'Total Players',
|
||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||
}]
|
||||
});
|
||||
full_width: true,
|
||||
full_height: true,
|
||||
target: document.getElementById('chart_players'),
|
||||
x_accessor: 'date',
|
||||
y_accessor: 'players',
|
||||
area: false,
|
||||
};
|
||||
|
||||
MG.data_graphic(memoryGraphSettings);
|
||||
MG.data_graphic(cpuGraphSettings);
|
||||
MG.data_graphic(playersGraphSettings);
|
||||
|
||||
// Main Socket Object
|
||||
var socket = io('{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/stats/', {
|
||||
|
|
@ -732,13 +596,35 @@ $(document).ready(function () {
|
|||
});
|
||||
|
||||
socket.on('live-stats', function (data) {
|
||||
var CPUChart = $('#chart_cpu').highcharts();
|
||||
var MemoryChart = $('#chart_memory').highcharts();
|
||||
var PlayerChart = $('#chart_players').highcharts();
|
||||
|
||||
CPUChart.series[0].addPoint(data.stats.cpu, true, true);
|
||||
MemoryChart.series[0].addPoint(parseInt(data.stats.memory / (1024 * 1024)), true, true);
|
||||
PlayerChart.series[0].addPoint(data.stats.players, true, true);
|
||||
if (typeof memoryGraphSettings.data[0][100] !== 'undefined' || memoryGraphSettings.data[0][0].memory === -1) {
|
||||
memoryGraphSettings.data[0].shift();
|
||||
}
|
||||
if (typeof cpuGraphSettings.data[0][100] !== 'undefined' || cpuGraphSettings.data[0][0].cpu === -1) {
|
||||
cpuGraphSettings.data[0].shift();
|
||||
}
|
||||
if (typeof playersGraphSettings.data[0][100] !== 'undefined' || playersGraphSettings.data[0][0].players === -1) {
|
||||
playersGraphSettings.data[0].shift();
|
||||
}
|
||||
|
||||
memoryGraphSettings.data[0].push({
|
||||
'date': new Date(),
|
||||
'memory': parseInt(data.stats.memory / (1024 * 1024))
|
||||
});
|
||||
|
||||
cpuGraphSettings.data[0].push({
|
||||
'date': new Date(),
|
||||
'cpu': data.stats.cpu
|
||||
});
|
||||
|
||||
playersGraphSettings.data[0].push({
|
||||
'date': new Date(),
|
||||
'players': data.stats.players
|
||||
});
|
||||
|
||||
MG.data_graphic(memoryGraphSettings);
|
||||
MG.data_graphic(cpuGraphSettings);
|
||||
MG.data_graphic(playersGraphSettings);
|
||||
|
||||
$.each(data.servers, function (uuid, info) {
|
||||
var element = $('tr[data-server="' + uuid + '"]');
|
||||
|
|
|
|||
Loading…
Reference in a new issue